@abide/abide 0.34.1 → 0.35.0

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

@@ -12,9 +12,10 @@ calls type-check — `scope()` is the authored reactive surface (`scope().state(
 `.computed(...)` / `.undo()` …), so it must resolve like any import. `state`/`linked`/
 `computed` are ALSO declared ambiently as a fallback for the rare bare/nested use the
 top-level rewrite doesn't project (their top-level declarations become value types, so
-these are normally unused — fine, the shadow disables noUnusedLocals). `prop` is sugar
-too, but every `prop()` declaration is rewritten away, so it never appears here.
-`$props` is the legacy untyped prop bag (pre-`prop()` sugar) made available raw.
+these are normally unused — fine, the shadow disables noUnusedLocals). `props` is the prop
+reader — destructured (`const { a = 1 } = props<Shape>()`); declared returning its type
+argument (default `Record<string, any>`) so each binding inherits its prop type and its
+`= default` narrows.
 */
 const SHADOW_PREAMBLE = `import { effect } from '${ABIDE_PACKAGE_NAME}/ui/effect'
 import { html } from '${ABIDE_PACKAGE_NAME}/shared/html'
@@ -23,7 +24,7 @@ import { scope } from '${ABIDE_PACKAGE_NAME}/ui/scope'
 declare function state<T>(initial?: T, transform?: (next: T, previous: T) => T): { value: T }
 declare function linked<T>(seed: () => T, transform?: (next: T, previous: T) => T): { value: T }
 declare function computed<T>(compute: () => T): { readonly value: T }
-declare const $props: Record<string, (() => unknown) | undefined>
+declare function props<T = Record<string, any>>(): T
 void [effect, html, snippet, scope]
 `
 
@@ -36,9 +37,9 @@ expressions and child-component props, with diagnostics mapped back through the
 returned segments.
 
 The script's signal surface is rewritten to value types:
-  let count = state(0)            →  let count = (0)
-  const total = computed(() => …)  →  const total = (() => …)()
-  let title = prop<string>('t')   →  Props field + `let title = props['t']`
+  let count = state(0)               →  let count = (0)
+  const total = computed(() => …)     →  const total = (() => …)()
+  const { a } = props<{ a: T }>()    →  `__Props = { a: T }` + the verbatim destructure
 Everything else (functions, plain consts, imports) is emitted verbatim, so
 expressions inside it (e.g. a computed's compute body) are checked and mapped too.
 */
@@ -50,7 +51,7 @@ export function compileShadow(source: string): CompiledShadow {
     const scriptStart = leadingScript ? source.indexOf('>', leadingScript.index) + 1 : 0
     const templateStart = leadingScript ? (leadingScript.index ?? 0) + leadingScript[0].length : 0
 
-    const { imports, types, scope, props } = analyzeScript(scriptBody, scriptStart)
+    const { imports, types, scope, propsShapes } = analyzeScript(scriptBody, scriptStart)
     builder.raw(SHADOW_PREAMBLE)
     for (const line of imports) {
         builder.flush(line)
@@ -62,11 +63,20 @@ export function compileShadow(source: string): CompiledShadow {
     for (const line of types) {
         builder.flush(line)
     }
-    builder.raw(`interface __Props {\n${props.join('\n')}\n}\n`)
-    /* async so `await` blocks are legal; never executed, so the return is void. */
-    builder.raw('export default async function (props: __Props): Promise<void> {\n')
+    /* `__Props` is the parent-facing prop shape: each `props<Shape>()` destructure
+       contributes its whole `Shape` (intersected if there's more than one), or an empty
+       object for a component that reads no props. */
+    builder.raw(
+        propsShapes.length > 0
+            ? `type __Props = ${propsShapes.join(' & ')}\n`
+            : `interface __Props {}\n`,
+    )
+    /* `__props` (not `props`) so the destructuring `props()` sugar resolves to the
+       declared function, not this parameter. async so `await` blocks are legal; never
+       executed, so the return is void. */
+    builder.raw('export default async function (__props: __Props): Promise<void> {\n')
     /* Reference props so an all-optional bag with no reads doesn't read as unused. */
-    builder.raw('void props;\n')
+    builder.raw('void __props;\n')
     for (const line of scope) {
         builder.flush(line)
     }
@@ -137,20 +147,20 @@ type ScriptAnalysis = {
     imports: ScopeLine[]
     types: ScopeLine[]
     scope: ScopeLine[]
-    props: string[]
+    propsShapes: string[]
 }
 
 /* Walks the leading `<script>` and produces the shadow's module imports, the
-   module-scope type declarations, the value-typed scope lines, and the Props
-   interface fields. `scriptStart` is the body's absolute offset in the source, so
-   verbatim spans map back exactly. */
+   module-scope type declarations, the value-typed scope lines, and the `props<Shape>()`
+   prop shapes. `scriptStart` is the body's absolute offset in the source, so verbatim
+   spans map back exactly. */
 function analyzeScript(scriptBody: string, scriptStart: number): ScriptAnalysis {
     const imports: ScopeLine[] = []
     const types: ScopeLine[] = []
     const scope: ScopeLine[] = []
-    const props: string[] = []
+    const propsShapes: string[] = []
     if (scriptBody.trim() === '') {
-        return { imports, types, scope, props }
+        return { imports, types, scope, propsShapes }
     }
     const file = ts.createSourceFile('script.ts', scriptBody, ts.ScriptTarget.Latest, true)
     /* A verbatim span: original text + the segment mapping it back, relative to the
@@ -180,10 +190,10 @@ function analyzeScript(scriptBody: string, scriptStart: number): ScriptAnalysis
             continue
         }
         for (const declaration of reactive) {
-            scope.push(scopeLineFor(declaration, props, verbatim, span))
+            scope.push(scopeLineFor(declaration, propsShapes, verbatim, span))
         }
     }
-    return { imports, types, scope, props }
+    return { imports, types, scope, propsShapes }
 }
 
 /* Value-projects a nested control-flow `<script>` body the way `analyzeScript`
@@ -207,8 +217,8 @@ function projectNestedScript(code: string): string {
         .join('\n')
 }
 
-/* The `state`/`computed`/`prop` declarations in a variable statement, or undefined
-   if it isn't one declaring them (so the caller emits it verbatim). A statement
+/* The `state`/`computed`/`linked`/`props()` declarations in a variable statement, or
+   undefined if it isn't one declaring them (so the caller emits it verbatim). A statement
    mixing reactive and plain declarations is rare; treated as all-verbatim. */
 function reactiveDeclarations(statement: ts.Statement): ts.VariableDeclaration[] | undefined {
     if (!ts.isVariableStatement(statement)) {
@@ -220,7 +230,7 @@ function reactiveDeclarations(statement: ts.Statement): ts.VariableDeclaration[]
 }
 
 /* The callee name of a `NAME = state(...)` / `linked(...)` / `computed(...)` /
-   `prop(...)` decl — bare or the explicit scope form (`scope().state(...)` / `c.state(...)`),
+   `props()` decl — bare or the explicit scope form (`scope().state(...)` / `c.state(...)`),
    receiver-agnostic (the method name marks it reactive). */
 function signalCallee(declaration: ts.VariableDeclaration): string | undefined {
     const initializer = declaration.initializer
@@ -237,10 +247,10 @@ function signalCallee(declaration: ts.VariableDeclaration): string | undefined {
 }
 
 /* Builds one scope line for a reactive declaration, projecting it to its value
-   type. `prop` also contributes a Props field (pushed into `props`). */
+   type. A `props()` destructure contributes its whole shape (pushed into `propsShapes`). */
 function scopeLineFor(
     declaration: ts.VariableDeclaration,
-    props: string[],
+    propsShapes: string[],
     verbatim: (node: ts.Node) => string,
     span: (node: ts.Node, prefixLength: number) => ShadowMapping,
 ): ScopeLine {
@@ -250,6 +260,14 @@ function scopeLineFor(
     const callee = ts.isPropertyAccessExpression(call.expression)
         ? call.expression.name.text
         : (call.expression as ts.Identifier).text
+    if (callee === 'props') {
+        /* `const {…} = props<Shape>()`: the type arg (default `Record<string, any>`)
+           IS the parent-facing prop shape, and the destructure projects verbatim against
+           the declared typed `props()` so each binding inherits its value type. */
+        const shape = call.typeArguments?.[0]
+        propsShapes.push(shape === undefined ? 'Record<string, any>' : verbatim(shape))
+        return { text: `const ${verbatim(declaration)};`, segments: [span(declaration, 6)] }
+    }
     if (callee === 'state') {
         /* state<T>(initial): T is the value type — carry it onto the `let` so an
            explicit annotation isn't lost to `any`/`any[]` inference of the initial. */
@@ -273,40 +291,27 @@ function scopeLineFor(
             segments: [span(declaration.name, 4), span(init, prefix.length)],
         }
     }
-    if (callee === 'computed' || callee === 'linked') {
-        /* computed<T>(compute) / linked<T>(seed): T is the value type — the call's
-           first arg is a thunk, so invoking it yields the value. Annotate so an
-           explicit type argument isn't lost to inference of the thunk's return. */
-        const typeNode = call.typeArguments?.[0]
-        const annotation = typeNode === undefined ? '' : `: ${verbatim(typeNode)}`
-        const fn = call.arguments[0]
-        /* `linked` is a writable `State<T>` at runtime (it reseeds AND accepts `.value =`
-           writes), so project it as `let`; `computed` is genuinely read-only, so `const`. */
-        const keyword = callee === 'linked' ? 'let' : 'const'
-        /* binding-name map offset = past the keyword + space (`let ` = 4, `const ` = 6) */
-        const keywordOffset = keyword.length + 1
-        if (fn === undefined) {
-            return {
-                text: `${keyword} ${name} = undefined;`,
-                segments: [span(declaration.name, keywordOffset)],
-            }
-        }
-        const prefix = `${keyword} ${name}${annotation} = (`
+    /* computed<T>(compute) / linked<T>(seed) — the only callees left: T is the value
+       type — the call's first arg is a thunk, so invoking it yields the value. Annotate
+       so an explicit type argument isn't lost to inference of the thunk's return. */
+    const typeNode = call.typeArguments?.[0]
+    const annotation = typeNode === undefined ? '' : `: ${verbatim(typeNode)}`
+    const fn = call.arguments[0]
+    /* `linked` is a writable `State<T>` at runtime (it reseeds AND accepts `.value =`
+       writes), so project it as `let`; `computed` is genuinely read-only, so `const`. */
+    const keyword = callee === 'linked' ? 'let' : 'const'
+    /* binding-name map offset = past the keyword + space (`let ` = 4, `const ` = 6) */
+    const keywordOffset = keyword.length + 1
+    if (fn === undefined) {
         return {
-            text: `${prefix}${verbatim(fn)})();`,
-            segments: [span(declaration.name, keywordOffset), span(fn, prefix.length)],
+            text: `${keyword} ${name} = undefined;`,
+            segments: [span(declaration.name, keywordOffset)],
         }
     }
-    /* prop<T>('key'): Props field `key[?]: T`, scope binding read from props. */
-    const key = call.arguments[0]
-    const keyText = key !== undefined && ts.isStringLiteralLike(key) ? key.text : name
-    const typeNode = call.typeArguments?.[0]
-    const typeText = typeNode === undefined ? 'unknown' : verbatim(typeNode)
-    const optional = typeNode === undefined || /\bundefined\b/.test(typeText)
-    props.push(`    ${JSON.stringify(keyText)}${optional ? '?' : ''}: ${typeText}`)
+    const prefix = `${keyword} ${name}${annotation} = (`
     return {
-        text: `let ${name} = props[${JSON.stringify(keyText)}];`,
-        segments: [span(declaration.name, 4)],
+        text: `${prefix}${verbatim(fn)})();`,
+        segments: [span(declaration.name, keywordOffset), span(fn, prefix.length)],
     }
 }
 

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

@@ -2,26 +2,28 @@ import ts from 'typescript'
 import { REACTIVE_CALLEES } from './REACTIVE_CALLEES.ts'
 import { renameSignalRefs } from './renameSignalRefs.ts'
 
-/* The reactive primitives that must be reached through a scope (`prop` is excluded — it
-   reads parent-passed props, not scope data, so it stays a bare call). A bare call to one
-   of these is a compile error: reactive state is owned by a scope and the surface must show
+/* The reactive primitives that must be reached through a scope. A bare call to one of
+   these is a compile error: reactive state is owned by a scope and the surface must show
    it (`scope().state(...)`), so a reader always sees the scope interaction. */
 const SCOPE_PRIMITIVES: ReadonlySet<string> = new Set(['state', 'linked', 'computed'])
 
-/* Throws if the script calls a scope primitive bare (`state(0)`) instead of through a scope
-   (`scope().state(0)` / `c.state(0)`). Walks all calls, so a stray one nested in a function
-   is caught too, not just top-level declarations. */
+/* Throws on a bare scope primitive (`state(0)` instead of `scope().state(0)`) or on the
+   removed `prop(...)` reader — props are now read by destructuring `props()`. Walks all
+   calls, so a stray one nested in a function is caught too, not just top-level declarations. */
 function assertScopedPrimitives(source: ts.SourceFile): void {
     const visit = (node: ts.Node): void => {
-        if (
-            ts.isCallExpression(node) &&
-            ts.isIdentifier(node.expression) &&
-            SCOPE_PRIMITIVES.has(node.expression.text)
-        ) {
+        if (ts.isCallExpression(node) && ts.isIdentifier(node.expression)) {
             const name = node.expression.text
-            throw new Error(
-                `abide: bare \`${name}(...)\` is not allowed — reactive state lives on a scope. Use \`scope().${name}(...)\` (or a captured handle: \`const s = scope(); s.${name}(...)\`).`,
-            )
+            if (SCOPE_PRIMITIVES.has(name)) {
+                throw new Error(
+                    `abide: bare \`${name}(...)\` is not allowed — reactive state lives on a scope. Use \`scope().${name}(...)\` (or a captured handle: \`const s = scope(); s.${name}(...)\`).`,
+                )
+            }
+            if (name === 'prop') {
+                throw new Error(
+                    'abide: `prop(...)` has been removed — read props by destructuring `props()`, e.g. `const { name } = props()` (with a default: `const { name = fallback } = props()`).',
+                )
+            }
         }
         ts.forEachChild(node, visit)
     }
@@ -64,6 +66,19 @@ export function desugarSignals(scriptBody: string): {
         }
         for (const declaration of statement.declarationList.declarations) {
             const callee = signalCallee(declaration)
+            if (callee === 'props') {
+                /* `const {…} = props()` — each destructured binding is a read-only
+                   computed over the parent thunk, read as `name()`. */
+                if (!ts.isObjectBindingPattern(declaration.name)) {
+                    throw new Error(
+                        'abide: `props()` must be destructured — `const { a, b } = props()`',
+                    )
+                }
+                for (const binding of propsBindings(declaration)) {
+                    computedNames.add(binding.local)
+                }
+                continue
+            }
             if (!ts.isIdentifier(declaration.name)) {
                 continue
             }
@@ -71,9 +86,9 @@ export function desugarSignals(scriptBody: string): {
                 /* Plain `state(initial)` → a serializable `model` doc slot. */
                 stateNames.add(declaration.name.text)
             } else if (isComputedSlot(declaration)) {
-                /* Read-only `computed(compute)` / `prop` → a computed `scope().derive`
-                   doc slot, referenced as `name()` (its string-free reader): a function
-                   of other paths, recomputed via the graph, never stored/serialized. */
+                /* Read-only `computed(compute)` → a computed `scope().derive` doc slot,
+                   referenced as `name()` (its string-free reader): a function of other
+                   paths, recomputed via the graph, never stored/serialized. */
                 computedNames.add(declaration.name.text)
             } else if (callee !== undefined && REACTIVE_CALLEES.has(callee)) {
                 /* `.value` cells: `linked` and `state(initial, transform)` — they own
@@ -95,14 +110,14 @@ export function desugarSignals(scriptBody: string): {
     for (const statement of source.statements) {
         const stateAssignments = stateDeclarationAssignments(statement, printer, source)
         const computedDeclarations = computedDeclarationLines(statement, printer, source)
-        const propDeclarations = propDeclarationLines(statement, printer, source)
+        const propsDestructure = propsDestructureLines(statement, printer, source)
         const cellDeclarations = cellDeclarationLines(statement, printer, source)
         if (stateAssignments !== undefined) {
             lines.push(...stateAssignments)
         } else if (computedDeclarations !== undefined) {
             lines.push(...computedDeclarations)
-        } else if (propDeclarations !== undefined) {
-            lines.push(...propDeclarations)
+        } else if (propsDestructure !== undefined) {
+            lines.push(...propsDestructure)
         } else if (cellDeclarations !== undefined) {
             lines.push(...cellDeclarations)
         } else {
@@ -118,16 +133,12 @@ export function desugarSignals(scriptBody: string): {
 }
 
 /* True for a read-only computed slot — `computed(compute)` with no write-through
-   `set`, or a `prop` (a read-only computed over the parent thunk). The writable
-   `computed(compute, set)` lens keeps a `.value` cell (handled by the caller). */
+   `set`. The writable `computed(compute, set)` lens keeps a `.value` cell (handled by
+   the caller). */
 function isComputedSlot(declaration: ts.VariableDeclaration): boolean {
-    const callee = signalCallee(declaration)
-    if (callee === 'prop') {
-        return true
-    }
     const initializer = declaration.initializer
     return (
-        callee === 'computed' &&
+        signalCallee(declaration) === 'computed' &&
         initializer !== undefined &&
         ts.isCallExpression(initializer) &&
         initializer.arguments.length === 1
@@ -234,10 +245,51 @@ function signalCallee(declaration: ts.VariableDeclaration): string | undefined {
     return undefined
 }
 
-/* If `statement` declares `prop(...)` bindings, returns a reactive computed over
-   the parent-supplied `$props` thunk for each; otherwise undefined. The optional
-   call (`?.()`) tolerates an omitted prop. */
-function propDeclarationLines(
+/* One destructured prop: the local binding name, the parent prop key it reads, and
+   the optional `= default` expression (the fallback when the prop is absent). */
+type PropsBinding = { local: string; key: string; initializer: ts.Expression | undefined }
+
+/* The bindings of a `const {…} = props()` pattern. Rest (`...rest`) and nested
+   destructuring have no single prop key, so they throw a legible compile error. */
+function propsBindings(declaration: ts.VariableDeclaration): PropsBinding[] {
+    const pattern = declaration.name as ts.ObjectBindingPattern
+    return pattern.elements.map((element) => {
+        if (element.dotDotDotToken !== undefined) {
+            throw new Error('abide: `...rest` in `props()` destructuring is not supported')
+        }
+        if (!ts.isIdentifier(element.name)) {
+            throw new Error('abide: nested destructuring in `props()` is not supported')
+        }
+        return {
+            local: element.name.text,
+            key: propsBindingKey(element),
+            initializer: element.initializer,
+        }
+    })
+}
+
+/* The parent prop key a binding element reads — its rename source (`name: alias` →
+   `name`) or, absent a rename, the local name itself. */
+function propsBindingKey(element: ts.BindingElement): string {
+    const propertyName = element.propertyName
+    if (propertyName === undefined) {
+        return (element.name as ts.Identifier).text
+    }
+    if (
+        ts.isIdentifier(propertyName) ||
+        ts.isStringLiteralLike(propertyName) ||
+        ts.isNumericLiteral(propertyName)
+    ) {
+        return propertyName.text
+    }
+    throw new Error('abide: computed prop keys in `props()` destructuring are not supported')
+}
+
+/* If `statement` is a `const {…} = props()` destructure, returns one reactive
+   computed per binding — `scope().derive("name", () => $props["key"]?.() ?? default)`
+   — read as `name()`; otherwise undefined. The `?? default` applies the binding's
+   `= default` fallback when the prop is absent. */
+function propsDestructureLines(
     statement: ts.Statement,
     printer: ts.Printer,
     source: ts.SourceFile,
@@ -247,15 +299,18 @@ function propDeclarationLines(
     }
     const lines: string[] = []
     for (const declaration of statement.declarationList.declarations) {
-        if (signalCallee(declaration) !== 'prop' || !ts.isIdentifier(declaration.name)) {
+        if (signalCallee(declaration) !== 'props' || !ts.isObjectBindingPattern(declaration.name)) {
             return undefined
         }
-        const key = (declaration.initializer as ts.CallExpression).arguments[0]
-        const keyText =
-            key === undefined ? "''" : printer.printNode(ts.EmitHint.Unspecified, key, source)
-        lines.push(
-            `const ${declaration.name.text} = scope().derive(${JSON.stringify(declaration.name.text)}, () => $props[${keyText}]?.())`,
-        )
+        for (const { local, key, initializer } of propsBindings(declaration)) {
+            const fallback =
+                initializer === undefined
+                    ? ''
+                    : ` ?? (${printer.printNode(ts.EmitHint.Unspecified, initializer, source)})`
+            lines.push(
+                `const ${local} = scope().derive(${JSON.stringify(local)}, () => $props[${JSON.stringify(key)}]?.()${fallback})`,
+            )
+        }
     }
     return lines
 }

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

@@ -2,10 +2,9 @@ import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isControlFlow } from './isControlFlow.ts'
-import { isTextLeaf } from './isTextLeaf.ts'
 import { lowerContext } from './lowerContext.ts'
 import { scopeAttr } from './scopeAttr.ts'
-import { skeletonable } from './skeletonable.ts'
+import { skeletonContext } from './skeletonContext.ts'
 import { staticAttr } from './staticAttr.ts'
 import { staticTextPart } from './staticTextPart.ts'
 import { stripEffects } from './stripEffects.ts'
@@ -65,41 +64,33 @@ export function generateSSR(
         return children.map((child) => generate(child, target)).join('')
     }
 
+    /* Per-node skeleton position, computed once. Both back-ends read this single source of
+       truth so their `<!--a-->` anchor placement cannot drift — the fresh-context boundaries
+       (control-flow branches, component/slot/snippet content) are enumerated there, not
+       re-tracked here as mutable state that a forgotten reset could leak past. */
+    const { inSkeleton, markText } = skeletonContext(nodes)
+
     /* A control-flow branch's content, generated exactly like a normal child list so
        a branch holds ANY content (components, text, nested blocks). `generate` emits
        nested `<script>`s in document order; `withNestedScripts` puts their bindings in
        scope — matching the client build, so hydration stays aligned. The caller wraps
        it in the `[ … ]` range markers the runtime tracks (unconditionally per block,
-       so an empty/false branch still emits the boundary the client claims). */
+       so an empty/false branch still emits the boundary the client claims). The branch's
+       fresh build context is already recorded by `skeletonContext`, so its children read
+       their own (reset) position — no flag juggling here. */
     function branchContent(children: TemplateNode[], target: string): string {
-        /* A control-flow branch is a fresh build context — the block runtime mounts it, not
-           the parent skeleton — so reset the skeleton/anchor tracking; the branch's own
-           skeletonable elements re-enter it. */
-        const previousSkeleton = inSkeleton
-        const previousMark = markText
-        inSkeleton = false
-        markText = false
-        const out = withNestedScripts(children, () => generateInto(children, target))
-        inSkeleton = previousSkeleton
-        markText = previousMark
-        return out
+        return withNestedScripts(children, () => generateInto(children, target))
     }
     const openRange = (target: string): string => push(target, RANGE_OPEN)
     const closeRange = (target: string): string => push(target, RANGE_CLOSE)
 
-    /* True inside a skeletonable subtree; `markText` true when, additionally, the current
-       element is NOT a text-leaf — so its reactive text is interleaved and the client uses
-       an `<!--a-->` anchor. The marker is kept both sides (like control-flow ranges), so
-       SSR markup stays identical to the client DOM. */
-    let inSkeleton = false
-    let markText = false
-
     /* In a skeleton, a control-flow block or slot is positioned by an `<!--a-->` anchor
        (cloned into the located parent), so it can sit anywhere among static siblings.
        Emitted both sides in document order — the client's anchor scan lines up with it.
        Outside a skeleton (top-level / inside a branch) blocks mount on the host directly,
        so no anchor. */
-    const anchorMark = (target: string): string => (inSkeleton ? push(target, '<!--a-->') : '')
+    const anchorMark = (node: TemplateNode, target: string): string =>
+        inSkeleton.get(node) ? push(target, '<!--a-->') : ''
 
     function generate(node: TemplateNode, target: string): string {
         /* A control-flow block is positioned by an `<!--a-->` anchor when in a skeleton
@@ -107,7 +98,7 @@ export function generateSSR(
            mirroring the client's single `skeletonMarkup` control-flow branch — rather than
            prefixing each block kind's own `anchorMark` call (six sites that had to stay in
            lock-step). `anchorMark` no-ops outside a skeleton, so non-block nodes ignore it. */
-        const anchor = isControlFlow(node) ? anchorMark(target) : ''
+        const anchor = isControlFlow(node) ? anchorMark(node, target) : ''
         if (node.kind === 'text') {
             return node.parts
                 .map((part) => {
@@ -116,7 +107,7 @@ export function generateSSR(
                         return markup === '' ? '' : push(target, markup)
                     }
                     const value = `$text(${lowerExpression(part.code)})`
-                    return markText
+                    return markText.get(node)
                         ? `${target}.push('<!--a-->' + ${value});\n`
                         : `${target}.push(${value});\n`
                 })
@@ -197,6 +188,11 @@ export function generateSSR(
             const parts = node.props.map(
                 (prop) => `${JSON.stringify(prop.name)}: () => (${lowerExpression(prop.code)})`,
             )
+            /* Slot content is a fresh build context — the child's `<slot>` mounts it via
+               `mountSlot`, not the parent skeleton clone, and the client builds it through
+               `componentParts`/`generateChildren` (never the skeleton path). `skeletonContext`
+               records it reset, so its children emit no enclosing-skeleton anchors the client
+               slot builder would lack. */
             const slotCode = generateInto(node.children, '$slot')
             if (slotCode.trim() !== '') {
                 parts.push(
@@ -256,21 +252,11 @@ export function generateSSR(
         }
         code += push(target, '>')
         if (!VOID_TAGS.has(node.tag)) {
-            /* Track skeleton context: reactive text gets an `<!--a-->` anchor only when
-               interleaved (this element has non-text children) inside a skeletonable
-               subtree — matching the client's anchor vs marker-free text-leaf choice. */
-            const entering = !inSkeleton && skeletonable(node)
-            if (entering) {
-                inSkeleton = true
-            }
-            const previousMark = markText
-            markText = inSkeleton && !isTextLeaf(node)
-            /* A `<script>` child scopes its bindings to this element's subtree. */
+            /* Each child's skeleton position (whether its reactive text interleaves into an
+               anchor, whether a nested block anchors) is already recorded by `skeletonContext`
+               — read per node, not tracked here. A `<script>` child scopes its bindings to
+               this element's subtree. */
             code += withNestedScripts(node.children, () => generateInto(node.children, target))
-            markText = previousMark
-            if (entering) {
-                inSkeleton = false
-            }
             code += push(target, `</${node.tag}>`)
         }
         return code
@@ -281,19 +267,14 @@ export function generateSSR(
        by an `<!--a-->` anchor and its content bounded by a `[ … ]` range (matching the
        client's `mountSlot`), so it can sit among static siblings. The fallback is a fresh,
        non-skeleton build context — the client builds it via `mountSlot`/`fillBefore`, not the
-       skeleton clone — so its reactive text takes no anchor (reset like `branchContent`). */
+       skeleton clone — so its reactive text takes no anchor (`skeletonContext` records the
+       fallback children reset). */
     function generateSlot(
         node: Extract<TemplateNode, { kind: 'element' }>,
         target: string,
     ): string {
-        const wrap = inSkeleton
-        const previousSkeleton = inSkeleton
-        const previousMark = markText
-        inSkeleton = false
-        markText = false
+        const wrap = inSkeleton.get(node)
         const fallback = generateInto(node.children, target)
-        inSkeleton = previousSkeleton
-        markText = previousMark
         const body =
             fallback.trim() === ''
                 ? `if ($props && $props.$children) { ${target}.push($props.$children()); }\n`
@@ -301,7 +282,7 @@ export function generateSSR(
         if (!wrap) {
             return body
         }
-        return `${anchorMark(target)}${openRange(target)}${body}${closeRange(target)}`
+        return `${anchorMark(node, target)}${openRange(target)}${body}${closeRange(target)}`
     }
 
     /* Boundary markers + a `$awaits` registration carrying the promise and

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

@@ -1,4 +1,5 @@
 import ts from 'typescript'
+import { escapeKey } from '../runtime/escapeKey.ts'
 
 /*
 The linchpin compiler pass. Rewrites idiomatic data access on a reactive document
@@ -9,16 +10,19 @@ component hit the fast path instead of building path strings by hand:
   model.note = 'x'        →  model.replace("note", 'x')
   model.count += 1        →  model.replace("count", model.read("count") + 1)
   model.lines.push(v)     →  model.add("lines/-", v)
-  delete model.byId[key]  →  model.remove(`byId/${key}`)
+  delete model.byId[key]  →  model.remove("byId/" + escapeKey(key))
   model.lines[0].sku      →  model.read("lines/0/sku")
-  model.lines[i].sku      →  model.read(`lines/${i}/sku`)
+  model.lines[i].sku      →  model.read("lines/" + escapeKey(i) + "/sku")
 
 A member/element-access chain rooted at `docName` becomes a `/`-joined path:
 literal keys and numeric indices fold into one string literal; a non-literal
-index makes the path a template (a dynamic segment). Reads are lowered to
-`read(path)`; a later pass hoists static-path reads to a `cell` bound once at
-component init (the string-free hot path the bench measured). Index expressions
-are themselves visited, so a read used as an index lowers too.
+index makes the path a template (a dynamic segment). Path segments are
+JSON-Pointer-escaped so a key holding `/` or `~` addresses one segment, not
+many — literal keys at compile time, dynamic ones wrapped in a runtime
+`escapeKey(...)`. Reads are lowered to `read(path)`; a later pass hoists
+static-path reads to a `cell` bound once at component init (the string-free hot
+path the bench measured). Index expressions are themselves visited, so a read
+used as an index lowers too.
 */
 export function lowerDocAccess(code: string, docName: string): string {
     const source = ts.createSourceFile('component.ts', code, ts.ScriptTarget.Latest, true)
@@ -54,12 +58,15 @@ function docAccessTransformer(docName: string): ts.TransformerFactory<ts.SourceF
             let current: ts.Expression = node
             while (true) {
                 if (ts.isPropertyAccessExpression(current)) {
-                    segments.unshift({ kind: 'literal', value: current.name.text })
+                    /* A property name is an identifier — escapeKey is a no-op on it, but
+                       a string-literal element key (`model["a/b"]`) can carry `/`|`~` and
+                       must escape at compile time so the `/`-joined path doesn't mis-split. */
+                    segments.unshift({ kind: 'literal', value: escapeKey(current.name.text) })
                     current = current.expression
                 } else if (ts.isElementAccessExpression(current)) {
                     const argument = current.argumentExpression
                     if (ts.isStringLiteral(argument) || ts.isNumericLiteral(argument)) {
-                        segments.unshift({ kind: 'literal', value: argument.text })
+                        segments.unshift({ kind: 'literal', value: escapeKey(argument.text) })
                     } else {
                         segments.unshift({
                             kind: 'expression',
@@ -165,8 +172,8 @@ function docCall(docName: string, method: string, args: ts.Expression[]): ts.Cal
 /*
 Turns segments into a path expression: an all-literal path is one string literal
 (`"lines/0/sku"`); a path with a dynamic segment is a string-concatenation that
-evaluates to the path at runtime (`"lines/" + i + "/sku"`), kept string-typed by
-leading with a literal.
+evaluates to the path at runtime (`"lines/" + escapeKey(i) + "/sku"`), kept
+string-typed by leading with a literal.
 */
 function buildPath(segments: Segment[]): ts.Expression {
     if (segments.every((segment) => segment.kind === 'literal')) {
@@ -194,7 +201,15 @@ function buildPath(segments: Segment[]): ts.Expression {
             if (separator !== '') {
                 appendText(separator)
             }
-            fragments.push(segment.node)
+            /* A dynamic key's value is unknown at compile time — escape it at runtime so a
+               key holding `/`|`~` (a date, a composite id) addresses one segment, not many. */
+            fragments.push(
+                ts.factory.createCallExpression(
+                    ts.factory.createIdentifier('escapeKey'),
+                    undefined,
+                    [segment.node],
+                ),
+            )
         }
     })
     const head = fragments[0]