@jxsuite/runtime 4.0.3 → 5.1.0

package/src/runtime.ts

@@ -1,16 +1,17 @@
 /// <reference lib="dom" />
 /**
  * Jx — JSON-native reactive web component runtime
- * @version 3.0.0
- * @license MIT
  *
  * Four-step pipeline:
- *   1. resolve    — fetch JSON source (or accept raw object)
- *   2. buildScope — state detection + reactive proxy construction
- *   3. render     — walk resolved tree, build DOM, wire reactive effects
- *   4. output     — append to target
+ *
+ * 1. `resolve` — fetch JSON source (or accept raw object)
+ * 2. `buildScope` — state detection + reactive proxy construction
+ * 3. `render` — walk resolved tree, build DOM, wire reactive effects
+ * 4. `output` — append to target
  *
  * @module jx
+ * @license MIT
+ * @version 3.0.0
  */
 
 import {
@@ -38,38 +39,52 @@ import {
 import { evaluateExpression, evaluateOperand, isMutating } from "./expression.ts";
 import { readPath } from "./pointer.ts";
 import type {
-  DynamicClass,
   JxContext,
   JxEventHandler,
+  JxHostScope,
   JxMount,
   JxMountOptions,
   JxPath,
   JxRenderOptions,
+  JxRowContext,
   JxScope,
+  JxScopeFunction,
+  JxScopeValue,
 } from "./types.ts";
 import {
   bodyReturnsValue,
   hasStructuredBody,
+  isBoolean,
   isExpressionDef,
+  isFunction,
   isFunctionDef,
   isJsonObject,
   isMappedArray,
   isNamedFormulaDef,
+  isNestedStyle,
+  isNonNullObject,
+  isNumber,
   isPrivateStateKey,
   isPrototypeDef,
   isRef as isRefValue,
   isServerFnDef,
+  isString,
   isTagExpression,
   isTemplateString,
   paramNames,
 } from "@jxsuite/schema/guards";
+import type { TagNameSlot } from "@jxsuite/schema/guards";
 import { formatSrcset, parseSrcset } from "@jxsuite/schema/asset-paths";
 import { runStatements } from "./statements.ts";
 import { readCookie, serializeCookie } from "./cookie.ts";
 import type {
+  CemParameter,
+  JsonValue,
   JxAttributeValue,
+  JxClassCtorDef,
   JxClassDef,
   JxDocument,
+  JxDocumentValue,
   JxElement,
   JxFunctionDef,
   JxHeadEntry,
@@ -105,8 +120,8 @@ let _schemaVersionWarned = false;
  * runtime supports. A relative or non-hosted `$schema` (local dev schema paths) is ignored. This is
  * a diagnostic only — there is no document-format migration story yet (see spec §3.2 / §21.4).
  */
-function checkSchemaVersion($schema: unknown): void {
-  if (_schemaVersionWarned || typeof $schema !== "string") {
+function checkSchemaVersion($schema: JxDocumentValue | undefined): void {
+  if (_schemaVersionWarned || !isString($schema)) {
     return;
   }
   const match = $schema.match(/\/schema\/v(\d+)\b/);
@@ -126,7 +141,7 @@ export async function Jx(
 ) {
   const base = options?.base
     ? new URL(options.base, location.href).href
-    : typeof source === "string"
+    : isString(source)
       ? new URL(source, location.href).href
       : location.href;
   const doc = await resolve(source);
@@ -138,18 +153,57 @@ export async function Jx(
     _rootMedia = doc.$media;
   }
 
-  const mounted = await mount(doc, target, {
-    base,
-    ...(options?.onNodeCreated ? { onNodeCreated: options.onNodeCreated } : {}),
-    ...(options?.signal ? { signal: options.signal } : {}),
-  });
+  const mountOptions: JxMountOptions = { base };
+  if (options?.onNodeCreated) {
+    mountOptions.onNodeCreated = options.onNodeCreated;
+  }
+  if (options?.signal) {
+    mountOptions.signal = options.signal;
+  }
+  const mounted = await mount(doc, target, mountOptions);
   return mounted.scope;
 }
 
+/**
+ * A lifecycle hook a document's state supplies (`onMount`, `onUnmount`, `onAdopted`) as the runtime
+ * calls it: with the scope, plus the host element for a defined element's `onMount`, which also
+ * receives the host as `this`.
+ */
+type ScopeHook = (
+  this: HTMLElement | JxScope | undefined,
+  scope: JxScope,
+  host?: HTMLElement,
+) => void;
+
+/**
+ * Whether a scope member can be called as a {@link ScopeHook}. Being a function is the whole
+ * contract: JavaScript checks neither the arguments a call passes nor what it returns, so every
+ * function accepts this call, and the runtime discards whatever it returns.
+ */
+function isScopeHook(value: unknown): value is ScopeHook {
+  return isFunction(value);
+}
+
 /** Host-scope keys the runtime owns: `$media`, `$map`, the `$`-locals and `#`-private entries. */
 const HOST_SCOPE_RESERVED = /^[$#]/;
 
-function assertHostScope(scope: Record<string, unknown>): void {
+/**
+ * A host's scope as the runtime merges it: the host's own record, typed as the {@link JxScope} it
+ * joins.
+ *
+ * @param {S} scope - The host's scope, held to `JxScopeValue` member by member by its type
+ * @returns {JxScope}
+ */
+function hostScopeOf<S extends JxHostScope<S>>(scope: S): JxScope {
+  /* SAFETY: `JxHostScope<S>` has already held every member of `S` to `JxScopeValue`, recursively
+     through arrays, records and function results. What TypeScript cannot conclude from that is an
+     index signature, which an interface never has implicitly, so a host's own interface is not
+     assignable to `JxScope` however its members are typed. Nothing is copied or converted: this is
+     the host's record, read by member name like every other scope. */
+  return scope as JxScope;
+}
+
+function assertHostScope(scope: JxScope): void {
   for (const key of Object.keys(scope)) {
     if (HOST_SCOPE_RESERVED.test(key)) {
       throw new TypeError(
@@ -175,26 +229,28 @@ function assertHostScope(scope: Record<string, unknown>): void {
  * @returns {Promise<JxMount>}
  * @docs extending/embedding/runtime-host
  */
-export async function mount(
+export async function mount<S extends JxHostScope<S> = JxScope>(
   doc: JxDocument,
   target: ParentNode,
-  options: JxMountOptions = {},
+  options: JxMountOptions<S> = {},
 ): Promise<JxMount> {
-  const hostScope = options.scope ?? {};
+  const hostScope: JxScope = options.scope ? hostScopeOf(options.scope) : {};
   assertHostScope(hostScope);
   const base = options.base ? new URL(options.base, location.href).href : location.href;
   const ctx: JxContext = {
     base,
     media: options.media ?? doc.$media ?? null,
     root: null,
-    ...(options.resolver ? { resolver: options.resolver } : {}),
-    ...(options.skipServerFunctions === undefined
-      ? {}
-      : { skipServerFunctions: options.skipServerFunctions }),
-    ...(options.skipAutoRequests === undefined
-      ? {}
-      : { skipAutoRequests: options.skipAutoRequests }),
   };
+  if (options.resolver) {
+    ctx.resolver = options.resolver;
+  }
+  if (options.skipServerFunctions !== undefined) {
+    ctx.skipServerFunctions = options.skipServerFunctions;
+  }
+  if (options.skipAutoRequests !== undefined) {
+    ctx.skipAutoRequests = options.skipAutoRequests;
+  }
   checkSchemaVersion(doc.$schema);
 
   // Register custom elements declared in $elements (depth-first)
@@ -218,8 +274,10 @@ export async function mount(
       }
       options.onNodeCreated?.(el, path, def, state);
     },
-    ...(options.onNodeMoved ? { onNodeMoved: options.onNodeMoved } : {}),
   };
+  if (options.onNodeMoved) {
+    renderOptions.onNodeMoved = options.onNodeMoved;
+  }
   const { result: root, stop } = runScoped(() => renderNode(doc, scope, renderOptions));
   ctx.root = root;
 
@@ -231,11 +289,18 @@ export async function mount(
     }
     disposed = true;
     options.signal?.removeEventListener("abort", dispose);
+    /* The root leaves the document BEFORE its effects stop (embedding.md §2.2). Stopping releases
+       each element's styles, and on a connected subtree every one of those inline-property and
+       `data-jx` writes schedules a style invalidation for a node that is leaving anyway: a
+       Publish tab switch spent 22 ms there, and a dialog's close forced a recalculation of the
+       subtree it was removing. It is also the order a custom element's own `onUnmount` sees,
+       which runs from `disconnectedCallback` (spec.md §16.4). */
+    root.remove();
     stop();
-    if (mounted && typeof scope.onUnmount === "function") {
-      (scope.onUnmount as (s: JxScope) => unknown)(scope);
+    // Called as a method, so a hook that reads `this` sees the scope, as it always has.
+    if (mounted && isScopeHook(scope.onUnmount)) {
+      scope.onUnmount(scope);
     }
-    root.remove();
   };
 
   if (options.signal?.aborted) {
@@ -245,8 +310,8 @@ export async function mount(
     options.signal?.addEventListener("abort", dispose, { once: true });
     target.append(root);
     mounted = true;
-    if (typeof scope.onMount === "function") {
-      (scope.onMount as (s: JxScope) => unknown)(scope);
+    if (isScopeHook(scope.onMount)) {
+      scope.onMount(scope);
     }
   }
   return { scope, root, elements, dispose };
@@ -278,8 +343,20 @@ export function preloadDocument(url: string, doc: JxDocument): void {
   }
 }
 
+/**
+ * A response's Content-Type, or `""` when it carries no headers at all. A response we have no
+ * EVIDENCE about is one we proceed with rather than guess. Every real `Response` has headers; a
+ * host's or a test's `fetch` stand-in may not, which is what the parameter type admits.
+ *
+ * @param res The response, or a stand-in for one
+ * @returns {string}
+ */
+function responseContentType(res: Partial<Pick<Response, "headers">>): string {
+  return res.headers?.get("Content-Type") ?? "";
+}
+
 export async function resolve(source: string | JxDocument, ctx?: JxContext): Promise<JxDocument> {
-  if (typeof source !== "string") {
+  if (!isString(source)) {
     return source;
   }
   // A mount's resolver answers for THIS mount and its hit never enters the shared cache.
@@ -304,16 +381,16 @@ export async function resolve(source: string | JxDocument, ctx?: JxContext): Pro
      * Checked on the content type rather than by sniffing the body: a host that says `text/html`
      * has told us plainly, and saying so costs nothing.
      */
-    // Optional-chained: a response that carries no headers at all is one we have no EVIDENCE
-    // About, and guessing is worse than proceeding. Every real `Response` has them.
-    const contentType = res.headers?.get("Content-Type") ?? "";
+    const contentType = responseContentType(res);
     if (contentType.includes("text/html")) {
       throw new Error(
         `Jx: ${source} returned HTML, not a document — the host answered a missing file with its ` +
           `app shell (a single-page fallback), so this path is not served.`,
       );
     }
-    // Trust boundary: fetched sources are Jx documents by contract.
+    /* SAFETY: trust boundary. `resolve` fetches only URLs that name a Jx document (a `Jx()` source,
+       an `$elements` entry, a `$switch` case), and the host answered 2xx with a non-HTML body, so
+       the JSON is that document; the runtime does not schema-validate documents by design. */
     return (await res.json()) as JxDocument;
   });
   _resolveCache.set(source, p);
@@ -377,11 +454,6 @@ function resolveProxyPath(path: string): string {
   return _resolveToken ? `${path}?token=${encodeURIComponent(_resolveToken)}` : path;
 }
 
-/** @deprecated No longer needed — ContentCollection/ContentEntry resolve via generic class path */
-export function setSkipContentResolution(_v: boolean) {
-  // No-op retained for API compatibility
-}
-
 /**
  * Observe runtime-created reactive values: runs `fn` immediately inside a reactive effect and
  * re-runs it whenever a tracked value changes; returns a disposer. Dep tracking in @vue/reactivity
@@ -400,6 +472,12 @@ export function observeScope(fn: () => void): () => void {
   return () => scope.stop();
 }
 
+/** What {@link runScoped} hands back: the callback's result, and the disposer for its effects. */
+export interface ScopedRun<T> {
+  result: T;
+  stop: () => void;
+}
+
 /**
  * Run `fn` inside a detached reactive scope of THIS module's reactivity instance, returning its
  * result plus a disposer that stops every effect `fn` created. Callers that render via
@@ -409,11 +487,13 @@ export function observeScope(fn: () => void): () => void {
  * its stop() silently leaks every binding effect of the superseded render.
  *
  * @param {() => T} fn - Work that may create reactive effects (typically a renderNode call).
- * @returns {{ result: T; stop: () => void }} The callback result and the scope disposer.
+ * @returns {ScopedRun<T>} The callback result and the scope disposer.
  */
-export function runScoped<T>(fn: () => T): { result: T; stop: () => void } {
+export function runScoped<T>(fn: () => T): ScopedRun<T> {
   const scope = effectScope(true);
   try {
+    /* SAFETY: `run` answers undefined only for a scope that was already stopped, and this one was
+       created on the line above, so it is active and `run` returns what `fn` returned. */
     const result = scope.run(fn) as T;
     return { result, stop: () => scope.stop() };
   } catch (error) {
@@ -437,14 +517,14 @@ export function setCanvasViewportTranspose(on: boolean) {
 }
 
 const VIEWPORT_UNIT_RE = /(-?\d*\.?\d+)(?:s|l|d)?v(h|w|min|max|i|b)\b/gi;
-const VIEWPORT_UNIT_MAP: Record<string, string> = {
-  b: "cqb",
-  h: "cqh",
-  i: "cqi",
-  max: "cqmax",
-  min: "cqmin",
-  w: "cqw",
-};
+const VIEWPORT_UNIT_MAP = new Map([
+  ["b", "cqb"],
+  ["h", "cqh"],
+  ["i", "cqi"],
+  ["max", "cqmax"],
+  ["min", "cqmin"],
+  ["w", "cqw"],
+]);
 
 /**
  * Transpose CSS viewport units → container-query units in a value string, but only when the
@@ -457,7 +537,8 @@ export function transposeCanvasUnits(value: string): string {
   }
   return value.replace(
     VIEWPORT_UNIT_RE,
-    (_m, num: string, dim: string) => `${num}${VIEWPORT_UNIT_MAP[dim.toLowerCase()] ?? `cq${dim}`}`,
+    (_m, num: string, dim: string) =>
+      `${num}${VIEWPORT_UNIT_MAP.get(dim.toLowerCase()) ?? `cq${dim}`}`,
   );
 }
 
@@ -656,15 +737,15 @@ function canvasAssetValue(tagName: string, key: string, value: string): string {
   const name = key.toLowerCase();
   if (SRCSET_KEYS.has(name)) {
     const candidates = parseSrcset(value);
-    let changed = false;
     const next = candidates.map((candidate) => {
       const resolved = _canvasAssetResolver?.(candidate.url, name) ?? null;
       if (resolved === null || resolved === candidate.url) {
         return candidate;
       }
-      changed = true;
       return { descriptor: candidate.descriptor, url: resolved };
     });
+    // A rewritten candidate is a new object, so identity says whether anything changed.
+    const changed = next.some((candidate, index) => candidate !== candidates[index]);
     return changed ? formatSrcset(next) : value;
   }
   if (!isAssetKey(tagName, name)) {
@@ -726,18 +807,22 @@ export function setStampPropBindings(on: boolean) {
 const PURE_STATE_TEMPLATE = /^\s*\$\{\s*state\.(\w+)\s*\}\s*$/;
 
 /** The state key of an invertible `textContent` binding, or null (mixed template, deep path). */
-function boundPropKey(key: string, val: unknown, state: JxScope): string | null {
+function boundPropKey(
+  key: string,
+  val: JxDocumentValue | undefined,
+  state: JxScope,
+): string | null {
   if (!_stampPropBindings || key !== "textContent") {
     return null;
   }
   let sub: string | null = null;
-  if (isRefObj(val)) {
+  if (isRefValue(val)) {
     if (!val.$ref.startsWith("#/state/")) {
       return null;
     }
     const rest = val.$ref.slice("#/state/".length);
     sub = rest && !rest.includes("/") ? rest : null;
-  } else if (typeof val === "string") {
+  } else if (isString(val)) {
     sub = PURE_STATE_TEMPLATE.exec(val)?.[1] ?? null;
   }
   if (!sub) {
@@ -747,11 +832,11 @@ function boundPropKey(key: string, val: unknown, state: JxScope): string | null
   // In the raw scope (auto-unwrapped by the reactive proxy), and function/object entries (handlers,
   // $prototype instances) are not prop-overridable either — an instance $props write against any of
   // Them would clobber the definition's behavior, so their bindings are never marked editable.
-  const stored = (toRaw(state) as Record<string, unknown>)[sub];
-  if (isRef(stored) || typeof stored === "function") {
+  const stored = toRaw(state)[sub];
+  if (isRef(stored) || isFunction(stored)) {
     return null;
   }
-  if (typeof stored === "object" && stored !== null) {
+  if (isNonNullObject(stored)) {
     return null;
   }
   return sub;
@@ -789,7 +874,7 @@ export async function buildScope(
         configurable: true,
         enumerable: true,
         get: () => parentScope[key],
-        set: (value: unknown) => {
+        set: (value: JxScopeValue) => {
           parentScope[key] = value;
         },
       });
@@ -818,7 +903,7 @@ export async function buildScope(
   // First pass: collect naked values, expanded defaults, plain objects
   for (const [key, def] of Object.entries(defs)) {
     // 1. String value
-    if (typeof def === "string") {
+    if (isString(def)) {
       if (!def.includes("${")) {
         raw[key] = def;
       } // Shape 1: naked string
@@ -826,7 +911,7 @@ export async function buildScope(
     }
 
     // 2. Number, boolean, null
-    if (typeof def === "number" || typeof def === "boolean" || def === null) {
+    if (isNumber(def) || isBoolean(def) || def === null) {
       raw[key] = def;
       continue;
     }
@@ -838,7 +923,7 @@ export async function buildScope(
     }
 
     // 4. Object
-    if (typeof def === "object") {
+    if (isNonNullObject(def)) {
       if (def.$prototype) {
         continue;
       } // Handled in later passes
@@ -862,10 +947,10 @@ export async function buildScope(
   // Wrap in Vue reactive proxy — deep reactivity from this point on
   const state = reactive(raw);
 
-  // Second pass: template strings → computed
+  // Second pass: template strings → computed, a single expression keeping its own type (§5.3)
   for (const [key, def] of Object.entries(defs)) {
-    if (typeof def === "string" && def.includes("${")) {
-      state[key] = computed(() => evaluateTemplate(def, state));
+    if (isString(def) && def.includes("${")) {
+      state[key] = computed(() => evaluateValueTemplate(def, state));
     }
   }
 
@@ -875,21 +960,9 @@ export async function buildScope(
       const node = def.$expression;
       if (isNamedFormulaDef(def)) {
         // A named formula: callable with positional args mapped onto its declared parameters.
-        const params = def.parameters as (string | { name?: string; default?: unknown })[];
-        state[key] = (...argValues: unknown[]) => {
-          const args: Record<string, unknown> = {};
-          for (const [i, p] of params.entries()) {
-            const name = typeof p === "string" ? p : (p?.name ?? "");
-            if (!name) {
-              continue;
-            }
-            args[name] =
-              argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p
-                ? p.default
-                : argValues[i];
-          }
-          return evaluateExpression(node, state, null, { args });
-        };
+        const params = def.parameters;
+        state[key] = (...argValues: JxScopeValue[]) =>
+          evaluateExpression(node, state, null, { args: bindPositionalArgs(params, argValues) });
       } else if (isMutating(node.operator)) {
         const handler: JxEventHandler = (s, event) => evaluateExpression(node, s, event);
         state[key] = handler;
@@ -906,23 +979,16 @@ export async function buildScope(
       // $args names (invoked via the call operator); without → an event handler.
       const { body } = def;
       if (Array.isArray(def.parameters) && def.parameters.length > 0) {
-        const params = def.parameters as (string | { name?: string; default?: unknown })[];
-        state[key] = (...argValues: unknown[]) => {
-          const args: Record<string, unknown> = {};
-          for (const [i, p] of params.entries()) {
-            const name = typeof p === "string" ? p : (p?.name ?? "");
-            if (!name) {
-              continue;
-            }
-            args[name] =
-              argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p
-                ? p.default
-                : argValues[i];
-          }
-          return runStatements(body, state, null, { args, target: dispatchRoot });
-        };
+        const params = def.parameters;
+        state[key] = (...argValues: JxScopeValue[]) =>
+          runStatements(body, state, null, {
+            args: bindPositionalArgs(params, argValues),
+            target: dispatchRoot,
+          });
       } else {
-        const handler: JxEventHandler = (s, event) => {
+        /* The event is optional in fact: a `call` operator or a host invokes a handler with the
+           scope alone, and the body then runs with no event rather than an undefined one. */
+        const handler = (s: JxScope, event?: Event | null): void => {
           void runStatements(body, s, event ?? null, { target: dispatchRoot });
         };
         state[key] = handler;
@@ -939,7 +1005,8 @@ export async function buildScope(
     }
   }
 
-  // Fifth pass: timing: "server" entries (dev mode — execute client-side, boundary unenforced)
+  /* Fifth pass: timing: "server" entries, each called through the host's /__jx_server__ proxy, or
+     in process only when the host registered the module itself (spec.md §11.4) */
   if (!(ctx?.skipServerFunctions ?? _serverFnConfig.skip)) {
     for (const [key, def] of Object.entries(defs)) {
       if (isServerFnDef(def)) {
@@ -958,14 +1025,42 @@ export async function buildScope(
   return state;
 }
 
+/**
+ * Map a call's positional arguments onto a definition's declared parameter names, as `$args/<name>`
+ * refs read them. A parameter given as an object supplies its `default` for a position the call
+ * left undefined. Parameters come from a document that is not schema-validated at runtime, so an
+ * entry that names nothing (null, or an object without a `name`) binds nothing.
+ *
+ * @param parameters The declared parameters, in call order
+ * @param argValues The values the call passed, in the same order
+ * @returns {JxScope} Name to value, for the body's `$args` refs
+ */
+function bindPositionalArgs(
+  parameters: readonly (string | CemParameter | null)[],
+  argValues: readonly JxScopeValue[],
+): JxScope {
+  const args: JxScope = {};
+  for (const [i, p] of parameters.entries()) {
+    const name = isString(p) ? p : (p?.name ?? "");
+    if (!name) {
+      continue;
+    }
+    args[name] =
+      argValues[i] === undefined && p !== null && !isString(p) && "default" in p
+        ? p.default
+        : argValues[i];
+  }
+  return args;
+}
+
 /**
  * Check whether an object contains any JSON Schema keywords. Used to discriminate Shape 2b (pure
  * type definition) from Shape 1 (naked object).
  *
- * @param {JxScope} obj
+ * @param obj A state entry object, as the document wrote it
  * @returns {boolean}
  */
-function hasSchemaKeywords(obj: object) {
+function hasSchemaKeywords(obj: Readonly<Record<string, JxDocumentValue | undefined>>) {
   for (const k of Object.keys(obj)) {
     if (SCHEMA_KEYWORDS.has(k)) {
       return true;
@@ -975,23 +1070,151 @@ function hasSchemaKeywords(obj: object) {
 }
 export { hasSchemaKeywords };
 
+/**
+ * The names a template may read without a `state.` prefix, in the order {@link templateArgs}
+ * supplies them.
+ *
+ * `$site` and `$page` are here for the reason `evaluateStaticTemplate` in the compiler binds them:
+ * every example in site-architecture.md §8.2 and §13.4 writes the bare `${$page.locale}`, and
+ * `injectContext` (or the Studio canvas) puts the two on the document's state, not in the
+ * template's lexical scope. Without them the live runtime threw `ReferenceError: $page is not
+ * defined` on a template the build renders, so a page that prerendered correctly drew nothing where
+ * it hydrated or rendered live.
+ */
+const TEMPLATE_PARAMS = ["state", "$map", "item", "index", "$site", "$page"] as const;
+
+/** The values {@link TEMPLATE_PARAMS} name, read from one scope. */
+function templateArgs(state: JxScope): Parameters<TemplateFn<unknown>> {
+  const $map = rowContext(state);
+  return [state, $map, $map?.item, $map?.index, state.$site, state.$page];
+}
+
 /**
  * Evaluate a template string in the context of state and optional $map. Templates use
- * `state.varName` and `$map.item` syntax.
+ * `state.varName`, `$map.item` (or `item`) and the page context `$page` / `$site`.
  *
  * @param {string} str
  * @param {JxScope} state
  * @returns {string}
  */
 function evaluateTemplate(str: string, state: JxScope): string {
-  const $map = state?.$map as { item?: unknown; index?: number } | undefined;
-  const fn = new Function("state", "$map", "item", "index", `return \`${str}\``) as (
-    state: JxScope,
-    $map: unknown,
-    item: unknown,
-    index: number | undefined,
-  ) => string;
-  return fn(state, $map, $map?.item, $map?.index);
+  let fn = textTemplates.get(str);
+  if (!fn) {
+    /* SAFETY: `new Function` compiles exactly the TEMPLATE_PARAMS, and its body returns a template
+       literal, so every call answers a string (or throws, which the caller sees). */
+    fn = new Function(...TEMPLATE_PARAMS, `return \`${str}\``) as TemplateFn<string>;
+    remember(textTemplates, str, fn);
+  }
+  return fn(...templateArgs(state));
+}
+
+/**
+ * Compiled templates, by source. A compiled template closes over nothing — everything it reads
+ * arrives as one of its TEMPLATE_PARAMS — so one function per distinct source serves every binding
+ * that spells it. Compiling is the expensive half: a `$map` row re-bound to a fresh item re-runs
+ * each of its template effects, and a 40-row window re-binding on every scroll step spent seconds
+ * in `new Function` alone. A source that fails to compile throws before it is stored, so it throws
+ * again on the next evaluation exactly as it did before the cache existed.
+ */
+const textTemplates = new Map<string, TemplateFn<string>>();
+
+/** {@link textTemplates}, for single-expression templates compiled to keep their own type. */
+const valueTemplates = new Map<string, TemplateFn<JxScopeValue>>();
+
+/**
+ * How many sources a template cache holds before it starts over. Editing mints a new source per
+ * keystroke, so the cache is bounded; clearing it wholesale costs one recompile per live binding,
+ * which is what every evaluation cost before there was a cache.
+ */
+const TEMPLATE_CACHE_MAX = 4096;
+
+/**
+ * Store a compiled template, emptying the cache first when it is full.
+ *
+ * @param {Map<string, F>} cache
+ * @param {string} source
+ * @param {F} fn
+ */
+function remember<F>(cache: Map<string, F>, source: string, fn: F): void {
+  if (cache.size >= TEMPLATE_CACHE_MAX) {
+    cache.clear();
+  }
+  cache.set(source, fn);
+}
+
+/** Template sources already reported as throwing, so a binding re-run per keystroke warns once. */
+const reportedTemplates = new Set<string>();
+
+/** Who hears a throwing template binding, when a host asked to; otherwise the console does. */
+let _templateErrorHandler: ((error: Error, source: string) => void) | null = null;
+
+/**
+ * Route throwing template bindings to `handler` instead of a console warning, or back with `null`.
+ *
+ * A binding survives its expression throwing (§6.1), which is right for a page and wrong for a host
+ * whose question IS whether the document renders: Studio's render critic must still refuse a page
+ * whose `${nonExistent}` can never evaluate. Every throw is delivered, not only the first.
+ *
+ * @param {((error: Error, source: string) => void) | null} handler
+ */
+export function setTemplateErrorHandler(
+  handler: ((error: Error, source: string) => void) | null,
+): void {
+  _templateErrorHandler = handler;
+}
+
+/**
+ * Run a template binding as an effect that survives its expression throwing.
+ *
+ * A binding is live: `${state.posts.length}` over a collection that resolves asynchronously reads
+ * `null` first and an array a moment later. Unguarded, the first run's TypeError escaped `effect()`
+ * — which stops the effect before rethrowing — so the binding never re-ran when the data arrived,
+ * and the throw unwound the whole `renderNode` above it: one early read blanked the page. Caught
+ * INSIDE the effect, every dependency read before the throw stays tracked, so the binding re-runs
+ * on the change that makes it valid. Until then it shows `fallback`'s answer (nothing written, by
+ * default), and the error is reported once per source.
+ *
+ * @param {string} source - The template, for the report
+ * @param {() => void} run - Evaluates the template and writes it
+ * @param {() => void} [fallback] - What a throwing evaluation writes instead
+ */
+function bindTemplate(source: string, run: () => void, fallback?: () => void): void {
+  effect(() => {
+    try {
+      run();
+    } catch (error) {
+      if (_templateErrorHandler) {
+        _templateErrorHandler(error instanceof Error ? error : new Error(String(error)), source);
+      } else if (!reportedTemplates.has(source)) {
+        reportedTemplates.add(source);
+        console.warn(`jx: template ${JSON.stringify(source)} threw:`, error);
+      }
+      fallback?.();
+    }
+  });
+}
+
+/** A compiled template: the scope, the row context, its item and index, and the page context. */
+type TemplateFn<R> = (
+  state: JxScope,
+  $map: JxRowContext | undefined,
+  item: JxRowContext["item"],
+  index: JxRowContext["index"] | undefined,
+  $site: JxScopeValue,
+  $page: JxScopeValue,
+) => R;
+
+/**
+ * The row context a scope carries, or undefined outside a mapped row.
+ *
+ * @param {JxScope} state
+ * @returns {JxRowContext | undefined}
+ */
+function rowContext(state: JxScope): JxRowContext | undefined {
+  /* SAFETY: `$map` is runtime vocabulary. A host scope may not supply it (`assertHostScope`), a
+     node never binds it as a `$`-local (it is in RESERVED_KEYS), and the one writer is
+     `renderMappedArrayInto`, which binds the `{ index, item }` row record; elsewhere it is absent. */
+  return state.$map as JxRowContext | undefined;
 }
 
 /**
@@ -1032,50 +1255,137 @@ export function isSingleExpression(str: string): boolean {
 }
 
 /**
- * Evaluate a template for an ATTRIBUTE, keeping the expression's own type.
- *
- * `evaluateTemplate` interpolates into a string, which is what text wants and what an attribute
- * cannot afford: `"${state.expanded}"` has to arrive as the boolean `false`, or `booleanAttrValue`
- * never sees a boolean, `open="false"` is written, and HTML reads that as open. Only a single
- * expression can carry a type at all — `"a ${b}"` is text by construction — which is the same line
+ * Evaluate a template as a VALUE — a state entry (Shape 3) or an attribute — keeping the
+ * expression's own type.
+ *
+ * `evaluateTemplate` interpolates into a string, which is what text wants and what a value cannot
+ * afford: `"${state.expanded}"` has to arrive as the boolean `false`, or `booleanAttrValue` never
+ * sees a boolean, `open="false"` is written, and HTML reads that as open. A state entry is the same
+ * case one step removed: `"isBrand": "${state.name === 'github'}"` held the string `"false"`, which
+ * is truthy, so every `state.isBrand ? … : …` took the wrong branch in Studio and in a hydrated
+ * component while the prerendered page took the right one. Only a single expression can carry a
+ * type at all — `"a ${b}"` is text by construction — which is the same line
  * `evaluateStaticTemplate` draws in the compiler, and drawing it identically is what keeps a
  * prerendered page and the same document rendered live in agreement.
  *
  * @param {string} str - Template source
  * @param {JxScope} state - Reactive scope
- * @returns {unknown} The expression's value, or the interpolated string
+ * @returns {JxScopeValue} The expression's value, or the interpolated string
  */
-function evaluateAttrTemplate(str: string, state: JxScope): unknown {
+function evaluateValueTemplate(str: string, state: JxScope): JxScopeValue {
   if (!isSingleExpression(str)) {
     return evaluateTemplate(str, state);
   }
-  const $map = state?.$map as { item?: unknown; index?: number } | undefined;
-  const fn = new Function("state", "$map", "item", "index", `return (${str.slice(2, -1)})`) as (
-    state: JxScope,
-    $map: unknown,
-    item: unknown,
-    index: number | undefined,
-  ) => unknown;
-  return fn(state, $map, $map?.item, $map?.index);
+  let fn = valueTemplates.get(str);
+  if (!fn) {
+    /* SAFETY: `new Function` compiles exactly the TEMPLATE_PARAMS; the body returns one
+       expression's value, which is whatever the scope it reads holds, so it is typed as a scope
+       member and narrowed by the attribute writer. */
+    fn = new Function(
+      ...TEMPLATE_PARAMS,
+      `return (${str.slice(2, -1)})`,
+    ) as TemplateFn<JxScopeValue>;
+    remember(valueTemplates, str, fn);
+  }
+  return fn(...templateArgs(state));
 }
 
 // ─── Step 2b: Function resolution (Shape 4) ─────────────────────────────────
 
-/** Shape of a dynamically imported module: named exports plus an optional default. */
-type ImportedModule = Record<string, unknown> & { default?: Record<string, unknown> };
+/**
+ * A module namespace as the runtime reads it: exports looked up by name, then under `default` (the
+ * shape a CommonJS module takes when imported). An export is whatever the module exported, so each
+ * lookup checks what it found before using it.
+ */
+interface ImportedModule {
+  readonly [exportName: string]: JxScopeValue;
+  readonly default?: ImportedModule;
+}
+
+/**
+ * Import a module namespace by specifier.
+ *
+ * Not `async`: the import's own promise is handed back, so awaiting this costs exactly the ticks
+ * awaiting `import()` did, and scope construction keeps its order against its siblings'.
+ *
+ * @param {string} specifier
+ * @returns {Promise<ImportedModule>}
+ */
+/**
+ * How the host serves the package an `npm:` specifier names, or null for none.
+ *
+ * `npm:@jxsuite/search/client` is a package specifier (spec.md §5.3, 4c), and the build bundles it
+ * (`compiler/src/site/bundler.ts`). The interpreter had no answer for it: `new URL()` reads `npm:`
+ * as a URL scheme, so it was handed to `import()` verbatim and the browser refused it as a
+ * cross-origin request to a scheme it does not fetch. A host that renders documents live knows
+ * where its packages are served (the dev server bundles `/node_modules/<package>/<subpath>` on
+ * demand), so it says so here. With no resolver the bare specifier is imported, which an import map
+ * can answer.
+ */
+let _npmModuleResolver: ((specifier: string) => string) | null = null;
+
+/**
+ * Install (or with `null`, remove) the host's resolver for `npm:` specifiers.
+ *
+ * @param {((specifier: string) => string) | null} resolver - Package specifier → importable URL
+ */
+export function setNpmModuleResolver(resolver: ((specifier: string) => string) | null): void {
+  _npmModuleResolver = resolver;
+}
+
+/** The scheme a package specifier is written with. */
+const NPM_SCHEME = "npm:";
+
+/**
+ * Import a module a document names by `$src`: an `npm:` package through the host's resolver, and
+ * anything else from the document's base (then as written).
+ *
+ * @param {string} src - The `$src` as the document spells it
+ * @param {string} [base] - The document's URL
+ * @returns {Promise<ImportedModule>}
+ */
+async function importSource(src: string, base?: string): Promise<ImportedModule> {
+  if (src.startsWith(NPM_SCHEME)) {
+    const specifier = src.slice(NPM_SCHEME.length);
+    return importModule(_npmModuleResolver?.(specifier) ?? specifier);
+  }
+  if (base) {
+    try {
+      return await importModule(new URL(src, base).href);
+    } catch {
+      return importModule(src);
+    }
+  }
+  return importModule(src);
+}
+
+function importModule(specifier: string): Promise<ImportedModule> {
+  /* SAFETY: trust boundary — a module exports whatever it exports. `import()` resolves to the
+     module namespace object, whose keys are its export names, and every export is typed as the scope
+     member it becomes: the runtime uses one only after `isFunction` has accepted it (a Function
+     entry's `$src`, a server function, a `$implementation` class) or after testing it for
+     presence, and both tests are defined for any value a module can export. `default` is only ever
+     read through optional property access. */
+  return import(specifier) as Promise<ImportedModule>;
+}
 
-/** Minimal contract an externally-imported resolver class may implement. */
-interface ExternalClassInstance {
-  value?: unknown;
-  resolve?: () => unknown;
-  subscribe?: (cb: (newVal: unknown) => void) => void;
+/**
+ * An external class's instance as the runtime uses it (spec.md §12.3): a record read by member
+ * name, three members of which are its contract with the runtime — a `value`, a `resolve()` that
+ * produces one (possibly a promise), and a `subscribe()` that pushes later ones. Each is optional
+ * and checked before it is used.
+ */
+interface ExternalClassInstance extends JxScope {
+  value?: JxScopeValue;
+  resolve?: () => JxScopeValue | Promise<JxScopeValue>;
+  subscribe?: (callback: (value: JxScopeValue) => void) => void;
 }
 
 /** Module cache for $src imports (shared with external class resolution). */
 const _moduleCache = new Map<string, ImportedModule>();
 
 /** A module the host will import on first use, keyed as the document spells its `$src`. */
-type ModuleLoader = () => Promise<Record<string, unknown>>;
+type ModuleLoader = () => Promise<ImportedModule>;
 
 /**
  * Lazy registrations: a loader until it runs, then the in-flight load, so two entries resolving the
@@ -1083,6 +1393,14 @@ type ModuleLoader = () => Promise<Record<string, unknown>>;
  */
 const _moduleLoaders = new Map<string, ModuleLoader | Promise<ImportedModule>>();
 
+/**
+ * The specifiers a host registered through `preloadModule`, in either form. Kept apart from
+ * `_moduleCache` because that cache is shared: a Function entry's `$src` import lands there too,
+ * and a `timing: "server"` entry naming the same specifier must still not run in the browser
+ * (spec.md §11.4). Only the host's own registration admits a server module in process.
+ */
+const _hostSeeded = new Set<string>();
+
 /**
  * Seed the `$src` module cache with a module the host already imported, under the specifier the
  * document spells. A bundled document cannot have its sidecar fetched by URL — the bundler saw
@@ -1095,21 +1413,22 @@ const _moduleLoaders = new Map<string, ModuleLoader | Promise<ImportedModule>>()
  * canvas frame registers every kit behaviour this way, so a page that uses no kit element loads
  * none of them (embedding.md §6).
  *
+ * A registered module is also how a host runs a `timing: "server"` entry in process; for any
+ * specifier not registered here, the runtime calls the host's `/__jx_server__` proxy instead.
+ *
  * @param {string} specifier - The `$src` value as written in the document
- * @param {Record<string, unknown> | (() => Promise<Record<string, unknown>>)} mod - The imported
- *   module namespace, or a loader that imports it on first use
+ * @param {ImportedModule | ModuleLoader} mod - The imported module namespace, or a loader that
+ *   imports it on first use
  */
-export function preloadModule(
-  specifier: string,
-  mod: Record<string, unknown> | ModuleLoader,
-): void {
-  if (typeof mod === "function") {
+export function preloadModule(specifier: string, mod: ImportedModule | ModuleLoader): void {
+  _hostSeeded.add(specifier);
+  if (isFunction(mod)) {
     _moduleCache.delete(specifier);
     _moduleLoaders.set(specifier, mod);
     return;
   }
   _moduleLoaders.delete(specifier);
-  _moduleCache.set(specifier, mod as ImportedModule);
+  _moduleCache.set(specifier, mod);
 }
 
 /**
@@ -1134,28 +1453,37 @@ function seededModule(src: string): ImportedModule | Promise<ImportedModule> | u
   if (!pending) {
     return undefined;
   }
-  if (typeof pending !== "function") {
+  if (!isFunction(pending)) {
     return pending;
   }
-  /* `Promise.resolve` so a thenable from a host's loader is still a Promise the call sites can
-     tell from a namespace. */
-  const load = Promise.resolve(pending()).then(
-    (mod) => {
-      _moduleCache.set(src, mod as ImportedModule);
+  /* Started here, outside the async body, so a loader that throws synchronously still throws to
+     the caller. The async body turns a thenable from a host's loader into a Promise the call sites
+     can tell from a namespace. */
+  const started = pending();
+  const load = (async () => {
+    try {
+      const mod = await started;
+      _moduleCache.set(src, mod);
       _moduleLoaders.delete(src);
-      return mod as ImportedModule;
-    },
-    (error: unknown) => {
+      return mod;
+    } catch (error) {
       /* A failed load — a chunk the network dropped — puts the loader back, so the next document to
          name the specifier tries again rather than inheriting this rejection for good. */
       _moduleLoaders.set(src, pending);
       throw error;
-    },
-  );
+    }
+  })();
   _moduleLoaders.set(src, load);
   return load;
 }
 
+/**
+ * A Function entry's implementation as the runtime calls it — a compiled `body` or a `$src` export
+ * — with the scope as its first argument. JavaScript checks none of the arguments, and what the
+ * call returns is bound into the scope like any other member.
+ */
+type ScopeFunction = (...args: JxScopeValue[]) => JxScopeValue;
+
 /**
  * Resolve a $prototype: "Function" entry into a function or computed.
  *
@@ -1166,7 +1494,7 @@ function seededModule(src: string): ImportedModule | Promise<ImportedModule> | u
  * @param {JxScope} state - Reactive scope proxy
  * @param {string} key - Def key name
  * @param {string} [base] - Base URL for resolving $src imports
- * @returns {Promise<unknown>}
+ * @returns {Promise<JxScopeValue>}
  */
 async function resolveFunction(def: JxFunctionDef, state: JxScope, key: string, base?: string) {
   if (def.body && def.$src) {
@@ -1182,11 +1510,13 @@ async function resolveFunction(def: JxFunctionDef, state: JxScope, key: string,
     return noop;
   }
 
-  let fn: ((...args: unknown[]) => unknown) | undefined;
+  let fn: ScopeFunction;
 
-  if (typeof def.body === "string") {
+  if (isString(def.body)) {
     const params = resolveParamNames(def);
-    fn = new Function(...params, def.body) as (...args: unknown[]) => unknown;
+    /* SAFETY: `new Function` returns an ordinary function of the named parameters, `state` first.
+       A call never checks its arguments, and what the body returns is one more scope member. */
+    fn = new Function(...params, def.body) as ScopeFunction;
     Object.defineProperty(fn, "name", {
       configurable: true,
       value: def.name ?? key,
@@ -1205,23 +1535,16 @@ async function resolveFunction(def: JxFunctionDef, state: JxScope, key: string,
     } else if (seeded) {
       mod = seeded;
     } else {
-      if (base) {
-        const resolvedSrc = new URL(src, base).href;
-        try {
-          mod = (await import(resolvedSrc)) as ImportedModule;
-        } catch {
-          mod = (await import(src)) as ImportedModule;
-        }
-      } else {
-        mod = (await import(src)) as ImportedModule;
-      }
+      mod = await importSource(src, base);
       _moduleCache.set(src, mod);
     }
     const candidate = mod[exportName] ?? mod.default?.[exportName];
-    if (typeof candidate !== "function") {
+    if (!isFunction(candidate)) {
       throw new TypeError(`Jx: export "${exportName}" not found or not a function in "${src}"`);
     }
-    fn = candidate as (...args: unknown[]) => unknown;
+    /* SAFETY: the guard proved a function, and a function accepts any call: the runtime passes the
+       scope first, as a Function entry's contract says, and binds the result as a scope member. */
+    fn = candidate as ScopeFunction;
   }
 
   // Detect computed: body contains a return statement, or $src function introspection.
@@ -1229,11 +1552,9 @@ async function resolveFunction(def: JxFunctionDef, state: JxScope, key: string,
   const hasParams = (def.parameters ?? def.arguments ?? []).length > 0;
   let isComputed = false;
   if (!hasParams) {
-    if (typeof def.body === "string") {
-      isComputed = bodyReturnsValue(def.body);
-    } else if (fn) {
-      isComputed = fn.length <= 1 && bodyReturnsValue(fn.toString());
-    }
+    isComputed = isString(def.body)
+      ? bodyReturnsValue(def.body)
+      : fn.length <= 1 && bodyReturnsValue(fn.toString());
   }
   if (isComputed) {
     return computed(() => fn(state));
@@ -1297,6 +1618,72 @@ export const RESERVED_KEYS = new Set([
   "observedAttributes",
 ]);
 
+/**
+ * A child scope: reads fall through to `parent`, writes land on the child.
+ *
+ * @param {JxScope} parent
+ * @returns {JxScope}
+ */
+function inheritScope(parent: JxScope): JxScope {
+  /* SAFETY: `Object.create` is typed `any`, but what it returns is a plain object whose prototype
+     is `parent`, so it is keyed by string exactly as the scope it extends is. */
+  return Object.create(parent) as JxScope;
+}
+
+/**
+ * The named breakpoints a scope carries, or none.
+ *
+ * @param {JxScope} state
+ * @returns {Record<string, string>}
+ */
+function scopeMedia(state: JxScope): Record<string, string> {
+  /* SAFETY: `$media` is runtime vocabulary a host scope may not supply (`assertHostScope`); the one
+     writer is `buildScope`, which stores a document's or the mount's `$media` map, a record of
+     breakpoint name to media query. */
+  return (state["$media"] as Record<string, string> | undefined) ?? {};
+}
+
+/**
+ * An element as the property bag a Jx key writes into, `el[key] = value`. Reading or writing a key
+ * the element does not define is an ordinary expando, as it is in JavaScript.
+ */
+type ElementProperties = HTMLElement & Record<string, JxScopeValue>;
+
+/**
+ * View an element as its property bag.
+ *
+ * @param {HTMLElement} el
+ * @returns {ElementProperties}
+ */
+function elementProperties(el: HTMLElement): ElementProperties {
+  /* SAFETY: every element is an ordinary extensible object, so any string key can be read (a
+     missing one is undefined) and written; the added index signature claims nothing more. */
+  return el as ElementProperties;
+}
+
+/**
+ * The reactive state a connected Jx instance renders from, or null for any other element (and for
+ * an instance that has not connected yet).
+ *
+ * @param {HTMLElement} el
+ * @returns {JxScope | null}
+ */
+function instanceStateOf(el: HTMLElement): JxScope | null {
+  const state = elementProperties(el)._state;
+  /* SAFETY: `_state` is written by one writer, the Jx element class's `connectedCallback`, which
+     stores the scope `buildScope` answered; on any other element the expando is absent, and a
+     non-object is refused below. */
+  return isNonNullObject(state) ? (state as JxScope) : null;
+}
+
+/**
+ * Whether a scope member can be called as an event handler, `(scope, event)`. Being a function is
+ * the whole contract, for the reason {@link isScopeHook} gives.
+ */
+function isEventHandler(value: unknown): value is JxEventHandler {
+  return isFunction(value);
+}
+
 /**
  * Recursively render a Jx element definition into a DOM element.
  *
@@ -1342,12 +1729,18 @@ export function renderNode(
   const path = options?._path ?? [];
 
   // Text node children: bare strings/numbers/booleans produce DOM Text nodes
-  if (typeof def === "string" || typeof def === "number" || typeof def === "boolean") {
+  if (isString(def) || isNumber(def) || isBoolean(def)) {
     const textNode = document.createTextNode(String(def));
-    if (typeof def === "string" && isTemplateString(def)) {
-      effect(() => {
-        textNode.textContent = evaluateTemplate(def, state);
-      });
+    if (isTemplateString(def)) {
+      bindTemplate(
+        def,
+        () => {
+          textNode.textContent = evaluateTemplate(def, state);
+        },
+        () => {
+          textNode.textContent = "";
+        },
+      );
     }
     return textNode;
   }
@@ -1357,9 +1750,9 @@ export function renderNode(
   for (const [key, val] of Object.entries(def)) {
     if (key.startsWith("$") && !RESERVED_KEYS.has(key)) {
       if (localState === state) {
-        localState = Object.create(state) as JxScope;
+        localState = inheritScope(state);
       }
-      localState[key] = isRefObj(val) ? resolveRef(val.$ref, state) : val;
+      localState[key] = isRefValue(val) ? resolveRef(val.$ref, state) : val;
     }
   }
 
@@ -1369,7 +1762,7 @@ export function renderNode(
    * the supported mechanism is $elements + a custom-element tag (see spec §13).
    */
   if ("$ref" in def && !def.tagName) {
-    const refTarget = String((def as { $ref?: unknown }).$ref ?? "");
+    const refTarget = String(def.$ref ?? "");
     if (!warnedRefChildren.has(refTarget)) {
       warnedRefChildren.add(refTarget);
       console.warn(
@@ -1422,13 +1815,12 @@ export function renderNode(
    * DESCENDANTS are HTML, so the element and its children carry different namespaces.
    */
   const childNs = tagName === "foreignObject" ? null : ns;
-  /*
-   * A namespaced node comes back as Element; every apply* helper below is typed for HTMLElement
-   * and touches only members both share (style, dataset, setAttribute, append).
-   */
-  const el = (ns
-    ? document.createElementNS(ns, tagName)
-    : document.createElement(tagName)) as unknown as HTMLElement;
+  /* SAFETY: a namespaced node is an Element, not an HTMLElement, but every apply* helper below
+     touches only members SVG and MathML elements share with HTML ones (style, dataset,
+     setAttribute, append), and `bindProperty` writes `className` as an attribute on them. */
+  const el = ns
+    ? (document.createElementNS(ns, tagName) as HTMLElement)
+    : document.createElement(tagName);
 
   if (options?.onNodeCreated) {
     options.onNodeCreated(el, path, def, localState);
@@ -1441,12 +1833,7 @@ export function renderNode(
   if (def.style && tagName.includes("-")) {
     callSiteStyles.set(el, def.style);
   }
-  applyStyle(
-    el,
-    def.style ?? {},
-    (localState["$media"] as Record<string, string>) ?? {},
-    localState,
-  );
+  applyStyle(el, def.style ?? {}, scopeMedia(localState), localState);
   applyAttributes(el, def.attributes ?? {}, localState);
 
   const kids = def.children;
@@ -1514,18 +1901,22 @@ function applyProperties(el: HTMLElement, def: JxElement, state: JxScope) {
  *
  * @param {HTMLElement} el
  * @param {string} key The `on`-prefixed key
- * @param {unknown} val
+ * @param {JxDocumentValue | undefined} val
  * @param {JxScope} state
  * @returns {boolean} Whether a listener was attached
  */
-function bindHandler(el: HTMLElement, key: string, val: unknown, state: JxScope): boolean {
+function bindHandler(
+  el: HTMLElement,
+  key: string,
+  val: JxDocumentValue | undefined,
+  state: JxScope,
+): boolean {
   const type = key.slice(2);
   const scope = state;
-  if (isRefObj(val)) {
+  if (isRefValue(val)) {
     const handler = resolveRef(val.$ref, state);
-    if (typeof handler === "function") {
-      const handlerFn = handler as (s: JxScope, e: Event) => unknown;
-      el.addEventListener(type, (e) => handlerFn(scope, e));
+    if (isEventHandler(handler)) {
+      el.addEventListener(type, (e) => handler(scope, e));
     }
     return true;
   }
@@ -1536,9 +1927,11 @@ function bindHandler(el: HTMLElement, key: string, val: unknown, state: JxScope)
     });
     return true;
   }
-  if (isFunctionDef(val) && typeof val.body === "string") {
+  if (isFunctionDef(val) && isString(val.body)) {
     const params = resolveParamNames(val);
-    const fn = new Function(...params, val.body) as (s: JxScope, e: Event) => unknown;
+    /* SAFETY: `new Function` returns an ordinary function of the named parameters, `state` first;
+       the listener calls it with the scope and the event, and discards what it returns. */
+    const fn = new Function(...params, val.body) as JxEventHandler;
     el.addEventListener(type, (e) => fn(scope, e));
     return true;
   }
@@ -1571,11 +1964,16 @@ function bindDefinitionHandlers(host: HTMLElement, def: JxElement, state: JxScop
 /**
  * @param {HTMLElement} el
  * @param {string} key
- * @param {unknown} val
+ * @param {JxDocumentValue | undefined} val
  * @param {JxScope} state
  */
-function bindProperty(el: HTMLElement, key: string, val: unknown, state: JxScope) {
-  const target = el as unknown as Record<string, unknown>;
+function bindProperty(
+  el: HTMLElement,
+  key: string,
+  val: JxDocumentValue | undefined,
+  state: JxScope,
+) {
+  const target = elementProperties(el);
   const boundProp = boundPropKey(key, val, state);
   if (boundProp) {
     el.dataset.jxBoundProp = boundProp;
@@ -1583,15 +1981,16 @@ function bindProperty(el: HTMLElement, key: string, val: unknown, state: JxScope
   /* An `<img>` in a document says `{"tagName": "img", "src": "/hero.jpg"}`, so `src` arrives HERE
      as a top-level key and is written as a DOM PROPERTY — `attributes: { src }` is the rarer
      spelling. Both are the same reference and both need the same resolution. */
-  const asAsset = (resolved: unknown): unknown =>
-    typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+  const asAsset = (resolved: JxScopeValue): JxScopeValue =>
+    isString(resolved) ? canvasAssetValue(el.tagName, key, resolved) : resolved;
   /*
    * `className` on an SVGElement is a read-only SVGAnimatedString, so assigning it throws in the
    * strict mode an ES module always runs under. It is the most common Jx element property, so the
    * attribute form is the only one that works on both.
    */
-  const write = (resolved: unknown): void => {
-    const node = el as unknown as Element;
+  const write = (resolved: JxScopeValue): void => {
+    // Widened to Element: a namespaced node is typed HTMLElement here but is not one at runtime.
+    const node: Element = el;
     if (key === "className" && !(node instanceof HTMLElement)) {
       node.setAttribute("class", resolved == null ? "" : String(resolved));
       return;
@@ -1605,9 +2004,11 @@ function bindProperty(el: HTMLElement, key: string, val: unknown, state: JxScope
     }
     target[key] = resolved;
   };
-  if (isRefObj(val)) {
-    const refVal = val as { $ref: string };
+  if (isRefValue(val)) {
+    const refVal = val;
     if (key === "id") {
+      /* SAFETY: the `id` setter is a WebIDL DOMString attribute, which converts whatever it is
+         given to a string itself; the cast only lets the bound value reach that conversion. */
       target[key] = resolveRef(refVal.$ref, state) as string;
       return;
     }
@@ -1619,8 +2020,9 @@ function bindProperty(el: HTMLElement, key: string, val: unknown, state: JxScope
 
   // Universal ${} reactivity — template strings in element properties
   if (isTemplateString(val)) {
-    effect(() => {
-      write(asAsset(evaluateTemplate(val as string, state)));
+    const template = val;
+    bindTemplate(template, () => {
+      write(asAsset(evaluateTemplate(template, state)));
     });
     return;
   }
@@ -1794,7 +2196,7 @@ function textSink(tag: HTMLStyleElement): StyleSink {
       write();
     },
     text() {
-      return tag.textContent ?? "";
+      return tag.textContent;
     },
   };
 }
@@ -1810,9 +2212,10 @@ function textSink(tag: HTMLStyleElement): StyleSink {
  * @returns {StyleSink}
  */
 function openSink(doc: Document): StyleSink {
-  const view = doc.defaultView as (Window & { CSSStyleSheet?: typeof CSSStyleSheet }) | null;
+  // A window without constructable stylesheets (an older engine, a test DOM) lacks the global.
+  const view: (Window & { CSSStyleSheet?: typeof CSSStyleSheet }) | null = doc.defaultView;
   const SheetConstructor = view?.CSSStyleSheet;
-  if (typeof SheetConstructor === "function" && Array.isArray(doc.adoptedStyleSheets)) {
+  if (isFunction(SheetConstructor) && Array.isArray(doc.adoptedStyleSheets)) {
     try {
       const sheet = new SheetConstructor();
       doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];
@@ -1825,10 +2228,21 @@ function openSink(doc: Document): StyleSink {
   }
   const tag = doc.createElement("style");
   tag.dataset.jxSheet = "";
-  (doc.head ?? doc.documentElement).append(tag);
+  (documentHead(doc) ?? doc.documentElement).append(tag);
   return tag.sheet ? cssomSink(tag.sheet, () => tag.remove()) : textSink(tag);
 }
 
+/**
+ * A document's `<head>`, or null when it has none. HTML defines `document.head` as nullable (a
+ * document whose root element has no `head` child), though the DOM typings declare it non-null.
+ *
+ * @param {Document} doc
+ * @returns {HTMLHeadElement | null}
+ */
+function documentHead(doc: Document): HTMLHeadElement | null {
+  return doc.head;
+}
+
 /** One interned rule set: the rules as written, and how many elements point at them. */
 interface InternEntry {
   inserted: InsertedRules;
@@ -2090,7 +2504,7 @@ function declaresDisplay(style: JxStyle | undefined): boolean {
      `@media` block as "the author supplied one", so the element stayed `inline` at rest and
      became a block on hover — a live trap rather than a subtlety. An author who wants the
      platform's own default writes `display: revert` in the base block, which this sees. */
-  return Boolean(style) && typeof style === "object" && "display" in style;
+  return isNonNullObject(style) && "display" in style;
 }
 
 /**
@@ -2115,19 +2529,20 @@ function mergeStyle(base: JxStyle, over: JxStyle | undefined): JxStyle {
   if (!over) {
     return base;
   }
-  const out: Record<string, unknown> = { ...(base as Record<string, unknown>) };
-  for (const [key, value] of Object.entries(over as Record<string, unknown>)) {
+  const out: JxStyle = { ...base };
+  for (const [key, value] of Object.entries(over)) {
     const prior = out[key];
+    /* A block merges into whatever object the definition holds there. A repeated-block list is
+       spread to its index keys first, which is what spreading it as a style object always did. */
     out[key] =
-      prior !== null &&
-      typeof prior === "object" &&
-      value !== null &&
-      typeof value === "object" &&
-      !Array.isArray(value)
-        ? mergeStyle(prior as JxStyle, value as JxStyle)
+      isNestedStyle(value) && isNonNullObject(prior)
+        ? mergeStyle(
+            Array.isArray(prior) ? Object.fromEntries(Object.entries(prior)) : prior,
+            value,
+          )
         : value;
   }
-  return out as JxStyle;
+  return out;
 }
 
 /**
@@ -2198,7 +2613,7 @@ function applyStyleInto(
   live: boolean,
 ) {
   releaseElementStyles(el);
-  const doc = el.ownerDocument ?? document;
+  const doc = el.ownerDocument;
   const sheetState = sheetStateFor(doc);
 
   /* One gate for the whole call, so every recursion answers alike. Off in production and in
@@ -2221,8 +2636,9 @@ function applyStyleInto(
      variable inherits, which is correct, and the declaration stays in the rule where `:hover` can
      override it. The serial keeps two elements' variables apart: a descendant rule reads `var()`
      from the nearest ancestor that set it, and without it a styled child would shadow its parent's
-     `--jx-r0` with its own. It also makes the rule text — and so the scope handle hashed from it —
-     unique per element, which is exactly the sharing a reactive rule set must not have. */
+     `--jx-r0` with its own. Only a DESCENDANT rule needs that: a self-target declaration reads the
+     variable the element itself sets, so it is named by position alone (`--jx-s<n>`) and elements
+     that style alike keep sharing one rule set. */
   let serial = -1;
   let indirect = 0;
   const sources: { name: string; value: string | JxRef }[] = [];
@@ -2244,15 +2660,26 @@ function applyStyleInto(
         sources.push({ name: property, value });
         return null;
       }
-      if (serial < 0) {
-        ({ serial } = sheetState);
-        sheetState.serial += 1;
-      }
       /* Counted separately from `sources`, so an inline custom property before it cannot shift the
          name of an indirected one. The name is IN the rule text, and the interning handle is a
          hash of that text — a number that moved with unrelated declarations would give two
          otherwise identical styles two rules. */
-      const name = `--jx-r${serial}-${indirect}`;
+      let name: string;
+      if (target === "self") {
+        /* A SELF-target rule reads its variable from the element that sets it inline, which is
+           this element — no ancestor's value can reach it — so the name needs no serial, only its
+           position. Without this, every instance of a definition with one reactive declaration
+           (the kit's tree row binds its indent) interned a rule set of its own: an Outline
+           scrolling through a long page minted fifteen rules per row and grew the shared sheet
+           past fourteen thousand, slowing every insert and every style recalculation after. */
+        name = `--jx-s${indirect}`;
+      } else {
+        if (serial < 0) {
+          ({ serial } = sheetState);
+          sheetState.serial += 1;
+        }
+        name = `--jx-r${serial}-${indirect}`;
+      }
       indirect += 1;
       sources.push({ name, value });
       return `var(${name})`;
@@ -2304,7 +2731,7 @@ function applyStyleInto(
     scope.run(() => {
       for (const { name, value } of sources) {
         effect(() => {
-          const resolved = isRefObj(value)
+          const resolved = isRefValue(value)
             ? resolveRef(value.$ref, state)
             : evaluateTemplate(value, state);
           el.style.setProperty(name, canvasStyleValue(String(resolved ?? "")));
@@ -2397,7 +2824,7 @@ function applyAttributes(el: HTMLElement, attrs: Record<string, JxAttributeValue
     const attr = canvasAttrName(el, k);
     /* Inside the effects, not before them. A `$ref` or `${…}` value is not a string until the
        effect runs — which is exactly why the document walk this replaced could never see it. */
-    const write = (resolved: unknown) => {
+    const write = (resolved: JxScopeValue) => {
       if (resolved === null || resolved === undefined) {
         /* Nothing is an attribute the element does not have. A binding that resolves to `null`
            has to take the attribute WITH it, for the same reason a `false` does below — and an
@@ -2405,7 +2832,7 @@ function applyAttributes(el: HTMLElement, attrs: Record<string, JxAttributeValue
         el.removeAttribute(attr);
         return;
       }
-      if (typeof resolved === "boolean") {
+      if (isBoolean(resolved)) {
         const text = booleanAttrValue(attr, resolved);
         /* `removeAttribute`, not `setAttribute(attr, "false")`. A binding that flips back has to
            take the attribute WITH it: the element is being re-used, so anything left behind is the
@@ -2420,10 +2847,10 @@ function applyAttributes(el: HTMLElement, attrs: Record<string, JxAttributeValue
       }
       el.setAttribute(attr, canvasAssetValue(el.tagName, k, String(resolved)));
     };
-    if (isRefObj(v)) {
+    if (isRefValue(v)) {
       effect(() => write(resolveRef(v.$ref, state)));
     } else if (isTemplateString(v)) {
-      effect(() => write(evaluateAttrTemplate(v, state)));
+      bindTemplate(v, () => write(evaluateValueTemplate(v, state)));
     } else {
       write(v);
     }
@@ -2469,7 +2896,7 @@ function renderMappedArrayInto(
   const anchor = document.createComment("jx-array");
   parentEl.append(anchor);
   const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef, key: keyRef } = arrayDef;
-  const keyPointer = isRefObj(keyRef) ? keyRef.$ref : null;
+  const keyPointer = isRefValue(keyRef) ? keyRef.$ref : null;
   /* The instantiation chain the list belongs to (spec.md §16.9), for the same reason
      {@link renderSwitch} keeps one: a row that arrives with new data is inserted from an effect
      re-run, and the instance it holds must connect under the chain of the definition that drew
@@ -2487,14 +2914,22 @@ function renderMappedArrayInto(
   /** The rows currently rendered, in DOM order. */
   let rows: MappedRow[] = [];
 
+  /* Out of the document FIRST, then stopped: stopping releases every element's styles
+     (`releaseElementStyles`), and on a connected node each of those inline-property and `data-jx`
+     writes schedules a style invalidation for a node that is about to leave. Detached, they are
+     plain writes. See `dispose` in `mount`. */
   const teardown = (row: MappedRow): void => {
-    row.scope.stop();
     row.node.remove();
+    row.scope.stop();
   };
 
-  const createRow = (key: unknown, item: unknown, index: number): MappedRow => {
+  const createRow = (
+    key: MappedRow["key"],
+    item: MappedRow["map"]["item"],
+    index: number,
+  ): MappedRow => {
     const map = shallowReactive({ index, item });
-    const child = Object.create(state) as JxScope;
+    const child = inheritScope(state);
     child.$map = map;
     // The flat aliases stay readable by legacy readers, and follow the reactive context.
     Object.defineProperty(child, "$map/item", { enumerable: true, get: () => map.item });
@@ -2505,8 +2940,8 @@ function renderMappedArrayInto(
     return { key, map, node, scope };
   };
 
-  const reconcile = (list: unknown[], keys: unknown[]): void => {
-    const previous = new Map<unknown, MappedRow>();
+  const reconcile = (list: readonly JxScopeValue[], keys: readonly MappedRow["key"][]): void => {
+    const previous = new Map<MappedRow["key"], MappedRow>();
     for (const row of rows) {
       previous.set(row.key, row);
     }
@@ -2549,24 +2984,30 @@ function renderMappedArrayInto(
   };
 
   const update = (): void => {
-    let items: unknown = isRefObj(itemsSrc) ? resolveRef(itemsSrc.$ref, state) : itemsSrc;
-    if (Array.isArray(items) && isRefObj(filterRef)) {
+    let items: JxScopeValue = isRefValue(itemsSrc) ? resolveRef(itemsSrc.$ref, state) : itemsSrc;
+    if (Array.isArray(items) && isRefValue(filterRef)) {
       const fn = resolveRef(filterRef.$ref, state);
-      if (typeof fn === "function") {
-        items = items.filter(fn as (v: unknown) => boolean);
+      if (isFunction(fn)) {
+        /* SAFETY: the guard proved a function, and a function accepts any call: `Array#filter`
+           passes each item (with its index and the list) and reads only the result's truthiness. */
+        items = items.filter(fn as (item: MappedRow["map"]["item"]) => boolean);
       }
     }
-    if (Array.isArray(items) && isRefObj(sortRef)) {
+    if (Array.isArray(items) && isRefValue(sortRef)) {
       const fn = resolveRef(sortRef.$ref, state);
-      if (typeof fn === "function") {
-        items = [...(items as unknown[])].toSorted(fn as (a: unknown, b: unknown) => number);
+      if (isFunction(fn)) {
+        /* SAFETY: the guard proved a function, and a function accepts any call: `toSorted` passes
+           two items and orders by the sign of the number the comparator returns. */
+        const compare = fn as (a: MappedRow["map"]["item"], b: MappedRow["map"]["item"]) => number;
+        const unsorted: readonly JxScopeValue[] = items;
+        items = [...unsorted].toSorted(compare);
       }
     }
-    const list = Array.isArray(items) && mapDef ? (items as unknown[]) : [];
+    const list: readonly JxScopeValue[] = Array.isArray(items) && mapDef ? items : [];
 
     // Keys are read HERE, tracked, so a key that changes reconciles the list.
     const keys = list.map((item, index) => mappedRowKey(keyPointer, item, index, warnOnce));
-    const seen = new Set<unknown>();
+    const seen = new Set<MappedRow["key"]>();
     for (let i = 0; i < keys.length; i++) {
       if (seen.has(keys[i])) {
         warnOnce(
@@ -2620,9 +3061,9 @@ function renderMappedArrayInto(
 
 /** A rendered row of a mapped array. */
 interface MappedRow {
-  key: unknown;
+  key: JxScopeValue;
   /** The row's `$map` context; `item` and `index` are written in place when the row is reused. */
-  map: { index: number; item: unknown };
+  map: JxRowContext;
   node: HTMLElement | Text;
   scope: EffectScope;
 }
@@ -2634,10 +3075,10 @@ interface MappedRow {
  */
 function mappedRowKey(
   pointer: string | null,
-  item: unknown,
+  item: MappedRow["map"]["item"],
   index: number,
   warnOnce: (message: string) => void,
-): unknown {
+): MappedRow["key"] {
   if (pointer === null) {
     return index;
   }
@@ -2663,12 +3104,12 @@ function mappedRowKey(
  * schema already held to the tag-name pattern — the property that lets the compiler enumerate the
  * candidates and lets `createElement` be called without a second thought here.
  *
- * @param {unknown} tagName The element's declared tag.
+ * @param {TagNameSlot} tagName The element's declared tag.
  * @param {JxScope} scope The state the discriminant reads.
  * @returns {string} A literal tag name; `"div"` when nothing is declared.
  */
-export function resolveTagName(tagName: unknown, scope: JxScope): string {
-  if (typeof tagName === "string") {
+export function resolveTagName(tagName: TagNameSlot, scope: JxScope): string {
+  if (isString(tagName)) {
     return tagName;
   }
   if (!isTagExpression(tagName)) {
@@ -2706,7 +3147,7 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
   }
 
   applyProperties(container, def, state);
-  applyStyle(container, def.style ?? {}, (state["$media"] as Record<string, string>) ?? {}, state);
+  applyStyle(container, def.style ?? {}, scopeMedia(state), state);
   applyAttributes(container, def.attributes ?? {}, state);
   /* Every case renders in a detached scope of its own, stopped before the next case renders and
      when the container's own scope stops. A generation counter names the case a pending external
@@ -2725,9 +3166,10 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
   };
 
   effect(() => {
-    if (!isRefObj(def.$switch)) {
-      retire();
+    if (!isRefValue(def.$switch)) {
+      // Detached before it is stopped, for the reason `teardown` in `renderMappedArray` gives.
       container.replaceChildren();
+      retire();
       generation += 1;
       return;
     }
@@ -2736,12 +3178,13 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
       return;
     }
     renderedKey = key;
-    retire();
     /* `replaceChildren()` rather than `innerHTML = ""`: identical semantics, and it is not a
        Trusted Types injection sink — under `require-trusted-types-for 'script'` an innerHTML write
        needs a policy even when the string is empty. Four sinks that were never injecting anything
-       is four fewer things a policy has to be permissive about. */
+       is four fewer things a policy has to be permissive about. Detached BEFORE the case is
+       stopped, for the reason `teardown` in `renderMappedArray` gives. */
     container.replaceChildren();
+    retire();
     generation += 1;
     const caseDef = def.cases?.[key];
     if (!caseDef) {
@@ -2752,7 +3195,7 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
     live = scope;
     const childOpts = options ? { ...options, _path: [...path, "cases", key] } : undefined;
 
-    if (isRefObj(caseDef)) {
+    if (isRefValue(caseDef)) {
       // External $ref — fetch and render asynchronously, against the mount's base so a bundled
       // Document need not live at the page URL.
       const { href } = new URL(caseDef.$ref, options?._ctx?.base ?? location.href);
@@ -2770,7 +3213,7 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
             scope.run(() => container.append(renderNode(doc, childScope, childOpts))),
           );
         })
-        .catch((error: unknown) =>
+        .catch((error) =>
           console.error("Jx $switch: failed to load external case", caseDef.$ref, error),
         );
       return;
@@ -2795,6 +3238,15 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
 
 // ─── Prototype namespaces (Shape 5) ──────────────────────────────────────────
 
+/**
+ * `ref()`, for a value that is one scope member: the same function, under a signature that says so.
+ *
+ * `ref`'s own return type unwraps its argument's type recursively, and over the recursive
+ * `JxScopeValue` union (an array of scope values holds scope values) that unwrapping never
+ * terminates (TS2589). The value goes in as it is, so the ref is typed as holding a scope member.
+ */
+const scopeRef: (value: JxScopeValue) => Ref<JxScopeValue> = ref;
+
 /**
  * Resolve a $prototype definition into a value for the reactive scope.
  *
@@ -2805,7 +3257,7 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
  * @param {JxScope} state - Reactive scope proxy
  * @param {string} key - Def key (for diagnostics)
  * @param {string} [base] - Base URL for resolving $src imports
- * @returns {Promise<unknown>}
+ * @returns {Promise<JxScopeValue>}
  */
 export async function resolvePrototype(
   def: JxPrototypeDef,
@@ -2821,7 +3273,7 @@ export async function resolvePrototype(
 
   switch (def.$prototype) {
     case "Request": {
-      const s: Ref<unknown> = ref(null);
+      const s: Ref<JxScopeValue> = ref(null);
       const debounceMs = def.debounce ?? 0;
       let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -2851,14 +3303,14 @@ export async function resolvePrototype(
               signal: controller.signal,
               ...(def.headers && { headers: def.headers }),
               ...(def.body && {
-                body: typeof def.body === "object" ? JSON.stringify(def.body) : def.body,
+                body: isNonNullObject(def.body) ? JSON.stringify(def.body) : def.body,
               }),
             })
-              .then((r) => (r.ok ? r.json() : Promise.reject(r.statusText)))
+              .then((r): Promise<JsonValue> => (r.ok ? r.json() : Promise.reject(r.statusText)))
               .then((d) => {
                 s.value = d;
               })
-              .catch((error: unknown) => {
+              .catch((error) => {
                 if (!(error instanceof Error && error.name === "AbortError")) {
                   s.value = { error: String(error) };
                 }
@@ -2880,8 +3332,11 @@ export async function resolvePrototype(
         const p: Record<string, string> = {};
         for (const [k, v] of Object.entries(def)) {
           if (k !== "$prototype") {
+            /* SAFETY: the record goes straight to `URLSearchParams`, whose WebIDL record<USVString,
+               USVString> conversion stringifies every value itself; a bound number or boolean
+               reaches that conversion exactly as it always has. */
             p[k] = (
-              isRefObj(v)
+              isRefValue(v)
                 ? resolveRef(v.$ref, state)
                 : isTemplateString(v)
                   ? evaluateTemplate(v, state)
@@ -2897,14 +3352,16 @@ export async function resolvePrototype(
     case "SessionStorage": {
       const store = def.$prototype === "LocalStorage" ? localStorage : sessionStorage;
       const k = def.key ?? key;
-      let init: unknown;
+      let init: JxScopeValue;
       try {
         const s = store.getItem(k);
-        init = s !== null ? (JSON.parse(s) as unknown) : (def.default ?? null);
+        /* SAFETY: `JSON.parse` answers the JSON value the stored text encodes, or throws, which the
+           catch below answers with the entry's default. */
+        init = s !== null ? (JSON.parse(s) as JsonValue) : (def.default ?? null);
       } catch {
         init = def.default ?? null;
       }
-      const storageState: Ref<unknown> = ref(init);
+      const storageState = scopeRef(init);
       // Persist on change
       effect(() => {
         const v = storageState.value;
@@ -2923,28 +3380,33 @@ export async function resolvePrototype(
 
     case "Cookie": {
       const name = def.name ?? key;
-      const read = () => {
+      const read = (): JsonValue => {
         const raw = readCookie(document.cookie, name);
         if (raw === null) {
           return null;
         }
         try {
-          return JSON.parse(decodeURIComponent(raw));
+          /* SAFETY: `JSON.parse` answers the JSON value the cookie encodes, or throws, which the
+             catch below answers with the raw text. */
+          return JSON.parse(decodeURIComponent(raw)) as JsonValue;
         } catch {
           return raw;
         }
       };
-      const cookieState: Ref<unknown> = ref(read() ?? def.default ?? null);
+      const cookieState = scopeRef(read() ?? def.default ?? null);
       // Persist on change
       effect(() => {
+        /* SAFETY: the store is seeded with JSON (`read` parses it, `default` is JSON) and holds
+           what the page writes back; `serializeCookie` reads it only through `JSON.stringify`,
+           which is defined for any value and keeps exactly the JSON a cookie can carry. */
         // oxlint-disable-next-line unicorn/no-document-cookie -- the Cookie $prototype IS the cookie store binding
-        document.cookie = serializeCookie(name, cookieState.value, def);
+        document.cookie = serializeCookie(name, cookieState.value as JsonValue, def);
       });
       return cookieState;
     }
 
     case "IndexedDB": {
-      const idbState: Ref<unknown> = ref(null);
+      const idbState: Ref<JxScopeValue> = ref(null);
       const {
         database,
         store,
@@ -2958,6 +3420,7 @@ export async function resolvePrototype(
       }
       const req = indexedDB.open(database, version);
       req.addEventListener("upgradeneeded", (e) => {
+        // SAFETY: an open request's events are dispatched at the request itself.
         const db: IDBDatabase = (e.target as IDBOpenDBRequest).result;
         if (!db.objectStoreNames.contains(store)) {
           const os = db.createObjectStore(store, { autoIncrement, keyPath });
@@ -2967,6 +3430,7 @@ export async function resolvePrototype(
         }
       });
       req.addEventListener("success", (e) => {
+        // SAFETY: an open request's events are dispatched at the request itself.
         const db: IDBDatabase = (e.target as IDBOpenDBRequest).result;
         idbState.value = {
           database,
@@ -2994,14 +3458,19 @@ export async function resolvePrototype(
     case "FormData": {
       const fd = new FormData();
       for (const [k, v] of Object.entries(def.fields ?? {})) {
+        /* SAFETY: `append(name, value)` converts a non-Blob value to a USVString itself, so a JSON
+           number or boolean field reaches that conversion exactly as it always has. */
         fd.append(k, v as string);
       }
       return fd;
     }
 
     case "Blob": {
-      return new Blob((def.parts as BlobPart[]) ?? [], {
-        type: typeof def.type === "string" ? def.type : "text/plain",
+      /* SAFETY: a Blob entry's `parts` is the BlobPart list its document declares; anything else
+         reaches the Blob constructor, whose own WebIDL sequence check refuses it as before. */
+      const parts = def.parts as BlobPart[] | null | undefined;
+      return new Blob(parts ?? [], {
+        type: isString(def.type) ? def.type : "text/plain",
       });
     }
 
@@ -3034,6 +3503,28 @@ const EXTERNAL_RESERVED = new Set([
   "name",
 ]);
 
+/**
+ * The config an external class is constructed with: the entry's own keys, minus the runtime's.
+ *
+ * @param {JxPrototypeDef} def
+ * @returns {JxScope}
+ */
+function externalConfig(def: JxPrototypeDef): JxScope {
+  const config: JxScope = {};
+  for (const [k, v] of Object.entries(def)) {
+    if (!EXTERNAL_RESERVED.has(k)) {
+      config[k] = v;
+    }
+  }
+  return config;
+}
+
+/**
+ * A class an external module exports, as the runtime uses it: a function, which is what `typeof`
+ * says of every class, constructed with the entry's config.
+ */
+type ExternalClass = JxScopeFunction & (new (config: JxScope) => ExternalClassInstance);
+
 /**
  * Resolve an external class prototype via $src.
  *
@@ -3041,7 +3532,7 @@ const EXTERNAL_RESERVED = new Set([
  * @param {JxScope} state
  * @param {string} key
  * @param {string} [base]
- * @returns {Promise<unknown>}
+ * @returns {Promise<Ref<JxScopeValue>>}
  */
 async function resolveExternalPrototype(
   def: JxPrototypeDef,
@@ -3066,13 +3557,18 @@ async function resolveExternalPrototype(
  * Import a JS module and instantiate a class from it. Internal helper used by resolveClassJson for
  * $implementation.
  *
- * @param {JxScope} def - Original state entry (for config extraction)
+ * @param {JxPrototypeDef} def - Original state entry (for config extraction)
  * @param {string} src - JS module URL to import
  * @param {string} exportName - Export name to look up
  * @param {string} [base] - Base URL for resolution
- * @returns {Promise<unknown>}
+ * @returns {Promise<Ref<JxScopeValue>>}
  */
-async function importAndInstantiate(def: JxScope, src: string, exportName: string, base?: string) {
+async function importAndInstantiate(
+  def: JxPrototypeDef,
+  src: string,
+  exportName: string,
+  base?: string,
+) {
   let mod: ImportedModule;
   const seeded = seededModule(src);
   if (seeded instanceof Promise) {
@@ -3081,11 +3577,11 @@ async function importAndInstantiate(def: JxScope, src: string, exportName: strin
     mod = seeded;
   } else {
     try {
-      mod = (await import(src)) as ImportedModule;
+      mod = await importModule(src);
     } catch {
       if (base) {
         const resolvedSrc = new URL(src, base).href;
-        mod = (await import(resolvedSrc)) as ImportedModule;
+        mod = await importModule(resolvedSrc);
       } else {
         throw new Error(`Failed to import "${src}"`);
       }
@@ -3097,33 +3593,27 @@ async function importAndInstantiate(def: JxScope, src: string, exportName: strin
   if (!ExportedClass) {
     throw new Error(`Jx: export "${exportName}" not found in "${src}"`);
   }
-  if (typeof ExportedClass !== "function") {
+  if (!isFunction(ExportedClass)) {
     throw new TypeError(`Jx: "${exportName}" from "${src}" is not a class`);
   }
 
-  const config: JxScope = {};
-  for (const [k, v] of Object.entries(def)) {
-    if (!EXTERNAL_RESERVED.has(k)) {
-      config[k] = v;
-    }
-  }
-
-  const Ctor = ExportedClass as new (config: JxScope) => ExternalClassInstance;
-  const instance = new Ctor(config);
+  /* SAFETY: trust boundary — the external class contract, spec.md §12.3. A `$implementation`
+     module's export is written as a class constructed with the entry's config; `isFunction` is all
+     that can be checked before `new`, and a function that is not constructible throws its own
+     TypeError there, as it always has. The instance is read only through `ExternalClassInstance`'s
+     optional members, each checked before it is used, and the one it offers is the entry's value. */
+  const instance = new (ExportedClass as ExternalClass)(externalConfig(def));
 
-  let value: unknown;
-  if (typeof instance.resolve === "function") {
-    value = await instance.resolve();
-  } else if ("value" in instance) {
-    ({ value } = instance);
-  } else {
-    value = instance;
-  }
+  const value = isFunction(instance.resolve)
+    ? await instance.resolve()
+    : "value" in instance
+      ? instance.value
+      : instance;
 
   // Always wrap in ref for reactivity with external classes
-  const s: Ref<unknown> = ref(value);
-  if (typeof instance.subscribe === "function") {
-    instance.subscribe((newVal: unknown) => {
+  const s = scopeRef(value);
+  if (isFunction(instance.subscribe)) {
+    instance.subscribe((newVal) => {
       s.value = newVal;
     });
   }
@@ -3141,7 +3631,7 @@ async function importAndInstantiate(def: JxScope, src: string, exportName: strin
  * @param {JxScope} state
  * @param {string} key
  * @param {string} [base]
- * @returns {Promise<unknown>}
+ * @returns {Promise<Ref<JxScopeValue>>}
  */
 async function resolveClassJson(def: JxPrototypeDef, state: JxScope, key: string, base?: string) {
   const src = def.$src!;
@@ -3165,7 +3655,9 @@ async function resolveClassJson(def: JxPrototypeDef, state: JxScope, key: string
     if (!res.ok) {
       throw new Error(`HTTP ${res.status}`);
     }
-    // Trust boundary: fetched .class.json sources are class definitions by contract.
+    /* SAFETY: trust boundary. Only a `$src` ending in `.class.json` reaches this fetch
+       (`resolveExternalPrototype` refuses anything else), and a 2xx answer for one is a class
+       definition document; the runtime does not schema-validate documents by design. */
     classDef = (await res.json()) as JxClassDef;
   } catch {
     // Fall back to dev proxy (server will handle .class.json resolution)
@@ -3192,71 +3684,81 @@ async function resolveClassJson(def: JxPrototypeDef, state: JxScope, key: string
 
   // Self-contained: construct class dynamically from schema
   const DynClass = classFromSchema(classDef);
-  const config: JxScope = {};
-  for (const [k, v] of Object.entries(def)) {
-    if (!EXTERNAL_RESERVED.has(k)) {
-      config[k] = v;
-    }
-  }
-  const instance = new DynClass(config) as ExternalClassInstance;
+  /* SAFETY: every member of ExternalClassInstance is optional, and each is checked below before it
+     is used, so any constructed object satisfies it; a schema class that defines `resolve`,
+     `value` or `subscribe` methods or fields is the shape it names. */
+  const instance = new DynClass(externalConfig(def)) as ExternalClassInstance;
 
-  let value: unknown;
-  if (typeof instance.resolve === "function") {
-    value = await instance.resolve();
-  } else if ("value" in instance) {
-    ({ value } = instance);
-  } else {
-    value = instance;
-  }
+  const value = isFunction(instance.resolve)
+    ? await instance.resolve()
+    : "value" in instance
+      ? instance.value
+      : instance;
 
   // Always wrap in ref for reactivity
-  const s: Ref<unknown> = ref(value);
-  if (typeof instance.subscribe === "function") {
-    instance.subscribe((newVal: unknown) => {
+  const s = scopeRef(value);
+  if (isFunction(instance.subscribe)) {
+    instance.subscribe((newVal) => {
       s.value = newVal;
     });
   }
   return s;
 }
 
+/**
+ * Whether a class document's `$defs.constructor` is its own constructor definition, rather than the
+ * `Object.prototype.constructor` function every object parsed from JSON inherits.
+ *
+ * @param rawCtor What `$defs.constructor` reads as
+ */
+function isCtorDef(
+  rawCtor: NonNullable<JxClassDef["$defs"]>["constructor"],
+): rawCtor is JxClassCtorDef {
+  return isNonNullObject(rawCtor);
+}
+
 /**
  * Dynamically construct a class from a .class.json schema definition. Browser-side: maps private
  * fields to _-prefixed public fields.
  *
  * @param {import("@jxsuite/schema/types").JxClassDef} classDef
- * @returns {DynamicClass}
+ * @returns {typeof DynClass} A class whose instances hold the schema's fields by name
  */
 function classFromSchema(classDef: JxClassDef) {
   const fields = classDef.$defs?.fields ?? {};
   // JSON objects inherit Object.prototype.constructor — only an own object value counts.
   const rawCtor = classDef.$defs?.constructor;
-  const ctor = typeof rawCtor === "object" ? rawCtor : undefined;
+  const ctor = isCtorDef(rawCtor) ? rawCtor : undefined;
   const methods = classDef.$defs?.methods ?? {};
 
   // oxlint-disable-next-line typescript/no-extraneous-class -- methods are attached to the prototype dynamically below
   class DynClass {
-    constructor(config: Record<string, unknown> = {}) {
+    /** Static methods, attached by name below. */
+    static [member: string]: JxScopeValue;
+    /** An instance holds its fields, and reaches its methods, by the names the schema gives. */
+    [member: string]: JxScopeValue;
+
+    constructor(config: JxScope = {}) {
       for (const [key, typedField] of Object.entries(fields)) {
         const id = typedField.identifier ?? key;
         const propName = typedField.access === "private" ? `_${id}` : id;
         if (config[id] !== undefined) {
-          (this as Record<string, unknown>)[propName] = config[id];
+          this[propName] = config[id];
         } else if (typedField.initializer !== undefined) {
-          (this as Record<string, unknown>)[propName] = typedField.initializer;
+          this[propName] = typedField.initializer;
         } else if (typedField.default !== undefined) {
-          (this as Record<string, unknown>)[propName] = structuredClone(typedField.default);
+          this[propName] = structuredClone(typedField.default);
         } else {
-          (this as Record<string, unknown>)[propName] = null;
+          this[propName] = null;
         }
       }
       if (ctor?.body) {
         const bodyStr = Array.isArray(ctor.body) ? ctor.body.join("\n") : ctor.body;
-        (
-          new Function("config", bodyStr) as (
-            this: unknown,
-            config: Record<string, unknown>,
-          ) => void
-        ).call(this, config);
+        /* SAFETY: `new Function` returns an ordinary function of the one named parameter; `call`
+           runs it with the instance under construction as `this`, which is the constructor
+           body's contract. */
+        const init = new Function("config", bodyStr) as (this: DynClass, config: JxScope) => void;
+        init.call(this, config);
       }
     }
   }
@@ -3265,10 +3767,11 @@ function classFromSchema(classDef: JxClassDef) {
     const name = typedMethod.identifier ?? key;
     const params = (typedMethod.parameters ?? []).map((p) => {
       if (p.$ref) {
-        return p.$ref.split("/").pop() as string;
+        // `split` always yields at least one segment, so `pop` always finds one.
+        return p.$ref.split("/").pop() ?? "";
       }
       const n = p.identifier ?? p.name;
-      return typeof n === "string" ? n : "arg";
+      return isString(n) ? n : "arg";
     });
     const bodyStr = Array.isArray(typedMethod.body)
       ? typedMethod.body.join("\n")
@@ -3277,22 +3780,28 @@ function classFromSchema(classDef: JxClassDef) {
     if (typedMethod.role === "accessor") {
       const descriptor: PropertyDescriptor = {};
       if (typedMethod.getter) {
-        descriptor.get = new Function(typedMethod.getter.body ?? "") as () => unknown;
+        /* SAFETY: `new Function` returns an ordinary function; as a getter it is called with no
+           arguments and the instance as `this`, and what it returns is the property's value. */
+        descriptor.get = new Function(typedMethod.getter.body ?? "") as () => JxScopeValue;
       }
       if (typedMethod.setter) {
         const sp = (typedMethod.setter.parameters ?? []).map(
           (p) => p.$ref?.split("/").pop() ?? "v",
         );
-        descriptor.set = new Function(...sp, typedMethod.setter.body ?? "") as (v: unknown) => void;
+        /* SAFETY: `new Function` returns an ordinary function of the named parameters; as a setter
+           it receives the assigned value as its one argument, and its return is discarded. */
+        descriptor.set = new Function(...sp, typedMethod.setter.body ?? "") as (
+          v: JxScopeValue,
+        ) => void;
       }
       Object.defineProperty(DynClass.prototype, name, {
         ...descriptor,
         configurable: true,
       });
     } else if (typedMethod.scope === "static") {
-      (DynClass as unknown as DynamicClass)[name] = new Function(...params, bodyStr);
+      DynClass[name] = new Function(...params, bodyStr);
     } else {
-      (DynClass as unknown as DynamicClass).prototype[name] = new Function(...params, bodyStr);
+      DynClass.prototype[name] = new Function(...params, bodyStr);
     }
   }
 
@@ -3300,8 +3809,7 @@ function classFromSchema(classDef: JxClassDef) {
     configurable: true,
     value: classDef.title,
   });
-  const dynCtor = DynClass as unknown as DynamicClass;
-  return dynCtor;
+  return DynClass;
 }
 
 /**
@@ -3313,17 +3821,12 @@ function classFromSchema(classDef: JxClassDef) {
  * @param {JxScope} state
  * @param {string} key
  * @param {string} [base]
- * @returns {Promise<unknown>}
+ * @returns {Promise<Ref<JxScopeValue>>}
  */
 async function resolveViaDevProxy(def: JxPrototypeDef, state: JxScope, key: string, base?: string) {
-  const config: JxScope = {};
-  for (const [k, v] of Object.entries(def)) {
-    if (!EXTERNAL_RESERVED.has(k)) {
-      config[k] = v;
-    }
-  }
+  const config = externalConfig(def);
 
-  const hasTemplates = Object.values(config).some((v: unknown) => isTemplateString(v));
+  const hasTemplates = Object.values(config).some((v) => isTemplateString(v));
 
   /** @param {JxScope} resolvedConfig */
   const doResolve = (resolvedConfig: JxScope) =>
@@ -3337,15 +3840,16 @@ async function resolveViaDevProxy(def: JxPrototypeDef, state: JxScope, key: stri
       }),
       headers: { "Content-Type": "application/json" },
       method: "POST",
-    }).then((r) => {
+    }).then((r): Promise<JsonValue> => {
       if (!r.ok) {
         throw new Error(`Jx dev proxy ${r.status} for "${key}"`);
       }
+      // The dev proxy answers with the resolved value serialized as JSON.
       return r.json();
     });
 
   // Always wrap in ref for reactivity
-  const s: Ref<unknown> = ref(null);
+  const s: Ref<JxScopeValue> = ref(null);
   if (hasTemplates) {
     effect(() => {
       const resolvedConfig: JxScope = {};
@@ -3353,32 +3857,85 @@ async function resolveViaDevProxy(def: JxPrototypeDef, state: JxScope, key: stri
         resolvedConfig[k] = isTemplateString(v) ? evaluateTemplate(v, state) : v;
       }
       doResolve(resolvedConfig)
-        .then((value: unknown) => {
+        .then((value) => {
           s.value = value;
         })
-        .catch((error: unknown) => console.error("Jx dev proxy:", error));
+        .catch((error) => console.error("Jx dev proxy:", error));
     });
   } else {
     doResolve(config)
-      .then((value: unknown) => {
+      .then((value) => {
         s.value = value;
       })
-      .catch((error: unknown) => console.error("Jx dev proxy:", error));
+      .catch((error) => console.error("Jx dev proxy:", error));
   }
   return s;
 }
 
-// ─── Server function resolution (dev mode) ────────────────────────────────────
+// ─── Server function resolution ───────────────────────────────────────────────
 
 /**
- * Resolve a timing: "server" entry in dev mode by executing the function client-side. In
- * production, the compiler replaces this with a fetch to the generated server handler.
- *
- * @param {JxScope} def
+ * Start one `timing: "server"` entry's calls, wherever they run. Each call takes the next number,
+ * and only the latest may write the entry or report a failure: the answer to a call whose arguments
+ * have since changed is dropped whenever it arrives, and a failed call keeps the entry's last
+ * value. A call that throws before it returns a promise (an argument the proxy cannot serialize, or
+ * a host function that throws synchronously) fails the same way, rather than out of whichever state
+ * write started it. The proxy and a host-registered module share it, so a reactive entry's calls
+ * are ordered and reported the same way on either path.
+ *
+ * @param {Ref<JxScopeValue>} s - The entry's value
+ * @param {ServerCall} invoke - One call, with resolved arguments: it may return a value or a
+ *   promise, or throw
+ * @param {string} label - The `console.error` prefix a failed call is reported under
+ * @returns {(args: JxScope) => void} Starts a call
+ */
+function latestServerCall(
+  s: Ref<JxScopeValue>,
+  invoke: ServerCall,
+  label: string,
+): (args: JxScope) => void {
+  let seq = 0;
+  return (args: JxScope) => {
+    seq += 1;
+    const n = seq;
+    /* The executor runs before the constructor returns, so the call still starts synchronously,
+       and a throw inside it rejects this promise instead of escaping to the caller. */
+    new Promise<JsonValue>((settle) => {
+      settle(invoke(args));
+    })
+      .then((result) => {
+        if (n === seq) {
+          s.value = result;
+        }
+      })
+      .catch((error) => {
+        if (n === seq) {
+          console.error(label, error);
+        }
+      });
+  };
+}
+
+/**
+ * One call of a `timing: "server"` function, with its resolved arguments. Its answer is JSON, or a
+ * promise of JSON: on the proxy path the answer crosses the wire as JSON, and a host-registered
+ * module honours the same contract so the two paths are interchangeable.
+ */
+type ServerCall = (args: JxScope) => JsonValue | Promise<JsonValue>;
+
+/**
+ * Resolve a timing: "server" entry. The runtime never imports a server module itself: every call is
+ * a POST to the host's `/__jx_server__` proxy, which runs the function server-side with `env`, so
+ * the runtime never requests the module's source (spec.md §11.4). A host may still serve that file
+ * at its URL, which is why a secret belongs in `env` and never in the module body. The one
+ * exception is the host's own act: a module it registered with `preloadModule` (embedding.md §6) is
+ * called in process, and a reactive entry's calls are ordered there as the proxy orders them.
+ *
+ * @param {JxServerFnDef} def
  * @param {JxScope} state
  * @param {string} key
  * @param {string} [base]
- * @returns {Promise<unknown>}
+ * @returns {Promise<Ref<JxScopeValue>>}
  */
 async function resolveServerFunction(
   def: JxServerFnDef,
@@ -3389,61 +3946,44 @@ async function resolveServerFunction(
   const src = def.$src;
   const exportName = def.$export;
 
-  let mod: ImportedModule;
-  const seeded = seededModule(src);
-  if (seeded instanceof Promise) {
-    mod = await seeded;
-  } else if (seeded) {
-    mod = seeded;
-  } else {
-    try {
-      mod = (await import(src)) as ImportedModule;
-    } catch {
-      if (base) {
-        try {
-          const resolvedSrc = new URL(src, base).href;
-          mod = (await import(resolvedSrc)) as ImportedModule;
-        } catch {
-          // Module cannot run in the browser — fall back to dev server proxy
-          return resolveServerFunctionViaProxy(def, state, key, base);
-        }
-      } else {
-        return resolveServerFunctionViaProxy(def, state, key, base);
-      }
-    }
-    _moduleCache.set(src, mod);
+  /* The host-seeded set, not the module cache: a Function entry's own `$src` import lands in that
+     cache too, and reusing it here would put a server module in the browser after all. */
+  const seeded = _hostSeeded.has(src) ? seededModule(src) : undefined;
+  if (!seeded) {
+    return resolveServerFunctionViaProxy(def, state, key, base);
   }
+  const mod = seeded instanceof Promise ? await seeded : seeded;
 
   const candidate = mod[exportName] ?? mod.default?.[exportName];
   if (!candidate) {
     throw new Error(`Jx: export "${exportName}" not found in "${src}" for "${key}"`);
   }
-  if (typeof candidate !== "function") {
+  if (!isFunction(candidate)) {
     throw new TypeError(`Jx: "${exportName}" from "${src}" is not a function`);
   }
-  const fn = candidate as (args: JxScope) => Promise<unknown>;
+  /* SAFETY: the guard proved a function, and a function accepts any call. A `timing: "server"`
+     export is written to be called through the proxy, which hands it one arguments object and
+     sends its answer back as JSON, so that is the contract it is held to in process too. */
+  const fn = candidate as ServerCall;
 
   const rawArgs = def.arguments ?? {};
-  const hasReactiveArg = Object.values(rawArgs).some((v: unknown) => isRefObj(v));
+  const hasReactiveArg = Object.values(rawArgs).some((v) => isRefValue(v));
   const resolveArgs = () => {
     const args: JxScope = {};
     for (const [k, v] of Object.entries(rawArgs)) {
-      args[k] = isRefObj(v) ? resolveRef(v.$ref, state) : v;
+      args[k] = isRefValue(v) ? resolveRef(v.$ref, state) : v;
     }
     return args;
   };
 
   // Always wrap in ref for reactivity
-  const s: Ref<unknown> = ref(null);
+  const s: Ref<JxScopeValue> = ref(null);
   if (hasReactiveArg) {
+    const call = latestServerCall(s, fn, "Jx server function:");
     effect(() => {
       const args = resolveArgs();
       onEffectCleanup(() => {});
-      fn(args)
-        .then((result: unknown) => {
-          s.value = result;
-        })
-        .catch(() => {});
+      call(args);
     });
   } else {
     s.value = await fn(resolveArgs());
@@ -3452,29 +3992,32 @@ async function resolveServerFunction(
 }
 
 /**
- * Dev-mode fallback: when a timing: "server" module cannot run in the browser, proxy the function
- * call through the Jx dev server (POST /**jx_server**). Supports reactive $ref arguments via Vue
- * effect().
- *
- * @param {JxScope} def
+ * Call a timing: "server" entry through the host's `/__jx_server__` proxy, which imports the module
+ * server-side and calls the export with `env` (server.md §3.3). This is the only path an
+ * interpreting runtime takes for a module the host did not register. A `$ref` argument makes the
+ * call reactive: it re-posts from an `effect()` when the reference changes. A failed call leaves
+ * the entry's last value and logs, and the answer to a superseded call is dropped, so a slow answer
+ * to an earlier call can never overwrite a later one (`latestServerCall`).
+ *
+ * @param {JxServerFnDef} def
  * @param {JxScope} state
  * @param {string} key
  * @param {string} [base]
- * @returns {Promise<unknown>}
+ * @returns {Promise<Ref<JxScopeValue>>}
  */
 async function resolveServerFunctionViaProxy(
-  def: JxScope,
+  def: JxServerFnDef,
   state: JxScope,
   key: string,
   base?: string,
 ) {
   const rawArgs = def.arguments ?? {};
-  const hasReactiveArg = Object.values(rawArgs).some((v: unknown) => isRefObj(v));
+  const hasReactiveArg = Object.values(rawArgs).some((v) => isRefValue(v));
 
   const resolveArgs = () => {
     const args: JxScope = {};
     for (const [k, v] of Object.entries(rawArgs)) {
-      args[k] = isRefObj(v) ? resolveRef((v as { $ref: string }).$ref, state) : v;
+      args[k] = isRefValue(v) ? resolveRef(v.$ref, state) : v;
     }
     return args;
   };
@@ -3490,31 +4033,25 @@ async function resolveServerFunctionViaProxy(
       }),
       headers: { "Content-Type": "application/json" },
       method: "POST",
-    }).then((r) => {
+    }).then((r): Promise<JsonValue> => {
       if (!r.ok) {
         throw new Error(`Jx server proxy ${r.status} for "${key}"`);
       }
+      // The proxy answers with the function's result serialized as JSON.
       return r.json();
     });
 
   // Always wrap in ref for reactivity
-  const s: Ref<unknown> = ref(null);
+  const s: Ref<JxScopeValue> = ref(null);
+  const call = latestServerCall(s, doResolve, "Jx server proxy:");
   if (hasReactiveArg) {
     effect(() => {
       const args = resolveArgs();
       onEffectCleanup(() => {});
-      doResolve(args)
-        .then((result: unknown) => {
-          s.value = result;
-        })
-        .catch((error: unknown) => console.error("Jx server proxy:", error));
+      call(args);
     });
   } else {
-    doResolve(resolveArgs())
-      .then((result: unknown) => {
-        s.value = result;
-      })
-      .catch((error: unknown) => console.error("Jx server proxy:", error));
+    call(resolveArgs());
   }
   return s;
 }
@@ -3527,10 +4064,11 @@ async function resolveServerFunctionViaProxy(
  *
  * @param {string} ref
  * @param {JxScope} state - Reactive scope proxy (or child scope)
- * @returns {unknown}
+ * @returns {JxScopeValue}
  */
 export function resolveRef(refPath: string, state: JxScope) {
-  if (typeof refPath !== "string") {
+  // A `$ref` read from a document is not schema-validated, so a non-string one passes through.
+  if (!isString(refPath)) {
     return refPath;
   }
   if (refPath.startsWith("$map/") || refPath.startsWith("#/$map/")) {
@@ -3539,9 +4077,11 @@ export function resolveRef(refPath: string, state: JxScope) {
        rendered ZERO rows with no warning. */
     const parts = (refPath.startsWith("#/") ? refPath.slice(2) : refPath).split("/");
     const [, key] = parts; // "item" or "index"
-    const map = state.$map as Record<string, unknown> | undefined;
+    /* SAFETY: `$map` holds only the row record `renderMappedArrayInto` binds (see `rowContext`), an
+       ordinary object read here by whichever member the ref names. */
+    const map = state.$map as Record<string, JxScopeValue> | undefined;
     const base = map?.[key!] ?? state[`$map/${key}`];
-    return parts.length > 2 ? getPath(base, parts.slice(2).join("/")) : base;
+    return parts.length > 2 ? readPath(base, parts.slice(2).join("/")) : base;
   }
   if (refPath.startsWith("#/state/")) {
     // One call, not a hand-split leading token: slicing at the first `/` skipped unescaping it, so
@@ -3556,10 +4096,10 @@ export function resolveRef(refPath: string, state: JxScope) {
     return readPath(state, refPath.slice("parent#/".length));
   }
   if (refPath.startsWith("window#/")) {
-    return getPath(globalThis.window, refPath.slice("window#/".length));
+    return readPath(globalThis.window, refPath.slice("window#/".length));
   }
   if (refPath.startsWith("document#/")) {
-    return getPath(globalThis.document, refPath.slice("document#/".length));
+    return readPath(globalThis.document, refPath.slice("document#/".length));
   }
   return readPath(state, refPath) ?? null;
 }
@@ -3570,32 +4110,12 @@ export function resolveRef(refPath: string, state: JxScope) {
  * Check if v is a Vue ref (including computed).
  *
  * @param {unknown} v
- * @returns {boolean}
+ * @returns {v is Ref<unknown>}
  */
-export function isSignal(v: unknown) {
+export function isSignal(v: unknown): v is Ref<unknown> {
   return isRef(v);
 }
 
-/**
- * @param {unknown} v
- * @returns {v is import("@jxsuite/schema/types").JxRef}
- */
-function isRefObj(v: unknown): v is JxRef {
-  return isRefValue(v);
-}
-
-/**
- * Walk a path off a value. Delegates to the one tokenizer (`pointer.ts`) — this used to split on
- * `/[./]/`, which no other path in the codebase agreed with.
- *
- * @param {unknown} obj
- * @param {string} path
- * @returns {unknown}
- */
-function getPath(obj: unknown, path: string) {
-  return readPath(obj, path);
-}
-
 /**
  * Write an observed attribute into element state, coerced by the type the state entry already holds
  * (spec §16.5): a number parses, a boolean is presence (`"false"` counts as absent), and anything
@@ -3615,40 +4135,39 @@ function absorbAttribute(
   state: JxScope,
   name: string,
   value: string | null,
-  defaults?: ReadonlyMap<string, unknown>,
+  defaults?: ReadonlyMap<string, JxScopeValue>,
 ): void {
   const camelKey = name.replaceAll(/-([a-z])/g, (_: string, c: string) => c.toUpperCase());
   const current = state[camelKey];
-  if (typeof current === "boolean") {
+  if (isBoolean(current)) {
     // Presence IS the value for a boolean, so a removal is already spelled by the same rule.
     state[camelKey] = value !== null && value !== "false";
     return;
   }
   if (value === null) {
     const declared = defaults?.get(camelKey);
-    state[camelKey] = declared === undefined ? (typeof current === "number" ? 0 : "") : declared;
+    state[camelKey] = declared === undefined ? (isNumber(current) ? 0 : "") : declared;
     return;
   }
-  state[camelKey] = typeof current === "number" ? Number(value) : value;
+  state[camelKey] = isNumber(current) ? Number(value) : value;
 }
 
 /**
  * The declared default of every state entry that has one, by state key.
  *
  * @param def The element definition
- * @returns {Map<string, unknown>} Key → default
+ * @returns {Map<string, JxScopeValue>} Key → default
  */
-function declaredDefaults(def: JxElement): Map<string, unknown> {
-  const out = new Map<string, unknown>();
+function declaredDefaults(def: JxElement): Map<string, JxScopeValue> {
+  const out = new Map<string, JxScopeValue>();
   for (const [key, entry] of Object.entries(def.state ?? {})) {
-    if (entry !== null && typeof entry === "object") {
-      const obj = entry as Record<string, unknown>;
-      if ("default" in obj) {
-        out.set(key, obj["default"]);
+    if (isNonNullObject(entry)) {
+      if ("default" in entry) {
+        out.set(key, entry.default);
         continue;
       }
       // A computed entry has no default: its value is produced, and a removal leaves it alone.
-      if (COMPUTED_STATE_KEYS.some((marker) => marker in obj)) {
+      if (COMPUTED_STATE_KEYS.some((marker) => marker in entry)) {
         continue;
       }
     }
@@ -3709,6 +4228,27 @@ function instanceSupplies(el: HTMLElement, key: string): boolean {
   return kebab !== key && el.hasAttribute(kebab);
 }
 
+/**
+ * The platform's setter for `key` on an element, when the name is one the platform already owns.
+ *
+ * @param {HTMLElement} el
+ * @param {string} key
+ * @returns {((value: JxScopeValue) => void) | undefined}
+ */
+function nativeSetter(el: HTMLElement, key: string): ((value: JxScopeValue) => void) | undefined {
+  for (
+    let proto: object | null = Reflect.getPrototypeOf(el);
+    proto;
+    proto = Reflect.getPrototypeOf(proto)
+  ) {
+    const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+    if (descriptor) {
+      return descriptor.set;
+    }
+  }
+  return undefined;
+}
+
 function refusePrivateProp(key: string, where?: string): boolean {
   if (!isPrivateStateKey(key)) {
     return false;
@@ -3736,12 +4276,12 @@ export function _resetPrivatePropWarnings(): void {
  * @returns {JxScope}
  */
 function mergeProps(def: JxElement, parentState: JxScope): JxScope {
-  const child = Object.create(parentState) as JxScope;
+  const child = inheritScope(parentState);
   for (const [k, v] of Object.entries(def.$props ?? {})) {
     if (refusePrivateProp(k, "$props")) {
       continue;
     }
-    child[k] = isRefObj(v) ? resolveRef(v.$ref, parentState) : v;
+    child[k] = isRefValue(v) ? resolveRef(v.$ref, parentState) : v;
   }
   return child;
 }
@@ -3782,12 +4322,12 @@ export type { CssBuildOptions, CssKeyframeBlock, CssRule, CssRuleTarget } from "
  * custom property survives it: `--fooBar` and `--foo-bar` are two different properties, and
  * kebab-casing one renames it out from under the `var()` that reads it.
  *
- * @param {Record<string, unknown> | object} rules
+ * @param {JxStyle} rules
  * @returns {string}
  */
-export function toCSSText(rules: Record<string, unknown> | object) {
+export function toCSSText(rules: JxStyle) {
   return Object.entries(rules)
-    .filter(([k, v]) => !isNestedSelectorKey(k) && (v === null || typeof v !== "object"))
+    .filter(([k, v]) => !isNestedSelectorKey(k) && !isNonNullObject(v))
     .map(([p, v]) => `${cssPropertyName(p)}: ${canvasStyleValue(String(v))}`)
     .join("; ");
 }
@@ -3855,9 +4395,9 @@ export async function redefineElement(doc: JxDocument, baseUrl?: string): Promis
  * before `buildScope`, and re-set it every render so a stale map from a previous document cannot
  * leak.
  *
- * @param {Record<string, string>} map
+ * @param {Record<string, string> | null} [map] - Absent or null clears it
  */
-export function setRootMedia(map: Record<string, string>): void {
+export function setRootMedia(map?: Record<string, string> | null): void {
   _rootMedia = map ?? {};
 }
 
@@ -3875,7 +4415,7 @@ async function registerElements(
 ) {
   for (const entry of elements) {
     // Bare string: npm package side-effect import (registers custom elements)
-    if (typeof entry === "string") {
+    if (isString(entry)) {
       try {
         // Bare specifiers need a URL path for the browser; the dev server resolves
         // /node_modules/<pkg> to the package entry point via exports/module/main.
@@ -3887,7 +4427,7 @@ async function registerElements(
       }
       continue;
     }
-    if (!isRefObj(entry)) {
+    if (!isRefValue(entry)) {
       continue;
     }
     const { href } = new URL(entry.$ref, base);
@@ -3915,7 +4455,7 @@ async function registerElements(
  * @param {import("@jxsuite/schema/types").JxHeadEntry[]} entries
  * @param {string} _base - Document base URL for resolving relative paths
  */
-function injectHead(entries: JxHeadEntry[], _base: string) {
+function injectHead(entries: readonly (JxHeadEntry | null | undefined)[], _base: string) {
   for (const entry of entries) {
     if (!entry || !entry.tagName) {
       continue;
@@ -3925,7 +4465,7 @@ function injectHead(entries: JxHeadEntry[], _base: string) {
     // Resolve href/src: bare npm specifiers -> /node_modules/ path
     for (const key of ["href", "src"] as const) {
       const v = attrs[key];
-      if (typeof v !== "string" || v === "") {
+      if (!isString(v) || v === "") {
         continue;
       }
       if (!v.startsWith("/") && !v.startsWith(".") && !v.startsWith("http")) {
@@ -3951,10 +4491,9 @@ function injectHead(entries: JxHeadEntry[], _base: string) {
     if (entry.textContent) {
       // An object is a structured data block (JSON-LD, site-architecture.md §8.5). The compiler
       // Serializes it the same way, so the interpreted page and the built page agree.
-      el.textContent =
-        typeof entry.textContent === "object"
-          ? JSON.stringify(entry.textContent, null, 2)
-          : entry.textContent;
+      el.textContent = isNonNullObject(entry.textContent)
+        ? JSON.stringify(entry.textContent, null, 2)
+        : entry.textContent;
     }
     document.head.append(el);
   }
@@ -3963,18 +4502,18 @@ function injectHead(entries: JxHeadEntry[], _base: string) {
 // ─── Instantiation chain (spec.md §16.9) ─────────────────────────────────────
 
 /**
- * How deep component nesting may go before an instance refuses to render.
- *
- * The same number the compiler holds in `MAX_COMPONENT_NESTING` (`@jxsuite/compiler`, `shared.ts`),
- * and for the same reason: the cycle check in {@link extendInstancePath} catches a definition that
- * renders ITSELF — same tag, same props — which is the only shape that can never terminate, while a
- * self-reference whose props change at every level is data-driven recursion that a `$switch` may or
- * may not bottom out. The seen-set cannot tell those apart, so this cap is what turns a forgotten
- * stop into a diagnostic instead of a page that never settles. It is written twice because the
- * compiler depends on the runtime and not the other way round, and the runtime's browser bundle
- * cannot reach into the build tool; spec.md §16.9 is the one statement both are held to, and the
- * compiler's `nesting-cap-agreement.test.ts` asserts its copy against this export, so the two
- * numbers cannot part without a red test in the workspace that owns the copy.
+ * How deep component nesting may go before an instance refuses to render, and before the compiler
+ * (`@jxsuite/compiler`, `shared.ts`, which imports this export) refuses to continue a build.
+ *
+ * The cycle check in {@link extendInstancePath} catches a definition that renders ITSELF — same tag,
+ * same props — which is the only shape that can never terminate, while a self-reference whose props
+ * change at every level (`depth: "${state.depth + 1}"`) is data-driven recursion that a `$switch`
+ * may or may not bottom out. The seen-set cannot tell those apart, so this cap is what turns a
+ * forgotten stop into a diagnostic instead of a page that never settles or a build that overflows
+ * its stack. Thirty-two is far beyond any component library's real depth and far below the call
+ * stack's. It lives here because the compiler depends on the runtime and not the other way round,
+ * so one declaration serves both sides of spec.md §16.9: a page that builds is a page that
+ * renders.
  */
 export const MAX_COMPONENT_NESTING = 32;
 
@@ -3982,7 +4521,7 @@ export const MAX_COMPONENT_NESTING = 32;
 interface InstanceFrame {
   tag: string;
   /** Every value the instance supplied that its definition's state read (§16.9). */
-  props: Record<string, unknown>;
+  props: JxScope;
 }
 
 /**
@@ -4035,6 +4574,30 @@ const ROOT_INSTANCE_PATH: InstancePath = { expansion: 0, frames: [] };
  */
 let _instancePath: InstancePath = ROOT_INSTANCE_PATH;
 
+/**
+ * Say that an instance was not rendered, on the two surfaces a host can reach (spec §16.4, §16.9):
+ * the console, and a bubbling, composed `jx-error` `ErrorEvent` from the element carrying the
+ * error. Nothing is said for a host no longer in the document, whose replacement reports for it.
+ *
+ * @param {HTMLElement} host - The instance
+ * @param {string} tagName - Its tag, for the console line
+ * @param {Error} error - Why
+ */
+function reportUnrendered(host: HTMLElement, tagName: string, error: Error): void {
+  if (!host.isConnected) {
+    return;
+  }
+  console.error(`Jx: <${tagName}> was not rendered:`, error);
+  host.dispatchEvent(
+    new ErrorEvent("jx-error", {
+      bubbles: true,
+      composed: true,
+      error,
+      message: error.message,
+    }),
+  );
+}
+
 /**
  * Run `fn` with `path` as the chain, so every instance that CONNECTS during it reads that chain.
  *
@@ -4083,11 +4646,11 @@ function reexpand(path: InstancePath): InstancePath {
  * ended. Inside plain data the comparison IS the JSON form, so a member JSON cannot see (a
  * function, a `Map` two levels down) is not seen here either; §16.9 says so.
  *
- * @param {unknown} a
- * @param {unknown} b
+ * @param {JxScopeValue} a
+ * @param {JxScopeValue} b
  * @returns {boolean}
  */
-function samePropValue(a: unknown, b: unknown): boolean {
+function samePropValue(a: JxScopeValue, b: JxScopeValue): boolean {
   if (Object.is(a, b)) {
     return true;
   }
@@ -4104,11 +4667,11 @@ function samePropValue(a: unknown, b: unknown): boolean {
 /**
  * Whether a value is an array or a plain object — the shapes whose JSON form is the whole value.
  *
- * @param {unknown} value
- * @returns {value is object}
+ * @param {JxScopeValue} value
+ * @returns {boolean}
  */
-function isPlainData(value: unknown): value is object {
-  if (typeof value !== "object" || value === null) {
+function isPlainData(value: JxScopeValue): boolean {
+  if (!isNonNullObject(value)) {
     return false;
   }
   const raw: unknown = toRaw(value);
@@ -4184,19 +4747,19 @@ const _definedSources = new Set<string>();
 
 export async function defineElement(source: string | JxDocument, baseUrl?: string) {
   let base = baseUrl;
-  let doc = source;
-  if (typeof source === "string") {
+  let source_: JxDocument;
+  if (isString(source)) {
     base = new URL(source, base ?? location.href).href;
     if (_definedSources.has(base)) {
       return;
     }
     _definedSources.add(base);
-    doc = await resolve(source);
+    source_ = await resolve(source);
+  } else {
+    source_ = source;
   }
   base ??= location.href;
 
-  const source_: JxDocument = doc as JxDocument;
-
   const { tagName } = source_;
   if (!tagName || !tagName.includes("-")) {
     throw new Error(`Jx defineElement: tagName "${tagName}" must contain a hyphen`);
@@ -4248,7 +4811,7 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
          the same values render the same thing, forever. Only a value the definition's state READS
          is recorded — a `$props` key no state entry declares changes nothing about the render, so
          a definition that "varies" one at each level is still rendering itself. */
-      const supplied: Record<string, unknown> = {};
+      const supplied: JxScope = {};
 
       // The definition as it stands NOW — a redefinition since this class was made is honoured.
       const live = _elementDefs.get(tagName) ?? { base: initialBase, doc: initialDef };
@@ -4276,8 +4839,13 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
       const propsAttr = this.dataset.jxProps;
       if (propsAttr) {
         try {
-          const props = JSON.parse(propsAttr) as Record<string, unknown>;
-          for (const [key, val] of Object.entries(props)) {
+          /* SAFETY: `JSON.parse` answers the JSON value the attribute encodes, or throws, which the
+             catch below ignores as it always has. */
+          const props = JSON.parse(propsAttr) as JsonValue;
+          /* The site build writes an object. An array or string payload still yields its index
+             keys, and a number, boolean or null yields none, as `Object.entries` always gave. */
+          const entries = isNonNullObject(props) || isString(props) ? Object.entries(props) : [];
+          for (const [key, val] of entries) {
             if (refusePrivateProp(key, "data-jx-props")) {
               continue;
             }
@@ -4315,13 +4883,10 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
         if (isPrivateStateKey(key)) {
           continue;
         }
-        if (
-          key in this &&
-          (this as Record<string, unknown>)[key] !== undefined &&
-          instanceSupplies(this, key)
-        ) {
-          state[key] = (this as Record<string, unknown>)[key];
-          supplied[key] = (this as Record<string, unknown>)[key];
+        const own = elementProperties(this);
+        if (key in this && own[key] !== undefined && instanceSupplies(this, key)) {
+          state[key] = own[key];
+          supplied[key] = own[key];
         }
       }
 
@@ -4350,18 +4915,7 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
         ownPath = extendInstancePath(enclosingPath, { props: supplied, tag: tagName });
       } catch (error) {
         this.replaceChildren();
-        if (!this.isConnected) {
-          return;
-        }
-        console.error(`Jx: <${tagName}> was not rendered:`, error);
-        this.dispatchEvent(
-          new ErrorEvent("jx-error", {
-            bubbles: true,
-            composed: true,
-            error,
-            message: error instanceof Error ? error.message : String(error),
-          }),
-        );
+        reportUnrendered(this, tagName, error instanceof Error ? error : new Error(String(error)));
         return;
       }
       /*
@@ -4373,21 +4927,26 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
         if (isPrivateStateKey(key)) {
           continue;
         }
-        if (!(key in HTMLElement.prototype)) {
-          Object.defineProperty(this, key, {
-            configurable: true,
-            get: () => state[key],
-            set: (v: unknown) => {
-              state[key] = v;
-            },
-          });
-        }
+        /* A name the platform already owns (`title`, `lang`, `hidden`) keeps its native setter, so
+           the attribute still reflects — and ALSO reaches state. Skipping it entirely meant a prop
+           delivered after connection (a template over data that resolves asynchronously) wrote
+           only the attribute: the instance kept the empty value it connected with, and a card's
+           `title` never rendered. */
+        const native = nativeSetter(this, key);
+        Object.defineProperty(this, key, {
+          configurable: true,
+          get: () => state[key],
+          set: (v: JxScopeValue) => {
+            native?.call(this, v);
+            state[key] = v;
+          },
+        });
       }
 
       this._state = state;
 
       // Capture light DOM children (for slot distribution) before rendering
-      const slottedChildren = [...this.childNodes];
+      const slottedChildren = captureSlotted(this);
       this.replaceChildren();
 
       /* Custom elements default to `display: inline`; a Jx container behaves like a `<div>`, so
@@ -4396,14 +4955,16 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
          without one. At (0,1,0) a consumer's rule, a cascade layer or a parent's descendant rule
          all win normally, and the definition's own `display` still wins because it is written into
          the same rule after this. */
-      const defStyle = declaresDisplay(def.style) ? def.style : { display: "block", ...def.style };
+      const ownStyle = def.style;
+      const defStyle =
+        ownStyle && declaresDisplay(ownStyle) ? ownStyle : { display: "block", ...ownStyle };
       /* Definition first, call site second, so the call site wins at equal specificity by source
          order — the promise §9.2 already makes for base-before-nested. Merged into ONE call
          because each `applyStyle` releases what the last one interned. */
-      const hostStyle = mergeStyle(defStyle as JxStyle, callSiteStyles.get(this));
+      const hostStyle = mergeStyle(defStyle, callSiteStyles.get(this));
 
       // Render template into light DOM (once, not in effect — inner effects handle reactivity)
-      applyStyle(this, hostStyle, (state["$media"] as Record<string, string>) ?? {}, state);
+      applyStyle(this, hostStyle, scopeMedia(state), state);
       applyAttributes(this, def.attributes ?? {}, state);
       bindDefinitionHandlers(this, def, state);
 
@@ -4416,46 +4977,122 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
         bindProperty(this, "textContent", def.textContent, state);
       }
       const children = Array.isArray(def.children) ? def.children : [];
-      /* An instance the studio stamped is part of the page being edited, so everything the
-         definition draws inside it is too — and the de-link rules cannot see that from the nodes
-         themselves. Restored rather than cleared, because one definition may render another. */
-      const wasInside = _canvasInsideStampedHost;
-      _canvasInsideStampedHost ||= this.dataset.jxPath !== undefined;
-      /* And the chain, for the same span: an instance this definition draws connects inside
-         `this.append` below and reads it there ({@link underInstancePath}). */
-      try {
-        underInstancePath(ownPath, () => {
-          for (const childDef of children) {
-            this.append(renderNode(childDef, state));
-          }
-        });
-      } finally {
-        _canvasInsideStampedHost = wasInside;
-      }
-
-      // Slot distribution (light DOM)
-      distributeSlots(this, slottedChildren);
+      /* A render that throws is reported the way a refusal is (§16.4), for the same reason: thrown
+         onward from this async callback it is an unhandled rejection naming no element. The
+         children drawn before the throw stay; the one that threw, its later siblings and `onMount`
+         do not happen, and slot content is still distributed into the slots that were drawn. */
+      const draw = (): Error | null => {
+        /* An instance the studio stamped is part of the page being edited, so everything the
+           definition draws inside it is too — and the de-link rules cannot see that from the nodes
+           themselves. Restored rather than cleared, because one definition may render another. */
+        const wasInside = _canvasInsideStampedHost;
+        _canvasInsideStampedHost ||= this.dataset.jxPath !== undefined;
+        /* And the chain, for the same span: an instance this definition draws connects inside
+           `this.append` below and reads it there ({@link underInstancePath}). */
+        let failure: Error | null = null;
+        try {
+          underInstancePath(ownPath, () => {
+            for (const childDef of children) {
+              this.append(renderNode(childDef, state));
+            }
+          });
+        } catch (error) {
+          failure = error instanceof Error ? error : new Error(String(error));
+        } finally {
+          _canvasInsideStampedHost = wasInside;
+        }
+        // Slot distribution (light DOM)
+        distributeSlots(this, slottedChildren);
+        return failure;
+      };
 
       /* Lifecycle: onMount, with the HOST as its second argument.
          A sidecar that must reach the element it belongs to had no way to: the runtime handed it
          the scope alone, so elements resorted to dispatching a `jx-ready` event at themselves and
          catching it with a root handler purely to learn `currentTarget`. The host is what the
-         callback needed; the event round trip was the workaround. */
-      const { onMount } = state;
-      if (typeof onMount === "function") {
-        queueMicrotask(() => (onMount as (s: JxScope, host: HTMLElement) => unknown)(state, this));
+         callback needed; the event round trip was the workaround.
+         And with the host as its RECEIVER, which is how the compiled element calls it: there a
+         state function is an arrow inside the element class, so a body's `this` is the element.
+         Called bare here, a body written for the built site (jxsuite.com's search reads
+         `const host = this`) read the window instead, and threw on every page that drew it live. */
+      const mounted = (): void => {
+        const { onMount } = state;
+        if (isScopeHook(onMount)) {
+          queueMicrotask(() => onMount.call(this, state, this));
+        }
+      };
+
+      let attempt = runScoped(draw);
+      const failure = attempt.result;
+      if (!failure) {
+        mounted();
+        return;
       }
+      reportUnrendered(this, tagName, failure);
+      /* …and it is drawn again when what it was given changes (§16.4). A prop bound to data that
+         arrives later (a collection the page resolves after its first render, a row a list fills
+         in) reaches the instance AFTER it connected, so the render that threw was a render of
+         the empty values, not of the instance. Without a retry it stayed blank for good even once
+         every value it needed was there. The watch reads the definition's authored entries only,
+         the ones a prop can write: a computed entry is what threw, and reading it here would
+         throw again. Writes are coalesced into one microtask, because a parent sets its props one
+         at a time. The same error is reported once, not once per attempt. */
+      const inputs = [...declaredDefaults(def).keys()].filter((key) => !isPrivateStateKey(key));
+      let lastMessage = failure.message;
+      let queued = false;
+      const watch = effect(
+        () => {
+          for (const key of inputs) {
+            void state[key];
+          }
+        },
+        {
+          scheduler: () => {
+            if (queued) {
+              return;
+            }
+            queued = true;
+            queueMicrotask(() => {
+              queued = false;
+              if (!this.isConnected) {
+                watch.effect.stop();
+                return;
+              }
+              watch();
+              attempt.stop();
+              this.replaceChildren();
+              pauseTracking();
+              try {
+                attempt = runScoped(draw);
+              } finally {
+                resetTracking();
+              }
+              const again = attempt.result;
+              if (!again) {
+                watch.effect.stop();
+                mounted();
+              } else if (again.message !== lastMessage) {
+                lastMessage = again.message;
+                reportUnrendered(this, tagName, again);
+              }
+            });
+          },
+        },
+      );
     }
 
     disconnectedCallback() {
-      if (typeof this._state?.onUnmount === "function") {
-        (this._state.onUnmount as (s: JxScope) => unknown)(this._state);
+      // Called as a method, so a hook that reads `this` sees the scope.
+      const state = this._state;
+      if (state && isScopeHook(state.onUnmount)) {
+        state.onUnmount(state);
       }
     }
 
     adoptedCallback() {
-      if (typeof this._state?.onAdopted === "function") {
-        (this._state.onAdopted as (s: JxScope) => unknown)(this._state);
+      const state = this._state;
+      if (state && isScopeHook(state.onAdopted)) {
+        state.onAdopted(state);
       }
     }
 
@@ -4507,11 +5144,25 @@ function renderCustomElementWithProps(
        element is an asset reference authored at the USAGE site, so it belongs to the document that
        wrote it — a media prop the component forwards into its own `<img>` is resolved separately,
        inside the component's render, against the same context. */
-    const write = (resolved: unknown): void => {
-      (el as unknown as Record<string, unknown>)[key] =
-        typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+    const write = (resolved: JxScopeValue): void => {
+      const value = isString(resolved) ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+      elementProperties(el)[key] = value;
+      /* A declared prop that shares its name with an `HTMLElement` property (`title`, `lang`) gets
+         no forwarding accessor (§16.2), so the write above lands on the element and never reaches
+         the instance's state. Connection reads it once; a binding that changes AFTER connection
+         (a row whose data arrives later) was lost, and the instance went on drawing the value it
+         connected with. The binding is the parent's `$props`, addressed to the definition's prop,
+         so it writes that prop's state. */
+      const instanceState = instanceStateOf(el);
+      if (
+        instanceState &&
+        key in HTMLElement.prototype &&
+        Object.hasOwn(toRaw(instanceState), key)
+      ) {
+        instanceState[key] = value;
+      }
     };
-    if (isRefObj(val)) {
+    if (isRefValue(val)) {
       const refVal = val;
       write(resolveRef(refVal.$ref, state));
       // Reactive forwarding: re-set the property when the source changes
@@ -4519,7 +5170,7 @@ function renderCustomElementWithProps(
         write(resolveRef(refVal.$ref, state));
       });
     } else if (isTemplateString(val)) {
-      effect(() => {
+      bindTemplate(val, () => {
         write(evaluateTemplate(val, state));
       });
     } else {
@@ -4535,7 +5186,7 @@ function renderCustomElementWithProps(
   if (def.style) {
     callSiteStyles.set(el, def.style);
   }
-  applyStyle(el, def.style ?? {}, (state["$media"] as Record<string, string>) ?? {}, state);
+  applyStyle(el, def.style ?? {}, scopeMedia(state), state);
   applyAttributes(el, def.attributes ?? {}, state);
   /* And its ordinary properties and handlers — `id`, `hidden`, `className`, an `onselect` — exactly
      as an ordinary element gets them. A custom element used in a document is still an element in
@@ -4560,47 +5211,184 @@ function renderCustomElementWithProps(
 }
 
 /**
- * Light DOM slot distribution.
+ * Whether a node is an element, by its `nodeType` (which, unlike `instanceof`, holds across
+ * realms).
  *
- * @param {HTMLElement} host
- * @param {ChildNode[]} slottedChildren
- */
-function distributeSlots(host: HTMLElement, slottedChildren: ChildNode[]) {
-  /* No early return when nothing was slotted. A slot leaves no node WHETHER OR NOT it received
-     anything — an unmatched one unwraps to its own fallback children, and a host given nothing at
-     all is just every slot unmatched. Returning early here left the slot standing in exactly the
-     case an element most wants to detect: `[part="label"]:empty` answered false for a control with
-     no label, because the surviving slot was still a child. */
-  const slots = host.querySelectorAll("slot");
-  if (slots.length === 0) {
-    return;
-  }
+ * @param {Node} node
+ * @returns {node is Element}
+ */
+function isElementNode(node: Node): node is Element {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+
+/**
+ * Whether a node is a text node, by its `nodeType`.
+ *
+ * @param {Node} node
+ * @returns {node is Text}
+ */
+function isTextNode(node: Node): node is Text {
+  return node.nodeType === Node.TEXT_NODE;
+}
+
+/**
+ * Whether a node is a comment, by its `nodeType`.
+ *
+ * @param {Node} node
+ * @returns {node is Comment}
+ */
+function isCommentNode(node: Node): node is Comment {
+  return node.nodeType === Node.COMMENT_NODE;
+}
+
+// ─── Slot distribution (spec.md §8.5) ─────────────────────────────────────────
 
-  const named = new Map<string | null, ChildNode[]>();
-  const unnamed: ChildNode[] = [];
+/**
+ * Text that is only HTML whitespace (space, tab, line feed, form feed, carriage return): never slot
+ * content. A non-breaking space is not in the set, and `+` keeps an empty text node out of it, so
+ * the text node a binding is about to write stays with its group.
+ */
+export const SLOT_WHITESPACE = /^[\t\n\f\r ]+$/u;
+
+/** The word that opens a prerendered slot group's comment bracket: `<!--jx-slot n name-->`. */
+export const SLOT_MARK = "jx-slot";
+
+/** The attribute a prerendered instance carries when its slot groups are bracketed by `n`. */
+export const SLOT_ATTR = "data-jx-slots";
+
+/**
+ * The `Symbol.for` key of the shared group record: node → the slot group it belongs to.
+ *
+ * Shared through `globalThis` because each compiled component module carries its own copy of the
+ * distribution helper, and a record one of them (or this runtime) writes has to be read by
+ * whichever element captures the node next.
+ */
+export const SLOT_RECORD_KEY = "jx.slot.group";
+
+/** The record itself; read before a node's own `slot` attribute, and deleted once read. */
+const slotRecord: WeakMap<Node, string> = (() => {
+  const key = Symbol.for(SLOT_RECORD_KEY);
+  /* SAFETY: the one value ever stored under this registered symbol is this WeakMap, written by
+     this runtime or by a compiled module's inlined helper (`slotHelperSource` in the compiler). */
+  const holder = globalThis as typeof globalThis & Record<symbol, WeakMap<Node, string>>;
+  holder[key] ??= new WeakMap<Node, string>();
+  return holder[key];
+})();
 
-  for (const child of slottedChildren) {
-    if (child.nodeType === Node.ELEMENT_NODE && (child as Element).getAttribute("slot")) {
-      const name = (child as Element).getAttribute("slot");
-      if (!named.has(name)) {
-        named.set(name, []);
+/**
+ * The children an element distributes into its slots, taken before its template renders.
+ *
+ * A prerendered instance is the exception, and the reason this is a function. Its children are the
+ * prerendered markup, and re-rendering would capture the component's own template as slot content.
+ * The prerender therefore stamps it `data-jx-slots="n"` and brackets every group it placed with
+ * `<!--jx-slot n name-->` … `<!--/jx-slot n-->`; this returns exactly the nodes inside this host's
+ * brackets, recording each one's group name, and removes the attribute. The id is needed because a
+ * forwarded group sits inside a nested instance's own brackets, and the name because a nested
+ * instance that upgrades first must not regroup the enclosing instance's nodes.
+ *
+ * @param {Element} host
+ * @returns {ChildNode[]}
+ */
+export function captureSlotted(host: Element): ChildNode[] {
+  const id = host.getAttribute(SLOT_ATTR);
+  if (id === null) {
+    return [...host.childNodes];
+  }
+  host.removeAttribute(SLOT_ATTR);
+  const opener = `${SLOT_MARK} ${id} `;
+  const closer = `/${SLOT_MARK} ${id}`;
+  const openers: Comment[] = [];
+  const walker = host.ownerDocument.createTreeWalker(host, NodeFilter.SHOW_COMMENT);
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    if (isCommentNode(n) && n.data.startsWith(opener)) {
+      openers.push(n);
+    }
+  }
+  const captured: ChildNode[] = [];
+  for (const open of openers) {
+    const name = decodeURIComponent(open.data.slice(opener.length));
+    for (let n = open.nextSibling; n; n = n.nextSibling) {
+      if (isCommentNode(n) && n.data === closer) {
+        break;
       }
-      (named.get(name) as ChildNode[]).push(child);
-    } else {
-      unnamed.push(child);
+      slotRecord.set(n, name);
+      captured.push(n);
     }
   }
+  return captured;
+}
+
+/**
+ * Whether a group holds content: an element, or a text node that is not empty. A comment (a lit
+ * part marker, a repeater's anchor) travels with its group but does not stop the fallback showing.
+ *
+ * @param {readonly ChildNode[]} group
+ * @returns {boolean}
+ */
+function slotGroupHasContent(group: readonly ChildNode[]): boolean {
+  return group.some((n) => isElementNode(n) || (isTextNode(n) && n.data !== ""));
+}
 
-  /* A `<slot>` UNWRAPS: its matches stand in its place and the slot itself leaves no node.
-     It used to survive, holding its matches as children. The box tree looked right, because a
-     slot is `display: contents` — but the SELECTOR tree did not, so every `& > x` rule in a
-     definition silently stopped matching a slotted child, which is now a grandchild. Measured on
-     the field row: 68.40px where the class form gives 88.40px, and its help text 80px wide
-     instead of 260px, with `[data-span]` dead. An unmatched slot unwraps to its own fallback
-     children, which is what the platform's slot does when nothing is assigned to it. */
+/**
+ * Light-DOM slot distribution: replace each `<slot>` under `host` with the captured children of its
+ * group, or with its own fallback children when that group has no content (spec.md §8.5).
+ *
+ * - **Group.** A node's group is its record when it has one, else an element's `slot` attribute, else
+ *   the unnamed group (`""`). Whitespace-only text is discarded: compiled hosts are parsed HTML
+ *   full of formatting whitespace, and whitespace placed in a part makes its `:empty` false.
+ * - **Place.** Slots are taken in tree order and the FIRST of a name takes its group; a later one of
+ *   the same name shows its fallback. That is the DOM's "find a slot", so the answer does not
+ *   change when a component moves to a shadow root. A slot inside a fallback that was not shown
+ *   still takes its name, which keeps the static prerender's answer the same as this one.
+ * - **Forward.** A slot written directly inside ANOTHER custom element's children is that element's
+ *   child. What it places there is recorded with the slot's own group (its record, else its `slot`
+ *   attribute), so the nested element distributes it by that name whether it captures before or
+ *   after this runs.
+ *
+ * No early return when nothing was slotted: a slot leaves no node either way, and a surviving slot
+ * made `[part="label"]:empty` false for a control with no label. A slot is replaced, not filled:
+ * the selector tree is what a definition's `& > x` rules match, and a slot left as a wrapper turned
+ * every slotted child into a grandchild (§16.6).
+ *
+ * @param {ParentNode} host
+ * @param {readonly ChildNode[]} captured
+ */
+export function distributeSlots(host: ParentNode, captured: readonly ChildNode[]): void {
+  const slots = [...host.querySelectorAll("slot")];
+  if (slots.length === 0) {
+    return;
+  }
+  const groups = new Map<string, ChildNode[]>();
+  for (const n of captured) {
+    if (isTextNode(n) && SLOT_WHITESPACE.test(n.data)) {
+      continue;
+    }
+    const recorded = slotRecord.get(n);
+    slotRecord.delete(n);
+    const name = recorded ?? (isElementNode(n) ? (n.getAttribute("slot") ?? "") : "");
+    let group = groups.get(name);
+    if (!group) {
+      group = [];
+      groups.set(name, group);
+    }
+    group.push(n);
+  }
+  const taken = new Set<string>();
   for (const slot of slots) {
-    const name = slot.getAttribute("name");
-    const matches = name ? (named.get(name) ?? []) : unnamed;
-    slot.replaceWith(...(matches.length > 0 ? matches : [...slot.childNodes]));
+    const name = slot.getAttribute("name") ?? "";
+    let group: ChildNode[] = [];
+    if (!taken.has(name)) {
+      taken.add(name);
+      group = groups.get(name) ?? [];
+    }
+    const placed = slotGroupHasContent(group) ? group : [...group, ...slot.childNodes];
+    const parent = slot.parentElement;
+    if (parent && parent !== host && parent.localName.includes("-")) {
+      const forwarded = slotRecord.get(slot) ?? slot.getAttribute("slot") ?? "";
+      for (const n of placed) {
+        slotRecord.set(n, forwarded);
+      }
+    }
+    slot.replaceWith(...placed);
   }
 }