@abide/abide 0.47.0 → 0.49.0

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

@@ -3,7 +3,7 @@ import type { UiProps } from '../runtime/types/UiProps.ts'
 /*
 Composes a child's props from ordered layers — explicit prop runs (`{ name: () =>
 value }` thunk maps), `{...spread}` layers (`spreadProps`), and a trailing slot
-layer (`$children`) — into one prop bag, last layer wins per key (source order, like
+layer (`children`) — into one prop bag, last layer wins per key (source order, like
 JSX). A key resolves by scanning layers in reverse for the first that carries it, so
 an explicit prop after a spread overrides it and vice-versa. Emitted only when a
 component carries a spread; the plain object literal stays the path otherwise.

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

@@ -8,7 +8,7 @@ import { openMarker } from './openMarker.ts'
 /*
 Mounts a component's `<slot>` content as a marker-bounded range, so a slot positions among
 static siblings exactly like a control-flow block — by `before` (create) or the claim
-cursor (hydrate). `render` appends the parent-supplied `$children`, or the slot's own
+cursor (hydrate). `render` appends the parent-supplied `children`, or the slot's own
 fallback when none was passed; it runs once (a slot never toggles), so there is no effect or
 re-render — the markers exist only to delimit the range for create insertion and hydrate
 claiming.

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

@@ -0,0 +1,38 @@
+import type { Doc } from '../runtime/types/Doc.ts'
+import { readCall } from './readCall.ts'
+
+/*
+An in-place-mutating array method lowered on a reactive-document array. The
+doc-access lowering rewrites e.g. `model.items.splice(i, 1)` to
+`$$mutateDocArray(model, "items", "splice", [i, 1])` rather than the bare
+`$$readCall(model.read("items"), …)` it emits for non-mutating calls. The reason:
+`read` returns the live tree array by reference, so a bare `.splice()`/`.sort()`/…
+would mutate the document in place while never emitting a patch — no reader would
+re-render and undo/persistence/multiplayer sync (all keyed off `apply`) would
+never see the change (`.push` is the one already-handled exception, lowered to
+`add` patches). Cloning the array, applying the mutation to the copy, and writing
+it back through `replace` emits a real patch: readers wake and the change is
+journalled. Element identity is preserved for untouched entries (a shallow
+`slice`), so a keyed `{#for}` reconciles instead of rebuilding. The native
+method's return value (spliced-out elements, the new length, …) is returned
+unchanged.
+*/
+// @documentation plumbing
+export function mutateDocArray(doc: Doc, path: string, member: string, args: unknown[]): unknown {
+    const current = doc.read<unknown>(path)
+    /* Not an array — nothing patchable to clone. Fall back to the guarded in-place
+       call so the author still gets readCall's authored-scope error message. */
+    if (!Array.isArray(current)) {
+        return readCall(current, path, member, args)
+    }
+    const copy = current.slice()
+    const method = (copy as unknown as Record<string, unknown>)[member]
+    if (typeof method !== 'function') {
+        throw new TypeError(
+            `abide: cannot call .${member}() — "${path}".${member} is not a function (got ${typeof method})`,
+        )
+    }
+    const returned = (method as (...callArgs: unknown[]) => unknown).apply(copy, args)
+    doc.replace(path, copy)
+    return returned
+}

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

@@ -6,14 +6,14 @@ object of the UNCONSUMED prop values. A child receives prop THUNKS, so `rest.key
 unwraps them (`$props[key]?.()`), tracking as a reactive dependency; a top-level
 page/layout instead receives its route params as PLAIN values, so a non-function
 value is returned as-is rather than called (which would throw `value is not a
-function`). The explicitly-destructured keys and the `$children` slot are excluded.
+function`). The explicitly-destructured keys and the `children` slot are excluded.
 Enumerable (`ownKeys`/`for…in`/`Object.keys`), so `{...rest}` can forward the
 remaining props onto a child or a native element. Key membership is live, but a
 consumer that captures the key SET (a `{...rest}` spread) snapshots it at that point.
 */
 // @documentation plumbing
 export function restProps(props: UiProps, consumed: string[]): Record<string, unknown> {
-    const skip = new Set([...consumed, '$children'])
+    const skip = new Set([...consumed, 'children'])
     const bag = props as Record<string, unknown>
     const visible = (key: string | symbol): key is string =>
         typeof key === 'string' && !skip.has(key) && key in bag

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

@@ -5,7 +5,7 @@ reads a spread key exactly like an authored one (`$props[key]?.()`). `source` is
 THUNK over the spread expression (not its value), re-evaluated on each key read and
 membership test, so a reactive source stays live both when its keys mutate and when
 the whole object is replaced — and the read registers as the reader's dependency. A
-nullish source spreads nothing. The reserved `$children` slot key is never surfaced —
+nullish source spreads nothing. The reserved `children` slot key is never surfaced —
 a source happening to carry one must not masquerade as slot content.
 */
 // @documentation plumbing
@@ -13,9 +13,8 @@ export function spreadProps(
     source: () => Record<string, unknown> | null | undefined,
 ): Record<string, () => unknown> {
     /* A spread key the merged bag exposes — present on the current source and not the
-       reserved `$children` slot key (a source carrying one must not become slot content). */
-    const carries = (key: string | symbol): boolean =>
-        key !== '$children' && key in (source() ?? {})
+       reserved `children` slot key (a source carrying one must not become slot content). */
+    const carries = (key: string | symbol): boolean => key !== 'children' && key in (source() ?? {})
     return new Proxy(
         {},
         {

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

@@ -1,7 +1,8 @@
-import { claimChild } from '../runtime/claimChild.ts'
+import { claimExpected } from '../runtime/claimExpected.ts'
 import { OWNER } from '../runtime/OWNER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
+import { withoutHydration } from '../runtime/withoutHydration.ts'
 import { discardBoundary } from './discardBoundary.ts'
 import { enterNamespace } from './enterNamespace.ts'
 
@@ -59,12 +60,14 @@ export function tryBlock(
 
     const hydration = RENDER.hydration
     if (hydration !== undefined) {
-        const open = claimChild(hydration, parent)
-        hydration.next.set(parent, open?.nextSibling ?? null) // advance past the open marker
+        // Guaranteed control-flow markers — claimExpected throws a legible desync (the close
+        // is caught below → rebuild the catch fresh) instead of claiming null and over-clearing.
+        const open = claimExpected(hydration, parent, `abide:try:${id} open marker`)
+        hydration.next.set(parent, open.nextSibling ?? null) // advance past the open marker
         try {
             guard(() => renderTry(parent)) // claims the guarded nodes in place
-            const close = claimChild(hydration, parent) // claim the close marker
-            hydration.next.set(parent, close?.nextSibling ?? null)
+            const close = claimExpected(hydration, parent, `/abide:try:${id} close marker`)
+            hydration.next.set(parent, close.nextSibling ?? null)
         } catch (error) {
             /* The server markup didn't adopt — drop the whole boundary and build the
                catch fresh in its place. */
@@ -72,15 +75,11 @@ export function tryBlock(
             if (renderCatch === undefined) {
                 throw error
             }
-            const previous = RENDER.hydration
-            RENDER.hydration = undefined
-            try {
+            withoutHydration(() => {
                 const fragment = document.createDocumentFragment()
                 enterNamespace(parent, () => guard(() => renderCatch(fragment, error)))
                 parent.insertBefore(fragment, after)
-            } finally {
-                RENDER.hydration = previous
-            }
+            })
         }
         return
     }

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

@@ -22,6 +22,13 @@ export function withScope(label: string | undefined, build: () => () => void): {
     CURRENT_SCOPE.current = lexical
     try {
         lexical.own(build())
+    } catch (error) {
+        /* `build` threw before returning its stopper — e.g. a hydration desync in one of
+           several sibling blocks. `own` never ran, so nothing downstream will dispose this
+           lexical scope; tear it down here (its child scopes/effects created before the
+           throw) before rethrowing, rather than leaking a live, unreachable scope. */
+        lexical.dispose()
+        throw error
     } finally {
         exitRenderPass()
         CURRENT_SCOPE.current = parentScope

package/src/lib/ui/history.ts

@@ -53,9 +53,12 @@ export function history(doc: Doc, { limit = 100 }: { limit?: number } = {}): His
             }
         } finally {
             sink = undefined
-        }
-        if (captured.length > 0) {
-            push(target, captured)
+            /* Push captured inverses even if `apply` threw mid-loop: the already-popped
+               entry is gone, so the forward patches for what DID apply must land on the
+               opposite stack or a partial replay becomes irreversible. */
+            if (captured.length > 0) {
+                push(target, captured)
+            }
         }
     }
 
@@ -86,10 +89,14 @@ export function history(doc: Doc, { limit = 100 }: { limit?: number } = {}): His
                 run()
             } finally {
                 sink = undefined
-            }
-            if (entry.length > 0) {
-                push(undoStack, entry)
-                redoStack.length = 0
+                /* Commit whatever was applied even if `run` threw partway: those patches are
+                   already live in the doc, so their inverses must reach the undo stack or the
+                   committed changes are left with no way to undo them. The throw still
+                   propagates after this. */
+                if (entry.length > 0) {
+                    push(undoStack, entry)
+                    redoStack.length = 0
+                }
             }
         },
         dispose: () => {

package/src/lib/ui/installHotBridge.ts

@@ -16,6 +16,7 @@ import { mergeProps } from './dom/mergeProps.ts'
 import { mount } from './dom/mount.ts'
 import { mountChild } from './dom/mountChild.ts'
 import { mountSlot } from './dom/mountSlot.ts'
+import { mutateDocArray } from './dom/mutateDocArray.ts'
 import { on } from './dom/on.ts'
 import { outlet } from './dom/outlet.ts'
 import { readCall } from './dom/readCall.ts'
@@ -82,6 +83,7 @@ export function installHotBridge(): void {
         restProps,
         spreadAttrs,
         readCall,
+        mutateDocArray,
         hydrate,
         escapeKey,
         nextBlockId,

package/src/lib/ui/props.ts

@@ -0,0 +1,17 @@
+/*
+The prop reader. In a `.abide` component the compiler rewrites `const { name } =
+props()` to reads off the component's prop bag (`$props`), so this runtime body
+never executes there — it exists for import resolution and for typing `props()`
+in plain `.ts` modules. Called directly (only possible outside a compiled
+component) it throws, like `request()` outside a request scope, rather than
+silently returning undefined.
+
+The return type is `T` (default `Record<string, unknown>`); inside a `.abide`
+file the check shadow supplies the file-contextual `RouteShape & T` instead.
+*/
+// @documentation reactive-state
+export function props<T = Record<string, unknown>>(): T {
+    throw new Error(
+        '[abide] props() is compiler-lowered inside a .abide component and has no runtime meaning when called directly',
+    )
+}

package/src/lib/ui/renderChain.ts

@@ -35,8 +35,10 @@ export async function renderChain(
     const renders: SsrRender[] = []
     /* Route params as thunks (static server-side — only shape parity with the client so
        `props()` reads `$props["id"]?.()` resolve). A layout (every view but the last) also
-       gets `$children` set to `CHILD_PRESENT` so SSR renders `{#if children}` the same way
-       the client does, keeping hydration congruent. */
+       gets `children` set to `CHILD_PRESENT` so SSR renders `{#if children}` the same way
+       the client does, keeping hydration congruent. The sentinel itself must be thunk-wrapped
+       (`() => CHILD_PRESENT`) since the destructure lowering CALLS every bag entry — leaving
+       it raw would invoke `CHILD_PRESENT` (a function) and read back `undefined`. */
     const paramThunks: UiProps = {}
     for (const key of Object.keys(params)) {
         paramThunks[key] = () => params[key]
@@ -44,7 +46,9 @@ export async function renderChain(
     for (let index = 0; index < views.length; index += 1) {
         const view = views[index] as UiComponent
         const hasChild = index < views.length - 1
-        const props: UiProps = hasChild ? { ...paramThunks, $children: CHILD_PRESENT } : paramThunks
+        const props: UiProps = hasChild
+            ? { ...paramThunks, children: () => CHILD_PRESENT }
+            : paramThunks
         renders.push(await view.render(props, ctx))
     }
     let html = renders[renders.length - 1]?.html ?? ''

package/src/lib/ui/router.ts

@@ -200,17 +200,19 @@ export function router(
             /* Route params as reactive thunks: reading `clientPage.value.params` inside the
                thunk tracks the page signal, so an in-place same-route hop (params change, the
                page stays mounted) re-runs each `props()` derive. The key set is stable across
-               same-route hops, so the bag need not rebuild. A layout also gets `$children`
+               same-route hops, so the bag need not rebuild. A layout also gets `children`
                set to `CHILD_PRESENT` when a child layer exists below it, read by
                `{#if children}` (a layout's `{children()}` lowers to its `outlet()` boundary,
-               so it ignores this value). */
+               so it ignores this value). Every bag entry is a thunk — `props()` destructure
+               lowers to `$props["key"]?.()` — so the sentinel must be wrapped too, or calling
+               it would invoke `CHILD_PRESENT` and yield `undefined` instead of the sentinel. */
             const propsBag = (hasChild: boolean): UiProps => {
                 const bag: UiProps = {}
                 for (const key of Object.keys(params)) {
                     bag[key] = () => clientPage.value.params[key]
                 }
                 if (hasChild) {
-                    bag.$children = CHILD_PRESENT
+                    bag.children = () => CHILD_PRESENT
                 }
                 return bag
             }
@@ -379,6 +381,15 @@ export function router(
            would re-run the router and re-mount the page, dropping local state. */
         const path = runtimePath.value
         untrack(() => {
+            /* Capture whether THIS run is the first paint, then flip the shared flag
+               synchronously. Previously `first` was only cleared inside the async `.then`,
+               so a second navigation that began before the boot resolve settled (a
+               double-tapped back button, two quick `navigate()` calls) still read
+               `first === true` and skipped its auth/redirect probe. Each run's `.then`
+               closes over its own `isFirstRun`, so hydration still keys off the real first
+               paint. */
+            const isFirstRun = first
+            first = false
             /* The route matches on the pathname only; the query/hash ride along for
                the probe (so server gating sees them) and for clientPage.url. */
             const pathname = path.split(/[?#]/)[0] ?? path
@@ -390,7 +401,7 @@ export function router(
             const targetUrl = resolveUrl(path)
             const mountedUrl = clientPage.value.url
             if (
-                !first &&
+                !isFirstRun &&
                 mountedUrl.pathname === targetUrl.pathname &&
                 mountedUrl.search === targetUrl.search &&
                 mountedUrl.hash !== targetUrl.hash
@@ -422,13 +433,13 @@ export function router(
                Skipped on first paint — there is no page to leave. An instant SPA hop
                (chunk cached, no probe) flips it back within the same microtask, so the
                browser never paints the intermediate state — no flash. */
-            if (!first && !clientPage.value.navigating) {
+            if (!isFirstRun && !clientPage.value.navigating) {
                 clientPage.value = { ...clientPage.value, navigating: true }
             }
             /* First paint adopts a document the server already ran handle() on;
                only later navigations re-run it through the probe. */
             const verdict: Promise<NavVerdict> =
-                first || probe === undefined ? Promise.resolve({ kind: 'mount' }) : probe(path)
+                isFirstRun || probe === undefined ? Promise.resolve({ kind: 'mount' }) : probe(path)
             /* Resolve the page chunk, its layout chunks, and the gate in parallel,
                keeping the current chain mounted until all land — no blank frame while
                imports are in flight or the probe is in the air. */
@@ -439,14 +450,10 @@ export function router(
             ])
                 .then(([pageView, resolvedLayouts, decision]) => {
                     if (token !== sequence || disposed) {
-                        /* Consume the first-paint flag even when superseded: the boot SSR DOM
-                           is valid only for THIS boot navigation. Leaving `first` true would
-                           let a navigation that started before this settled (to a different
-                           page) skip its auth probe and hydrate the boot URL's SSR DOM as its
-                           own — claimExpected then throws and commit swallows it, stranding a
-                           broken page. Cleared here → the superseding nav builds create-mode
-                           (clearing the stale SSR DOM) and runs its probe. */
-                        first = false
+                        /* Superseded (or disposed) — drop this build. The first-paint flag was
+                           already consumed synchronously at run start (`first = false`), so a
+                           navigation that started after this one already saw `first === false`,
+                           ran its probe, and builds in create mode over the stale SSR DOM. */
                         return
                     }
                     /* handle() redirected: go where it pointed, replacing the blocked
@@ -474,9 +481,8 @@ export function router(
                     ) {
                         divergence += 1
                     }
-                    const firstPaint = first
-                    const hydrating = first && pageView?.hydratable === true
-                    first = false
+                    const firstPaint = isFirstRun
+                    const hydrating = isFirstRun && pageView?.hydratable === true
                     /* Same page, same layout chain — only params/url differ (e.g. stepping
                        between episodes on one detail page). The whole structure survives, so
                        publish the new snapshot on the reactive `page` proxy and let the mounted

package/src/lib/ui/runtime/CHILD_PRESENT.ts

@@ -1,7 +1,7 @@
 /*
 A no-op truthiness marker the router (client) and `renderChain` (SSR) set as a layout's
-`$props.$children` when a child layer (a nested layout or the page) exists below it. Read
-only by `{#if children}` (→ `$props?.$children`); a layout's `{children()}` lowers to the
+`$props.children` when a child layer (a nested layout or the page) exists below it. Read
+only by `{#if children}` (→ `$props?.children`); a layout's `{children()}` lowers to the
 `outlet()` boundary the router fills, so this value is never invoked — it exists purely so
 `{#if children}` reads a uniform presence signal on both the client and the server.
 */

package/src/lib/ui/runtime/applyPatchToTree.ts

@@ -1,3 +1,4 @@
+import { setOwnProperty } from '../../shared/setOwnProperty.ts'
 import type { Patch } from './types/Patch.ts'
 
 /*
@@ -21,16 +22,28 @@ export function applyPatchToTree(tree: unknown, patch: Patch, segments: string[]
     }
     let parent = tree as Record<string, unknown>
     for (const segment of segments.slice(0, -1)) {
-        parent = parent[segment] as Record<string, unknown>
+        /* Only descend into an OWN property. A segment of `__proto__`/`constructor`/
+           `prototype` is not own on a plain data object/array, so this refuses to walk
+           into a shared prototype (or the constructor function) that a later write would
+           then pollute — the real vector, since `apply` is reachable from `sync()` with
+           unvalidated peer-controlled patch paths. A legit document key that happens to be
+           named `constructor` is an own data property, so `hasOwn` still traverses it. */
+        const next = Object.hasOwn(parent, segment) ? parent[segment] : undefined
+        if (next === null || typeof next !== 'object') {
+            throw new TypeError(
+                `abide: patch path segment "${segment}" does not address a container`,
+            )
+        }
+        parent = next as Record<string, unknown>
     }
     const key = segments[segments.length - 1] as string
     if (patch.op === 'replace') {
-        parent[key] = patch.value
+        setOwnProperty(parent, key, patch.value)
     } else if (patch.op === 'add') {
         if (Array.isArray(parent)) {
             parent.splice(key === '-' ? parent.length : Number(key), 0, patch.value)
         } else {
-            parent[key] = patch.value
+            setOwnProperty(parent, key, patch.value)
         }
     } else if (Array.isArray(parent)) {
         parent.splice(Number(key), 1)

package/src/lib/ui/runtime/captureModelDoc.ts

@@ -1,28 +1,43 @@
 import { PATCH_BUS } from './PATCH_BUS.ts'
 import type { Doc } from './types/Doc.ts'
 
+/* Stack of in-flight captures, innermost last. `mountChild` wraps every hot-tracked child
+   mount in its own `captureModelDoc`, and these NEST inside a parent's build, so a single
+   shared PATCH_BUS would let a parent's listener (subscribed first) grab a nested child's
+   model. Assigning each patch only to the innermost active capture keeps a component's model
+   scoped to its OWN build. */
+const captureStack: { model: Doc | undefined }[] = []
+
 /*
 Runs a component `build` and returns its result (the mount handle / disposer)
 alongside the component's own `model` document — the serializable `state` doc,
 needed so a hot swap can carry its value across (see `hotReplace`). The model is
 found, not threaded: a component seeds its `model` first (the desugared
 `const $$model = scope()` + its init `replace` patches (state slots lowered by `lowerDocAccess`) run before any child mounts or
-control-flow blocks), so the FIRST patch announced on the bus during the build names
-it. A component with no `state` mints no model and emits nothing first — `model` is
-then `undefined` and there is nothing to preserve. Used only on the hot path; the
-subscription is torn down with the build.
+control-flow blocks), so the FIRST patch announced during THIS build (not a nested
+child's) names it. A component with no `state` mints no model and emits nothing first
+— `model` is then `undefined` and there is nothing to preserve. A nested child mount
+pushes its own frame, so its state-init patch names the child's model, not the parent's
+(the M5 stateless-parent/stateful-child fix). Used only on the hot path; the subscription
+is torn down with the build.
 */
 export function captureModelDoc<T>(build: () => T): {
     value: T
     model: Doc | undefined
 } {
-    let model: Doc | undefined
+    const frame: { model: Doc | undefined } = { model: undefined }
+    captureStack.push(frame)
     const unsubscribe = PATCH_BUS.subscribe((event) => {
-        model ??= event.doc
+        /* Only the innermost active capture claims a patch — a nested child mounting during
+           this build has pushed a deeper frame, so its patches don't leak up to this one. */
+        if (captureStack[captureStack.length - 1] === frame) {
+            frame.model ??= event.doc
+        }
     })
     try {
-        return { value: build(), model }
+        return { value: build(), model: frame.model }
     } finally {
         unsubscribe()
+        captureStack.pop()
     }
 }

package/src/lib/ui/runtime/createDoc.ts

@@ -316,23 +316,39 @@ export function createDoc(initial: unknown): Doc {
         const node = nodeFor(path)
         const segments = pathSegments(path)
         const leafKey = segments[segments.length - 1] as string
-        /* Auto-vivify missing ancestor objects so binding a nested path on a doc
-           booted shallow (e.g. `state({})`) doesn't crash, and a later `set` writes
-           into the LIVE tree (so snapshot/persist see it). Mirrors the container
-           assumption applyPatchToTree makes — except the patch path is authored, this
-           walk is compiler-emitted, so the intermediates may not exist yet. */
-        let parent = tree as Record<string, unknown>
-        for (const segment of segments.slice(0, -1)) {
-            let next = parent[segment]
-            if (next === null || typeof next !== 'object') {
-                next = {}
-                parent[segment] = next
+        const ancestors = segments.slice(0, -1)
+        /* The resolved parent container, cached after the first write. `get` never needs
+           it (it reads through `node`), so it is not computed at cell creation. */
+        let parent: Record<string, unknown> | undefined
+        /* Auto-vivify missing ancestor objects so a `set` on a nested path bound over a
+           doc booted shallow (e.g. `state({})`) writes into the LIVE tree (snapshot/persist
+           see it) rather than crashing. Done LAZILY on the first write, NOT at cell
+           creation: `hoistCells` lifts a cell to component-mount scope, so vivifying eagerly
+           would fabricate container structure for a path only ever written behind a branch /
+           in a handler that never runs. Mirrors applyPatchToTree's container assumption,
+           but the intermediates may not exist yet since this walk is compiler-emitted. */
+        const resolveParent = (): Record<string, unknown> => {
+            let current = tree as Record<string, unknown>
+            for (let index = 0; index < ancestors.length; index += 1) {
+                const segment = ancestors[index] as string
+                let next = current[segment]
+                if (next === null || typeof next !== 'object') {
+                    /* Create an array when the NEXT segment addresses an array element (a
+                       numeric index or the `-` push slot), else a plain object — otherwise a
+                       bound path like `items/0/name` on a shallow doc fabricates `items` as an
+                       object keyed by "0", which a later `add("items/-", …)` can't push into. */
+                    const childKey = (ancestors[index + 1] ?? leafKey) as string
+                    next = childKey === '-' || /^\d+$/.test(childKey) ? [] : {}
+                    current[segment] = next
+                }
+                current = next as Record<string, unknown>
             }
-            parent = next as Record<string, unknown>
+            return current
         }
         return {
             get: () => readNode(node) as T,
             set: (value: T) => {
+                parent ??= resolveParent()
                 parent[leafKey] = value
                 writeNode(node, value)
             },

package/src/lib/ui/runtime/flushEffects.ts

@@ -1,3 +1,4 @@
+import { NODE_STATE } from './NODE_STATE.ts'
 import { REACTIVE_CONTEXT } from './REACTIVE_CONTEXT.ts'
 import type { ReactiveNode } from './types/ReactiveNode.ts'
 import { updateIfNecessary } from './updateIfNecessary.ts'
@@ -39,13 +40,34 @@ export function flushEffects(): void {
 
 function drain(): void {
     let spare: ReactiveNode[] = []
+    let errors: unknown[] | undefined
     do {
         const batch = REACTIVE_CONTEXT.pendingEffects
         REACTIVE_CONTEXT.pendingEffects = spare
         for (let index = 0; index < batch.length; index += 1) {
-            updateIfNecessary(batch[index] as ReactiveNode)
+            const node = batch[index] as ReactiveNode
+            try {
+                updateIfNecessary(node)
+            } catch (error) {
+                /* One effect throwing must not strand the effects queued behind it — they
+                   live in this same `batch`, which becomes unreachable the moment we swap
+                   `pendingEffects`. Reset the culprit to CLEAN so a later write to its
+                   dependencies can re-queue it (otherwise `mark`'s CLEAN→dirty gate leaves
+                   it permanently inert), then keep draining and surface the error(s) once
+                   the graph has settled rather than swallowing them. */
+                node.status = NODE_STATE.CLEAN
+                if (errors === undefined) {
+                    errors = []
+                }
+                errors.push(error)
+            }
         }
         batch.length = 0
         spare = batch
     } while (REACTIVE_CONTEXT.pendingEffects.length > 0)
+    if (errors !== undefined) {
+        throw errors.length === 1
+            ? errors[0]
+            : new AggregateError(errors, 'abide: effects threw during flush')
+    }
 }

package/src/lib/ui/runtime/scope.ts

@@ -23,6 +23,17 @@ export function scope(build: () => void): () => void {
     OWNER.current = disposers
     try {
         untrack(build)
+    } catch (error) {
+        /* A build that throws partway (e.g. a hydration desync deep in a subtree) has
+           already created and subscribed some effects/listeners. The caller never
+           receives this scope's disposer on the throw path, so tear down what was built —
+           in reverse, children before parents — before rethrowing; otherwise those effects
+           stay subscribed forever with no owner able to dispose them. */
+        for (let index = disposers.length - 1; index >= 0; index -= 1) {
+            disposers[index]?.()
+        }
+        disposers.length = 0
+        throw error
     } finally {
         OWNER.current = previous
     }

package/src/lib/ui/runtime/toTeardown.ts

@@ -1,3 +1,4 @@
+import { abideLog } from '../../shared/abideLog.ts'
 import type { EffectResult } from './types/EffectResult.ts'
 import type { Teardown } from './types/Teardown.ts'
 
@@ -15,15 +16,21 @@ export function toTeardown(result: EffectResult): Teardown | undefined {
     }
     if (result instanceof Promise) {
         return () => {
-            /* Swallow a rejection: an async body that rejected (e.g. an aborted RPC) must
-               not surface as an unhandled rejection when the teardown runs at dispose. */
             result.then(
                 (teardown) => {
                     if (typeof teardown === 'function') {
                         teardown()
                     }
                 },
-                () => undefined,
+                (error) => {
+                    /* A superseded reactive read aborts its in-flight RPC — expected, stays
+                       quiet. Any OTHER rejection is a real bug in the async effect body;
+                       surface it (the visibility goal) instead of silently discarding it. */
+                    const aborted = (error as { name?: string } | undefined)?.name === 'AbortError'
+                    if (!aborted) {
+                        abideLog.error(error)
+                    }
+                },
             )
         }
     }

package/src/lib/ui/runtime/types/UiProps.ts

@@ -2,10 +2,11 @@
 What a component is invoked with. A top-level page/layout is called by the router
 (client) and `renderChain` (SSR) with its route params as reactive thunks, shaped
 identically to the thunk map `mountChild` passes a nested child — so `props()` reads
-(`$props[name]?.()`) work uniformly on both. `$children` is the slot builder a parent
-component passes (carrying the component's `{children()}` content), or `CHILD_PRESENT`
-the router/SSR set on a layout that has a child layer below it.
+(`$props[name]?.()`) work uniformly on both. `children` is an ordinary prop thunk like
+any other: on a component it returns the parent's `Snippet`; on a layout with a child
+layer below it, the router/SSR set it to `() => CHILD_PRESENT` (a presence sentinel, not
+a slot builder) so `{#if children}` reads truthy.
 */
-export type UiProps = Record<string, (() => unknown) | ((host: Element) => void)> & {
-    $children?: (host: Element) => void
+export type UiProps = Record<string, () => unknown> & {
+    children?: () => unknown
 }