@abide/abide 0.40.2 → 0.41.1

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # abide
 
+## 0.41.1
+
+### Patch Changes
+
+- [`74f5312`](https://github.com/briancray/abide/commit/74f531260e17f48162397142fb19b3df9e081b2c) - shared replaceRange region-update seam ([`184cf41`](https://github.com/briancray/abide/commit/184cf41157ef0a5340a4a916d6cfc4f4e09b6c71))
+
+- [`74f5312`](https://github.com/briancray/abide/commit/74f531260e17f48162397142fb19b3df9e081b2c) - single-source the marker-depth and isElement helpers ([`188c6ff`](https://github.com/briancray/abide/commit/188c6ff29fcaff2c9c206b971a2f04daf9a18cb3))
+
+- [`74f5312`](https://github.com/briancray/abide/commit/74f531260e17f48162397142fb19b3df9e081b2c) - guard against double-dispose on reentrant branch swap ([`40600c7`](https://github.com/briancray/abide/commit/40600c7921c9fee9b6be947472c770af795f60c6))
+
+- [`74f5312`](https://github.com/briancray/abide/commit/74f531260e17f48162397142fb19b3df9e081b2c) - await block on marker ranges, not a node array ([`5d12e83`](https://github.com/briancray/abide/commit/5d12e83b7313a04a925df3464ef5c7669bcbc1e6))
+
+- [`74f5312`](https://github.com/briancray/abide/commit/74f531260e17f48162397142fb19b3df9e081b2c) - refresh AGENTS surface map, README, and kitchen-sink example ([`6cd7a3f`](https://github.com/briancray/abide/commit/6cd7a3f5686a69f4dd5faf87026d7f1ab0362bdb))
+
+- [`74f5312`](https://github.com/briancray/abide/commit/74f531260e17f48162397142fb19b3df9e081b2c) - single client warm-seed intake (seedResolved) ([`8c3c19e`](https://github.com/briancray/abide/commit/8c3c19ed0a4d4244cb2634c025ef9ff88b7c9670))
+
+- [`74f5312`](https://github.com/briancray/abide/commit/74f531260e17f48162397142fb19b3df9e081b2c) - centralize comment-marker sentinels and detached-range builder ([`99d4499`](https://github.com/briancray/abide/commit/99d44991c499b96fc016c3d204cb4dafa340cbe1))
+
+- [`74f5312`](https://github.com/briancray/abide/commit/74f531260e17f48162397142fb19b3df9e081b2c) - unify skeleton positional model on shared walks ([`cbb9daa`](https://github.com/briancray/abide/commit/cbb9daaa6f31532331df44136dd029f3e32cdfd7))
+
+- [`f3e0a13`](https://github.com/briancray/abide/commit/f3e0a132f9f9fbb020a8c783a0b54d3b37457e39) - Coalesce reactive writes inside event handlers
+
+    Event handlers now batch their writes: a handler that sets several signals re-runs
+    each dependent effect/computed/DOM-binding once on the handler's exit instead of once
+    per write (the previous default flushed eagerly per write). The change stays fully
+    synchronous — the flush runs at handler-end before it returns — so the causal stack
+    (`dispatch → handler → effects`) is intact and server/client scheduling stays identical.
+
+    Factored the batch idiom `createDoc`/`clientPage` inlined into a shared, nesting-safe
+    `batch()` (flushes only on the depth-0 exit) and migrated both onto it, so a handler
+    that triggers a doc patch now coalesces end-to-end rather than flushing mid-handler.
+
+    A handler writing N fields cuts dependent re-runs N× (bench: an 8-field form handler
+    drops aggregate re-runs 8× and runs ~4.8× faster). Single-write handlers and navigation
+    (already batched) are unchanged. New contract, pinned by tests: a handler that writes
+    then synchronously reads the bound DOM sees the pre-write value until it returns; signal
+    reads stay current.
+
+- [`f26cba2`](https://github.com/briancray/abide/commit/f26cba22b92683f7316cc7212c5fe10500bdad13) - `abide check`: declare the `each` `index` binding in the type-check shadow
+
+    `index="i"` (0.41.0) was bound in the build and SSR passes but not in the shadow the
+    type-checker reads, so `{i}` in a row body false-positived "Cannot find name 'i'". The
+    shadow now declares the index as a `number` inside the loop body, matching the runtime.
+
+## 0.41.0
+
+### Minor Changes
+
+- [`ba08127`](https://github.com/briancray/abide/commit/ba081270c4721d64655457681e4ebcc79681f1d4) - `index="i"` on `<template each>` — bind the row's reactive position
+
+    `<template each={list} as="item" key="item.id" index="i">` binds the iteration index to a name. In a keyed `each` the index is reactive: a reorder/insert/remove that shifts a surviving row repaints its `{i}` in place (same DOM, no rebuild), riding the same `Object.is` cell-write path as the item binding. SSR renders the index via `entries()` so hydration stays congruent; async `each await` carries the stream arrival ordinal.
+
+- [`ba08127`](https://github.com/briancray/abide/commit/ba081270c4721d64655457681e4ebcc79681f1d4) - In-place reactive updates for `<template await>` `then` values and keyed `each` items
+
+    A re-settling `await` block and a re-keyed `each` row no longer rebuild their subtree — they update through a reactive value cell instead, so a live cache patch updates only what changed and never flashes the surrounding DOM.
+
+    - `awaitBlock` keeps the mounted `then`-branch across a re-run, setting a reactive value cell rather than detaching + rebuilding. A revalidation now keeps the stale branch visible and patches in place; the branch is rebuilt only across a pending/catch ↔ then kind change.
+    - The `then` binding is lowered to read that cell reactively — both a single identifier (`then="value"`) and a destructure (`then="[a, b]"` / `{ x, y }`), where each leaf is derived per-read so only the leaves whose value changed propagate.
+    - Keyed `each` holds each row's item in a reactive cell; a re-key with a changed value (same key, new object) writes the cell through `Object.is`, re-running only that row's effects with no DOM rebuild. The row `render` now receives `State<T>` (the compiler binds the `as` name to read it).
+    - A destructuring `each … as="[a, b]"` (or `{ x, y }`) with no explicit `key` now defaults the key to the row's raw item identity, like a plain `as`. Previously the default key re-emitted the destructure pattern, allocating a fresh array/object per reconcile, so keys never matched and every row rebuilt on any list change.
+    - A block value binding (`then="x"` / `each … as="x"`) now correctly shadows a same-named component `state`/`computed`/`derived`: it is a nearer lexical scope, so `{x}` in the block reads the resolved/row cell rather than the component signal. A destructure pattern's default/computed-key initializer is also lowered, so `then="{ id, label = fallback }"` resolves `fallback` against the component scope instead of emitting it raw.
+
 ## 0.40.2
 
 ### Patch Changes

package/README.md

@@ -1,24 +1,24 @@
 # abide
 
-**One typed declaration fans out to HTTP, a CLI, an MCP tool, and an OpenAPI
-spec — and the bundler swaps the runtime per side.**
+**One typed declaration fans out to HTTP, a CLI, an MCP tool, and an
+OpenAPI spec — the bundler swaps the runtime per side.**
 
-abide is an isomorphic framework on Bun and web standards: you declare a verb,
-a socket, or a component once, and the same callable runs server-side, in the
-browser, from the terminal, and from an agent — the bundler decides which
-runtime each side gets. Built for humans *and* machines.
+abide is an isomorphic framework on Bun where you write a function once and
+it serves every consumer: a browser fetch, an in-process SSR call, a CLI
+subcommand, an MCP tool, an OpenAPI operation. The same callable keeps its
+name and behaviour on both sides — the bundler decides whether it runs the
+real handler or a network proxy. Built for humans _and_ machines.
 
-- One direct dependency — the TypeScript compiler, used by `abide check`.
-  Tailwind is an optional peer. Everything runs on a single Bun runtime
-  (≥ 1.3.0); no second toolchain.
+- One direct dependency (`typescript`); `tailwindcss` + `bun-plugin-tailwind`
+  are optional peers. Single runtime: Bun ≥ 1.3.0.
 
 ## Quick start
 
 ```sh
-bunx abide scaffold my-app   # copies the template, installs, starts dev
+bunx abide scaffold my-app   # scaffolds, installs deps, and starts dev
 ```
 
-Or clone the kitchen-sink and run it:
+Or read the full feature tour in the kitchen-sink example:
 
 ```sh
 git clone https://github.com/briancray/abide
@@ -29,134 +29,143 @@ bun run dev
 
 ## RPCs
 
-An RPC is one export per file under `src/server/rpc/`. **The file path is the
-URL.** The schema validates arguments and projects the MCP tool, the CLI flags,
-and the OpenAPI operation. The contract is Standard Schema — zod, valibot, or
-arktype, unadapted.
+An RPC is one export per file under `src/server/rpc/`. The file path is the
+URL; the export name is the verb. A Standard Schema (zod / valibot / arktype,
+unadapted) validates the args and projects the same shape into the MCP tool,
+the CLI flags, and the OpenAPI operation.
 
 ```ts
-// src/server/rpc/getMessages.ts — file path is the route: GET /getMessages
+// src/server/rpc/getMessages.ts
 import { GET } from '@abide/abide/server/GET'
 import { json } from '@abide/abide/server/json'
 import { z } from 'zod'
+import { recent } from '../../chatState.ts'
 
-const inputSchema = z.object({ room: z.string() })
+const inputSchema = z.object({ room: z.string(), limit: z.coerce.number().default(20) })
 
-export const getMessages = GET(({ room }) => json(board(room)), { inputSchema })
+export const getMessages = GET(({ room, limit }) => json(recent(room).slice(-limit)), {
+    inputSchema,
+})
 ```
 
-One declaration, five surfaces:
+One declaration, every surface:
 
 ```text
               getMessages = GET(fn, { inputSchema })
                               │
-   ┌───────────┬─────────────┼────────────┬──────────────┐
- SSR call   browser fetch   MCP tool    CLI command    OpenAPI op
-cache(fn)() typed proxy()  (read-only)  abide ... cli  /openapi.json
+      ┌─────────────┬─────────┼──────────┬──────────────┐
+      ▼             ▼         ▼          ▼              ▼
+  SSR call      browser    MCP tool   CLI sub-      OpenAPI
+  cache(fn)()   fetch       (read)    command       operation
+                proxy
 ```
 
-A schema unlocks the CLI everywhere and MCP for read-only verbs; a mutating
-verb never auto-exposes to MCP — it needs explicit `clients: { mcp: true }`.
-Consume the verb four ways: `cache(getMessages)({ room })` resolves in-process
-during SSR, the same call hits a swapped `fetch` in the browser,
-`getMessages.raw(args)` returns the undecoded `Response`, and
-`getMessages.stream(args)` is an iterable view of the body.
+A schema unlocks the CLI for every verb and MCP for read-only verbs (`GET` /
+`HEAD`); a mutating verb never auto-exposes to MCP — it needs an explicit
+`clients: { mcp: true }`. Consume the verb four ways: `cache(getMessages)(args)`
+in-process (warm SSR hydration), the swapped `fetch` proxy in the browser,
+`getMessages.raw(args)` for the untouched `Response`, and
+`getMessages.stream(args)` to iterate a `jsonl`/`sse` body.
 
-> Query args travel as strings — validate with `z.coerce.*`. The per-verb
-> `timeout` (504 on every surface) is distinct from `ABIDE_CLIENT_TIMEOUT`.
+> Query args arrive as strings — wrap numeric/boolean fields in `z.coerce.*`.
+> The per-verb `timeout` (504 on every surface) is distinct from the
+> client-side `ABIDE_CLIENT_TIMEOUT`.
 
 ## Sockets
 
 A socket is one broadcast topic per file under `src/server/sockets/`. A
-`Socket<T>` is an isomorphic `AsyncIterable<T>`, and every socket multiplexes
-onto one websocket at `/__abide/sockets`.
+`Socket<T>` is an isomorphic `AsyncIterable<T>`; every socket multiplexes onto
+one WebSocket at `/__abide/sockets`.
 
 ```ts
-// src/server/sockets/messages.ts — topic name = file name: `messages`
+// src/server/sockets/chat.ts
 import { socket } from '@abide/abide/server/socket'
 import { z } from 'zod'
 
-const schema = z.object({ id: z.string(), room: z.string(), from: z.string(), text: z.string() })
+const schema = z.object({ id: z.string(), from: z.string(), text: z.string(), at: z.number() })
 
-// retain the last 50 frames; evict any older than an hour
-export const messages = socket({ schema, tail: 50, ttl: 3_600_000 })
-export type Message = z.infer<typeof schema>
+// retain the last 100 frames; evict any older than an hour
+export const chat = socket({ schema, tail: 100, ttl: 3_600_000 })
+export type ChatMessage = z.infer<typeof schema>
 ```
 
-The socket also has an HTTP face at `/__abide/sockets/messages`, for clients
-that can't speak the ws multiplex: `GET` returns the retained tail, `POST`
-publishes — gated by `clientPublish` (off by default, so the POST 403s).
+It also has an HTTP face for clients that can't speak the multiplex (the CLI
+and MCP): `GET /__abide/sockets/chat` returns the retained tail, and
+`POST /__abide/sockets/chat` publishes — gated by `clientPublish` (default off,
+so browsers publish through a validating verb instead).
 
-## Components
+## Components — the full template
 
-A `.abide` component is the payoff: it imports the verb and the socket above
-and ties them together with the native `<template>` grammar. Reactive state is
-reached only through `scope()` — `scope().state()` is writable,
-`scope().computed()` is read-only. `props()` and `effect()` are in-scope, no
-import.
+A `.abide` component pulls the verb and the socket above into one page and
+exercises the template grammar. `scope`, `props`, `effect`, `html`, and
+`snippet` are ambient — no import needed.
 
+<!-- prettier-ignore -->
 ```html
 <script>
 import { cache } from '@abide/abide/shared/cache'
 import { tail } from '@abide/abide/ui/tail'
 import { getMessages } from '$server/rpc/getMessages.ts'
-import { postMessage } from '$server/rpc/postMessage.ts'
-import { messages } from '$server/sockets/messages.ts'
+import { publishChat } from '$server/rpc/publishChat.ts'
+import { chat } from '$server/sockets/chat.ts'
 import Avatar from '$ui/Avatar.abide'
 
-const { room = 'lobby' } = props<{ room?: string }>()
+const { room } = props()
 
-// SSR-warm history; live frames then stream over the ws
-const seed = cache(getMessages)({ room })
-const live = scope().computed(() => tail(messages, { last: 50 }))
+// warm on the server, live on the client
+const history = scope().computed(() => cache(getMessages)({ room }))
+const latest = scope().computed(() => tail(chat))
 
 let from = scope().state('alice')
 let text = scope().state('')
 let pinned = scope().state(false)
-let sort = scope().state('newest')
+let view = scope().state('all')
 
 async function send() {
-    await postMessage({ room, from, text })
+    await publishChat({ from, text })
     text = ''
 }
 </script>
 
-<template name="bubble" args={msg}>
-    <li class="flex gap-2"><Avatar name={msg.from} /> <b>{msg.from}</b> {msg.text}</li>
+<template name="line" args={message}>
+    <li><Avatar name={message.from} /> <b>{message.from}</b>: {message.text}</li>
 </template>
 
-<form onsubmit={send} class="flex gap-2">
-    <input bind:value={from} class="border px-2" />
-    <input bind:value={text} placeholder="message" class="flex-1 border px-2" />
+<form onsubmit={send}>
+    <input bind:value={from} placeholder="name" />
+    <input bind:value={text} placeholder="message" />
     <label><input type="checkbox" bind:checked={pinned} /> pin</label>
-    <label><input type="radio" bind:group={sort} value="newest" /> newest</label>
-    <button disabled={!text} class="border px-3">send</button>
+    <label><input type="radio" bind:group={view} value="all" /> all</label>
+    <label><input type="radio" bind:group={view} value="mine" /> mine</label>
+    <button disabled={!text}>send</button>
 </form>
 
-<template if={pinned}>
-    <p class="text-xs text-amber-700">room pinned</p>
-    <template else><p class="text-xs text-slate-400">not pinned</p></template>
+<template if={latest}>
+    <p>latest from {latest.from}</p>
+<template else>
+    <p>no messages yet</p>
 </template>
 
-<template switch={sort}>
-    <template case={'newest'}><p class="text-xs">newest first</p></template>
-    <template default><p class="text-xs">oldest first</p></template>
+<template switch={view}>
+<template case="mine"><p>showing your messages</p></template>
+<template default><p>showing every message</p></template>
 </template>
 
-<template await={seed}>
-    <p class="text-xs text-slate-500">loading…</p>
-    <template then="history">
-        <ul class="mt-3 space-y-1">
-            <template each={live ?? history} as="msg" key="msg.id">
-                {bubble(msg)}
-            </template>
-        </ul>
-    </template>
-    <template catch="err"><p class="text-rose-700">{err.message}</p></template>
+<template await={history}>
+    <p>loading…</p>
+<template then="data">
+    <ul>
+        <template each={data} as="message" key="message.id" index="i">
+            {i}. {line(message)}
+        </template>
+    </ul>
+<template catch="reason">
+    <p>failed: {reason.message}</p>
+</template>
 </template>
 
 <style>
-    li { font-size: 0.875rem; }
+form { display: flex; gap: 0.5rem; }
 </style>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.40.2",
+    "version": "0.41.1",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",

package/src/lib/ui/compile/SSR_ESCAPE.ts

@@ -1,3 +1,5 @@
+import { SNIPPET_CLOSE, SNIPPET_OPEN } from '../runtime/RANGE_MARKER.ts'
+
 /*
 Source text for the `$esc` / `$attr` / `$spread` / `$text` / `$snip` helpers injected
 into every SSR render body. `$esc` escapes the five HTML-significant characters. `$attr`
@@ -30,6 +32,6 @@ export const SSR_ESCAPE =
     "const $SNIP = Symbol.for('abide.snippet');\n" +
     'const $snip = (s) => ({ [$SNIP]: s });\n' +
     'const $text = (v) => (v !== null && typeof v === "object" && $SNIP in v) ' +
-    "? ('<!--abide:snippet-->' + v[$SNIP] + '<!--/abide:snippet-->') " +
+    `? ('<!--${SNIPPET_OPEN}-->' + v[$SNIP] + '<!--${SNIPPET_CLOSE}-->') ` +
     ': (v !== null && typeof v === "object" && $RAW in v) ' +
     "? ('<!--abide:html-->' + v[$RAW] + '<!--/abide:html-->') : $esc(v);"

package/src/lib/ui/compile/compileShadow.ts

@@ -417,6 +417,11 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             if (node.key !== undefined) {
                 builder.raw(`void (${node.key});\n`)
             }
+            /* `index="i"` binds the row's position — always a number (the row ordinal,
+               or an async stream's arrival count). Declare it so body references check. */
+            if (node.index !== undefined) {
+                builder.raw(`const ${node.index}: number = 0;\n`)
+            }
             emitNodes(node.children, builder)
             builder.raw('}\n')
             return

package/src/lib/ui/compile/destructureBindingNames.ts

@@ -0,0 +1,38 @@
+import ts from 'typescript'
+
+/*
+The leaf binding names a destructuring pattern introduces, in source order —
+`[a, b]` → `a, b`; `{ x, y: z }` → `x, z`; `[a, ...rest]` → `a, rest`; nested
+patterns flatten. Used to re-bind an `await` `then` destructure as per-leaf
+reactive reads of the resolved-value cell, so a re-settle updates each leaf in
+place instead of rebuilding the branch.
+*/
+export function destructureBindingNames(pattern: string): string[] {
+    const source = ts.createSourceFile(
+        'pattern.ts',
+        `const ${pattern} = $;`,
+        ts.ScriptTarget.Latest,
+        true,
+    )
+    const names: string[] = []
+    const collect = (name: ts.BindingName): void => {
+        if (ts.isIdentifier(name)) {
+            names.push(name.text)
+            return
+        }
+        // Object/array pattern: each element binds; array holes are OmittedExpression, not BindingElement.
+        for (const element of name.elements) {
+            if (ts.isBindingElement(element)) {
+                collect(element.name)
+            }
+        }
+    }
+    for (const statement of source.statements) {
+        if (ts.isVariableStatement(statement)) {
+            for (const declaration of statement.declarationList.declarations) {
+                collect(declaration.name)
+            }
+        }
+    }
+    return names
+}

package/src/lib/ui/compile/generateBuild.ts

@@ -1,9 +1,11 @@
 import { assertExhaustive } from '../../shared/assertExhaustive.ts'
 import { HOLE_ATTRIBUTE } from '../runtime/HOLE_ATTRIBUTE.ts'
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
+import { ANCHOR } from '../runtime/RANGE_MARKER.ts'
 import { asOutlet } from './asOutlet.ts'
 import { bindListenEvent } from './bindListenEvent.ts'
 import { composeProps } from './composeProps.ts'
+import { destructureBindingNames } from './destructureBindingNames.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isControlFlow } from './isControlFlow.ts'
 import { isWhitespaceText } from './isWhitespaceText.ts'
@@ -17,6 +19,12 @@ import { staticTextPart } from './staticTextPart.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import { VOID_TAGS } from './VOID_TAGS.ts'
 
+/* The skeleton positioning anchor a control-flow block / component / slot / outlet
+   stamps into its skeleton markup, sourced from the same `ANCHOR` wire-alphabet constant
+   the client's anchor scan (`skeleton`) matches — so the markup the build clones and the
+   markup the scan reads can never drift on a literal. */
+const ANCHOR_COMMENT = `<!--${ANCHOR}-->`
+
 /*
 Generates the build statements for a parsed template: element creation, static
 attributes, reactive `attr`/`text` bindings, `on` listeners, keyed `each`, and
@@ -85,10 +93,50 @@ export function generateBuild(
         expression: lowerExpression,
         statement: lowerStatement,
         withNestedScripts,
+        withLocalDerived,
         bindRead,
         bindWrite,
     } = lowerContext(stateNames, derivedNames, computedNames)
 
+    /* A value binding the runtime can update in place (an `await` `then` value, a keyed `each`
+       item) is passed as a reactive `.value` cell; the consuming branch/row reads its NAME(s)
+       as a deref so it re-runs in place when a re-settle/re-key sets the cell. */
+    const isPlainIdentifier = (name: string | undefined): name is string =>
+        name !== undefined && /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name)
+
+    /* How a reactive value param binds: `param` is the thunk's value parameter (the cell),
+       `prefix` declares any per-leaf readers, `localNames` enter the deref scope for the body.
+       A plain identifier reads the cell directly (`item` → `item.value`); a destructure
+       re-applies over the cell per read so each leaf stays reactive (JS handles
+       defaults/rest/rename/nesting). The caller lowers the body with `localNames` derived. */
+    function reactiveBinding(authorParam: string): {
+        param: string
+        prefix: string
+        localNames: string[]
+    } {
+        if (isPlainIdentifier(authorParam)) {
+            return { param: authorParam, prefix: '', localNames: [authorParam] }
+        }
+        const cellParam = nextVar('aw')
+        const deriveVar = nextVar('ad')
+        const leaves = destructureBindingNames(authorParam)
+        /* Lower the destructure declaration so a default/computed-key initializer that
+           references a component signal (`{ label = fallback }`, `{ [key]: v }`) is rewritten
+           to its `model`/cell form — the bound leaf names are name-slots and stay untouched.
+           A pattern with no such initializer lowers to itself, so the common case is unchanged
+           and SSR (which lowers the same declaration) stays congruent. */
+        const declaration = lowerStatement(`const ${authorParam} = ${cellParam}.value`)
+        const prefix =
+            `const ${deriveVar} = { get value() { ${declaration} return { ${leaves.join(', ')} }; } };\n` +
+            leaves
+                .map(
+                    (leaf) =>
+                        `const ${leaf} = { get value() { return ${deriveVar}.value.${leaf}; } };\n`,
+                )
+                .join('')
+        return { param: cellParam, prefix, localNames: leaves }
+    }
+
     /* Emits the wiring for one non-static attribute against an already-obtained skeleton
        element var — reactive `attr`, `on` listener, `attach`, or a two-way `bind`. */
     function dynamicAttr(
@@ -172,7 +220,7 @@ export function generateBuild(
                     binds.push(
                         `appendTextAt(${skVar}.an[${holeIndex(anIndex, part)}], ${namedThunk('text', `return (${lowerExpression(part.code)})`)});\n`,
                     )
-                    return '<!--a-->'
+                    return ANCHOR_COMMENT
                 })
                 .join('')
         }
@@ -185,7 +233,7 @@ export function generateBuild(
                element — so its root lays out as a true direct child of `anchor.parentNode`. */
             const anchorVar = anchorVarAt(node, skVar, binds)
             binds.push(generateChild(node, `${anchorVar}.parentNode`, `anchorCursor(${anchorVar})`))
-            return '<!--a-->'
+            return ANCHOR_COMMENT
         }
         if (node.kind === 'script') {
             /* A nested `<script>` (scoped reactive block) emits no markup — its lowered body
@@ -210,7 +258,7 @@ export function generateBuild(
                No wrapper element — the filled child lays out as a direct child of the parent. */
             const anchorVar = anchorVarAt(node, skVar, binds)
             binds.push(`outlet(${anchorVar}.parentNode, anchorCursor(${anchorVar}));\n`)
-            return '<!--a-->'
+            return ANCHOR_COMMENT
         }
         if (node.tag === 'slot') {
             /* A `<slot>` outlet at its position: an `<!--a-->` anchor, the slot's content
@@ -220,7 +268,7 @@ export function generateBuild(
             binds.push(
                 `mountSlot(${anchorVar}.parentNode, (${hostVar}) => {\n${generateSlot(node, hostVar)}}, anchorCursor(${anchorVar}));\n`,
             )
-            return '<!--a-->'
+            return ANCHOR_COMMENT
         }
         const hasReactiveAttr = node.attrs.some((attr) => attr.kind !== 'static')
         const reactiveTextChild = node.children.find(
@@ -498,13 +546,21 @@ export function generateBuild(
         const pending = node.blocking
             ? []
             : node.children.filter((child) => child.kind !== 'branch')
+        /* The resolved value is reactive: a re-settle updates it in place rather than
+           rebuilding the branch (see awaitBlock). The branch reads it as a `.value` cell. */
         const thenThunk = node.blocking
             ? branchThunk(
                   node.children.filter((child) => child.kind !== 'branch'),
                   node.as ?? '_value',
                   finallyChildren,
+                  true,
+              )
+            : branchThunk(
+                  thenBranch?.children ?? [],
+                  thenBranch?.as ?? '_value',
+                  finallyChildren,
+                  true,
               )
-            : branchThunk(thenBranch?.children ?? [], thenBranch?.as ?? '_value', finallyChildren)
         /* Neither catch nor finally → pass `undefined` so awaitBlock re-throws the
            rejection (surfacing it) instead of rendering an empty branch. A finally-only
            block keeps a catch thunk that renders just finally. */
@@ -536,18 +592,29 @@ export function generateBuild(
         children: TemplateNode[],
         valueParam?: string,
         finallyChildren: TemplateNode[] = [],
+        reactiveValue = false,
     ): string {
         const parentParam = nextVar('p')
-        const head =
-            valueParam === undefined ? `(${parentParam})` : `(${parentParam}, ${valueParam})`
-        const body = withNestedScripts(children, () => generateChildren(children, parentParam))
+        /* A reactive value (an `await` `then`) arrives as a `.value` cell the runtime can set
+           in place, so the branch re-runs in place on a re-settle instead of being rebuilt. */
+        const binding =
+            reactiveValue && valueParam !== undefined ? reactiveBinding(valueParam) : undefined
+        const param = binding?.param ?? valueParam
+        const prefix = binding?.prefix ?? ''
+        const localNames = binding?.localNames ?? []
+        const head = param === undefined ? `(${parentParam})` : `(${parentParam}, ${param})`
+        const body = withNestedScripts(children, () =>
+            localNames.length === 0
+                ? generateChildren(children, parentParam)
+                : withLocalDerived(localNames, () => generateChildren(children, parentParam)),
+        )
         const finallyBody =
             finallyChildren.length > 0
                 ? withNestedScripts(finallyChildren, () =>
                       generateChildren(finallyChildren, parentParam),
                   )
                 : ''
-        return `${head} => {\n${body}${finallyBody}}`
+        return `${head} => {\n${prefix}${body}${finallyBody}}`
     }
 
     /* True when a branch has content worth a render thunk — vs an absent/empty branch
@@ -626,13 +693,30 @@ export function generateBuild(
         before: string,
     ): string {
         const rowParam = nextVar('p')
+        /* The item is a reactive `.value` cell so a re-key with a changed value updates the row
+           in place (no rebuild). `keyOf` receives the RAW item; the key expression is lowered
+           with the author name plain — derive it BEFORE the row body puts that name in the
+           deref scope. With no explicit `key`, default the key to the item's own identity: a
+           plain `as` returns its name; a destructuring `as` binds a fresh param and returns
+           THAT, not the pattern re-wrapped (`[i,crumb]` → `[i,crumb]` would allocate a fresh
+           array per reconcile, so keys never match and every row rebuilds). An explicit `key`
+           destructures the item via `node.as` to read its leaves. */
+        const rawItemParam = isPlainIdentifier(node.as) ? node.as : nextVar('k')
+        const keyParam = node.key === undefined ? rawItemParam : node.as
+        const keyExpression = node.key === undefined ? rawItemParam : lowerExpression(node.key)
+        const binding = reactiveBinding(node.as)
+        /* `index="i"` binds the row's position as a third reactive cell param (the runtime
+           always passes it). It is a plain identifier — read as `i.value` — so it enters the
+           body's deref scope alongside the item's leaf names; an unnamed param when absent. */
+        const indexParam = node.index === undefined ? '' : `, ${node.index}`
+        const bodyLocalNames =
+            node.index === undefined ? binding.localNames : [...binding.localNames, node.index]
         /* The row body builds its children (a `<script>` declares per-row local signals,
            emitted in document order) into the row parent. A `<template catch>` child is
            consumed by the async-each, not the row — `generateChildren` skips it. */
         const rowBody = withNestedScripts(node.children, () =>
-            generateChildren(node.children, rowParam),
+            withLocalDerived(bodyLocalNames, () => generateChildren(node.children, rowParam)),
         )
-        const keyExpression = node.key === undefined ? node.as : lowerExpression(node.key)
         /* `await` → the AsyncIterable runtime, drained row-by-row on the client, with an
            optional `<template catch>` branch rendered (after the streamed rows) when the
            iterator rejects. Absent → `undefined`, so the rejection surfaces instead. */
@@ -643,7 +727,7 @@ export function generateBuild(
             : ''
         return (
             `${fn}(${parentVar}, () => (${lowerExpression(node.items)}), ` +
-            `(${node.as}) => (${keyExpression}), (${rowParam}, ${node.as}) => {\n${rowBody}}${catchArg}, ${before});\n`
+            `(${keyParam}) => (${keyExpression}), (${rowParam}, ${binding.param}${indexParam}) => {\n${binding.prefix}${rowBody}}${catchArg}, ${before});\n`
         )
     }