@abide/abide 0.46.0 → 0.48.0

package/src/lib/ui/compile/types/TemplateNode.ts

@@ -80,11 +80,6 @@ export type TemplateNode =
              the prop name's source offset — the anchor for an excess-prop diagnostic. */
           props: { name: string; code: string; loc?: number; nameLoc?: number; spread?: boolean }[]
           children: TemplateNode[]
-          /* `client:idle` / `client:visible` on the tag → hydrate this child as an island
-             (server markup kept, build deferred to the trigger). Extracted from the attributes
-             so it never becomes a prop; the build back-end passes it to `mountChild`, SSR and
-             the prop check ignore it (an island renders fully on the server). */
-          clientTrigger?: 'idle' | 'visible'
       }
     | { kind: 'switch'; subject: string; children: TemplateNode[]; loc?: number }
     /* A branch of a `<template switch>` (`match` set) or `<template if>` chain. Inside an

package/src/lib/ui/dom/appendStatic.ts

@@ -1,5 +1,6 @@
 import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
+import { assertClaimedText } from './assertClaimedText.ts'
 
 /*
 A static (non-reactive) text node under `parent`: created and appended (create
@@ -12,10 +13,17 @@ export function appendStatic(parent: Node, value: string, splitAlways = false):
     const hydration = RENDER.hydration
     if (hydration !== undefined) {
         const node = claimChild(hydration, parent) as unknown as Text
+        const isText = node !== null && typeof node.splitText === 'function'
+        /* The claimed SSR node must begin with this literal, or the split misaligns — throw
+           legibly at the divergence (only when a text node is actually here; a structural
+           mismatch is claimExpected's domain). */
+        if (isText) {
+            assertClaimedText(node, value)
+        }
         /* Split even on an exact-length consume when a sibling text binding follows
            (`splitAlways`), so it gets its own node; see appendText for the rationale. */
         if (
-            node !== null &&
+            isText &&
             (splitAlways ? value.length <= node.data.length : value.length < node.data.length)
         ) {
             node.splitText(value.length)

package/src/lib/ui/dom/appendText.ts

@@ -4,6 +4,7 @@ import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { appendSnippet } from './appendSnippet.ts'
+import { assertClaimedText } from './assertClaimedText.ts'
 import { isComment } from './isComment.ts'
 import { parseRawNodes } from './parseRawNodes.ts'
 
@@ -49,6 +50,12 @@ export function appendText(parent: Node, read: () => unknown, splitAlways = fals
         const node = (
             isText ? claimed : parent.insertBefore(document.createTextNode(''), claimed)
         ) as Text
+        /* The claimed SSR node must begin with this binding's value, or the split below
+           lands mid-run and orphans the tail — throw legibly at the divergence instead. A
+           synthesized empty node is this binding's own, so there's nothing to disagree. */
+        if (isText) {
+            assertClaimedText(node, value)
+        }
         /* Peel this binding's text off the merged SSR node. A non-final binding in a
            run (`splitAlways`) splits even when it consumes the whole node, leaving an
            empty node for the next binding — otherwise an interpolation that renders to
@@ -87,12 +94,17 @@ function appendRawHtml(parent: Node, read: () => unknown): void {
     let nodes: Node[] = []
 
     const set = (value: string): void => {
+        /* Insert/remove via the anchor's LIVE parent, not the build-time `parent` — when
+           this interpolation is a bare child of a control-flow branch, `parent` is the
+           branch's build fragment, which the enclosing block has since emptied into the
+           document (same reason each/awaitBlock use the anchor's parentNode). */
+        const liveParent = anchor.parentNode ?? parent
         for (const node of nodes) {
-            parent.removeChild(node)
+            liveParent.removeChild(node)
         }
-        nodes = parseRawNodes(parent, value)
+        nodes = parseRawNodes(liveParent, value)
         for (const node of nodes) {
-            parent.insertBefore(node, anchor)
+            liveParent.insertBefore(node, anchor)
         }
     }
 

package/src/lib/ui/dom/assertClaimedText.ts

@@ -0,0 +1,20 @@
+/*
+A text claim that MUST match the server's rendered text. On hydrate,
+appendStatic/appendText adopt a merged SSR text node and split it at the CLIENT
+value's length, trusting the client renders the same string the server did. When
+they diverge — a binding whose value only materializes client-side (a peeked cache
+value, `Date.now()`, a random) — the split lands mid-run and orphans the tail,
+silently corrupting the DOM several nodes downstream. This turns that into a legible
+desync AT the divergence, the text counterpart of `claimExpected` for structure.
+
+The claimed node's data must BEGIN with this binding's value: a merged run appends
+the following siblings' text AFTER it, so the value is exactly the leading slice. A
+mismatch means SSR and the client build disagree on the text here.
+*/
+export function assertClaimedText(node: Text, value: string): void {
+    if (!node.data.startsWith(value)) {
+        throw new Error(
+            `[abide] hydration desync: expected server text beginning with ${JSON.stringify(value)} here, but the server DOM had ${JSON.stringify(node.data)} — SSR markup and the client build disagree on the text at this position.`,
+        )
+    }
+}

package/src/lib/ui/dom/awaitBlock.ts

@@ -1,20 +1,17 @@
-import { activeCacheStore } from '../../shared/activeCacheStore.ts'
 import { decodeRefJson } from '../../shared/decodeRefJson.ts'
 import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { generationGuard } from '../runtime/generationGuard.ts'
 import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
-import type { DeferMarker, ResumeEntry } from '../runtime/RESUME.ts'
+import type { ResumeEntry } from '../runtime/RESUME.ts'
 import { RESUME } from '../runtime/RESUME.ts'
-import { scheduleWake } from '../runtime/scheduleWake.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
 import type { State } from '../runtime/types/State.ts'
 import { state } from '../state.ts'
 import { buildDetachedRange } from './buildDetachedRange.ts'
 import { discardBoundary } from './discardBoundary.ts'
-import { firstElementBetween } from './firstElementBetween.ts'
 import { removeRange } from './removeRange.ts'
 
 /*
@@ -60,20 +57,11 @@ export function awaitBlock(
     let active: { start: Comment; end: Comment; dispose: () => void } | undefined
     let anchor: Node | undefined
     let first = true
-    /* A deferred (inert-adopted) block schedules a wake (idle or visible); cancel it if the
-       owner tears the block out before it fires, so no late re-run touches a detached anchor. */
-    let cancelWake: (() => void) | undefined
     /* Bumped each run so a prior run's in-flight promise can't clobber a newer one, AND on
        owner teardown so an in-flight promise that settles AFTER the enclosing `{#if}`/
        `{#for}`/component tears this block out is abandoned — otherwise its settle runs
-       `place` on the block's now-detached anchor and `insertBefore` throws NotFoundError.
-       The teardown also cancels a pending wake (above). */
-    const guard = generationGuard(() => cancelWake?.())
-    /* Flipped by a deferred block's wake. Read at the top of the effect so the block subscribes
-       to it and re-runs when it flips — the same re-run path an invalidate takes, so wake needs
-       no bespoke build logic. Never flips for a non-deferred block, so it costs one inert read
-       per run there. */
-    const woken = state(false)
+       `place` on the block's now-detached anchor and `insertBefore` throws NotFoundError. */
+    const guard = generationGuard()
     /* The resolved value, held as a reactive cell so the then-branch reads it through its
        own effects. A re-run that resolves to a NEW value SETS this cell instead of rebuilding
        the branch — the branch (and any keyed `each` inside it) survives and updates in place,
@@ -192,53 +180,6 @@ export function awaitBlock(
         active = { start, end, dispose }
     }
 
-    /* Inert adoption — a deferred `{#await cache()}` (large payload, shipped as a `{defer,key}`
-       resume marker). Adopt the SSR then-branch WITHOUT building its bindings or materializing
-       the awaited value: the server markup is already correct, so keep it verbatim and skip the
-       payload decode entirely (the boot-path cost deferral targets). Only subscribe THIS block's
-       effect to the cache key — reads, decodes and fetches all wait. A later cache.invalidate
-       re-runs the effect, which then reads the value for real and builds a fresh branch. Sound
-       because a display-first read replaces the whole branch on re-read anyway, so there is no
-       extra flash beyond the swap the re-read already performs. */
-    const adoptInert = (open: Node | null, key: string): void => {
-        const cursor = hydration as NonNullable<typeof hydration>
-        const firstKept = open?.nextSibling ?? null
-        /* Scan to THIS block's close marker, leaving every server node in place. Nested
-           blocks carry different ids, so the first data match is our own close. */
-        let node: Node | null = firstKept
-        while (node !== null && (node as { data?: string }).data !== `/abide:await:${id}`) {
-            node = node.nextSibling
-        }
-        const close = node
-        cursor.next.set(parent, close?.nextSibling ?? null)
-        /* Bracket the kept nodes as a `[`…`]` range + park an anchor, identical to `adopt`,
-           so the first re-run's `place`/`detach` evicts them like any other branch. */
-        const start = document.createComment(RANGE_OPEN)
-        parent.insertBefore(start, firstKept ?? close)
-        const end = document.createComment(RANGE_CLOSE)
-        parent.insertBefore(end, close)
-        anchor = document.createTextNode('')
-        parent.insertBefore(anchor, close)
-        /* No scope/effects were built for the kept nodes, so disposal only evicts the range. */
-        active = { start, end, dispose: () => undefined }
-        /* Not 'then' — the first re-run rebuilds the branch fresh via `place`. */
-        activeKind = 'pending'
-        /* Subscribe without a value read: no clone, no decode, no fetch — just the key, so
-           cache.invalidate re-runs this effect (createSubscriber ties it to the running scope). */
-        activeCacheStore().subscribe(key)
-        /* Wake the inert branch — it's a boot-frame optimization, never a lasting mode. The
-           wake flips `woken`, re-running the effect through its normal `render` path: the
-           lazily-seeded cache reads warm, so the branch materializes live and interactive with
-           no fetch. Closes the "deferred grid stays inert until invalidate" gap.
-
-           Position picks the trigger ('auto'): a branch with an element wakes on VISIBLE (a
-           below-the-fold grid decodes only when scrolled to, one never reached costs nothing);
-           an empty branch or a DOM with no observer wakes on IDLE — never lingering inert. */
-        cancelWake = scheduleWake('auto', firstElementBetween(firstKept, close), () => {
-            woken.value = true
-        })
-    }
-
     /* Discard the SSR boundary and (re)build the block from the live promise, fresh
        (hydration off) — the recovery path when adoption can't use the server markup. */
     const rebuildCold = (open: Node | null): void => {
@@ -275,28 +216,28 @@ export function awaitBlock(
            lives. A decode failure (malformed/absent payload) reads as "no resume" — fall
            through to the live promise rather than crash hydration. */
         const raw = RESUME[id]
-        let decoded: ResumeEntry | DeferMarker | undefined
+        let decoded: ResumeEntry | undefined
         if (raw !== undefined) {
             try {
-                decoded = decodeRefJson(raw) as ResumeEntry | DeferMarker
+                decoded = decodeRefJson(raw) as ResumeEntry
             } catch {
                 decoded = undefined
             }
         }
-        /* A deferred marker ships the cache key, not the value — adopt the server branch inert
-           and skip the decode. Intercept before the ok/catch logic. Object-guard the `in`: a
-           corrupt manifest decoding to a primitive/null must read as "no resume" (fall through),
-           not throw past the decode try/catch and crash hydration. */
-        if (typeof decoded === 'object' && decoded !== null && 'defer' in decoded) {
-            adoptInert(open, decoded.key)
-            return
-        }
-        /* Non-deferred: read the promise now so the block subscribes to its reactive source
-           (a cache key) — warm on resume, so no round-trip — then adopt the resume value /
-           warm-sync result below, or discard and build the pending branch fresh. */
+        /* Read the promise now so the block subscribes to its reactive source (a cache key) —
+           warm on resume, so no round-trip — then adopt the resume value / warm-sync result
+           below, or discard and build the pending branch fresh. */
         const result = promiseThunk()
-        const entry = decoded as ResumeEntry | undefined
+        const entry = decoded
         if (entry !== undefined) {
+            /* The resume entry drives the adopted branch below; the live `result` read to
+               subscribe the reactive source is discarded here. Swallow its rejection — a
+               cold-cache warm-seed miss starts a real fetch, and if that fetch rejects it
+               would otherwise surface as an unhandledrejection at boot (process-fatal under
+               Bun) instead of being harmlessly dropped. */
+            if (isThenable(result)) {
+                void (result as PromiseLike<unknown>).then(undefined, () => undefined)
+            }
             /* Build the adopted branch around a value CELL (then) so a later re-run updates
                it in place, exactly like a fresh mount. The `throw` for a catch-less rejection
                stays OUTSIDE the adopt try/catch so it surfaces rather than triggering the
@@ -354,17 +295,12 @@ export function awaitBlock(
     }
 
     effect(() => {
-        /* Subscribe to the wake cell every run (including the first, before it can flip) so a
-           deferred block's idle wake re-runs this effect. Inert for non-deferred blocks. */
-        woken.value
         guard.renew()
         if (first) {
             first = false
             if (hydration !== undefined) {
-                /* firstHydrate reads the promise ITSELF, after checking the resume marker: a
-                   deferred block must not invoke promiseThunk (it would materialize/fetch the
-                   value we're deferring) and subscribes by key instead; every other path reads
-                   it so the block subscribes to its reactive source (a cache key). */
+                /* firstHydrate reads the promise ITSELF so the block subscribes to its reactive
+                   source (a cache key), then adopts the resume value / warm-sync result. */
                 firstHydrate()
                 return
             }

package/src/lib/ui/dom/bindSelectValue.ts

@@ -0,0 +1,48 @@
+import { effect } from '../effect.ts'
+import { on } from './on.ts'
+
+/*
+Two-way `bind:value` for a `<select>`. The bound value drives the selection through
+a reactive effect, and the user's pick writes back on `change`. A plain `bind:value`
+would set `el.value` once, up front — but a `<select>`'s options are frequently
+mounted AFTER the binding runs (a `{#for}` child, an async list), and the browser
+silently drops a `value` assignment naming an option that isn't present yet. So a
+`MutationObserver` re-applies the selection whenever the option set changes (its
+callback runs in a microtask before paint, so no visible flash), disconnected on
+teardown. `multiple` switches single-value (`el.value`) semantics for array
+membership: each option's `selected` is set from the bound array, and the write-back
+collects `selectedOptions` back into an array.
+*/
+// @documentation plumbing
+export function bindSelectValue(
+    element: HTMLSelectElement,
+    read: () => unknown,
+    write: (value: unknown) => void,
+    multiple: boolean,
+): void {
+    /* Push the bound value into the DOM selection. */
+    const apply = (): void => {
+        if (multiple) {
+            const selected = (read() as unknown[]) ?? []
+            for (const option of element.options) {
+                option.selected = selected.includes(option.value)
+            }
+        } else {
+            element.value = read() as string
+        }
+    }
+    /* Read the current DOM selection back out for the write. */
+    const collect = (): unknown =>
+        multiple ? Array.from(element.selectedOptions, (option) => option.value) : element.value
+    /* Re-apply whenever the bound value changes (this effect tracks `read`). */
+    effect(apply)
+    /* Re-apply whenever the option set changes — covers `{#for}`/async options that
+       mount after the first apply. This effect reads nothing reactive, so it runs once
+       and only its teardown (disconnect) fires on dispose. */
+    effect(() => {
+        const observer = new MutationObserver(apply)
+        observer.observe(element, { childList: true, subtree: true })
+        return () => observer.disconnect()
+    })
+    on(element, 'change', () => write(collect()))
+}

package/src/lib/ui/dom/each.ts

@@ -107,7 +107,18 @@ export function each<T>(
     if (hydration !== undefined) {
         let position = 0
         for (const item of items()) {
-            rows.set(keyOf(item), buildRow(item, position)) // claims the SSR row where it sits
+            const key = keyOf(item)
+            const row = buildRow(item, position) // claims the SSR row where it sits
+            if (rows.has(key)) {
+                /* Duplicate key: this row already claimed its SSR markers, but the map holds
+                   one row per key (create mode keeps the FIRST built row too). Dispose+remove
+                   this later duplicate so it isn't orphaned on screen forever — the reconcile
+                   prune only reaches rows still in the map. */
+                row.dispose()
+                removeRange(row.start, row.end)
+            } else {
+                rows.set(key, row)
+            }
             position += 1
         }
         anchor = document.createTextNode('')

package/src/lib/ui/dom/hydrate.ts

@@ -1,3 +1,5 @@
+import { hydratingSlot } from '../../shared/hydratingSlot.ts'
+import { wakeHydrationPeeks } from '../../shared/wakeHydrationPeeks.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeLabel } from './scopeLabel.ts'
@@ -25,7 +27,9 @@ export function hydrate(
     props?: unknown,
 ): () => void {
     const previous = RENDER.hydration
+    const previousHydrating = hydratingSlot.active
     RENDER.hydration = { next: new Map() }
+    hydratingSlot.active = true
     try {
         /* Same shared mount core as `mount` (see `withScope`) — a hydrated component owns a
            scope too, adopting the model its build adopts — run with the claim cursor active. */
@@ -33,5 +37,11 @@ export function hydrate(
         return () => lexical.dispose()
     } finally {
         RENDER.hydration = previous
+        hydratingSlot.active = previousHydrating
+        /* Wake the peeks this pass withheld — only when unwinding the OUTERMOST pass, so a
+           nested child hydrate doesn't fire it early (save/restore, not a bare reset). */
+        if (!previousHydrating) {
+            wakeHydrationPeeks()
+        }
     }
 }

package/src/lib/ui/dom/mountChild.ts

@@ -29,19 +29,16 @@ export function mountChild(
     props: Parameters<UiComponent>[1],
     before: Node | null = null,
     label?: string,
-    /* `client:idle` / `client:visible` on the tag → hydrate this child as an island (server
-       markup kept, build deferred to the trigger). Undefined = hydrate eagerly, as before. */
-    clientTrigger?: 'idle' | 'visible',
 ): void {
     const moduleId = factory.__abideId
     if (!__ABIDE_DEV__ || !hotReloadEnabled.current || moduleId === undefined) {
-        mountRange(parent, factory.build, props, before, label, clientTrigger)
+        mountRange(parent, factory.build, props, before, label)
         return
     }
     /* Capture the component's model alongside its mount handle, so a later swap can
        carry its state across (see `hotReplace`). */
     const { value: handle, model } = captureModelDoc(() =>
-        mountRange(parent, factory.build, props, before, label, clientTrigger),
+        mountRange(parent, factory.build, props, before, label),
     )
     const instance = {
         factory,

package/src/lib/ui/dom/mountRange.ts

@@ -1,15 +1,9 @@
-import { claimChild } from '../runtime/claimChild.ts'
 import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
-import { scheduleWake } from '../runtime/scheduleWake.ts'
 import { scope } from '../runtime/scope.ts'
 import type { UiProps } from '../runtime/types/UiProps.ts'
-import { clearBetween } from './clearBetween.ts'
-import { commentData } from './commentData.ts'
 import { disposeRange } from './disposeRange.ts'
 import { fillRange } from './fillRange.ts'
-import { firstElementBetween } from './firstElementBetween.ts'
-import { markerDepthDelta } from './markerDepthDelta.ts'
 import { openMarker } from './openMarker.ts'
 import { withScope } from './withScope.ts'
 
@@ -28,12 +22,6 @@ marker — mirrors `mountSlot`/`when`). `before` (a skeleton-located node, the b
 `anchorCursor`) places the range among static siblings on create; hydrate ignores it
 (the claim cursor drives placement). Returns the markers + a disposer so the hot path
 can rebuild in place.
-
-`clientTrigger` marks the component an ISLAND: on hydrate its server markup is kept
-verbatim and its build is SKIPPED, then run on the trigger (`'idle'`/`'visible'`) —
-so a below-the-fold widget ships as HTML and wires no effects until scrolled to (or
-the first idle gap), off the critical boot path. Create ignores it (there is no server
-markup to keep — an island is a hydration-cost optimization). See `adoptIsland`.
 */
 // @documentation plumbing
 export function mountRange(
@@ -42,7 +30,6 @@ export function mountRange(
     props: UiProps | undefined,
     before: Node | null = null,
     label: string | undefined = undefined,
-    clientTrigger: 'idle' | 'visible' | undefined = undefined,
 ): { start: Comment; end: Comment; dispose: () => void } {
     const hydration = RENDER.hydration
     const start = openMarker(parent, RANGE_OPEN, before)
@@ -50,9 +37,6 @@ export function mountRange(
         const end = openMarker(parent, RANGE_CLOSE, before)
         return fillRange(start, end, build, props, label)
     }
-    if (clientTrigger !== undefined) {
-        return adoptIsland(parent, start, build, props, label, clientTrigger, hydration)
-    }
     /* Hydrate: adopt the server range in place. Establish the child's lexical scope
        and render pass (same as `fillRange`), build claiming the existing nodes, then
        claim the end marker the build's content stops before. */
@@ -60,62 +44,3 @@ export function mountRange(
     const end = openMarker(parent, RANGE_CLOSE)
     return { start, end, dispose: disposeRange(scoped, start, end) }
 }
-
-/*
-Island hydration: keep the server markup, skip the build, wake it later on the trigger. Scan the
-child's server nodes to THIS range's depth-matched close (`markerDepthDelta` balances nested
-`[`…`]` / `abide:` ranges) — keeping them and advancing the claim cursor past them, so the rest
-of the page hydrates around the skipped subtree — then claim the close marker. No scope is built,
-so the inert disposer only clears the kept nodes; the wake clears them and builds the child fresh
-(hydration off) between the same markers, exactly like a create-path mount.
-*/
-function adoptIsland(
-    parent: Node,
-    start: Comment,
-    build: (host: Node, props?: UiProps) => void,
-    props: UiProps | undefined,
-    label: string | undefined,
-    trigger: 'idle' | 'visible',
-    hydration: NonNullable<(typeof RENDER)['hydration']>,
-): { start: Comment; end: Comment; dispose: () => void } {
-    const firstKept = claimChild(hydration, parent)
-    let node = firstKept
-    let depth = 0
-    while (node !== null) {
-        const data = commentData(node)
-        if (data !== undefined) {
-            const delta = markerDepthDelta(data)
-            /* A depth-0 close is THIS range's own; anything nested balances out first. */
-            if (delta === -1 && depth === 0) {
-                break
-            }
-            depth += delta
-        }
-        node = node.nextSibling
-    }
-    hydration.next.set(parent, node)
-    const end = openMarker(parent, RANGE_CLOSE)
-
-    /* Inert: no scope/effects for the kept nodes, so disposal only evicts the range. The wake
-       swaps in a real build whose own disposer replaces this one. */
-    let disposeContent = (): void => clearBetween(start, end)
-    const wake = (): void => {
-        disposeContent()
-        const previous = RENDER.hydration
-        RENDER.hydration = undefined
-        try {
-            disposeContent = fillRange(start, end, build, props, label).dispose
-        } finally {
-            RENDER.hydration = previous
-        }
-    }
-    const cancelWake = scheduleWake(trigger, firstElementBetween(firstKept, end), wake)
-    return {
-        start,
-        end,
-        dispose: () => {
-            cancelWake()
-            disposeContent()
-        },
-    }
-}

package/src/lib/ui/effect.ts

@@ -10,9 +10,10 @@ dispose — and may be async (its teardown then runs once the promise settles, b
 only the reads before its first `await` are tracked). Returns a dispose that runs
 the final teardown and detaches it from the graph. This is abide's from-scratch
 effect primitive: the open-on-first-read / close-on-last-reader lifecycle,
-grounded in abide's own reactive core. Authored as `scope().effect(...)` (the bare
-name is reserved); this module export stays for the generated binding code that
-calls it directly (and for the SSR strip), so it carries no standalone demo.
+grounded in abide's own reactive core. Imported and called bare
+(`import { effect } from '@abide/abide/ui/effect'`); the compiler resolves the import
+binding (alias-safe) and the SSR back-end strips the call (effects are client
+lifecycle). Generated binding code also calls it directly.
 */
 // @documentation plumbing
 export function effect(fn: () => EffectResult): () => void {

package/src/lib/ui/installHotBridge.ts

@@ -1,5 +1,4 @@
 import { snippet } from '../shared/snippet.ts'
-import { deferResume } from './deferResume.ts'
 import { anchorCursor } from './dom/anchorCursor.ts'
 import { appendSnippet } from './dom/appendSnippet.ts'
 import { appendStatic } from './dom/appendStatic.ts'
@@ -8,6 +7,7 @@ import { appendTextAt } from './dom/appendTextAt.ts'
 import { attach } from './dom/attach.ts'
 import { attr } from './dom/attr.ts'
 import { awaitBlock } from './dom/awaitBlock.ts'
+import { bindSelectValue } from './dom/bindSelectValue.ts'
 import { cloneStatic } from './dom/cloneStatic.ts'
 import { each } from './dom/each.ts'
 import { eachAsync } from './dom/eachAsync.ts'
@@ -36,6 +36,7 @@ import { hotReloadEnabled } from './runtime/hotReloadEnabled.ts'
 import { hotReplace } from './runtime/hotReplace.ts'
 import { nextBlockId } from './runtime/nextBlockId.ts'
 import { scope } from './scope.ts'
+import { watch } from './watch.ts'
 
 /*
 Dev-only: exposes the abide-ui runtime plus `hotReplace` on `window.__abide`, and
@@ -54,6 +55,7 @@ export function installHotBridge(): void {
         enterScope,
         exitScope,
         effect,
+        watch,
         mount,
         appendText,
         appendTextAt,
@@ -65,11 +67,11 @@ export function installHotBridge(): void {
         attr,
         on,
         attach,
+        bindSelectValue,
         each,
         eachAsync,
         when,
         awaitBlock,
-        deferResume,
         tryBlock,
         switchBlock,
         mountSlot,

package/src/lib/ui/remoteProxy.ts

@@ -17,16 +17,20 @@ import { outboxRegistry } from './rpcOutbox/outboxRegistry.ts'
 import { currentAbortSignal } from './runtime/currentAbortSignal.ts'
 import { REQUEST_SUPERSEDED } from './runtime/REQUEST_SUPERSEDED.ts'
 import type { PersistenceStore } from './types/PersistenceStore.ts'
+import { watch } from './watch.ts'
 
 /* The framework-reserved `HttpError.kind` for a request the durable outbox parked because
    the server was unreachable — distinct from a handler-declared error name. Lets a caller
    branch with `error instanceof HttpError && error.kind === 'queued'`. */
 const QUEUED = 'queued'
 
-/* A durable RPC's per-call options. `outbox: true` parks an unreachable call for replay;
-   `store` exists for testing — production uses the default persistence store. */
+/* Build-time options the bundler stamps onto the client proxy stub. `outbox: true` parks an
+   unreachable call for replay; `streaming: true` (handler returns jsonl()/sse()) makes the bare
+   call return the Subscribable directly; `store` exists for testing (production uses the default
+   persistence store). */
 export type DurableOptions = {
     outbox?: boolean
+    streaming?: boolean
     store?: PersistenceStore
 }
 
@@ -75,6 +79,7 @@ export function remoteProxy<Args, Return>(
         method,
         url,
         clients: browserClientFlags,
+        streaming: durable?.streaming ?? false,
         /*
         The Request URL carries the mount base so the fetch routes through the
         proxy (/v2/rpc/…); the cache key keeps the bare `url` (keyForRemoteCall
@@ -143,6 +148,17 @@ export function remoteProxy<Args, Return>(
             )
         },
     })
+    /* Overwrite the inert `.watch` the shared attach bound: on the client the real reaction
+       sugar routes to the `watch` ui primitive (`fn.watch(handler)` / `fn.watch(args, handler)`).
+       Attached here — not in the shared attach — so `watch` never rides into a server bundle. */
+    Object.assign(fn, {
+        watch: (argsOrHandler: unknown, handler?: unknown) =>
+            (watch as (source: unknown, a?: unknown, b?: unknown) => () => void)(
+                fn,
+                argsOrHandler,
+                handler,
+            ),
+    })
     if (durable?.outbox === true) {
         queue = getOrCreateOutboxQueue<Args, Return>(url, fn, durable)
         Object.assign(fn, { outbox: outboxFace(queue) })