@abide/abide 0.105.1 → 0.107.0

package/src/ui/Router.ts

@@ -1,5 +1,6 @@
 import { CURRENT_ROUTER, type NavigateOptions } from '#shared/CURRENT_ROUTER.ts'
 import { decodedOrKept } from '#shared/decodedOrKept.ts'
+import { ERROR_META } from '#shared/ERROR_META.ts'
 import { firstMatch, type Params, partsOf } from '#shared/matchRoute.ts'
 import { unmounted } from '#shared/mount.ts'
 import { NAVIGATION_HEADER } from '#shared/NAVIGATION_HEADER.ts'
@@ -51,6 +52,29 @@ type Compiled = Route & { segments: Segment[] }
 
 type Found = { route: Compiled; params: Params }
 
+/** A window's scroll, `[scrollX, scrollY]`. */
+type Scroll = readonly [number, number]
+
+/**
+ * What the router writes to `history.state`: the entry's place in this document's history, and the
+ * scroll it was left at where the router could write it before leaving (30.29, 30.30).
+ */
+type Entry = { index: number; scroll: Scroll | null }
+
+/**
+ * How a navigation arrives at its entry: the view transition type it carries (39.18), and the scroll
+ * it restores on a history step (30.29).
+ */
+type Step = {
+    direction: 'push' | 'back' | 'forward'
+    scroll: Scroll | undefined
+}
+
+const PUSHED: Step = { direction: 'push', scroll: undefined }
+
+/** What a superseded navigation's ticket is aborted with. */
+const SUPERSEDED = 'superseded'
+
 /**
  * The client router: matches addresses, and mounts and replaces the page chain.
  *
@@ -83,19 +107,36 @@ export class Router {
      */
     standing: Compiled | undefined
     /**
-     * The ticket of the live navigation; a superseded one stops when it sees a newer ticket.
+     * The ticket of the live navigation; a superseded one stops when it sees its own aborted.
      *
      * Both ways in await the destination's module before they touch anything, and a dynamic import
      * resolves in whatever order the chunks arrive — so two clicks, or a click landing while
      * `hydrate` is still loading, each mounted a page: the second one to finish overwrote the
      * standing scope and the first page's bindings were left awake, writing into nodes the other
      * page had replaced. Nothing about the screen showed it — the newest markup was on top — which
-     * is why it is a counter rather than a flag.
+     * is why each navigation takes a ticket of its own rather than sharing a flag.
      *
      * TAKEN BEFORE THE AWAIT AND CHECKED AFTER IT, so a superseded navigation stops before it
      * stops a scope, empties the region or pushes a history entry for a page nobody will see.
+     *
+     * 30.31 — AN `AbortController`, so superseding a navigation also aborts the `middleware` request
+     * it is still waiting on, rather than leaving it to finish for nobody.
+     */
+    navigation: AbortController
+    /**
+     * 35.18 — whether the document is an error page's. Its markup is no page this router has, so
+     * nothing hydrates over it, and leaving it is a document load.
      */
-    navigation: number
+    errorPage: boolean
+    /** The place in this document's history of the entry the address bar stands at (`Entry`). */
+    index: number
+    /**
+     * 30.29 — the scroll each entry was left at, by its `index`.
+     *
+     * HELD HERE AS WELL AS IN `history.state`, because a back or forward step has already moved the
+     * bar when `popstate` arrives, so the entry it left can no longer be written to.
+     */
+    scrolls: (Scroll | undefined)[]
     /**
      * The routes whose chunks `prefetch` has already asked for.
      *
@@ -117,7 +158,16 @@ export class Router {
         this.chain = []
         this.mounted = undefined
         this.standing = undefined
-        this.navigation = 0
+        this.navigation = new AbortController()
+        this.errorPage =
+            document.querySelector(`meta[name="${ERROR_META}"]`) !== null
+        const state = history.state as Partial<Entry> | null
+        if (typeof state?.index === 'number') this.index = state.index
+        else {
+            this.index = 0
+            history.replaceState(entryAt(this.index, null), '')
+        }
+        this.scrolls = []
         this.prefetched = new Set()
         this.transitions = transitions
     }
@@ -162,12 +212,16 @@ export class Router {
      * fills itself from the template it carries. One module, both ways in — the `fillEmpty`
      * the emitter already writes is the whole of the difference.
      */
-    async go(url: URL | string, options: NavigateOptions = {}): Promise<void> {
+    async go(
+        url: URL | string,
+        options: NavigateOptions = {},
+        step: Step = PUSHED,
+    ): Promise<void> {
         const target =
             typeof url === 'string' ? new URL(url, location.href) : url
         // A CROSS-ORIGIN ADDRESS IS NOT A ROUTE. Handing it to `pushState` throws, and treating
         // it as a miss would leave the caller with a navigation that silently did nothing.
-        if (target.origin !== location.origin) {
+        if (target.origin !== location.origin || this.errorPage) {
             location.href = target.href
             return
         }
@@ -182,11 +236,10 @@ export class Router {
         // the same address. The page reads its address through `route`, so it follows rather than
         // being rebuilt, and there is no path for `middleware` to decide anything new about.
         if (found.route === this.standing && this.mounted === target.pathname) {
-            this.follow(target, options, found)
+            this.follow(target, options, found, step)
             return
         }
-        this.navigation += 1
-        const ticket = this.navigation
+        const ticket = this.supersede()
         route.navigating.set(true)
         // EVERY WAY OUT CLEARS WHAT THE WAY IN SET: a load that fails, a setup that throws and a
         // navigation that completes all leave `navigating` false and every layer closed. A
@@ -195,13 +248,13 @@ export class Router {
             // 30.15 — THE SERVER IS ASKED ALONGSIDE THE LOAD, so its `middleware` decides the
             // navigation for the price of the one round trip the chunks already cost.
             const [answer, loaded] = await Promise.all([
-                ask(target),
+                ask(target, ticket.signal),
                 loadOrMiss(found.route),
             ])
             // SUPERSEDED, so this navigation is over. Nothing has been touched yet, which is the
             // whole reason the ticket is checked here rather than after the mount — and
             // `navigating` stays the newer navigation's to clear.
-            if (this.navigation !== ticket) return
+            if (ticket.signal.aborted) return
             // 30.18 — A REFUSAL, A RESPONSE MIDDLEWARE ANSWERED ITSELF, or no answer at all: the
             // document asks again and paints whatever the server says. A fetch that failed —
             // offline, or a redirect to another origin that CORS will not let it follow — goes to
@@ -226,18 +279,18 @@ export class Router {
             // 30.23 — THE ROUTE STANDING, AT ANOTHER PATH: `middleware` has said yes to the path, and
             // the page it matched is the one already mounted, so it follows.
             if (landing.route === this.standing) {
-                this.follow(landed, options, landing)
+                this.follow(landed, options, landing, step)
                 return
             }
             const arriving =
                 landing === found ? loaded : await loadOrMiss(landing.route)
-            if (this.navigation !== ticket) return
+            if (ticket.signal.aborted) return
             if (arriving === undefined) {
                 location.href = landed.href
                 return
             }
-            await this.write(ticket, () =>
-                this.commit(landed, landing, arriving, options),
+            await this.write(ticket, step.direction, () =>
+                this.commit(landed, landing, arriving, options, step),
             )
         } finally {
             if (this.navigation === ticket) route.navigating.set(false)
@@ -250,26 +303,99 @@ export class Router {
      * A STEP WITHIN THE STANDING PAGE: the address written and `route` moved, and the page, its
      * scope and every call it made left where they are. It supersedes a navigation in flight the
      * way a click on another link would. Back and forward arrive here with the bar already moved
-     * and `keepScroll`, which leaves the scroll to the browser's own restoration.
+     * and `keepScroll`, and with the scroll the entry was left at (30.29).
      *
      * 30.25 — THE SCROLL STAYS where no page was replaced, except to a fragment the address names:
      * a reader choosing a season is not sent back to the top of the series.
      */
-    follow(target: URL, options: NavigateOptions, found: Found): void {
-        this.navigation += 1
+    follow(
+        target: URL,
+        options: NavigateOptions,
+        found: Found,
+        step: Step,
+    ): void {
+        this.supersede()
         route.navigating.set(false)
         // THE SAME ADDRESS REPLACES rather than pushing, which is what the browser does for a
         // link to the fragment it is already at.
-        writeAddress(
+        this.writeAddress(
             target,
             options.replace === true || target.href === location.href,
+            [scrollX, scrollY],
         )
         arrive(target.href, found.route.pattern, found.params)
         this.mounted = target.pathname
-        if (options.keepScroll !== true && target.hash !== '')
+        if (step.scroll !== undefined) scrollTo(step.scroll[0], step.scroll[1])
+        else if (options.keepScroll !== true && target.hash !== '')
             scrollToFragment(target.hash)
     }
 
+    /**
+     * Records a back or forward step the browser has already taken; answers how to arrive.
+     *
+     * 30.29 — THE ENTRY LEFT keeps the scroll it stood at, and the one arrived at hands back its own.
+     * 39.18 — the direction is read off the two entries' `index`. An entry with none is one the
+     * browser pushed itself — a link to a fragment — so it is stamped as the next entry, and
+     * arrived at as a push.
+     */
+    stepped(): Step {
+        this.scrolls[this.index] = [scrollX, scrollY]
+        const state = history.state as Partial<Entry> | null
+        if (typeof state?.index !== 'number') {
+            this.index += 1
+            this.scrolls.length = this.index
+            history.replaceState(entryAt(this.index, null), '')
+            return PUSHED
+        }
+        const direction = state.index < this.index ? 'back' : 'forward'
+        this.index = state.index
+        return {
+            direction,
+            scroll: this.scrolls[state.index] ?? state.scroll ?? undefined,
+        }
+    }
+
+    /**
+     * Writes the scroll the standing entry is at into its `history.state`, where a reload finds it
+     * (30.30) — the one way out of an entry the router cannot write to after it leaves.
+     */
+    remember(scroll: Scroll = [scrollX, scrollY]): void {
+        this.scrolls[this.index] = scroll
+        history.replaceState(entryAt(this.index, scroll), '')
+    }
+
+    /**
+     * Aborts the live navigation and answers the ticket of the one replacing it.
+     *
+     * ABORTED WITH A REASON, because `abort()` with none builds a `DOMException`, stack trace and
+     * all — 1.1 ms of every page load in Chromium, where hydrate supersedes a ticket nothing holds.
+     */
+    private supersede(): AbortController {
+        this.navigation.abort(SUPERSEDED)
+        this.navigation = new AbortController()
+        return this.navigation
+    }
+
+    /**
+     * Writes `target` to the address bar, pushing a new entry or replacing the standing one.
+     *
+     * 30.29 — A PUSH LEAVES AN ENTRY, so the scroll it stood at is written to it first, and every
+     * entry after it is gone from the history the push forked. `left` is that scroll, read by the
+     * caller before it wrote anything: read after a region was emptied, it forces a layout and
+     * reads the offset that layout clamped.
+     */
+    private writeAddress(target: URL, replace: boolean, left: Scroll): void {
+        const full = `${target.pathname}${target.search}${target.hash}`
+        if (replace) {
+            history.replaceState(entryAt(this.index, null), '', full)
+            return
+        }
+        this.remember(left)
+        this.index += 1
+        this.scrolls.length = this.index
+        history.pushState(entryAt(this.index, null), '', full)
+    }
+
     /**
      * Runs a navigation's commit, inside a view transition where one is wanted.
      *
@@ -280,16 +406,27 @@ export class Router {
      * THE TICKET IS CHECKED AGAIN INSIDE THE CALLBACK, because the browser runs it a frame later,
      * after capturing the outgoing page — and a transition another navigation skipped still runs
      * its callback, which would mount the page the reader clicked away from.
+     *
+     * 39.18 — TYPED WITH THE DIRECTION, so the stylesheet decides what a back step looks like
+     * (`:active-view-transition-type(back)`). 39.19 — a browser whose transitions take no types is
+     * handed the callback alone: the options form is a `TypeError` there.
      */
-    private async write(ticket: number, commit: () => void): Promise<void> {
+    private async write(
+        ticket: AbortController,
+        direction: Step['direction'],
+        commit: () => void,
+    ): Promise<void> {
         if (
             !this.transitions ||
             typeof document.startViewTransition !== 'function'
         )
             return commit()
-        await document.startViewTransition(() => {
-            if (this.navigation === ticket) commit()
-        }).updateCallbackDone
+        const update = (): void => {
+            if (!ticket.signal.aborted) commit()
+        }
+        await document.startViewTransition(
+            takesTypes() ? { update, types: [direction] } : update,
+        ).updateCallbackDone
     }
 
     /**
@@ -303,6 +440,7 @@ export class Router {
         found: Found,
         arriving: PageModule[],
         options: NavigateOptions,
+        step: Step,
     ): void {
         // OPENED WHERE THE NAVIGATION COMMITS, which is after the last early exit and after the
         // `await` above. The awaited load is a NETWORK wait, and a layer that contained it would
@@ -322,6 +460,7 @@ export class Router {
                 shared,
                 this.levels.length,
             )
+            const left: Scroll = [scrollX, scrollY]
             this.stopFrom(shared)
             // The region the arriving part goes into: the page region where nothing is kept, and
             // the deepest kept layout's own slot where something is.
@@ -336,7 +475,7 @@ export class Router {
             // build is this removal, and it carries the 41.10 refusal for a region no longer in a
             // document that a hand-written walk swallows.
             if (into !== undefined) fillRegion(into)
-            writeAddress(target, options.replace === true)
+            this.writeAddress(target, options.replace === true, left)
             // 39.6 — each arriving level applies its own head as it mounts into its emptied region,
             // outermost first; a kept layout is not mounted again, so neither is its head.
             this.mountChain(target, found, arriving, shared, into)
@@ -346,8 +485,11 @@ export class Router {
                 Level.headsOf(this.levels, 0, shared),
                 Level.headsOf(this.levels, shared, this.levels.length),
             ])
-            // The top of the page, or — as the browser does on a load — the fragment's element.
-            if (options.keepScroll !== true) scrollToFragment(target.hash)
+            // 30.29 — where the entry was left, on a history step; else the top of the page, or —
+            // as the browser does on a load — the fragment's element.
+            if (step.scroll !== undefined)
+                scrollTo(step.scroll[0], step.scroll[1])
+            else if (options.keepScroll !== true) scrollToFragment(target.hash)
         } finally {
             endLayer(LAYER_NAVIGATE)
         }
@@ -482,14 +624,13 @@ export class Router {
      * second rendering of it.
      */
     async hydrate(): Promise<void> {
-        const found = this.match(location.pathname)
+        const found = this.errorPage ? undefined : this.match(location.pathname)
         if (found === undefined) return
         // A TICKET LIKE ANY OTHER NAVIGATION. `listenForRoutes` is attached before this is called,
         // so a click during the page module's own load is a `go` that supersedes it — and
         // hydrating on top of the markup that navigation had already put in the region wired the
         // arriving page's bindings to the departing page's nodes.
-        this.navigation += 1
-        const ticket = this.navigation
+        const ticket = this.supersede()
         // NO HEAD IS APPLIED FOR A PAINTED PAGE: its region is not empty, so its mount hydrates
         // rather than fills, and the head is the one the server wrote. Re-applying would replace
         // each contribution with an identical copy — a `<link rel=stylesheet>` refetched and a
@@ -499,10 +640,13 @@ export class Router {
         const landing = paintedCallsLanded()
         const standing = await load(found.route)
         if (landing !== undefined) await landing
-        if (this.navigation !== ticket) return
+        if (ticket.signal.aborted) return
         // THE HYDRATE SHARE. Same name as the navigation's mount because it is the same work on the
         // same chain — what differs is the op it is a fraction of.
         this.mountChain(new URL(location.href), found, standing, 0, this.region)
+        // 30.30 — A RELOAD lands on an entry that carries the scroll `remember` wrote on the way out.
+        const scroll = (history.state as Partial<Entry> | null)?.scroll
+        if (scroll != null) scrollTo(scroll[0], scroll[1])
     }
 
     /**
@@ -559,11 +703,15 @@ function loadOrMiss(route: Compiled): Promise<PageModule[] | undefined> {
  * is followed here, carrying the header, so the answer at the end of it is the server's go-ahead
  * for the address it landed on.
  */
-async function ask(target: URL): Promise<Response | undefined> {
+async function ask(
+    target: URL,
+    signal: AbortSignal,
+): Promise<Response | undefined> {
     try {
         return await fetch(target, {
             headers: { [NAVIGATION_HEADER]: '1' },
             cache: 'no-store',
+            signal,
         })
     } catch {
         return undefined
@@ -585,10 +733,20 @@ async function ask(target: URL): Promise<Response | undefined> {
  */
 const ROUTE_PROPS = { params: (): Params => route.params() }
 
-function writeAddress(target: URL, replace: boolean): void {
-    const full = `${target.pathname}${target.search}${target.hash}`
-    if (replace) history.replaceState(null, '', full)
-    else history.pushState(null, '', full)
+function entryAt(index: number, scroll: Scroll | null): Entry {
+    return { index, scroll }
+}
+
+/**
+ * Whether this browser's view transitions take `types` (39.19).
+ *
+ * Asked of `ViewTransition`'s prototype, where a browser that knows types puts the member.
+ */
+function takesTypes(): boolean {
+    return (
+        typeof ViewTransition === 'function' &&
+        'types' in ViewTransition.prototype
+    )
 }
 
 /**

package/src/ui/Scope.ts

@@ -1,6 +1,7 @@
 import {
     type Disposer,
     type Effect,
+    rerunWatch,
     watchTracked,
 } from '#shared/reactive/watch.ts'
 
@@ -54,6 +55,13 @@ export class Scope {
      * 32.16 — read once at construction.
      */
     boundary: Boundary | undefined = BOUNDARY.current
+    /**
+     * 32.67 — where in `stops` a row's item watches start (`itemWatch`), and how many there are:
+     * opened one after another by a row's mount, so two numbers find them and the row allocates
+     * nothing to be found by.
+     */
+    itemsAt = 0
+    items = 0
 
     watch(effect: Effect): void {
         const boundary = this.boundary
@@ -66,6 +74,26 @@ export class Scope {
         this.stops.push(watchTracked(() => boundary.guard(effect, effect)))
     }
 
+    /**
+     * A watch over a row's item, which reads it off the row's record until the row has a cell
+     * (`itemOf`) — `rerunItems` reruns it when the row takes its first new item.
+     *
+     * A row's mount opens these one after another, so they stand together in `stops`.
+     */
+    itemWatch(effect: Effect): void {
+        if (this.items === 0) this.itemsAt = this.stops.length
+        this.items += 1
+        this.watch(effect)
+    }
+
+    /** Reruns every `itemWatch`, each reading — and subscribing to — the row's cell this time. */
+    rerunItems(): void {
+        const stops = this.stops
+        const end = this.itemsAt + this.items
+        for (let index = this.itemsAt; index < end; index += 1)
+            rerunWatch(stops[index] as Disposer)
+    }
+
     /**
      * Takes ownership of a child scope or list; answers the child it was handed.
      *
@@ -99,6 +127,7 @@ export class Scope {
         for (let index = from; index < stops.length; index += 1)
             (stops[index] as Disposer)()
         stops.length = from
+        if (from <= this.itemsAt) this.items = 0
         const children = this.children
         if (children === undefined) return
         for (const child of children) child.stop()

package/src/ui/adoptWalk.ts

@@ -39,7 +39,7 @@ export function elementHere(
         (node as Element).localName !== tag
     )
         throw new Mismatch(
-            `abide: expected <${tag}> where the client walked, so the client and the server disagree about this region's shape (41.10).`,
+            `abide: expected <${tag}> where the client walked, so the client and the server disagree about this region's shape. RULEBOOK 41.10.`,
         )
     return node as Element
 }
@@ -61,7 +61,7 @@ export function textHere(node: Node | null | undefined): Text | RawRun {
         }
     }
     throw new Mismatch(
-        "abide: text was due where the server wrote none, so the client and the server disagree about this region's shape (41.10).",
+        "abide: text was due where the server wrote none, so the client and the server disagree about this region's shape. RULEBOOK 41.10.",
     )
 }
 
@@ -120,7 +120,7 @@ export function regionHere(node: Node | null | undefined): Region | undefined {
 export function regionFound(region: Region | undefined): Region {
     if (region === undefined)
         throw new Mismatch(
-            "abide: a region was due where the client walked, so the client and the server disagree about this region's shape (41.10).",
+            "abide: a region was due where the client walked, so the client and the server disagree about this region's shape. RULEBOOK 41.10.",
         )
     return region
 }

package/src/ui/applyHead.ts

@@ -45,11 +45,11 @@ export function applyHead(
         if (key === undefined) {
             const standing = replaced[next]
             next += 1
-            if (standing === undefined) head.appendChild(node)
+            if (standing === undefined) head.appendChild(runnable(node))
             // The same node left standing, as a key's is: a `<style>` put back as itself is not
-            // re-parsed into the cascade.
+            // re-parsed into the cascade, and a `<script>` is not run twice.
             else if (!standing.isEqualNode(node))
-                head.replaceChild(node, standing)
+                head.replaceChild(runnable(node), standing)
             continue
         }
         const element = node as Element
@@ -78,6 +78,28 @@ export function applyHead(
     restoreKeys(head, withdrawn, outer())
 }
 
+/**
+ * `node`, or — for a `<script>` — the same script made by the document rather than the parser.
+ *
+ * 39.17 — A PARSED SCRIPT NEVER RUNS. The fragment parser marks every `<script>` it makes "already
+ * started", and `parseMarkup` is that parser, so a script it made and then moved into the head is
+ * inert where the server's, made by the document's own parser, ran. One made by `createElement`
+ * starts clear and runs on insertion. Keyless always (39.11 keys no `<script>`), so this is reached
+ * only where a keyless contribution is actually written.
+ */
+function runnable(node: Node): Node {
+    if (node.nodeName !== 'SCRIPT') return node
+    const parsed = node as HTMLScriptElement
+    const script = document.createElement('script')
+    const attributes = parsed.attributes
+    for (let index = 0; index < attributes.length; index += 1) {
+        const attribute = attributes[index] as Attr
+        script.setAttribute(attribute.name, attribute.value)
+    }
+    script.text = parsed.text
+    return script
+}
+
 /**
  * Puts back, or removes, what the leaving levels keyed and the arriving ones do not.
  *

package/src/ui/bindElement.ts

@@ -21,6 +21,10 @@ import { holdWhileLeaving } from './leave.ts'
  * form is where teardown is decided, and its `Disposer` is the whole of it.
  *
  * 32.38 — A `Disposer` HANDING BACK A THENABLE IS AN EXIT: the element's nodes stay until it settles.
+ *
+ * 32.68 — THE NODE IS CONNECTED AND WHOLE, and nothing here makes it so: this runs from a region's
+ * MOUNT, which every caller (`ArmRegion`, `TryRegion`, `makeRow`) calls after `build`'s nodes are
+ * inserted, and last in it, after the blocks and components inside the node (`emitRegion`).
  */
 export function bindElement(
     element: Element,

package/src/ui/bindProperty.ts

@@ -1,7 +1,7 @@
 // 32.5, 32.7, 32.8 — AN ELEMENT'S PROPERTY AND A VALUE, KEPT IN STEP BOTH WAYS. A watch writes the
 // value into the property; a listener writes the property back into the value. The server wrote the
-// value standing at render as the attribute (`emitComponent`), so hydration moves nothing that is
-// already right.
+// value standing at render as the attribute, or as a `<textarea>`'s text and an option's `selected`
+// (32.61), so hydration moves nothing that is already right.
 //
 // 32.7 — A BOOLEAN BIND IS A BOOLEAN: the property is set to one, and mirrored as a boolean attribute
 // rather than written as a string.
@@ -10,6 +10,7 @@ import {
     boundValue,
     groupHolds,
     heldValue,
+    selectHolds,
     writeBound,
 } from '#shared/boundValue.ts'
 import { numberFromText } from '#shared/numberFromText.ts'
@@ -25,26 +26,7 @@ export function bindProperty(
 ): void {
     const bound = element as Bound
     if (kind === 'value') {
-        scope.watch(() => {
-            const value = boundValue(operand)
-            const text =
-                value === undefined || value === null ? '' : String(value)
-            if (bound.value !== text) bound.value = text
-        })
-        // A `<select>` settles on `change`; everything else that takes text reports each keystroke.
-        const event = bound.tagName === 'SELECT' ? 'change' : 'input'
-        bound.addEventListener(event, () => {
-            // A value that was a number stays one: what the reader typed is text, and the value is
-            // not the reader's to retype.
-            const standing = heldValue(operand)
-            const typed = bound.value
-            writeBound(
-                operand,
-                typeof standing === 'number'
-                    ? (numberFromText(typed) ?? typed)
-                    : typed,
-            )
-        })
+        bindValue(bound, operand, scope)
         return
     }
     if (kind === 'group') {
@@ -77,3 +59,69 @@ export function bindProperty(
         writeBound(operand, bound[property])
     })
 }
+
+// 32.5 — `bind:value`, on an input, a `<textarea>` or a `<select>`.
+function bindValue(bound: Bound, operand: unknown, scope: Scope): void {
+    if (
+        bound.tagName === 'SELECT' &&
+        (bound as unknown as HTMLSelectElement).multiple
+    ) {
+        // 32.62 — the list of what is selected, read and written per option.
+        const select = bound as unknown as HTMLSelectElement
+        scope.watch(() => {
+            const value = boundValue(operand)
+            for (const option of select.options)
+                option.selected = selectHolds(value, option.value)
+        })
+        select.addEventListener('change', () => {
+            const chosen: string[] = []
+            for (const option of select.selectedOptions)
+                chosen.push(option.value)
+            writeBound(operand, chosen)
+        })
+        return
+    }
+    // 32.58 — NUMERIC ONCE, NUMERIC FROM THEN ON: a blank field writes `undefined`, and the
+    // keystroke after it still has to know the value was a number.
+    let numeric = bound.type === 'number' || bound.type === 'range'
+    scope.watch(() => {
+        const value = boundValue(operand)
+        if (typeof value === 'number') numeric = true
+        // 32.59 — text that already reads as the value is the reader's spelling of it: a trailing
+        // decimal point or zero is mid-typing, and rewriting it to the number's own text takes the
+        // keystroke back.
+        if (typeof value === 'number' && value === numberFromText(bound.value))
+            return
+        const text = value === undefined || value === null ? '' : String(value)
+        if (bound.value !== text) bound.value = text
+    })
+    const write = () => {
+        const typed = bound.value
+        if (!numeric) {
+            writeBound(operand, typed)
+            return
+        }
+        // 32.58 — text that reads as no number, `-` on its way to `-3`, writes nothing.
+        const number = numberFromText(typed)
+        if (number !== undefined) writeBound(operand, number)
+        else if (typed.trim() === '') writeBound(operand, undefined)
+    }
+    // A `<select>` settles on `change`; everything else that takes text reports each keystroke.
+    if (bound.tagName === 'SELECT') {
+        bound.addEventListener('change', write)
+        return
+    }
+    // 32.60 — A COMPOSITION IS ONE WRITE: what an input method shows between its start and its end
+    // is not text the reader has chosen yet.
+    let composing = false
+    bound.addEventListener('compositionstart', () => {
+        composing = true
+    })
+    bound.addEventListener('compositionend', () => {
+        composing = false
+        write()
+    })
+    bound.addEventListener('input', () => {
+        if (!composing) write()
+    })
+}