fix

Dockerfile

@@ -23,5 +23,5 @@ RUN npm install
 # Copy the current directory contents into the container at $HOME/app setting the owner to the user
 COPY --chown=user . $HOME/app
 
-EXPOSE 7860
+EXPOSE 3000
 CMD [ "npm", "run", "start" ]

README.md

@@ -5,7 +5,7 @@ colorFrom: blue
 colorTo: yellow
 sdk: docker
 pinned: false
-app_port: 7860
+app_port: 3000
 ---
 
 Generate Hugging Face Spaces using deepseek-ai/DeepSeek-V3-0324
@@ -18,7 +18,7 @@ See this project as "Hugging Face Space templates on steroids".
 ## Local prompt examples
 
 ```
-http://localhost:7860/?prompt=A%20simple%20page%20to%20compute%20the%20BMI%20(use%20SI%20units)
+http://localhost:3000/?prompt=A%20simple%20page%20to%20compute%20the%20BMI%20(use%20SI%20units)
 ```
 
 # Installation
@@ -40,5 +40,5 @@ This script is a shortcut executing the following commands:
 
 ```bash
 docker build -t space-factory .
-docker run -it -p 7860:7860 space-factory
+docker run -it -p 3000:3000 space-factory
 ```

docs/alpinejs/Async.md

@@ -0,0 +1,37 @@
+Async
+=====
+
+Alpine is built to support asynchronous functions in most places it supports standard ones.
+
+For example, let's say you have a simple function called `getLabel()` that you use as the input to an `x-text` directive:
+
+    function getLabel() {    return 'Hello World!'}
+    function getLabel() {
+        return 'Hello World!'
+    }
+
+    <span x-text="getLabel()"></span>
+    <span x-text="getLabel()"></span>
+
+Because `getLabel` is synchronous, everything works as expected.
+
+Now let's pretend that `getLabel` makes a network request to retrieve the label and can't return one instantaneously (asynchronous). By making `getLabel` an async function, you can call it from Alpine using JavaScript's `await` syntax.
+
+    async function getLabel() {    let response = await fetch('/api/label')     return await response.text()}
+    async function getLabel() {
+        let response = await fetch('/api/label')
+    
+        return await response.text()
+    }
+
+    <span x-text="await getLabel()"></span>
+    <span x-text="await getLabel()"></span>
+
+Additionally, if you prefer calling methods in Alpine without the trailing parenthesis, you can leave them out and Alpine will detect that the provided function is async and handle it accordingly. For example:
+
+    <span x-text="getLabel"></span>
+    <span x-text="getLabel"></span>
+
+[← Extending](/advanced/extending)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/Lifecycle.md

@@ -0,0 +1,88 @@
+Lifecycle
+=========
+
+Alpine has a handful of different techniques for hooking into different parts of its lifecycle. Let's go through the most useful ones to familiarize yourself with:
+
+[Element initialization](#element-initialization)
+-------------------------------------------------
+
+Another extremely useful lifecycle hook in Alpine is the `x-init` directive.
+
+`x-init` can be added to any element on a page and will execute any JavaScript you call inside it when Alpine begins initializing that element.
+
+    <button x-init="console.log('Im initing')">
+    <button x-init="console.log('Im initing')">
+
+In addition to the directive, Alpine will automatically call any `init()` methods stored on a data object. For example:
+
+    Alpine.data('dropdown', () => ({    init() {        // I get called before the element using this data initializes.    }}))
+    Alpine.data('dropdown', () => ({
+        init() {
+            // I get called before the element using this data initializes.
+        }
+    }))
+
+[After a state change](#after-a-state-change)
+---------------------------------------------
+
+Alpine allows you to execute code when a piece of data (state) changes. It offers two different APIs for such a task: `$watch` and `x-effect`.
+
+### [`$watch`](#watch)
+
+    <div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
+    <div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
+
+As you can see above, `$watch` allows you to hook into data changes using a dot-notation key. When that piece of data changes, Alpine will call the passed callback and pass it the new value. along with the old value before the change.
+
+[→ Read more about $watch](/magics/watch)
+
+### [`x-effect`](#x-effect)
+
+`x-effect` uses the same mechanism under the hood as `$watch` but has very different usage.
+
+Instead of specifying which data key you wish to watch, `x-effect` will call the provided code and intelligently look for any Alpine data used within it. Now when one of those pieces of data changes, the `x-effect` expression will be re-run.
+
+Here's the same bit of code from the `$watch` example rewritten using `x-effect`:
+
+    <div x-data="{ open: false }" x-effect="console.log(open)">
+    <div x-data="{ open: false }" x-effect="console.log(open)">
+
+Now, this expression will be called right away, and re-called every time `open` is updated.
+
+The two main behavioral differences with this approach are:
+
+1.  The provided code will be run right away AND when data changes (`$watch` is "lazy" -- won't run until the first data change)
+2.  No knowledge of the previous value. (The callback provided to `$watch` receives both the new value AND the old one)
+
+[→ Read more about x-effect](/directives/effect)
+
+[Alpine initialization](#alpine-initialization)
+-----------------------------------------------
+
+### [`alpine:init`](#alpine-initializing)
+
+Ensuring a bit of code executes after Alpine is loaded, but BEFORE it initializes itself on the page is a necessary task.
+
+This hook allows you to register custom data, directives, magics, etc. before Alpine does its thing on a page.
+
+You can hook into this point in the lifecycle by listening for an event that Alpine dispatches called: `alpine:init`
+
+    document.addEventListener('alpine:init', () => {    Alpine.data(...)})
+    document.addEventListener('alpine:init', () => {
+        Alpine.data(...)
+    })
+
+### [`alpine:initialized`](#alpine-initialized)
+
+Alpine also offers a hook that you can use to execute code AFTER it's done initializing called `alpine:initialized`:
+
+    document.addEventListener('alpine:initialized', () => {    //})
+    document.addEventListener('alpine:initialized', () => {
+        //
+    })
+
+[← Events](/essentials/events)
+
+[x-data →](/directives/data)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/_Events.md

@@ -0,0 +1,94 @@
+Events
+======
+
+Alpine makes it simple to listen for browser events and react to them.
+
+[Listening for simple events](#listening-for-simple-events)
+-----------------------------------------------------------
+
+By using `x-on`, you can listen for browser events that are dispatched on or within an element.
+
+Here's a basic example of listening for a click on a button:
+
+    <button x-on:click="console.log('clicked')">...</button>
+    <button x-on:click="console.log('clicked')">...</button>
+
+As an alternative, you can use the event shorthand syntax if you prefer: `@`. Here's the same example as before, but using the shorthand syntax (which we'll be using from now on):
+
+    <button @click="...">...</button>
+    <button @click="...">...</button>
+
+In addition to `click`, you can listen for any browser event by name. For example: `@mouseenter`, `@keyup`, etc... are all valid syntax.
+
+[Listening for specific keys](#listening-for-specific-keys)
+-----------------------------------------------------------
+
+Let's say you wanted to listen for the `enter` key to be pressed inside an `<input>` element. Alpine makes this easy by adding the `.enter` like so:
+
+    <input @keyup.enter="...">
+    <input @keyup.enter="...">
+
+You can even combine key modifiers to listen for key combinations like pressing `enter` while holding `shift`:
+
+    <input @keyup.shift.enter="...">
+    <input @keyup.shift.enter="...">
+
+[Preventing default](#preventing-default)
+-----------------------------------------
+
+When reacting to browser events, it is often necessary to "prevent default" (prevent the default behavior of the browser event).
+
+For example, if you want to listen for a form submission but prevent the browser from submitting a form request, you can use `.prevent`:
+
+    <form @submit.prevent="...">...</form>
+    <form @submit.prevent="...">...</form>
+
+You can also apply `.stop` to achieve the equivalent of `event.stopPropagation()`.
+
+[Accessing the event object](#accessing-the-event-object)
+---------------------------------------------------------
+
+Sometimes you may want to access the native browser event object inside your own code. To make this easy, Alpine automatically injects an `$event` magic variable:
+
+    <button @click="$event.target.remove()">Remove Me</button>
+    <button @click="$event.target.remove()">Remove Me</button>
+
+[Dispatching custom events](#dispatching-custom-events)
+-------------------------------------------------------
+
+In addition to listening for browser events, you can dispatch them as well. This is extremely useful for communicating with other Alpine components or triggering events in tools outside of Alpine itself.
+
+Alpine exposes a magic helper called `$dispatch` for this:
+
+    <div @foo="console.log('foo was dispatched')">    <button @click="$dispatch('foo')"></button></div>
+    <div @foo="console.log('foo was dispatched')">
+        <button @click="$dispatch('foo')"></button>
+    </div>
+
+As you can see, when the button is clicked, Alpine will dispatch a browser event called "foo", and our `@foo` listener on the `<div>` will pick it up and react to it.
+
+[Listening for events on window](#listening-for-events-on-window)
+-----------------------------------------------------------------
+
+Because of the nature of events in the browser, it is sometimes useful to listen to events on the top-level window object.
+
+This allows you to communicate across components completely like the following example:
+
+    <div x-data>    <button @click="$dispatch('foo')"></button></div> <div x-data @foo.window="console.log('foo was dispatched')">...</div>
+    <div x-data>
+        <button @click="$dispatch('foo')"></button>
+    </div>
+    
+    <div x-data @foo.window="console.log('foo was dispatched')">...</div>
+
+In the above example, if we click the button in the first component, Alpine will dispatch the "foo" event. Because of the way events work in the browser, they "bubble" up through parent elements all the way to the top-level "window".
+
+Now, because in our second component we are listening for "foo" on the window (with `.window`), when the button is clicked, this listener will pick it up and log the "foo was dispatched" message.
+
+[→ Read more about x-on](/directives/on)
+
+[← Templating](/essentials/templating)
+
+[Lifecycle →](/essentials/lifecycle)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/_Reactivity.md

@@ -0,0 +1,94 @@
+Reactivity
+==========
+
+Alpine is "reactive" in the sense that when you change a piece of data, everything that depends on that data "reacts" automatically to that change.
+
+Every bit of reactivity that takes place in Alpine, happens because of two very important reactive functions in Alpine's core: `Alpine.reactive()`, and `Alpine.effect()`.
+
+> Alpine uses VueJS's reactivity engine under the hood to provide these functions. [→ Read more about @vue/reactivity](https://github.com/vuejs/vue-next/tree/master/packages/reactivity)
+
+Understanding these two functions will give you super powers as an Alpine developer, but also just as a web developer in general.
+
+[Alpine.reactive()](#alpine-reactive)
+-------------------------------------
+
+Let's first look at `Alpine.reactive()`. This function accepts a JavaScript object as its parameter and returns a "reactive" version of that object. For example:
+
+    let data = { count: 1 } let reactiveData = Alpine.reactive(data)
+    let data = { count: 1 }
+    
+    let reactiveData = Alpine.reactive(data)
+
+Under the hood, when `Alpine.reactive` receives `data`, it wraps it inside a custom JavaScript proxy.
+
+A proxy is a special kind of object in JavaScript that can intercept "get" and "set" calls to a JavaScript object.
+
+[→ Read more about JavaScript proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+
+At face value, `reactiveData` should behave exactly like `data`. For example:
+
+    console.log(data.count) // 1console.log(reactiveData.count) // 1 reactiveData.count = 2 console.log(data.count) // 2console.log(reactiveData.count) // 2
+    console.log(data.count) // 1
+    console.log(reactiveData.count) // 1
+    
+    reactiveData.count = 2
+    
+    console.log(data.count) // 2
+    console.log(reactiveData.count) // 2
+
+What you see here is that because `reactiveData` is a thin wrapper around `data`, any attempts to get or set a property will behave exactly as if you had interacted with `data` directly.
+
+The main difference here is that any time you modify or retrieve (get or set) a value from `reactiveData`, Alpine is aware of it and can execute any other logic that depends on this data.
+
+`Alpine.reactive` is only the first half of the story. `Alpine.effect` is the other half, let's dig in.
+
+[Alpine.effect()](#alpine-effect)
+---------------------------------
+
+`Alpine.effect` accepts a single callback function. As soon as `Alpine.effect` is called, it will run the provided function, but actively look for any interactions with reactive data. If it detects an interaction (a get or set from the aforementioned reactive proxy) it will keep track of it and make sure to re-run the callback if any of reactive data changes in the future. For example:
+
+    let data = Alpine.reactive({ count: 1 }) Alpine.effect(() => {    console.log(data.count)})
+    let data = Alpine.reactive({ count: 1 })
+    
+    Alpine.effect(() => {
+        console.log(data.count)
+    })
+
+When this code is first run, "1" will be logged to the console. Any time `data.count` changes, it's value will be logged to the console again.
+
+This is the mechanism that unlocks all of the reactivity at the core of Alpine.
+
+To connect the dots further, let's look at a simple "counter" component example without using Alpine syntax at all, only using `Alpine.reactive` and `Alpine.effect`:
+
+    <button>Increment</button> Count: <span></span>
+    <button>Increment</button>
+    
+    Count: <span></span>
+
+    let button = document.querySelector('button')let span = document.querySelector('span') let data = Alpine.reactive({ count: 1 }) Alpine.effect(() => {    span.textContent = data.count}) button.addEventListener('click', () => {    data.count = data.count + 1})
+    let button = document.querySelector('button')
+    let span = document.querySelector('span')
+    
+    let data = Alpine.reactive({ count: 1 })
+    
+    Alpine.effect(() => {
+        span.textContent = data.count
+    })
+    
+    button.addEventListener('click', () => {
+        data.count = data.count + 1
+    })
+
+Increment
+
+Count: 1
+
+As you can see, you can make any data reactive, and you can also wrap any functionality in `Alpine.effect`.
+
+This combination unlocks an incredibly powerful programming paradigm for web development. Run wild and free.
+
+[← CSP](/advanced/csp)
+
+[Extending →](/advanced/extending)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/_Start Here.md

@@ -0,0 +1,268 @@
+Start Here
+==========
+
+Create a blank HTML file somewhere on your computer with a name like: `i-love-alpine.html`
+
+Using a text editor, fill the file with these contents:
+
+    <html><head>    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script></head><body>    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1></body></html>
+    <html>
+    <head>
+        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    </head>
+    <body>
+        <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
+    </body>
+    </html>
+
+Open your file in a web browser, if you see `I ❤️ Alpine`, you're ready to rumble!
+
+Now that you're all set up to play around, let's look at three practical examples as a foundation for teaching you the basics of Alpine. By the end of this exercise, you should be more than equipped to start building stuff on your own. Let's goooooo.
+
+*   [Building a counter](#building-a-counter)
+*   [Building a dropdown](#building-a-dropdown)
+*   [Building a search Input](#building-a-search-input)
+
+[Building a counter](#building-a-counter)
+-----------------------------------------
+
+Let's start with a simple "counter" component to demonstrate the basics of state and event listening in Alpine, two core features.
+
+Insert the following into the `<body>` tag:
+
+    <div x-data="{ count: 0 }">    <button x-on:click="count++">Increment</button>     <span x-text="count"></span></div>
+    <div x-data="{ count: 0 }">
+        <button x-on:click="count++">Increment</button>
+    
+        <span x-text="count"></span>
+    </div>
+
+Increment 0
+
+Now, you can see with 3 bits of Alpine sprinkled into this HTML, we've created an interactive "counter" component.
+
+Let's walk through what's happening briefly:
+
+### [Declaring data](#declaring-data)
+
+    <div x-data="{ count: 0 }">
+    <div x-data="{ count: 0 }">
+
+Everything in Alpine starts with an `x-data` directive. Inside of `x-data`, in plain JavaScript, you declare an object of data that Alpine will track.
+
+Every property inside this object will be made available to other directives inside this HTML element. In addition, when one of these properties changes, everything that relies on it will change as well.
+
+> `x-data` is required on a parent element for most Alpine directives to work.
+
+[→ Read more about `x-data`](/directives/data)
+
+Let's look at `x-on` and see how it can access and modify the `count` property from above:
+
+### [Listening for events](#listening-for-events)
+
+    <button x-on:click="count++">Increment</button>
+    <button x-on:click="count++">Increment</button>
+
+`x-on` is a directive you can use to listen for any event on an element. We're listening for a `click` event in this case, so ours looks like `x-on:click`.
+
+You can listen for other events as you'd imagine. For example, listening for a `mouseenter` event would look like this: `x-on:mouseenter`.
+
+When a `click` event happens, Alpine will call the associated JavaScript expression, `count++` in our case. As you can see, we have direct access to data declared in the `x-data` expression.
+
+> You will often see `@` instead of `x-on:`. This is a shorter, friendlier syntax that many prefer. From now on, this documentation will likely use `@` instead of `x-on:`.
+
+[→ Read more about `x-on`](/directives/on)
+
+### [Reacting to changes](#reacting-to-changes)
+
+    <span x-text="count"></span>
+    <span x-text="count"></span>
+
+`x-text` is an Alpine directive you can use to set the text content of an element to the result of a JavaScript expression.
+
+In this case, we're telling Alpine to always make sure that the contents of this `span` tag reflect the value of the `count` property.
+
+In case it's not clear, `x-text`, like most directives accepts a plain JavaScript expression as an argument. So for example, you could instead set its contents to: `x-text="count * 2"` and the text content of the `span` will now always be 2 times the value of `count`.
+
+[→ Read more about `x-text`](/directives/text)
+
+[Building a dropdown](#building-a-dropdown)
+-------------------------------------------
+
+Now that we've seen some basic functionality, let's keep going and look at an important directive in Alpine: `x-show`, by building a contrived "dropdown" component.
+
+Insert the following code into the `<body>` tag:
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Toggle</button>     <div x-show="open" @click.outside="open = false">Contents...</div></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Toggle</button>
+    
+        <div x-show="open" @click.outside="open = false">Contents...</div>
+    </div>
+
+Toggle
+
+Contents...
+
+If you load this component, you should see that the "Contents..." are hidden by default. You can toggle showing them on the page by clicking the "Toggle" button.
+
+The `x-data` and `x-on` directives should be familiar to you from the previous example, so we'll skip those explanations.
+
+### [Toggling elements](#toggling-elements)
+
+    <div x-show="open" ...>Contents...</div>
+    <div x-show="open" ...>Contents...</div>
+
+`x-show` is an extremely powerful directive in Alpine that can be used to show and hide a block of HTML on a page based on the result of a JavaScript expression, in our case: `open`.
+
+[→ Read more about `x-show`](/directives/show)
+
+### [Listening for a click outside](#listening-for-a-click-outside)
+
+    <div ... @click.outside="open = false">Contents...</div>
+    <div ... @click.outside="open = false">Contents...</div>
+
+You'll notice something new in this example: `.outside`. Many directives in Alpine accept "modifiers" that are chained onto the end of the directive and are separated by periods.
+
+In this case, `.outside` tells Alpine to instead of listening for a click INSIDE the `<div>`, to listen for the click only if it happens OUTSIDE the `<div>`.
+
+This is a convenience helper built into Alpine because this is a common need and implementing it by hand is annoying and complex.
+
+[→ Read more about `x-on` modifiers](/directives/on#modifiers)
+
+[Building a search input](#building-a-search-input)
+---------------------------------------------------
+
+Let's now build a more complex component and introduce a handful of other directives and patterns.
+
+Insert the following code into the `<body>` tag:
+
+    <div    x-data="{        search: '',         items: ['foo', 'bar', 'baz'],         get filteredItems() {            return this.items.filter(                i => i.startsWith(this.search)            )        }    }">    <input x-model="search" placeholder="Search...">     <ul>        <template x-for="item in filteredItems" :key="item">            <li x-text="item"></li>        </template>    </ul></div>
+    <div
+        x-data="{
+            search: '',
+    
+            items: ['foo', 'bar', 'baz'],
+    
+            get filteredItems() {
+                return this.items.filter(
+                    i => i.startsWith(this.search)
+                )
+            }
+        }"
+    >
+        <input x-model="search" placeholder="Search...">
+    
+        <ul>
+            <template x-for="item in filteredItems" :key="item">
+                <li x-text="item"></li>
+            </template>
+        </ul>
+    </div>
+
+*   foo
+*   bar
+*   baz
+
+By default, all of the "items" (foo, bar, and baz) will be shown on the page, but you can filter them by typing into the text input. As you type, the list of items will change to reflect what you're searching for.
+
+Now there's quite a bit happening here, so let's go through this snippet piece by piece.
+
+### [Multi line formatting](#multi-line-formatting)
+
+The first thing I'd like to point out is that `x-data` now has a lot more going on in it than before. To make it easier to write and read, we've split it up into multiple lines in our HTML. This is completely optional and we'll talk more in a bit about how to avoid this problem altogether, but for now, we'll keep all of this JavaScript directly in the HTML.
+
+### [Binding to inputs](#binding-to-inputs)
+
+    <input x-model="search" placeholder="Search...">
+    <input x-model="search" placeholder="Search...">
+
+You'll notice a new directive we haven't seen yet: `x-model`.
+
+`x-model` is used to "bind" the value of an input element with a data property: "search" from `x-data="{ search: '', ... }"` in our case.
+
+This means that anytime the value of the input changes, the value of "search" will change to reflect that.
+
+`x-model` is capable of much more than this simple example.
+
+[→ Read more about `x-model`](/directives/model)
+
+### [Computed properties using getters](#computed-properties-using-getters)
+
+The next bit I'd like to draw your attention to is the `items` and `filteredItems` properties from the `x-data` directive.
+
+    {    ...    items: ['foo', 'bar', 'baz'],     get filteredItems() {        return this.items.filter(            i => i.startsWith(this.search)        )    }}
+    {
+        ...
+        items: ['foo', 'bar', 'baz'],
+    
+        get filteredItems() {
+            return this.items.filter(
+                i => i.startsWith(this.search)
+            )
+        }
+    }
+
+The `items` property should be self-explanatory. Here we are setting the value of `items` to a JavaScript array of 3 different items (foo, bar, and baz).
+
+The interesting part of this snippet is the `filteredItems` property.
+
+Denoted by the `get` prefix for this property, `filteredItems` is a "getter" property in this object. This means we can access `filteredItems` as if it was a normal property in our data object, but when we do, JavaScript will evaluate the provided function under the hood and return the result.
+
+It's completely acceptable to forgo the `get` and just make this a method that you can call from the template, but some prefer the nicer syntax of the getter.
+
+[→ Read more about JavaScript getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)
+
+Now let's look inside the `filteredItems` getter and make sure we understand what's going on there:
+
+    return this.items.filter(    i => i.startsWith(this.search))
+    return this.items.filter(
+        i => i.startsWith(this.search)
+    )
+
+This is all plain JavaScript. We are first getting the array of items (foo, bar, and baz) and filtering them using the provided callback: `i => i.startsWith(this.search)`.
+
+By passing in this callback to `filter`, we are telling JavaScript to only return the items that start with the string: `this.search`, which like we saw with `x-model` will always reflect the value of the input.
+
+You may notice that up until now, we haven't had to use `this.` to reference properties. However, because we are working directly inside the `x-data` object, we must reference any properties using `this.[property]` instead of simply `[property]`.
+
+Because Alpine is a "reactive" framework. Any time the value of `this.search` changes, parts of the template that use `filteredItems` will automatically be updated.
+
+### [Looping elements](#looping-elements)
+
+Now that we understand the data part of our component, let's understand what's happening in the template that allows us to loop through `filteredItems` on the page.
+
+    <ul>    <template x-for="item in filteredItems">        <li x-text="item"></li>    </template></ul>
+    <ul>
+        <template x-for="item in filteredItems">
+            <li x-text="item"></li>
+        </template>
+    </ul>
+
+The first thing to notice here is the `x-for` directive. `x-for` expressions take the following form: `[item] in [items]` where \[items\] is any array of data, and \[item\] is the name of the variable that will be assigned to an iteration inside the loop.
+
+Also notice that `x-for` is declared on a `<template>` element and not directly on the `<li>`. This is a requirement of using `x-for`. It allows Alpine to leverage the existing behavior of `<template>` tags in the browser to its advantage.
+
+Now any element inside the `<template>` tag will be repeated for every item inside `filteredItems` and all expressions evaluated inside the loop will have direct access to the iteration variable (`item` in this case).
+
+[→ Read more about `x-for`](/directives/for)
+
+[Recap](#recap)
+---------------
+
+If you've made it this far, you've been exposed to the following directives in Alpine:
+
+*   x-data
+*   x-on
+*   x-text
+*   x-show
+*   x-model
+*   x-for
+
+That's a great start, however, there are many more directives to sink your teeth into. The best way to absorb Alpine is to read through this documentation. No need to comb over every word, but if you at least glance through every page you will be MUCH more effective when using Alpine.
+
+Happy Coding!
+
+[Upgrade From V2 →](/upgrade-guide)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/_State.md

@@ -0,0 +1,123 @@
+State
+=====
+
+State (JavaScript data that Alpine watches for changes) is at the core of everything you do in Alpine. You can provide local data to a chunk of HTML, or make it globally available for use anywhere on a page using `x-data` or `Alpine.store()` respectively.
+
+[Local state](#local-state-x-data)
+----------------------------------
+
+Alpine allows you to declare an HTML block's state in a single `x-data` attribute without ever leaving your markup.
+
+Here's a basic example:
+
+    <div x-data="{ open: false }">    ...</div>
+    <div x-data="{ open: false }">
+        ...
+    </div>
+
+Now any other Alpine syntax on or within this element will be able to access `open`. And like you'd guess, when `open` changes for any reason, everything that depends on it will react automatically.
+
+[→ Read more about `x-data`](/directives/data)
+
+### [Nesting data](#nesting-data)
+
+Data is nestable in Alpine. For example, if you have two elements with Alpine data attached (one inside the other), you can access the parent's data from inside the child element.
+
+    <div x-data="{ open: false }">    <div x-data="{ label: 'Content:' }">        <span x-text="label"></span>        <span x-show="open"></span>    </div></div>
+    <div x-data="{ open: false }">
+        <div x-data="{ label: 'Content:' }">
+            <span x-text="label"></span>
+            <span x-show="open"></span>
+        </div>
+    </div>
+
+This is similar to scoping in JavaScript itself (code within a function can access variables declared outside that function.)
+
+Like you may have guessed, if the child has a data property matching the name of a parent's property, the child property will take precedence.
+
+### [Single-element data](#single-element-data)
+
+Although this may seem obvious to some, it's worth mentioning that Alpine data can be used within the same element. For example:
+
+    <button x-data="{ label: 'Click Here' }" x-text="label"></button>
+    <button x-data="{ label: 'Click Here' }" x-text="label"></button>
+
+### [Data-less Alpine](#data-less-alpine)
+
+Sometimes you may want to use Alpine functionality, but don't need any reactive data. In these cases, you can opt out of passing an expression to `x-data` entirely. For example:
+
+    <button x-data @click="alert('I\'ve been clicked!')">Click Me</button>
+    <button x-data @click="alert('I\'ve been clicked!')">Click Me</button>
+
+### [Re-usable data](#re-usable-data)
+
+When using Alpine, you may find the need to re-use a chunk of data and/or its corresponding template.
+
+If you are using a backend framework like Rails or Laravel, Alpine first recommends that you extract the entire block of HTML into a template partial or include.
+
+If for some reason that isn't ideal for you or you're not in a back-end templating environment, Alpine allows you to globally register and re-use the data portion of a component using `Alpine.data(...)`.
+
+    Alpine.data('dropdown', () => ({    open: false,     toggle() {        this.open = ! this.open    }}))
+    Alpine.data('dropdown', () => ({
+        open: false,
+    
+        toggle() {
+            this.open = ! this.open
+        }
+    }))
+
+Now that you've registered the "dropdown" data, you can use it inside your markup in as many places as you like:
+
+    <div x-data="dropdown">    <button @click="toggle">Expand</button>     <span x-show="open">Content...</span></div> <div x-data="dropdown">    <button @click="toggle">Expand</button>     <span x-show="open">Some Other Content...</span></div>
+    <div x-data="dropdown">
+        <button @click="toggle">Expand</button>
+    
+        <span x-show="open">Content...</span>
+    </div>
+    
+    <div x-data="dropdown">
+        <button @click="toggle">Expand</button>
+    
+        <span x-show="open">Some Other Content...</span>
+    </div>
+
+[→ Read more about using `Alpine.data()`](/globals/alpine-data)
+
+[Global state](#global-state)
+-----------------------------
+
+If you wish to make some data available to every component on the page, you can do so using Alpine's "global store" feature.
+
+You can register a store using `Alpine.store(...)`, and reference one with the magic `$store()` method.
+
+Let's look at a simple example. First we'll register the store globally:
+
+    Alpine.store('tabs', {    current: 'first',     items: ['first', 'second', 'third'],})
+    Alpine.store('tabs', {
+        current: 'first',
+    
+        items: ['first', 'second', 'third'],
+    })
+
+Now we can access or modify its data from anywhere on our page:
+
+    <div x-data>    <template x-for="tab in $store.tabs.items">        ...    </template></div> <div x-data>    <button @click="$store.tabs.current = 'first'">First Tab</button>    <button @click="$store.tabs.current = 'second'">Second Tab</button>    <button @click="$store.tabs.current = 'third'">Third Tab</button></div>
+    <div x-data>
+        <template x-for="tab in $store.tabs.items">
+            ...
+        </template>
+    </div>
+    
+    <div x-data>
+        <button @click="$store.tabs.current = 'first'">First Tab</button>
+        <button @click="$store.tabs.current = 'second'">Second Tab</button>
+        <button @click="$store.tabs.current = 'third'">Third Tab</button>
+    </div>
+
+[→ Read more about `Alpine.store()`](/globals/alpine-store)
+
+[← Installation](/essentials/installation)
+
+[Templating →](/essentials/templating)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/_Templating.md

@@ -0,0 +1,261 @@
+Templating
+==========
+
+Alpine offers a handful of useful directives for manipulating the DOM on a web page.
+
+Let's cover a few of the basic templating directives here, but be sure to look through the available directives in the sidebar for an exhaustive list.
+
+[Text content](#text-content)
+-----------------------------
+
+Alpine makes it easy to control the text content of an element with the `x-text` directive.
+
+    <div x-data="{ title: 'Start Here' }">    <h1 x-text="title"></h1></div>
+    <div x-data="{ title: 'Start Here' }">
+        <h1 x-text="title"></h1>
+    </div>
+
+**Start Here**
+
+Now, Alpine will set the text content of the `<h1>` with the value of `title` ("Start Here"). When `title` changes, so will the contents of `<h1>`.
+
+Like all directives in Alpine, you can use any JavaScript expression you like. For example:
+
+    <span x-text="1 + 2"></span>
+    <span x-text="1 + 2"></span>
+
+3
+
+The `<span>` will now contain the sum of "1" and "2".
+
+[→ Read more about `x-text`](/directives/text)
+
+[Toggling elements](#toggling-elements)
+---------------------------------------
+
+Toggling elements is a common need in web pages and applications. Dropdowns, modals, dialogues, "show-more"s, etc... are all good examples.
+
+Alpine offers the `x-show` and `x-if` directives for toggling elements on a page.
+
+### [`x-show`](#x-show)
+
+Here's a simple toggle component using `x-show`.
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Expand</button>     <div x-show="open">        Content...    </div></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Expand</button>
+    
+        <div x-show="open">
+            Content...
+        </div>
+    </div>
+
+Expand
+
+Content...
+
+Now the entire `<div>` containing the contents will be shown and hidden based on the value of `open`.
+
+Under the hood, Alpine adds the CSS property `display: none;` to the element when it should be hidden.
+
+[→ Read more about `x-show`](/directives/show)
+
+This works well for most cases, but sometimes you may want to completely add and remove the element from the DOM entirely. This is what `x-if` is for.
+
+### [`x-if`](#x-if)
+
+Here is the same toggle from before, but this time using `x-if` instead of `x-show`.
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Expand</button>     <template x-if="open">        <div>            Content...        </div>    </template></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Expand</button>
+    
+        <template x-if="open">
+            <div>
+                Content...
+            </div>
+        </template>
+    </div>
+
+Expand
+
+Notice that `x-if` must be declared on a `<template>` tag. This is so that Alpine can leverage the existing browser behavior of the `<template>` element and use it as the source of the target `<div>` to be added and removed from the page.
+
+When `open` is true, Alpine will append the `<div>` to the `<template>` tag, and remove it when `open` is false.
+
+[→ Read more about `x-if`](/directives/if)
+
+[Toggling with transitions](#toggling-with-transitions)
+-------------------------------------------------------
+
+Alpine makes it simple to smoothly transition between "shown" and "hidden" states using the `x-transition` directive.
+
+> `x-transition` only works with `x-show`, not with `x-if`.
+
+Here is, again, the simple toggle example, but this time with transitions applied:
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Expands</button>     <div x-show="open" x-transition>        Content...    </div></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Expands</button>
+    
+        <div x-show="open" x-transition>
+            Content...
+        </div>
+    </div>
+
+Expands
+
+Content...
+
+Let's zoom in on the portion of the template dealing with transitions:
+
+    <div x-show="open" x-transition>
+    <div x-show="open" x-transition>
+
+`x-transition` by itself will apply sensible default transitions (fade and scale) to the toggle.
+
+There are two ways to customize these transitions:
+
+*   Transition helpers
+*   Transition CSS classes.
+
+Let's take a look at each of these approaches:
+
+### [Transition helpers](#transition-helpers)
+
+Let's say you wanted to make the duration of the transition longer, you can manually specify that using the `.duration` modifier like so:
+
+    <div x-show="open" x-transition.duration.500ms>
+    <div x-show="open" x-transition.duration.500ms>
+
+Expands
+
+Content...
+
+Now the transition will last 500 milliseconds.
+
+If you want to specify different values for in and out transitions, you can use `x-transition:enter` and `x-transition:leave`:
+
+    <div    x-show="open"    x-transition:enter.duration.500ms    x-transition:leave.duration.1000ms>
+    <div
+        x-show="open"
+        x-transition:enter.duration.500ms
+        x-transition:leave.duration.1000ms
+    >
+
+Expands
+
+Content...
+
+Additionally, you can add either `.opacity` or `.scale` to only transition that property. For example:
+
+    <div x-show="open" x-transition.opacity>
+    <div x-show="open" x-transition.opacity>
+
+Expands
+
+Content...
+
+[→ Read more about transition helpers](/directives/transition#the-transition-helper)
+
+### [Transition classes](#transition-classes)
+
+If you need more fine-grained control over the transitions in your application, you can apply specific CSS classes at specific phases of the transition using the following syntax (this example uses [Tailwind CSS](https://tailwindcss.com/)):
+
+    <div    x-show="open"    x-transition:enter="transition ease-out duration-300"    x-transition:enter-start="opacity-0 transform scale-90"    x-transition:enter-end="opacity-100 transform scale-100"    x-transition:leave="transition ease-in duration-300"    x-transition:leave-start="opacity-100 transform scale-100"    x-transition:leave-end="opacity-0 transform scale-90">...</div>
+    <div
+        x-show="open"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-transition:leave="transition ease-in duration-300"
+        x-transition:leave-start="opacity-100 transform scale-100"
+        x-transition:leave-end="opacity-0 transform scale-90"
+    >...</div>
+
+Expands
+
+Content...
+
+[→ Read more about transition classes](/directives/transition#applying-css-classes)
+
+[Binding attributes](#binding-attributes)
+-----------------------------------------
+
+You can add HTML attributes like `class`, `style`, `disabled`, etc... to elements in Alpine using the `x-bind` directive.
+
+Here is an example of a dynamically bound `class` attribute:
+
+    <button    x-data="{ red: false }"    x-bind:class="red ? 'bg-red' : ''"    @click="red = ! red">    Toggle Red</button>
+    <button
+        x-data="{ red: false }"
+        x-bind:class="red ? 'bg-red' : ''"
+        @click="red = ! red"
+    >
+        Toggle Red
+    </button>
+
+Toggle Red
+
+As a shortcut, you can leave out the `x-bind` and use the shorthand `:` syntax directly:
+
+    <button ... :class="red ? 'bg-red' : ''">
+    <button ... :class="red ? 'bg-red' : ''">
+
+Toggling classes on and off based on data inside Alpine is a common need. Here's an example of toggling a class using Alpine's `class` binding object syntax: (Note: this syntax is only available for `class` attributes)
+
+    <div x-data="{ open: true }">    <span :class="{ 'hidden': ! open }">...</span></div>
+    <div x-data="{ open: true }">
+        <span :class="{ 'hidden': ! open }">...</span>
+    </div>
+
+Now the `hidden` class will be added to the element if `open` is false, and removed if `open` is true.
+
+[Looping elements](#looping-elements)
+-------------------------------------
+
+Alpine allows for iterating parts of your template based on JavaScript data using the `x-for` directive. Here is a simple example:
+
+    <div x-data="{ statuses: ['open', 'closed', 'archived'] }">    <template x-for="status in statuses">        <div x-text="status"></div>    </template></div>
+    <div x-data="{ statuses: ['open', 'closed', 'archived'] }">
+        <template x-for="status in statuses">
+            <div x-text="status"></div>
+        </template>
+    </div>
+
+open
+
+closed
+
+archived
+
+Similar to `x-if`, `x-for` must be applied to a `<template>` tag. Internally, Alpine will append the contents of `<template>` tag for every iteration in the loop.
+
+As you can see the new `status` variable is available in the scope of the iterated templates.
+
+[→ Read more about `x-for`](/directives/for)
+
+[Inner HTML](#inner-html)
+-------------------------
+
+Alpine makes it easy to control the HTML content of an element with the `x-html` directive.
+
+    <div x-data="{ title: '<h1>Start Here</h1>' }">    <div x-html="title"></div></div>
+    <div x-data="{ title: '<h1>Start Here</h1>' }">
+        <div x-html="title"></div>
+    </div>
+
+Start Here
+==========
+
+Now, Alpine will set the text content of the `<div>` with the element `<h1>Start Here</h1>`. When `title` changes, so will the contents of `<h1>`.
+
+> ⚠️ Only use on trusted content and never on user-provided content. ⚠️ Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.
+
+[→ Read more about `x-html`](/directives/html)
+
+[← State](/essentials/state)
+
+[Events →](/essentials/events)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-bind.md

@@ -0,0 +1,185 @@
+x-bind
+======
+
+`x-bind` allows you to set HTML attributes on elements based on the result of JavaScript expressions.
+
+For example, here's a component where we will use `x-bind` to set the placeholder value of an input.
+
+    <div x-data="{ placeholder: 'Type here...' }">    <input type="text" x-bind:placeholder="placeholder"></div>
+    <div x-data="{ placeholder: 'Type here...' }">
+        <input type="text" x-bind:placeholder="placeholder">
+    </div>
+
+[Shorthand syntax](#shorthand-syntax)
+-------------------------------------
+
+If `x-bind:` is too verbose for your liking, you can use the shorthand: `:`. For example, here is the same input element as above, but refactored to use the shorthand syntax.
+
+    <input type="text" :placeholder="placeholder">
+    <input type="text" :placeholder="placeholder">
+
+> Despite not being included in the above snippet, `x-bind` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+[Binding classes](#binding-classes)
+-----------------------------------
+
+`x-bind` is most often useful for setting specific classes on an element based on your Alpine state.
+
+Here's a simple example of a simple dropdown toggle, but instead of using `x-show`, we'll use a "hidden" class to toggle an element.
+
+    <div x-data="{ open: false }">    <button x-on:click="open = ! open">Toggle Dropdown</button>     <div :class="open ? '' : 'hidden'">        Dropdown Contents...    </div></div>
+    <div x-data="{ open: false }">
+        <button x-on:click="open = ! open">Toggle Dropdown</button>
+    
+        <div :class="open ? '' : 'hidden'">
+            Dropdown Contents...
+        </div>
+    </div>
+
+Now, when `open` is `false`, the "hidden" class will be added to the dropdown.
+
+### [Shorthand conditionals](#shorthand-conditionals)
+
+In cases like these, if you prefer a less verbose syntax you can use JavaScript's short-circuit evaluation instead of standard conditionals:
+
+    <div :class="show ? '' : 'hidden'"><!-- Is equivalent to: --><div :class="show || 'hidden'">
+    <div :class="show ? '' : 'hidden'">
+    <!-- Is equivalent to: -->
+    <div :class="show || 'hidden'">
+
+The inverse is also available to you. Suppose instead of `open`, we use a variable with the opposite value: `closed`.
+
+    <div :class="closed ? 'hidden' : ''"><!-- Is equivalent to: --><div :class="closed && 'hidden'">
+    <div :class="closed ? 'hidden' : ''">
+    <!-- Is equivalent to: -->
+    <div :class="closed && 'hidden'">
+
+### [Class object syntax](#class-object-syntax)
+
+Alpine offers an additional syntax for toggling classes if you prefer. By passing a JavaScript object where the classes are the keys and booleans are the values, Alpine will know which classes to apply and which to remove. For example:
+
+    <div :class="{ 'hidden': ! show }">
+    <div :class="{ 'hidden': ! show }">
+
+This technique offers a unique advantage to other methods. When using object-syntax, Alpine will NOT preserve original classes applied to an element's `class` attribute.
+
+For example, if you wanted to apply the "hidden" class to an element before Alpine loads, AND use Alpine to toggle its existence you can only achieve that behavior using object-syntax:
+
+    <div class="hidden" :class="{ 'hidden': ! show }">
+    <div class="hidden" :class="{ 'hidden': ! show }">
+
+In case that confused you, let's dig deeper into how Alpine handles `x-bind:class` differently than other attributes.
+
+### [Special behavior](#special-behavior)
+
+`x-bind:class` behaves differently than other attributes under the hood.
+
+Consider the following case.
+
+    <div class="opacity-50" :class="hide && 'hidden'">
+    <div class="opacity-50" :class="hide && 'hidden'">
+
+If "class" were any other attribute, the `:class` binding would overwrite any existing class attribute, causing `opacity-50` to be overwritten by either `hidden` or `''`.
+
+However, Alpine treats `class` bindings differently. It's smart enough to preserve existing classes on an element.
+
+For example, if `hide` is true, the above example will result in the following DOM element:
+
+    <div class="opacity-50 hidden">
+    <div class="opacity-50 hidden">
+
+If `hide` is false, the DOM element will look like:
+
+    <div class="opacity-50">
+    <div class="opacity-50">
+
+This behavior should be invisible and intuitive to most users, but it is worth mentioning explicitly for the inquiring developer or any special cases that might crop up.
+
+[Binding styles](#binding-styles)
+---------------------------------
+
+Similar to the special syntax for binding classes with JavaScript objects, Alpine also offers an object-based syntax for binding `style` attributes.
+
+Just like the class objects, this syntax is entirely optional. Only use it if it affords you some advantage.
+
+    <div :style="{ color: 'red', display: 'flex' }"> <!-- Will render: --><div style="color: red; display: flex;" ...>
+    <div :style="{ color: 'red', display: 'flex' }">
+    
+    <!-- Will render: -->
+    <div style="color: red; display: flex;" ...>
+
+Conditional inline styling is possible using expressions just like with x-bind:class. Short circuit operators can be used here as well by using a styles object as the second operand.
+
+    <div x-bind:style="true && { color: 'red' }"> <!-- Will render: --><div style="color: red;">
+    <div x-bind:style="true && { color: 'red' }">
+    
+    <!-- Will render: -->
+    <div style="color: red;">
+
+One advantage of this approach is being able to mix it in with existing styles on an element:
+
+    <div style="padding: 1rem;" :style="{ color: 'red', display: 'flex' }"> <!-- Will render: --><div style="padding: 1rem; color: red; display: flex;" ...>
+    <div style="padding: 1rem;" :style="{ color: 'red', display: 'flex' }">
+    
+    <!-- Will render: -->
+    <div style="padding: 1rem; color: red; display: flex;" ...>
+
+And like most expressions in Alpine, you can always use the result of a JavaScript expression as the reference:
+
+    <div x-data="{ styles: { color: 'red', display: 'flex' }}">    <div :style="styles"></div> <!-- Will render: --><div ...>    <div style="color: red; display: flex;" ...></div>
+    <div x-data="{ styles: { color: 'red', display: 'flex' }}">
+        <div :style="styles">
+    </div>
+    
+    <!-- Will render: -->
+    <div ...>
+        <div style="color: red; display: flex;" ...>
+    </div>
+
+[Binding Alpine Directives Directly](#bind-directives)
+------------------------------------------------------
+
+`x-bind` allows you to bind an object of different directives and attributes to an element.
+
+The object keys can be anything you would normally write as an attribute name in Alpine. This includes Alpine directives and modifiers, but also plain HTML attributes. The object values are either plain strings, or in the case of dynamic Alpine directives, callbacks to be evaluated by Alpine.
+
+    <div x-data="dropdown">    <button x-bind="trigger">Open Dropdown</button>     <span x-bind="dialogue">Dropdown Contents</span></div> <script>    document.addEventListener('alpine:init', () => {        Alpine.data('dropdown', () => ({            open: false,             trigger: {                ['x-ref']: 'trigger',                ['@click']() {                    this.open = true                },            },             dialogue: {                ['x-show']() {                    return this.open                },                ['@click.outside']() {                    this.open = false                },            },        }))    })</script>
+    <div x-data="dropdown">
+        <button x-bind="trigger">Open Dropdown</button>
+    
+        <span x-bind="dialogue">Dropdown Contents</span>
+    </div>
+    
+    <script>
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('dropdown', () => ({
+                open: false,
+    
+                trigger: {
+                    ['x-ref']: 'trigger',
+                    ['@click']() {
+                        this.open = true
+                    },
+                },
+    
+                dialogue: {
+                    ['x-show']() {
+                        return this.open
+                    },
+                    ['@click.outside']() {
+                        this.open = false
+                    },
+                },
+            }))
+        })
+    </script>
+
+There are a couple of caveats to this usage of `x-bind`:
+
+> When the directive being "bound" or "applied" is `x-for`, you should return a normal expression string from the callback. For example: `['x-for']() { return 'item in items' }`
+
+[← x-show](/directives/show)
+
+[x-on →](/directives/on)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-data.md

@@ -0,0 +1,162 @@
+x-data
+======
+
+Everything in Alpine starts with the `x-data` directive.
+
+`x-data` defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.
+
+Here's an example of a contrived dropdown component:
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Toggle Content</button>     <div x-show="open">        Content...    </div></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Toggle Content</button>
+    
+        <div x-show="open">
+            Content...
+        </div>
+    </div>
+
+Don't worry about the other directives in this example (`@click` and `x-show`), we'll get to those in a bit. For now, let's focus on `x-data`.
+
+[Scope](#scope)
+---------------
+
+Properties defined in an `x-data` directive are available to all element children. Even ones inside other, nested `x-data` components.
+
+For example:
+
+    <div x-data="{ foo: 'bar' }">    <span x-text="foo"><!-- Will output: "bar" --></span>     <div x-data="{ bar: 'baz' }">        <span x-text="foo"><!-- Will output: "bar" --></span>         <div x-data="{ foo: 'bob' }">            <span x-text="foo"><!-- Will output: "bob" --></span>        </div>    </div></div>
+    <div x-data="{ foo: 'bar' }">
+        <span x-text="foo"><!-- Will output: "bar" --></span>
+    
+        <div x-data="{ bar: 'baz' }">
+            <span x-text="foo"><!-- Will output: "bar" --></span>
+    
+            <div x-data="{ foo: 'bob' }">
+                <span x-text="foo"><!-- Will output: "bob" --></span>
+            </div>
+        </div>
+    </div>
+
+[Methods](#methods)
+-------------------
+
+Because `x-data` is evaluated as a normal JavaScript object, in addition to state, you can store methods and even getters.
+
+For example, let's extract the "Toggle Content" behavior into a method on `x-data`.
+
+    <div x-data="{ open: false, toggle() { this.open = ! this.open } }">    <button @click="toggle()">Toggle Content</button>     <div x-show="open">        Content...    </div></div>
+    <div x-data="{ open: false, toggle() { this.open = ! this.open } }">
+        <button @click="toggle()">Toggle Content</button>
+    
+        <div x-show="open">
+            Content...
+        </div>
+    </div>
+
+Notice the added `toggle() { this.open = ! this.open }` method on `x-data`. This method can now be called from anywhere inside the component.
+
+You'll also notice the usage of `this.` to access state on the object itself. This is because Alpine evaluates this data object like any standard JavaScript object with a `this` context.
+
+If you prefer, you can leave the calling parenthesis off of the `toggle` method completely. For example:
+
+    <!-- Before --><button @click="toggle()">...</button> <!-- After --><button @click="toggle">...</button>
+    <!-- Before -->
+    <button @click="toggle()">...</button>
+    
+    <!-- After -->
+    <button @click="toggle">...</button>
+
+[Getters](#getters)
+-------------------
+
+JavaScript [getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) are handy when the sole purpose of a method is to return data based on other state.
+
+Think of them like "computed properties" (although, they are not cached like Vue's computed properties).
+
+Let's refactor our component to use a getter called `isOpen` instead of accessing `open` directly.
+
+    <div x-data="{    open: false,    get isOpen() { return this.open },    toggle() { this.open = ! this.open },}">    <button @click="toggle()">Toggle Content</button>     <div x-show="isOpen">        Content...    </div></div>
+    <div x-data="{
+        open: false,
+        get isOpen() { return this.open },
+        toggle() { this.open = ! this.open },
+    }">
+        <button @click="toggle()">Toggle Content</button>
+    
+        <div x-show="isOpen">
+            Content...
+        </div>
+    </div>
+
+Notice the "Content" now depends on the `isOpen` getter instead of the `open` property directly.
+
+In this case there is no tangible benefit. But in some cases, getters are helpful for providing a more expressive syntax in your components.
+
+[Data-less components](#data-less-components)
+---------------------------------------------
+
+Occasionally, you want to create an Alpine component, but you don't need any data.
+
+In these cases, you can always pass in an empty object.
+
+    <div x-data="{}">
+    <div x-data="{}">
+
+However, if you wish, you can also eliminate the attribute value entirely if it looks better to you.
+
+    <div x-data>
+    <div x-data>
+
+[Single-element components](#single-element-components)
+-------------------------------------------------------
+
+Sometimes you may only have a single element inside your Alpine component, like the following:
+
+    <div x-data="{ open: true }">    <button @click="open = false" x-show="open">Hide Me</button></div>
+    <div x-data="{ open: true }">
+        <button @click="open = false" x-show="open">Hide Me</button>
+    </div>
+
+In these cases, you can declare `x-data` directly on that single element:
+
+    <button x-data="{ open: true }" @click="open = false" x-show="open">    Hide Me</button>
+    <button x-data="{ open: true }" @click="open = false" x-show="open">
+        Hide Me
+    </button>
+
+[Re-usable Data](#re-usable-data)
+---------------------------------
+
+If you find yourself duplicating the contents of `x-data`, or you find the inline syntax verbose, you can extract the `x-data` object out to a dedicated component using `Alpine.data`.
+
+Here's a quick example:
+
+    <div x-data="dropdown">    <button @click="toggle">Toggle Content</button>     <div x-show="open">        Content...    </div></div> <script>    document.addEventListener('alpine:init', () => {        Alpine.data('dropdown', () => ({            open: false,             toggle() {                this.open = ! this.open            },        }))    })</script>
+    <div x-data="dropdown">
+        <button @click="toggle">Toggle Content</button>
+    
+        <div x-show="open">
+            Content...
+        </div>
+    </div>
+    
+    <script>
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('dropdown', () => ({
+                open: false,
+    
+                toggle() {
+                    this.open = ! this.open
+                },
+            }))
+        })
+    </script>
+
+[→ Read more about `Alpine.data(...)`](/globals/alpine-data)
+
+[← Lifecycle](/essentials/lifecycle)
+
+[x-init →](/directives/init)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-effect.md

@@ -0,0 +1,21 @@
+x-effect
+========
+
+`x-effect` is a useful directive for re-evaluating an expression when one of its dependencies change. You can think of it as a watcher where you don't have to specify what property to watch, it will watch all properties used within it.
+
+If this definition is confusing for you, that's ok. It's better explained through an example:
+
+    <div x-data="{ label: 'Hello' }" x-effect="console.log(label)">    <button @click="label += ' World!'">Change Message</button></div>
+    <div x-data="{ label: 'Hello' }" x-effect="console.log(label)">
+        <button @click="label += ' World!'">Change Message</button>
+    </div>
+
+When this component is loaded, the `x-effect` expression will be run and "Hello" will be logged into the console.
+
+Because Alpine knows about any property references contained within `x-effect`, when the button is clicked and `label` is changed, the effect will be re-triggered and "Hello World!" will be logged to the console.
+
+[← x-transition](/directives/transition)
+
+[x-ignore →](/directives/ignore)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-for.md

@@ -0,0 +1,115 @@
+x-for
+=====
+
+Alpine's `x-for` directive allows you to create DOM elements by iterating through a list. Here's a simple example of using it to create a list of colors based on an array.
+
+    <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">    <template x-for="color in colors">        <li x-text="color"></li>    </template></ul>
+    <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
+        <template x-for="color in colors">
+            <li x-text="color"></li>
+        </template>
+    </ul>
+
+*   Red
+*   Orange
+*   Yellow
+
+You may also pass objects to `x-for`.
+
+    <ul x-data="{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }">    <template x-for="(value, index) in car">        <li>            <span x-text="index"></span>: <span x-text="value"></span>        </li>    </template></ul>
+    <ul x-data="{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }">
+        <template x-for="(value, index) in car">
+            <li>
+                <span x-text="index"></span>: <span x-text="value"></span>
+            </li>
+        </template>
+    </ul>
+
+*   make: Jeep
+*   model: Grand Cherokee
+*   color: Black
+
+There are two rules worth noting about `x-for`:
+
+> `x-for` MUST be declared on a `<template>` element. That `<template>` element MUST contain only one root element
+
+[Keys](#keys)
+-------------
+
+It is important to specify unique keys for each `x-for` iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.
+
+    <ul x-data="{ colors: [    { id: 1, label: 'Red' },    { id: 2, label: 'Orange' },    { id: 3, label: 'Yellow' },]}">    <template x-for="color in colors" :key="color.id">        <li x-text="color.label"></li>    </template></ul>
+    <ul x-data="{ colors: [
+        { id: 1, label: 'Red' },
+        { id: 2, label: 'Orange' },
+        { id: 3, label: 'Yellow' },
+    ]}">
+        <template x-for="color in colors" :key="color.id">
+            <li x-text="color.label"></li>
+        </template>
+    </ul>
+
+Now if the colors are added, removed, re-ordered, or their "id"s change, Alpine will preserve or destroy the iterated `<li>`elements accordingly.
+
+[Accessing indexes](#accessing-indexes)
+---------------------------------------
+
+If you need to access the index of each item in the iteration, you can do so using the `([item], [index]) in [items]` syntax like so:
+
+    <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">    <template x-for="(color, index) in colors">        <li>            <span x-text="index + ': '"></span>            <span x-text="color"></span>        </li>    </template></ul>
+    <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
+        <template x-for="(color, index) in colors">
+            <li>
+                <span x-text="index + ': '"></span>
+                <span x-text="color"></span>
+            </li>
+        </template>
+    </ul>
+
+You can also access the index inside a dynamic `:key` expression.
+
+    <template x-for="(color, index) in colors" :key="index">
+    <template x-for="(color, index) in colors" :key="index">
+
+[Iterating over a range](#iterating-over-a-range)
+-------------------------------------------------
+
+If you need to simply loop `n` number of times, rather than iterate through an array, Alpine offers a short syntax.
+
+    <ul>    <template x-for="i in 10">        <li x-text="i"></li>    </template></ul>
+    <ul>
+        <template x-for="i in 10">
+            <li x-text="i"></li>
+        </template>
+    </ul>
+
+`i` in this case can be named anything you like.
+
+> Despite not being included in the above snippet, `x-for` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+[Contents of a `<template>`](#contents-of-a-template)
+-----------------------------------------------------
+
+As mentioned above, an `<template>` tag must contain only one root element.
+
+For example, the following code will not work:
+
+    <template x-for="color in colors">    <span>The next color is </span><span x-text="color"></template>
+    <template x-for="color in colors">
+        <span>The next color is </span><span x-text="color">
+    </template>
+
+but this code will work:
+
+    <template x-for="color in colors">    <p>        <span>The next color is </span><span x-text="color">    </p></template>
+    <template x-for="color in colors">
+        <p>
+            <span>The next color is </span><span x-text="color">
+        </p>
+    </template>
+
+[← x-modelable](/directives/modelable)
+
+[x-transition →](/directives/transition)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-html.md

@@ -0,0 +1,23 @@
+x-html
+======
+
+`x-html` sets the "innerHTML" property of an element to the result of a given expression.
+
+> ⚠️ Only use on trusted content and never on user-provided content. ⚠️ Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.
+
+Here's a basic example of using `x-html` to display a user's username.
+
+    <div x-data="{ username: '<strong>calebporzio</strong>' }">    Username: <span x-html="username"></span></div>
+    <div x-data="{ username: '<strong>calebporzio</strong>' }">
+        Username: <span x-html="username"></span>
+    </div>
+
+Username: **calebporzio**
+
+Now the `<span>` tag's inner HTML will be set to "**calebporzio**".
+
+[← x-text](/directives/text)
+
+[x-model →](/directives/model)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-if.md

@@ -0,0 +1,26 @@
+x-if
+====
+
+`x-if` is used for toggling elements on the page, similarly to `x-show`, however it completely adds and removes the element it's applied to rather than just changing its CSS display property to "none".
+
+Because of this difference in behavior, `x-if` should not be applied directly to the element, but instead to a `<template>` tag that encloses the element. This way, Alpine can keep a record of the element once it's removed from the page.
+
+    <template x-if="open">    <div>Contents...</div></template>
+    <template x-if="open">
+        <div>Contents...</div>
+    </template>
+
+> Despite not being included in the above snippet, `x-if` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+Caveats
+-------
+
+Unlike `x-show`, `x-if`, does NOT support transitioning toggles with `x-transition`.
+
+`<template>` tags can only contain one root element.
+
+[← x-teleport](/directives/teleport)
+
+[x-id →](/directives/id)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-model.md

@@ -0,0 +1,257 @@
+x-model
+=======
+
+`x-model` allows you to bind the value of an input element to Alpine data.
+
+Here's a simple example of using `x-model` to bind the value of a text field to a piece of data in Alpine.
+
+    <div x-data="{ message: '' }">    <input type="text" x-model="message">     <span x-text="message"></span></div>
+    <div x-data="{ message: '' }">
+        <input type="text" x-model="message">
+    
+        <span x-text="message"></span>
+    </div>
+
+Now as the user types into the text field, the `message` will be reflected in the `<span>` tag.
+
+`x-model` is two-way bound, meaning it both "sets" and "gets". In addition to changing data, if the data itself changes, the element will reflect the change.
+
+We can use the same example as above but this time, we'll add a button to change the value of the `message` property.
+
+    <div x-data="{ message: '' }">    <input type="text" x-model="message">     <button x-on:click="message = 'changed'">Change Message</button></div>
+    <div x-data="{ message: '' }">
+        <input type="text" x-model="message">
+    
+        <button x-on:click="message = 'changed'">Change Message</button>
+    </div>
+
+ Change Message
+
+Now when the `<button>` is clicked, the input element's value will instantly be updated to "changed".
+
+`x-model` works with the following input elements:
+
+*   `<input type="text">`
+*   `<textarea>`
+*   `<input type="checkbox">`
+*   `<input type="radio">`
+*   `<select>`
+*   `<input type="range">`
+
+[Text inputs](#text-inputs)
+---------------------------
+
+    <input type="text" x-model="message"> <span x-text="message"></span>
+    <input type="text" x-model="message">
+    
+    <span x-text="message"></span>
+
+> Despite not being included in the above snippet, `x-model` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+[Textarea inputs](#textarea-inputs)
+-----------------------------------
+
+    <textarea x-model="message"></textarea> <span x-text="message"></span>
+    <textarea x-model="message"></textarea>
+    
+    <span x-text="message"></span>
+
+[Checkbox inputs](#checkbox-inputs)
+-----------------------------------
+
+### [Single checkbox with boolean](#single-checkbox-with-boolean)
+
+    <input type="checkbox" id="checkbox" x-model="show"> <label for="checkbox" x-text="show"></label>
+    <input type="checkbox" id="checkbox" x-model="show">
+    
+    <label for="checkbox" x-text="show"></label>
+
+### [Multiple checkboxes bound to array](#multiple-checkboxes-bound-to-array)
+
+    <input type="checkbox" value="red" x-model="colors"><input type="checkbox" value="orange" x-model="colors"><input type="checkbox" value="yellow" x-model="colors"> Colors: <span x-text="colors"></span>
+    <input type="checkbox" value="red" x-model="colors">
+    <input type="checkbox" value="orange" x-model="colors">
+    <input type="checkbox" value="yellow" x-model="colors">
+    
+    Colors: <span x-text="colors"></span>
+
+  
+
+Colors:
+
+[Radio inputs](#radio-inputs)
+-----------------------------
+
+    <input type="radio" value="yes" x-model="answer"><input type="radio" value="no" x-model="answer"> Answer: <span x-text="answer"></span>
+    <input type="radio" value="yes" x-model="answer">
+    <input type="radio" value="no" x-model="answer">
+    
+    Answer: <span x-text="answer"></span>
+
+ 
+
+Answer:
+
+[Select inputs](#select-inputs)
+-------------------------------
+
+### [Single select](#single-select)
+
+    <select x-model="color">    <option>Red</option>    <option>Orange</option>    <option>Yellow</option></select> Color: <span x-text="color"></span>
+    <select x-model="color">
+        <option>Red</option>
+        <option>Orange</option>
+        <option>Yellow</option>
+    </select>
+    
+    Color: <span x-text="color"></span>
+
+Red Orange Yellow
+
+Color:
+
+### [Single select with placeholder](#single-select-with-placeholder)
+
+    <select x-model="color">    <option value="" disabled>Select A Color</option>    <option>Red</option>    <option>Orange</option>    <option>Yellow</option></select> Color: <span x-text="color"></span>
+    <select x-model="color">
+        <option value="" disabled>Select A Color</option>
+        <option>Red</option>
+        <option>Orange</option>
+        <option>Yellow</option>
+    </select>
+    
+    Color: <span x-text="color"></span>
+
+Select A Color Red Orange Yellow
+
+Color:
+
+### [Multiple select](#multiple-select)
+
+    <select x-model="color" multiple>    <option>Red</option>    <option>Orange</option>    <option>Yellow</option></select> Colors: <span x-text="color"></span>
+    <select x-model="color" multiple>
+        <option>Red</option>
+        <option>Orange</option>
+        <option>Yellow</option>
+    </select>
+    
+    Colors: <span x-text="color"></span>
+
+Red Orange Yellow
+
+Color:
+
+### [Dynamically populated Select Options](#dynamically-populated-select-options)
+
+    <select x-model="color">    <template x-for="color in ['Red', 'Orange', 'Yellow']">        <option x-text="color"></option>    </template></select> Color: <span x-text="color"></span>
+    <select x-model="color">
+        <template x-for="color in ['Red', 'Orange', 'Yellow']">
+            <option x-text="color"></option>
+        </template>
+    </select>
+    
+    Color: <span x-text="color"></span>
+
+RedOrangeYellow
+
+Color:
+
+[Range inputs](#range-inputs)
+-----------------------------
+
+    <input type="range" x-model="range" min="0" max="1" step="0.1"> <span x-text="range"></span>
+    <input type="range" x-model="range" min="0" max="1" step="0.1">
+    
+    <span x-text="range"></span>
+
+0.5
+
+[Modifiers](#modifiers)
+-----------------------
+
+### [`.lazy`](#lazy)
+
+On text inputs, by default, `x-model` updates the property on every keystroke. By adding the `.lazy` modifier, you can force an `x-model` input to only update the property when user focuses away from the input element.
+
+This is handy for things like real-time form-validation where you might not want to show an input validation error until the user "tabs" away from a field.
+
+    <input type="text" x-model.lazy="username"><span x-show="username.length > 20">The username is too long.</span>
+    <input type="text" x-model.lazy="username">
+    <span x-show="username.length > 20">The username is too long.</span>
+
+### [`.number`](#number)
+
+By default, any data stored in a property via `x-model` is stored as a string. To force Alpine to store the value as a JavaScript number, add the `.number` modifier.
+
+    <input type="text" x-model.number="age"><span x-text="typeof age"></span>
+    <input type="text" x-model.number="age">
+    <span x-text="typeof age"></span>
+
+### [`.boolean`](#boolean)
+
+By default, any data stored in a property via `x-model` is stored as a string. To force Alpine to store the value as a JavaScript boolean, add the `.boolean` modifier. Both integers (1/0) and strings (true/false) are valid boolean values.
+
+    <select x-model.boolean="isActive">    <option value="true">Yes</option>    <option value="false">No</option></select><span x-text="typeof isActive"></span>
+    <select x-model.boolean="isActive">
+        <option value="true">Yes</option>
+        <option value="false">No</option>
+    </select>
+    <span x-text="typeof isActive"></span>
+
+### [`.debounce`](#debounce)
+
+By adding `.debounce` to `x-model`, you can easily debounce the updating of bound input.
+
+This is useful for things like real-time search inputs that fetch new data from the server every time the search property changes.
+
+    <input type="text" x-model.debounce="search">
+    <input type="text" x-model.debounce="search">
+
+The default debounce time is 250 milliseconds, you can easily customize this by adding a time modifier like so.
+
+    <input type="text" x-model.debounce.500ms="search">
+    <input type="text" x-model.debounce.500ms="search">
+
+### [`.throttle`](#throttle)
+
+Similar to `.debounce` you can limit the property update triggered by `x-model` to only updating on a specified interval.
+
+The default throttle interval is 250 milliseconds, you can easily customize this by adding a time modifier like so.
+
+    <input type="text" x-model.throttle.500ms="search">
+    <input type="text" x-model.throttle.500ms="search">
+
+### [`.fill`](#fill)
+
+By default, if an input has a value attribute, it is ignored by Alpine and instead, the value of the input is set to the value of the property bound using `x-model`.
+
+But if a bound property is empty, then you can use an input's value attribute to populate the property by adding the `.fill` modifier.
+
+[Programmatic access](#programmatic access)
+-------------------------------------------
+
+Alpine exposes under-the-hood utilities for getting and setting properties bound with `x-model`. This is useful for complex Alpine utilities that may want to override the default x-model behavior, or instances where you want to allow `x-model` on a non-input element.
+
+You can access these utilities through a property called `_x_model` on the `x-model`ed element. `_x_model` has two methods to get and set the bound property:
+
+*   `el._x_model.get()` (returns the value of the bound property)
+*   `el._x_model.set()` (sets the value of the bound property)
+
+    <div x-data="{ username: 'calebporzio' }">    <div x-ref="div" x-model="username"></div>     <button @click="$refs.div._x_model.set('phantomatrix')">        Change username to: 'phantomatrix'    </button>     <span x-text="$refs.div._x_model.get()"></span></div>
+    <div x-data="{ username: 'calebporzio' }">
+        <div x-ref="div" x-model="username"></div>
+    
+        <button @click="$refs.div._x_model.set('phantomatrix')">
+            Change username to: 'phantomatrix'
+        </button>
+    
+        <span x-text="$refs.div._x_model.get()"></span>
+    </div>
+
+Change username to: 'phantomatrix' calebporzio
+
+[← x-html](/directives/html)
+
+[x-modelable →](/directives/modelable)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-on.md

@@ -0,0 +1,371 @@
+x-on
+====
+
+`x-on` allows you to easily run code on dispatched DOM events.
+
+Here's an example of simple button that shows an alert when clicked.
+
+    <button x-on:click="alert('Hello World!')">Say Hi</button>
+    <button x-on:click="alert('Hello World!')">Say Hi</button>
+
+> `x-on` can only listen for events with lower case names, as HTML attributes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use [`x-bind`](/directives/bind#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved).
+
+[Shorthand syntax](#shorthand-syntax)
+-------------------------------------
+
+If `x-on:` is too verbose for your tastes, you can use the shorthand syntax: `@`.
+
+Here's the same component as above, but using the shorthand syntax instead:
+
+    <button @click="alert('Hello World!')">Say Hi</button>
+    <button @click="alert('Hello World!')">Say Hi</button>
+
+> Despite not being included in the above snippet, `x-on` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+[The event object](#the-event-object)
+-------------------------------------
+
+If you wish to access the native JavaScript event object from your expression, you can use Alpine's magic `$event` property.
+
+    <button @click="alert($event.target.getAttribute('message'))" message="Hello World">Say Hi</button>
+    <button @click="alert($event.target.getAttribute('message'))" message="Hello World">Say Hi</button>
+
+In addition, Alpine also passes the event object to any methods referenced without trailing parenthesis. For example:
+
+    <button @click="handleClick">...</button> <script>    function handleClick(e) {        // Now you can access the event object (e) directly    }</script>
+    <button @click="handleClick">...</button>
+    
+    <script>
+        function handleClick(e) {
+            // Now you can access the event object (e) directly
+        }
+    </script>
+
+[Keyboard events](#keyboard-events)
+-----------------------------------
+
+Alpine makes it easy to listen for `keydown` and `keyup` events on specific keys.
+
+Here's an example of listening for the `Enter` key inside an input element.
+
+    <input type="text" @keyup.enter="alert('Submitted!')">
+    <input type="text" @keyup.enter="alert('Submitted!')">
+
+You can also chain these key modifiers to achieve more complex listeners.
+
+Here's a listener that runs when the `Shift` key is held and `Enter` is pressed, but not when `Enter` is pressed alone.
+
+    <input type="text" @keyup.shift.enter="alert('Submitted!')">
+    <input type="text" @keyup.shift.enter="alert('Submitted!')">
+
+You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case.
+
+    <input type="text" @keyup.page-down="alert('Submitted!')">
+    <input type="text" @keyup.page-down="alert('Submitted!')">
+
+For easy reference, here is a list of common keys you may want to listen for.
+
+Modifier
+
+Keyboard Key
+
+`.shift`
+
+Shift
+
+`.enter`
+
+Enter
+
+`.space`
+
+Space
+
+`.ctrl`
+
+Ctrl
+
+`.cmd`
+
+Cmd
+
+`.meta`
+
+Cmd on Mac, Windows key on Windows
+
+`.alt`
+
+Alt
+
+`.up` `.down` `.left` `.right`
+
+Up/Down/Left/Right arrows
+
+`.escape`
+
+Escape
+
+`.tab`
+
+Tab
+
+`.caps-lock`
+
+Caps Lock
+
+`.equal`
+
+Equal, `=`
+
+`.period`
+
+Period, `.`
+
+`.comma`
+
+Comma, `,`
+
+`.slash`
+
+Forward Slash, `/`
+
+[Mouse events](#mouse-events)
+-----------------------------
+
+Like the above Keyboard Events, Alpine allows the use of some key modifiers for handling `click` events.
+
+Modifier
+
+Event Key
+
+`.shift`
+
+shiftKey
+
+`.ctrl`
+
+ctrlKey
+
+`.cmd`
+
+metaKey
+
+`.meta`
+
+metaKey
+
+`.alt`
+
+altKey
+
+These work on `click`, `auxclick`, `context` and `dblclick` events, and even `mouseover`, `mousemove`, `mouseenter`, `mouseleave`, `mouseout`, `mouseup` and `mousedown`.
+
+Here's an example of a button that changes behaviour when the `Shift` key is held down.
+
+    <button type="button"    @click="message = 'selected'"    @click.shift="message = 'added to selection'">    @mousemove.shift="message = 'add to selection'"    @mouseout="message = 'select'"    x-text="message"></button>
+    <button type="button"
+        @click="message = 'selected'"
+        @click.shift="message = 'added to selection'">
+        @mousemove.shift="message = 'add to selection'"
+        @mouseout="message = 'select'"
+        x-text="message"></button>
+
+> Note: Normal click events with some modifiers (like `ctrl`) will automatically become `contextmenu` events in most browsers. Similarly, `right-click` events will trigger a `contextmenu` event, but will also trigger an `auxclick` event if the `contextmenu` event is prevented.
+
+[Custom events](#custom-events)
+-------------------------------
+
+Alpine event listeners are a wrapper for native DOM event listeners. Therefore, they can listen for ANY DOM event, including custom events.
+
+Here's an example of a component that dispatches a custom DOM event and listens for it as well.
+
+    <div x-data @foo="alert('Button Was Clicked!')">    <button @click="$event.target.dispatchEvent(new CustomEvent('foo', { bubbles: true }))">...</button></div>
+    <div x-data @foo="alert('Button Was Clicked!')">
+        <button @click="$event.target.dispatchEvent(new CustomEvent('foo', { bubbles: true }))">...</button>
+    </div>
+
+When the button is clicked, the `@foo` listener will be called.
+
+Because the `.dispatchEvent` API is verbose, Alpine offers a `$dispatch` helper to simplify things.
+
+Here's the same component re-written with the `$dispatch` magic property.
+
+    <div x-data @foo="alert('Button Was Clicked!')">    <button @click="$dispatch('foo')">...</button></div>
+    <div x-data @foo="alert('Button Was Clicked!')">
+        <button @click="$dispatch('foo')">...</button>
+    </div>
+
+[→ Read more about `$dispatch`](/magics/dispatch)
+
+[Modifiers](#modifiers)
+-----------------------
+
+Alpine offers a number of directive modifiers to customize the behavior of your event listeners.
+
+### [.prevent](#prevent)
+
+`.prevent` is the equivalent of calling `.preventDefault()` inside a listener on the browser event object.
+
+    <form @submit.prevent="console.log('submitted')" action="/foo">    <button>Submit</button></form>
+    <form @submit.prevent="console.log('submitted')" action="/foo">
+        <button>Submit</button>
+    </form>
+
+In the above example, with the `.prevent`, clicking the button will NOT submit the form to the `/foo` endpoint. Instead, Alpine's listener will handle it and "prevent" the event from being handled any further.
+
+### [.stop](#stop)
+
+Similar to `.prevent`, `.stop` is the equivalent of calling `.stopPropagation()` inside a listener on the browser event object.
+
+    <div @click="console.log('I will not get logged')">    <button @click.stop>Click Me</button></div>
+    <div @click="console.log('I will not get logged')">
+        <button @click.stop>Click Me</button>
+    </div>
+
+In the above example, clicking the button WON'T log the message. This is because we are stopping the propagation of the event immediately and not allowing it to "bubble" up to the `<div>` with the `@click` listener on it.
+
+### [.outside](#outside)
+
+`.outside` is a convenience helper for listening for a click outside of the element it is attached to. Here's a simple dropdown component example to demonstrate:
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Toggle</button>     <div x-show="open" @click.outside="open = false">        Contents...    </div></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Toggle</button>
+    
+        <div x-show="open" @click.outside="open = false">
+            Contents...
+        </div>
+    </div>
+
+In the above example, after showing the dropdown contents by clicking the "Toggle" button, you can close the dropdown by clicking anywhere on the page outside the content.
+
+This is because `.outside` is listening for clicks that DON'T originate from the element it's registered on.
+
+> It's worth noting that the `.outside` expression will only be evaluated when the element it's registered on is visible on the page. Otherwise, there would be nasty race conditions where clicking the "Toggle" button would also fire the `@click.outside` handler when it is not visible.
+
+### [.window](#window)
+
+When the `.window` modifier is present, Alpine will register the event listener on the root `window` object on the page instead of the element itself.
+
+    <div @keyup.escape.window="...">...</div>
+    <div @keyup.escape.window="...">...</div>
+
+The above snippet will listen for the "escape" key to be pressed ANYWHERE on the page.
+
+Adding `.window` to listeners is extremely useful for these sorts of cases where a small part of your markup is concerned with events that take place on the entire page.
+
+### [.document](#document)
+
+`.document` works similarly to `.window` only it registers listeners on the `document` global, instead of the `window` global.
+
+### [.once](#once)
+
+By adding `.once` to a listener, you are ensuring that the handler is only called ONCE.
+
+    <button @click.once="console.log('I will only log once')">...</button>
+    <button @click.once="console.log('I will only log once')">...</button>
+
+### [.debounce](#debounce)
+
+Sometimes it is useful to "debounce" an event handler so that it only is called after a certain period of inactivity (250 milliseconds by default).
+
+For example if you have a search field that fires network requests as the user types into it, adding a debounce will prevent the network requests from firing on every single keystroke.
+
+    <input @input.debounce="fetchResults">
+    <input @input.debounce="fetchResults">
+
+Now, instead of calling `fetchResults` after every keystroke, `fetchResults` will only be called after 250 milliseconds of no keystrokes.
+
+If you wish to lengthen or shorten the debounce time, you can do so by trailing a duration after the `.debounce` modifier like so:
+
+    <input @input.debounce.500ms="fetchResults">
+    <input @input.debounce.500ms="fetchResults">
+
+Now, `fetchResults` will only be called after 500 milliseconds of inactivity.
+
+### [.throttle](#throttle)
+
+`.throttle` is similar to `.debounce` except it will release a handler call every 250 milliseconds instead of deferring it indefinitely.
+
+This is useful for cases where there may be repeated and prolonged event firing and using `.debounce` won't work because you want to still handle the event every so often.
+
+For example:
+
+    <div @scroll.window.throttle="handleScroll">...</div>
+    <div @scroll.window.throttle="handleScroll">...</div>
+
+The above example is a great use case of throttling. Without `.throttle`, the `handleScroll` method would be fired hundreds of times as the user scrolls down a page. This can really slow down a site. By adding `.throttle`, we are ensuring that `handleScroll` only gets called every 250 milliseconds.
+
+> Fun Fact: This exact strategy is used on this very documentation site to update the currently highlighted section in the right sidebar.
+
+Just like with `.debounce`, you can add a custom duration to your throttled event:
+
+    <div @scroll.window.throttle.750ms="handleScroll">...</div>
+    <div @scroll.window.throttle.750ms="handleScroll">...</div>
+
+Now, `handleScroll` will only be called every 750 milliseconds.
+
+### [.self](#self)
+
+By adding `.self` to an event listener, you are ensuring that the event originated on the element it is declared on, and not from a child element.
+
+    <button @click.self="handleClick">    Click Me     <img src="..."></button>
+    <button @click.self="handleClick">
+        Click Me
+    
+        <img src="...">
+    </button>
+
+In the above example, we have an `<img>` tag inside the `<button>` tag. Normally, any click originating within the `<button>` element (like on `<img>` for example), would be picked up by a `@click` listener on the button.
+
+However, in this case, because we've added a `.self`, only clicking the button itself will call `handleClick`. Only clicks originating on the `<img>` element will not be handled.
+
+### [.camel](#camel)
+
+    <div @custom-event.camel="handleCustomEvent">    ...</div>
+    <div @custom-event.camel="handleCustomEvent">
+        ...
+    </div>
+
+Sometimes you may want to listen for camelCased events such as `customEvent` in our example. Because camelCasing inside HTML attributes is not supported, adding the `.camel` modifier is necessary for Alpine to camelCase the event name internally.
+
+By adding `.camel` in the above example, Alpine is now listening for `customEvent` instead of `custom-event`.
+
+### [.dot](#dot)
+
+    <div @custom-event.dot="handleCustomEvent">    ...</div>
+    <div @custom-event.dot="handleCustomEvent">
+        ...
+    </div>
+
+Similar to the `.camelCase` modifier there may be situations where you want to listen for events that have dots in their name (like `custom.event`). Since dots within the event name are reserved by Alpine you need to write them with dashes and add the `.dot` modifier.
+
+In the code example above `custom-event.dot` will correspond to the event name `custom.event`.
+
+### [.passive](#passive)
+
+Browsers optimize scrolling on pages to be fast and smooth even when JavaScript is being executed on the page. However, improperly implemented touch and wheel listeners can block this optimization and cause poor site performance.
+
+If you are listening for touch events, it's important to add `.passive` to your listeners to not block scroll performance.
+
+    <div @touchstart.passive="...">...</div>
+    <div @touchstart.passive="...">...</div>
+
+[→ Read more about passive listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners)
+
+### .capture
+
+Add this modifier if you want to execute this listener in the event's capturing phase, e.g. before the event bubbles from the target element up the DOM.
+
+    <div @click.capture="console.log('I will log first')">    <button @click="console.log('I will log second')"></button></div>
+    <div @click.capture="console.log('I will log first')">
+        <button @click="console.log('I will log second')"></button>
+    </div>
+
+[→ Read more about the capturing and bubbling phase of events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture)
+
+[← x-bind](/directives/bind)
+
+[x-text →](/directives/text)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-ref.md

@@ -0,0 +1,21 @@
+x-ref
+=====
+
+`x-ref` in combination with `$refs` is a useful utility for easily accessing DOM elements directly. It's most useful as a replacement for APIs like `getElementById` and `querySelector`.
+
+    <button @click="$refs.text.remove()">Remove Text</button> <span x-ref="text">Hello 👋</span>
+    <button @click="$refs.text.remove()">Remove Text</button>
+    
+    <span x-ref="text">Hello 👋</span>
+
+Remove Text
+
+Hello 👋
+
+> Despite not being included in the above snippet, `x-ref` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+[← x-ignore](/directives/ignore)
+
+[x-cloak →](/directives/cloak)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-show.md

@@ -0,0 +1,55 @@
+x-show
+======
+
+`x-show` is one of the most useful and powerful directives in Alpine. It provides an expressive way to show and hide DOM elements.
+
+Here's an example of a simple dropdown component using `x-show`.
+
+    <div x-data="{ open: false }">    <button x-on:click="open = ! open">Toggle Dropdown</button>     <div x-show="open">        Dropdown Contents...    </div></div>
+    <div x-data="{ open: false }">
+        <button x-on:click="open = ! open">Toggle Dropdown</button>
+    
+        <div x-show="open">
+            Dropdown Contents...
+        </div>
+    </div>
+
+When the "Toggle Dropdown" button is clicked, the dropdown will show and hide accordingly.
+
+> If the "default" state of an `x-show` on page load is "false", you may want to use `x-cloak` on the page to avoid "page flicker" (The effect that happens when the browser renders your content before Alpine is finished initializing and hiding it.) You can learn more about `x-cloak` in its documentation.
+
+[With transitions](#with-transitions)
+-------------------------------------
+
+If you want to apply smooth transitions to the `x-show` behavior, you can use it in conjunction with `x-transition`. You can learn more about that directive [here](/directives/transition), but here's a quick example of the same component as above, just with transitions applied.
+
+    <div x-data="{ open: false }">    <button x-on:click="open = ! open">Toggle Dropdown</button>     <div x-show="open" x-transition>        Dropdown Contents...    </div></div>
+    <div x-data="{ open: false }">
+        <button x-on:click="open = ! open">Toggle Dropdown</button>
+    
+        <div x-show="open" x-transition>
+            Dropdown Contents...
+        </div>
+    </div>
+
+[Using the important modifier](#using-the-important-modifier)
+-------------------------------------------------------------
+
+Sometimes you need to apply a little more force to actually hide an element. In cases where a CSS selector applies the `display` property with the `!important` flag, it will take precedence over the inline style set by Alpine.
+
+In these cases you may use the `.important` modifier to set the inline style to `display: none !important`.
+
+    <div x-data="{ open: false }">    <button x-on:click="open = ! open">Toggle Dropdown</button>     <div x-show.important="open">        Dropdown Contents...    </div></div>
+    <div x-data="{ open: false }">
+        <button x-on:click="open = ! open">Toggle Dropdown</button>
+    
+        <div x-show.important="open">
+            Dropdown Contents...
+        </div>
+    </div>
+
+[← x-init](/directives/init)
+
+[x-bind →](/directives/bind)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-teleport.md

@@ -0,0 +1,116 @@
+x-teleport
+==========
+
+The `x-teleport` directive allows you to transport part of your Alpine template to another part of the DOM on the page entirely.
+
+This is useful for things like modals (especially nesting them), where it's helpful to break out of the z-index of the current Alpine component.
+
+[x-teleport](#x-teleport)
+-------------------------
+
+By attaching `x-teleport` to a `<template>` element, you are telling Alpine to "append" that element to the provided selector.
+
+> The `x-teleport` selector can be any string you would normally pass into something like `document.querySelector`. It will find the first element that matches, be it a tag name (`body`), class name (`.my-class`), ID (`#my-id`), or any other valid CSS selector.
+
+[→ Read more about `document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
+
+Here's a contrived modal example:
+
+    <body>    <div x-data="{ open: false }">        <button @click="open = ! open">Toggle Modal</button>         <template x-teleport="body">            <div x-show="open">                Modal contents...            </div>        </template>    </div>     <div>Some other content placed AFTER the modal markup.</div>     ... </body>
+    <body>
+        <div x-data="{ open: false }">
+            <button @click="open = ! open">Toggle Modal</button>
+    
+            <template x-teleport="body">
+                <div x-show="open">
+                    Modal contents...
+                </div>
+            </template>
+        </div>
+    
+        <div>Some other content placed AFTER the modal markup.</div>
+    
+        ...
+    
+    </body>
+
+Toggle Modal
+
+Some other content placed AFTER the modal markup.
+
+Modal contents...
+
+Notice how when toggling the modal, the actual modal contents show up AFTER the "Some other content..." element? This is because when Alpine is initializing, it sees `x-teleport="body"` and appends and initializes that element to the provided element selector.
+
+[Forwarding events](#forwarding-events)
+---------------------------------------
+
+Alpine tries its best to make the experience of teleporting seamless. Anything you would normally do in a template, you should be able to do inside an `x-teleport` template. Teleported content can access the normal Alpine scope of the component as well as other features like `$refs`, `$root`, etc...
+
+However, native DOM events have no concept of teleportation, so if, for example, you trigger a "click" event from inside a teleported element, that event will bubble up the DOM tree as it normally would.
+
+To make this experience more seamless, you can "forward" events by simply registering event listeners on the `<template x-teleport...>` element itself like so:
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Toggle Modal</button>     <template x-teleport="body" @click="open = false">        <div x-show="open">            Modal contents...            (click to close)        </div>    </template></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Toggle Modal</button>
+    
+        <template x-teleport="body" @click="open = false">
+            <div x-show="open">
+                Modal contents...
+                (click to close)
+            </div>
+        </template>
+    </div>
+
+Toggle Modal
+
+Modal contents...
+
+(click to close)
+
+Notice how we are now able to listen for events dispatched from within the teleported element from outside the `<template>` element itself?
+
+Alpine does this by looking for event listeners registered on `<template x-teleport...>` and stops those events from propagating past the live, teleported, DOM element. Then, it creates a copy of that event and re-dispatches it from `<template x-teleport...>`.
+
+[Nesting](#nesting)
+-------------------
+
+Teleporting is especially helpful if you are trying to nest one modal within another. Alpine makes it simple to do so:
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Toggle Modal</button>     <template x-teleport="body">        <div x-show="open">            Modal contents...             <div x-data="{ open: false }">                <button @click="open = ! open">Toggle Nested Modal</button>                 <template x-teleport="body">                    <div x-show="open">                        Nested modal contents...                    </div>                </template>            </div>        </div>    </template></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Toggle Modal</button>
+    
+        <template x-teleport="body">
+            <div x-show="open">
+                Modal contents...
+    
+                <div x-data="{ open: false }">
+                    <button @click="open = ! open">Toggle Nested Modal</button>
+    
+                    <template x-teleport="body">
+                        <div x-show="open">
+                            Nested modal contents...
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </template>
+    </div>
+
+Toggle Modal
+
+Modal contents...
+
+Toggle Nested Modal
+
+Nested modal contents...
+
+After toggling "on" both modals, they are authored as children, but will be rendered as sibling elements on the page, not within one another.
+
+[← x-cloak](/directives/cloak)
+
+[x-if →](/directives/if)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-text.md

@@ -0,0 +1,21 @@
+x-text
+======
+
+`x-text` sets the text content of an element to the result of a given expression.
+
+Here's a basic example of using `x-text` to display a user's username.
+
+    <div x-data="{ username: 'calebporzio' }">    Username: <strong x-text="username"></strong></div>
+    <div x-data="{ username: 'calebporzio' }">
+        Username: <strong x-text="username"></strong>
+    </div>
+
+Username: **calebporzio**
+
+Now the `<strong>` tag's inner text content will be set to "calebporzio".
+
+[← x-on](/directives/on)
+
+[x-html →](/directives/html)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/directive-x-transition.md

@@ -0,0 +1,163 @@
+x-transition
+============
+
+Alpine provides a robust transitions utility out of the box. With a few `x-transition` directives, you can create smooth transitions between when an element is shown or hidden.
+
+There are two primary ways to handle transitions in Alpine:
+
+*   [The Transition Helper](#the-transition-helper)
+*   [Applying CSS Classes](#applying-css-classes)
+
+[The transition helper](#the-transition-helper)
+-----------------------------------------------
+
+The simplest way to achieve a transition using Alpine is by adding `x-transition` to an element with `x-show` on it. For example:
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Toggle</button>     <div x-show="open" x-transition>        Hello 👋    </div></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Toggle</button>
+    
+        <div x-show="open" x-transition>
+            Hello 👋
+        </div>
+    </div>
+
+Toggle
+
+Hello 👋
+
+As you can see, by default, `x-transition` applies pleasant transition defaults to fade and scale the revealing element.
+
+You can override these defaults with modifiers attached to `x-transition`. Let's take a look at those.
+
+### [Customizing duration](#customizing-duration)
+
+Initially, the duration is set to be 150 milliseconds when entering, and 75 milliseconds when leaving.
+
+You can configure the duration you want for a transition with the `.duration` modifier:
+
+    <div ... x-transition.duration.500ms>
+    <div ... x-transition.duration.500ms>
+
+The above `<div>` will transition for 500 milliseconds when entering, and 500 milliseconds when leaving.
+
+If you wish to customize the durations specifically for entering and leaving, you can do that like so:
+
+    <div ...    x-transition:enter.duration.500ms    x-transition:leave.duration.400ms>
+    <div ...
+        x-transition:enter.duration.500ms
+        x-transition:leave.duration.400ms
+    >
+
+> Despite not being included in the above snippet, `x-transition` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+### [Customizing delay](#customizing-delay)
+
+You can delay a transition using the `.delay` modifier like so:
+
+    <div ... x-transition.delay.50ms>
+    <div ... x-transition.delay.50ms>
+
+The above example will delay the transition and in and out of the element by 50 milliseconds.
+
+### [Customizing opacity](#customizing-opacity)
+
+By default, Alpine's `x-transition` applies both a scale and opacity transition to achieve a "fade" effect.
+
+If you wish to only apply the opacity transition (no scale), you can accomplish that like so:
+
+    <div ... x-transition.opacity>
+    <div ... x-transition.opacity>
+
+### [Customizing scale](#customizing-scale)
+
+Similar to the `.opacity` modifier, you can configure `x-transition` to ONLY scale (and not transition opacity as well) like so:
+
+    <div ... x-transition.scale>
+    <div ... x-transition.scale>
+
+The `.scale` modifier also offers the ability to configure its scale values AND its origin values:
+
+    <div ... x-transition.scale.80>
+    <div ... x-transition.scale.80>
+
+The above snippet will scale the element up and down by 80%.
+
+Again, you may customize these values separately for enter and leaving transitions like so:
+
+    <div ...    x-transition:enter.scale.80    x-transition:leave.scale.90>
+    <div ...
+        x-transition:enter.scale.80
+        x-transition:leave.scale.90
+    >
+
+To customize the origin of the scale transition, you can use the `.origin` modifier:
+
+    <div ... x-transition.scale.origin.top>
+    <div ... x-transition.scale.origin.top>
+
+Now the scale will be applied using the top of the element as the origin, instead of the center by default.
+
+Like you may have guessed, the possible values for this customization are: `top`, `bottom`, `left`, and `right`.
+
+If you wish, you can also combine two origin values. For example, if you want the origin of the scale to be "top right", you can use: `.origin.top.right` as the modifier.
+
+[Applying CSS classes](#applying-css-classes)
+---------------------------------------------
+
+For direct control over exactly what goes into your transitions, you can apply CSS classes at different stages of the transition.
+
+> The following examples use [TailwindCSS](https://tailwindcss.com/docs/transition-property) utility classes.
+
+    <div x-data="{ open: false }">    <button @click="open = ! open">Toggle</button>     <div        x-show="open"        x-transition:enter="transition ease-out duration-300"        x-transition:enter-start="opacity-0 scale-90"        x-transition:enter-end="opacity-100 scale-100"        x-transition:leave="transition ease-in duration-300"        x-transition:leave-start="opacity-100 scale-100"        x-transition:leave-end="opacity-0 scale-90"    >Hello 👋</div></div>
+    <div x-data="{ open: false }">
+        <button @click="open = ! open">Toggle</button>
+    
+        <div
+            x-show="open"
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 scale-90"
+            x-transition:enter-end="opacity-100 scale-100"
+            x-transition:leave="transition ease-in duration-300"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-90"
+        >Hello 👋</div>
+    </div>
+
+Toggle
+
+Hello 👋
+
+Directive
+
+Description
+
+`:enter`
+
+Applied during the entire entering phase.
+
+`:enter-start`
+
+Added before element is inserted, removed one frame after element is inserted.
+
+`:enter-end`
+
+Added one frame after element is inserted (at the same time `enter-start` is removed), removed when transition/animation finishes.
+
+`:leave`
+
+Applied during the entire leaving phase.
+
+`:leave-start`
+
+Added immediately when a leaving transition is triggered, removed after one frame.
+
+`:leave-end`
+
+Added one frame after a leaving transition is triggered (at the same time `leave-start` is removed), removed when the transition/animation finishes.
+
+[← x-for](/directives/for)
+
+[x-effect →](/directives/effect)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/magic-function-$data.md

@@ -0,0 +1,35 @@
+$data
+=====
+
+`$data` is a magic property that gives you access to the current Alpine data scope (generally provided by `x-data`).
+
+Most of the time, you can just access Alpine data within expressions directly. for example `x-data="{ message: 'Hello Caleb!' }"` will allow you to do things like `x-text="message"`.
+
+However, sometimes it is helpful to have an actual object that encapsulates all scope that you can pass around to other functions:
+
+    <div x-data="{ greeting: 'Hello' }">    <div x-data="{ name: 'Caleb' }">        <button @click="sayHello($data)">Say Hello</button>    </div></div> <script>    function sayHello({ greeting, name }) {        alert(greeting + ' ' + name + '!')    }</script>
+    <div x-data="{ greeting: 'Hello' }">
+        <div x-data="{ name: 'Caleb' }">
+            <button @click="sayHello($data)">Say Hello</button>
+        </div>
+    </div>
+    
+    <script>
+        function sayHello({ greeting, name }) {
+            alert(greeting + ' ' + name + '!')
+        }
+    </script>
+
+Say Hello
+
+function sayHello({ greeting, name }) { alert(greeting + ' ' + name + '!') }
+
+Now when the button is pressed, the browser will alert `Hello Caleb!` because it was passed a data object that contained all the Alpine scope of the expression that called it (`@click="..."`).
+
+Most applications won't need this magic property, but it can be very helpful for deeper, more complicated Alpine utilities.
+
+[← $root](/magics/root)
+
+[$id →](/magics/id)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

docs/alpinejs/magic-function-$watch.md

@@ -0,0 +1,54 @@
+$watch
+======
+
+You can "watch" a component property using the `$watch` magic method. For example:
+
+    <div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">    <button @click="open = ! open">Toggle Open</button></div>
+    <div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
+        <button @click="open = ! open">Toggle Open</button>
+    </div>
+
+In the above example, when the button is pressed and `open` is changed, the provided callback will fire and `console.log` the new value:
+
+You can watch deeply nested properties using "dot" notation
+
+    <div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo.bar', value => console.log(value))">    <button @click="foo.bar = 'bob'">Toggle Open</button></div>
+    <div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo.bar', value => console.log(value))">
+        <button @click="foo.bar = 'bob'">Toggle Open</button>
+    </div>
+
+When the `<button>` is pressed, `foo.bar` will be set to "bob", and "bob" will be logged to the console.
+
+### [Getting the "old" value](#getting-the-old-value)
+
+`$watch` keeps track of the previous value of the property being watched, You can access it using the optional second argument to the callback like so:
+
+    <div x-data="{ open: false }" x-init="$watch('open', (value, oldValue) => console.log(value, oldValue))">    <button @click="open = ! open">Toggle Open</button></div>
+    <div x-data="{ open: false }" x-init="$watch('open', (value, oldValue) => console.log(value, oldValue))">
+        <button @click="open = ! open">Toggle Open</button>
+    </div>
+
+### [Deep watching](#deep-watching)
+
+`$watch` automatically watches from changes at any level but you should keep in mind that, when a change is detected, the watcher will return the value of the observed property, not the value of the subproperty that has changed.
+
+    <div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo', (value, oldValue) => console.log(value, oldValue))">    <button @click="foo.bar = 'bob'">Update</button></div>
+    <div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo', (value, oldValue) => console.log(value, oldValue))">
+        <button @click="foo.bar = 'bob'">Update</button>
+    </div>
+
+When the `<button>` is pressed, `foo.bar` will be set to "bob", and "{bar: 'bob'} {bar: 'baz'}" will be logged to the console (new and old value).
+
+> ⚠️ Changing a property of a "watched" object as a side effect of the `$watch` callback will generate an infinite loop and eventually error.
+
+    <!-- 🚫 Infinite loop --><div x-data="{ foo: { bar: 'baz', bob: 'lob' }}" x-init="$watch('foo', value => foo.bob = foo.bar)">    <button @click="foo.bar = 'bob'">Update</button></div>
+    <!-- 🚫 Infinite loop -->
+    <div x-data="{ foo: { bar: 'baz', bob: 'lob' }}" x-init="$watch('foo', value => foo.bob = foo.bar)">
+        <button @click="foo.bar = 'bob'">Update</button>
+    </div>
+
+[← $store](/magics/store)
+
+[$dispatch →](/magics/dispatch)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev)

package-lock.json

@@ -9,8 +9,8 @@
       "version": "1.0.0",
       "license": "Apache License",
       "dependencies": {
-        "@huggingface/hub": "^0.8.3",
-        "@huggingface/inference": "^2.6.1",
+        "@huggingface/hub": "^1.1.2",
+        "@huggingface/inference": "^3.6.2",
         "@types/express": "^4.17.17",
         "express": "^4.18.2",
         "slugify": "^1.6.6",
@@ -30,36 +30,53 @@
       }
     },
     "node_modules/@huggingface/hub": {
-      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-0.8.7.tgz",
-      "integrity": "sha512-BxfPOM/f+RdS2J5uNBRwCllTfH1FMKvWlJrjmybbqxz1CJLIuunBjB2HlEpGlDv8zW1mBuSJy9+eiFzrpgCiXA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-1.1.2.tgz",
+      "integrity": "sha512-Jf4GhvVj9ABDw4Itb3BV1T7f22iewuZva476qTicQ4kOTbosuUuFDhsVH7ZH6rVNgg20Ll9kaNBF5CXjySIT+w==",
       "dependencies": {
-        "hash-wasm": "^4.9.0"
+        "@huggingface/tasks": "^0.18.2"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@huggingface/inference": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-2.6.4.tgz",
-      "integrity": "sha512-Xna7arltBSBoKaH3diGi3sYvkExgJMd/pF4T6vl2YbmDccbr1G/X5EPZ2048p+YgrJYG1jTYFCtY6Dr3HvJaow==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-3.6.2.tgz",
+      "integrity": "sha512-FkJr8dOP8yFTxGFi+X/ylwG3qoCq/s8WI2A4Jg13RBX3voJWrzadpHLD/99EKZU7r35X4Mm6tKUev7dR2B/cTg==",
+      "dependencies": {
+        "@huggingface/jinja": "^0.3.3",
+        "@huggingface/tasks": "^0.18.4"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@huggingface/jinja": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.3.3.tgz",
+      "integrity": "sha512-vQQr2JyWvVFba3Lj9es4q9vCl1sAc74fdgnEMoX8qHrXtswap9ge9uO3ONDzQB0cQ0PUyaKY2N6HaVbTBvSXvw==",
       "engines": {
         "node": ">=18"
       }
     },
+    "node_modules/@huggingface/tasks": {
+      "version": "0.18.6",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.18.6.tgz",
+      "integrity": "sha512-ZxE+KS7po5thl2IJcq9H+teSfkdAaLkO5VhbgBqpVpDVkun+Kmmhkp18/ho4D8gAUVKiNdK5vSS7ZqeD/9b8Sw=="
+    },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
-      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.9",
@@ -71,9 +88,9 @@
       }
     },
     "node_modules/@tsconfig/node10": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
-      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA=="
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
+      "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw=="
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
@@ -119,9 +136,9 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.17.41",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.41.tgz",
-      "integrity": "sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==",
+      "version": "4.19.6",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
+      "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -140,17 +157,17 @@
       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
     },
     "node_modules/@types/node": {
-      "version": "20.10.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.3.tgz",
-      "integrity": "sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==",
+      "version": "22.14.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz",
+      "integrity": "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==",
       "dependencies": {
-        "undici-types": "~5.26.4"
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/@types/qs": {
-      "version": "6.9.10",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.10.tgz",
-      "integrity": "sha512-3Gnx08Ns1sEoCrWssEgTSJs/rsT2vhGP+Ja9cnnk9k4ALxinORlQneLXFeFKOTJMOeZUFD1s7w+w2AphTpvzZw=="
+      "version": "6.9.18",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz",
+      "integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA=="
     },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
@@ -167,13 +184,13 @@
       }
     },
     "node_modules/@types/serve-static": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.5.tgz",
-      "integrity": "sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==",
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
+      "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
       "dependencies": {
         "@types/http-errors": "*",
-        "@types/mime": "*",
-        "@types/node": "*"
+        "@types/node": "*",
+        "@types/send": "*"
       }
     },
     "node_modules/accepts": {
@@ -189,9 +206,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.11.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
-      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -200,9 +217,12 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
-      "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
       "engines": {
         "node": ">=0.4.0"
       }
@@ -218,20 +238,20 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
     "node_modules/body-parser": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dependencies": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.1",
+        "qs": "6.13.0",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
@@ -248,14 +268,28 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
       "dependencies": {
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.1",
-        "set-function-length": "^1.1.1"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -281,9 +315,9 @@
       }
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -306,19 +340,6 @@
         "ms": "2.0.0"
       }
     },
-    "node_modules/define-data-property": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -344,19 +365,59 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "engines": {
         "node": ">= 0.8"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -371,36 +432,36 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -409,15 +470,19 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -453,45 +518,44 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-property-descriptors": {
+    "node_modules/get-proto": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
-      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
       "dependencies": {
-        "get-intrinsic": "^1.2.2"
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -500,9 +564,9 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -510,15 +574,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/hash-wasm": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/hash-wasm/-/hash-wasm-4.11.0.tgz",
-      "integrity": "sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ=="
-    },
     "node_modules/hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -570,6 +629,14 @@
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -579,9 +646,12 @@
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/methods": {
       "version": "1.1.2",
@@ -635,9 +705,12 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -662,9 +735,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
@@ -679,11 +752,11 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -701,9 +774,9 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dependencies": {
         "bytes": "3.1.2",
         "http-errors": "2.0.0",
@@ -739,9 +812,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -761,52 +834,101 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/send/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/set-function-length": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
-      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
       "dependencies": {
-        "define-data-property": "^1.1.1",
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -837,9 +959,9 @@
       }
     },
     "node_modules/ts-node": {
-      "version": "10.9.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
-      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -891,9 +1013,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
-      "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -904,9 +1026,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="
     },
     "node_modules/unpipe": {
       "version": "1.0.0",

package.json

@@ -8,13 +8,13 @@
     "test": "node --loader ts-node/esm src/test.mts",
     "docker": "npm run docker:build && npm run docker:run",
     "docker:build": "docker build -t space-factory-llama2 .",
-    "docker:run": "docker run -it -p 7860:7860 space-factory-llama2"
+    "docker:run": "docker run -it -p 3000:3000 space-factory-llama2"
   },
   "author": "Julian Bilcke <julian.bilcke@huggingface.co>",
   "license": "Apache License",
   "dependencies": {
-    "@huggingface/hub": "^0.8.3",
-    "@huggingface/inference": "^2.6.1",
+    "@huggingface/hub": "^1.1.2",
+    "@huggingface/inference": "^3.6.2",
     "@types/express": "^4.17.17",
     "express": "^4.18.2",
     "slugify": "^1.6.6",

public/index.html

@@ -42,7 +42,7 @@
               name="promptDraft"
               x-model="promptDraft"
               rows="10"
-              placeholder="Describe your web app"
+              placeholder="Describe your web app (eg. tictactoe web game)"
               class="input w-full rounded text-stone-800 bg-stone-50 border-2 border-stone-400 font-mono text-md md:text-lg h-24 md:h-48"
             ></textarea>
             <p class="py-1 md:py-2 text-stone-700 text-italic">
@@ -68,7 +68,7 @@
                   deepseek-ai/DeepSeek-V3-0324
                 </a>
               </p>
-              <p>Powered by 🤗 <a href="https://huggingface.co/inference-api" class="underline" target="_blank">Inference API</a></p>
+              <p>Est. 2023</p>
               <p class="text-stone-700" x-show="state === 'loading'">
                 Waiting for the generation to begin (might take a few minutes)..
               </p>
@@ -100,7 +100,16 @@
         </div>
         
         <div
-          x-show="state === 'stopped' && spaceUrl"
+          x-show="state === 'stopped' && spaceUrl && !spaceUrlReady"
+          class="flex w-full -mt-20 items-end justify-center pointer-events-none">
+          <div class="flex flex-row py-3 px-8 text-center bg-yellow-200 text-yellow-800 rounded-md shadow-md">
+            <div class="mr-1">⏳</div>
+            <div>Space created! Waiting for it to be ready...</div>
+          </div>
+        </div>
+        
+        <div
+          x-show="state === 'stopped' && spaceUrl && spaceUrlReady"
           class="flex w-full -mt-20 items-end justify-center pointer-events-none">
           <div class="flex flex-row py-3 px-8 text-center bg-green-200 text-green-800 rounded-md shadow-md">
             <div class="mr-1">🚀</div>
@@ -165,20 +174,27 @@
           saveToken(token) {
             localStorage.setItem(storageKey, token)
           },
+          spaceUrlReady: false,
           getIframeSource() {
             if (!this.open) {
               return '/placeholder.html';
             }
             
-            if (this.spaceUrl) {
+            if (this.spaceUrl && this.spaceUrlReady) {
               return this.spaceUrl;
             }
             
+            if (this.spaceUrl && !this.spaceUrlReady) {
+              return '/placeholder.html';
+            }
+            
             return `/app?prompt=${encodeURIComponent(this.prompt)}&token=${encodeURIComponent(this.token)}`;
           },
           checkForSpaceUrl(html) {
             if (!html) return null;
-            const match = html.match(/<space-url>(.*?)<\/space-url>/);
+            // Match both regular and HTML-escaped space-url tags
+            const match = html.match(/(?:<space-url>|&lt;space-url&gt;)(?:\s*)?(https?:\/\/[^\s<&]+)(?:\s*)?(?:<\/space-url>|&lt;\/space-url&gt;)/i);
+            // console.log("Space URL regex check:", match);
             return match ? match[1] : null;
           },
           init() {
@@ -189,6 +205,10 @@
               }
               const iframeDocument = document?.getElementById("iframe")?.contentWindow?.document;
               const html = iframeDocument?.documentElement?.outerHTML;
+              // Log a sample of the HTML content to debug space URL detection
+              if (html && html.includes('space-url')) {
+                console.log("Found space-url in HTML content:", html.substring(html.indexOf('space-url') - 50, html.indexOf('space-url') + 150));
+              }
               const size = Number(html?.length); // count how many characters we have generated
 
               if (isNaN(size) || !isFinite(size)) {
@@ -208,10 +228,37 @@
                 
                 // Check if the space URL is in the response
                 const detectedSpaceUrl = this.checkForSpaceUrl(html);
+                // console.log("detectedSpaceUrl:", detectedSpaceUrl);
+                
                 if (detectedSpaceUrl) {
                   console.log("Space URL detected:", detectedSpaceUrl);
                   this.spaceUrl = detectedSpaceUrl;
                   this.state = "stopped";
+                  
+                  // Add 5-second delay before loading the space URL
+                  console.log("Waiting 5 seconds before loading the space...");
+                  setTimeout(() => {
+                    console.log("Space URL is now ready to load");
+                    this.spaceUrlReady = true;
+                  }, 5000);
+                }
+              }
+              
+              // Try to detect the space URL even if the size hasn't changed
+              // as it might be added at the end without changing overall size much
+              if (!this.spaceUrl && html) {
+                const retryDetectedSpaceUrl = this.checkForSpaceUrl(html);
+                if (retryDetectedSpaceUrl) {
+                  console.log("Space URL detected on retry:", retryDetectedSpaceUrl);
+                  this.spaceUrl = retryDetectedSpaceUrl;
+                  this.state = "stopped";
+                  
+                  // Add 5-second delay before loading the space URL
+                  console.log("Waiting 5 seconds before loading the space...");
+                  setTimeout(() => {
+                    console.log("Space URL is now ready to load");
+                    this.spaceUrlReady = true;
+                  }, 5000);
                 }
               }
 

src/createSpace.mts

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from "uuid"
 import { createRepo, uploadFiles, whoAmI } from "@huggingface/hub"
-import type { RepoDesignation, Credentials } from "@huggingface/hub"
+import type { RepoDesignation, Credentials, HubApiError } from "@huggingface/hub"
 import slugify from "slugify"
 
 import { RepoFile } from "./types.mts"
@@ -30,17 +30,28 @@ export const createSpace = async (files: RepoFile[], token: string) => {
   const repo: RepoDesignation = { type: "space", name: repoName }
   console.log(`Creating space at ${repoName}${title ? ` (${title})` : ''}`)
 
-  await createRepo({
-    repo,
-    credentials,
-    license: "mit",
-    sdk:
-      files.some(file => file.path.includes("Dockerfile"))
-        ? "docker"
-      : files.some(file => file.path.includes("app.py"))
-        ? "streamlit"
-        : "static" // "streamlit" | "gradio" | "docker" | "static";
-  });
+  try {
+    await createRepo({
+      repo,
+      credentials,
+      license: "mit",
+      sdk:
+        files.some(file => file.path.includes("Dockerfile"))
+          ? "docker"
+        : files.some(file => file.path.includes("app.py"))
+          ? "streamlit"
+          : "static" // "streamlit" | "gradio" | "docker" | "static";
+    });
+  } catch (error) {
+    // If the space already exists (409 Conflict), skip creation and just upload files
+    const apiError = error as HubApiError;
+    if (apiError.statusCode === 409) {
+      console.log(`Space ${repoName} already exists, skipping creation and updating files...`);
+    } else {
+      // For other errors, rethrow
+      throw error;
+    }
+  }
 
   console.log("uploading files..")
   await uploadFiles({

src/index.mts

@@ -3,7 +3,7 @@ import { createSpace } from './createSpace.mts'
 import { generateFiles } from './generateFiles.mts'
 
 const app = express()
-const port = 7860
+const port = 3000
 
 const minPromptSize = 16 // if you change this, you will need to also change in public/index.html
 const timeoutInSec = 15 * 60
@@ -118,7 +118,8 @@ app.get('/app', async (req, res) => {
     // Send the space URL back to the frontend
     if (spaceInfo && spaceInfo.username && spaceInfo.slug) {
       const spaceUrl = `https://${spaceInfo.username}-${spaceInfo.slug}.hf.space`
-      res.write(`\n\n<space-url>${spaceUrl}</space-url>`)
+      // Add clear markers and spacing to make the space URL easier to detect
+      res.write(`\n\n<!-- SPACE URL MARKER -->\n<space-url>${spaceUrl}</space-url>\n<!-- END SPACE URL MARKER -->\n\n`)
       console.log(`Created space: ${spaceUrl}`)
     }
   }