@jxsuite/runtime 6.3.0 → 7.1.0

package/src/runtime.ts

@@ -36,7 +36,12 @@ import {
   isNestedSelectorKey,
   transposeCanvasOverlaySelector,
 } from "./css.ts";
-import { evaluateExpression, evaluateOperand, isMutating } from "./expression.ts";
+import {
+  evaluateExpression,
+  evaluateOperand,
+  inheritableFormulas,
+  isMutating,
+} from "./expression.ts";
 import { readPath } from "./pointer.ts";
 import type {
   JxContext,
@@ -70,6 +75,7 @@ import {
   isString,
   isTagExpression,
   isTemplateString,
+  templateExpressions,
 } from "@jxsuite/schema/guards";
 import type { TagNameSlot } from "@jxsuite/schema/guards";
 import {
@@ -80,11 +86,20 @@ import {
 import type { FunctionRole } from "@jxsuite/schema/function-role";
 import { formatSrcset, parseSrcset } from "@jxsuite/schema/asset-paths";
 import { runStatements } from "./statements.ts";
-import { compileBody, prepareBodies } from "./body-eraser.ts";
+import { canLoadModules, compileBody, moduleLoaderFor, prepareBodies } from "./body-eraser.ts";
+import {
+  isScriptSpecifier,
+  isTypeScriptPath,
+  parseScriptSpecifier,
+  qualifyScripts,
+  scriptRefSide,
+  scriptSpecifier,
+} from "@jxsuite/schema/document-scripts";
 
 import { readCookie, serializeCookie } from "./cookie.ts";
 import type {
   CemParameter,
+  JsonObject,
   JsonValue,
   JxAttributeValue,
   JxClassCtorDef,
@@ -98,6 +113,7 @@ import type {
   JxPrototypeDef,
   JxRef,
   JxServerFnDef,
+  JxStateDefinition,
   JxStyle,
 } from "@jxsuite/schema/types";
 import type { EffectScope, Ref } from "@vue/reactivity";
@@ -107,8 +123,15 @@ export {
   prepareBodies,
   setBodyEraser,
   setBodyEraserLoader,
+  setModuleLoader,
+} from "./body-eraser.ts";
+export type {
+  BodyEraser,
+  BodyEraserLoader,
+  BodyEraserModule,
+  ModuleLoader,
+  ModuleLoadOptions,
 } from "./body-eraser.ts";
-export type { BodyEraser, BodyEraserLoader, BodyEraserModule } from "./body-eraser.ts";
 
 // ─── Public API ───────────────────────────────────────────────────────────────
 
@@ -236,7 +259,7 @@ function assertHostScope(scope: JxScope): void {
  * root it can remove and a `dispose()` that stops every effect the render created. Nothing here
  * writes a module global, so a shell can hold many roots with different needs at once.
  *
- * @param {JxDocument} doc - The document to render (already an object; use {@link resolve} for a
+ * @param {JxDocument} source - The document to render (already an object; use {@link resolve} for a
  *   URL)
  * @param {ParentNode} target - Where the rendered root is appended
  * @param {JxMountOptions} [options]
@@ -244,13 +267,14 @@ function assertHostScope(scope: JxScope): void {
  * @docs extending/embedding/runtime-host
  */
 export async function mount<S extends JxHostScope<S> = JxScope>(
-  doc: JxDocument,
+  source: JxDocument,
   target: ParentNode,
   options: JxMountOptions<S> = {},
 ): Promise<JxMount> {
   const hostScope: JxScope = options.scope ? hostScopeOf(options.scope) : {};
   assertHostScope(hostScope);
   const base = options.base ? new URL(options.base, location.href).href : location.href;
+  const doc = inlineDocument(source, base);
   const ctx: JxContext = {
     base,
     media: options.media ?? doc.$media ?? null,
@@ -292,6 +316,16 @@ export async function mount<S extends JxHostScope<S> = JxScope>(
   if (options.onNodeMoved) {
     renderOptions.onNodeMoved = options.onNodeMoved;
   }
+  // The authoring hooks (off unless a host names them): see `JxRenderOptions`.
+  if (options.rowLimit !== undefined) {
+    renderOptions.rowLimit = options.rowLimit;
+  }
+  if (options.emptyRow) {
+    renderOptions.emptyRow = options.emptyRow;
+  }
+  if (options.onListReconciled) {
+    renderOptions.onListReconciled = options.onListReconciled;
+  }
   const { result: root, stop } = runScoped(() => renderNode(doc, scope, renderOptions));
   ctx.root = root;
 
@@ -377,7 +411,7 @@ export async function resolve(source: string | JxDocument, ctx?: JxContext): Pro
   // A mount's resolver answers for THIS mount and its hit never enters the shared cache.
   const served = ctx?.resolver?.(source);
   if (served) {
-    return served;
+    return withOwnScripts(await served, source);
   }
   if (_resolveCache.has(source)) {
     return _resolveCache.get(source)!;
@@ -422,7 +456,8 @@ export async function resolve(source: string | JxDocument, ctx?: JxContext): Pro
     return (await res.json()) as JxDocument;
   });
   // A body that needs the eraser has it before anything compiles, which happens synchronously.
-  const p = fetched.then(async (doc) => {
+  const p = fetched.then(async (read) => {
+    const doc = withOwnScripts(read, source);
     await prepareBodies(doc);
     return doc;
   });
@@ -495,6 +530,64 @@ export function setSkipAutoRequests(v: boolean) {
   _autoRequestConfig.skip = v;
 }
 
+/**
+ * One remote lookup the runtime is about to start: an automatic `Request` fetch, or a call of a
+ * `timing: "server"` function (embedding.md §5.2).
+ */
+export interface RemoteLookup {
+  kind: "request" | "server";
+  /** The state key the entry is declared under. */
+  key: string;
+  /** The scope the entry belongs to: a document's, or a component instance's. */
+  scope: JxScope;
+  /**
+   * What the lookup asks for, with every binding in it resolved. A request: `method`, `url`, and
+   * `headers` and `body` where the entry declares them. A server function: `$src`, `$export`,
+   * `arguments`, and `$base` where the document has one. Two lookups that ask for the same thing
+   * hold equal values here, which is what a host keys a cache on.
+   */
+  request: JsonObject;
+}
+
+/**
+ * A host's answer to a {@link RemoteLookup}. `{ value }` is written to the entry at once and nothing
+ * is in flight; a promise stands for the lookup (its answer is written when it settles, and a
+ * rejection is the entry's failure, as the lookup's own would be); `null` starts nothing, and the
+ * entry keeps the value it has.
+ */
+export type RemoteLookupAnswer = { value: JsonValue } | Promise<JsonValue> | null;
+
+/**
+ * What a host installs with {@link setRemoteLookupHandler}. `run` starts the lookup itself and
+ * answers with its promise; a handler that never calls it has kept the lookup from happening.
+ */
+export type RemoteLookupHandler = (
+  lookup: RemoteLookup,
+  run: () => Promise<JsonValue>,
+) => RemoteLookupAnswer;
+
+let _remoteLookupHandler: RemoteLookupHandler | null = null;
+
+/**
+ * Put `handler` between the runtime and every remote lookup it starts, or take it away with `null`
+ * (embedding.md §5.2).
+ *
+ * The two skip switches above are all or nothing, and a host that draws a document over and over
+ * (Studio's canvas renders on every structural edit) needs a third answer: run this lookup once and
+ * hand every later render what it answered. The handler is asked each time a lookup would start,
+ * after the skip switches have had their say, and decides per lookup: let it run, answer it from
+ * what it holds, or leave it alone.
+ *
+ * A lookup started through `run` is the handler's. It is not aborted when the binding that asked
+ * for it is torn down, because the handler may be keeping the answer for the next one that asks;
+ * the runtime only declines to write an answer that arrives for a binding no longer there.
+ *
+ * @param {RemoteLookupHandler | null} handler
+ */
+export function setRemoteLookupHandler(handler: RemoteLookupHandler | null): void {
+  _remoteLookupHandler = handler;
+}
+
 // ─── Dev-proxy auth token (Studio cross-origin canvas) ────────────────────────
 // The Studio canvas iframe is served from a token-gated loopback origin (createProjectServer): its
 // POST /__jx_resolve__ + /__jx_server__ routes 403 without ?token=<rpcToken>. The iframe boot reads
@@ -700,9 +793,42 @@ export function setCanvasDelinkCommands(on: boolean) {
  */
 let _canvasInsideStampedHost = false;
 
+/**
+ * Run a later redraw (a `$switch` case that flips, a `$map` row that arrives) as inside a stamped
+ * host or not, the way its first render was.
+ *
+ * The flag is true only while a stamped instance draws, and a redraw comes from an effect with
+ * nothing on the stack (a list's from a microtask), so without this a case or a row drawn after the
+ * first paint kept its native `popover`, `inert` and `commandfor` inside the canvas.
+ *
+ * @param {boolean} inside - What the flag was when the list or switch was first rendered.
+ * @param {() => T} fn - The redraw.
+ * @returns {T}
+ */
+function insideStampedHost<T>(inside: boolean, fn: () => T): T {
+  const was = _canvasInsideStampedHost;
+  _canvasInsideStampedHost = inside;
+  try {
+    return fn();
+  } finally {
+    _canvasInsideStampedHost = was;
+  }
+}
+
 /** Whether the node being rendered is inside a stamped host, and so part of the edited page. */
 function canvasStamped(el: HTMLElement): boolean {
-  return _canvasInsideStampedHost || el.dataset.jxPath !== undefined;
+  return _canvasInsideStampedHost || carriesCanvasStamp(el);
+}
+
+/**
+ * Whether the studio stamped this element as part of the page being edited: with its document path
+ * (`data-jx-path`), or, for a mapped row that is not the one being edited, with the path it echoes
+ * (`data-jx-echo-path`). An echo row draws the same document nodes as the active one, so it is
+ * de-linked like it: left out, every row but one would keep live popovers, dialogs and commands in
+ * an editable canvas.
+ */
+function carriesCanvasStamp(el: HTMLElement): boolean {
+  return el.dataset.jxPath !== undefined || el.dataset.jxEchoPath !== undefined;
 }
 
 /** The attribute name to stamp `key` on `el` under — `href` → `data-jx-href` on de-linked anchors. */
@@ -900,18 +1026,20 @@ function boundPropKey(
 /**
  * Build the reactive scope (state) from the document using the five-shape detection algorithm.
  *
- * @param {JxDocument} doc
+ * @param {JxDocument} source - The document
  * @param {JxScope} [parentScope] Default is `{}`
  * @param {string} [base] Base URL for resolving $src imports. Default is `location.href`
  * @param {JxContext} [ctx] The mount context; absent on the legacy direct path
  * @returns {Promise<JxScope>} Reactive proxy (state)
  */
 export async function buildScope(
-  doc: JxDocument,
+  source: JxDocument,
   parentScope: JxScope = {},
   base: string = location.href,
   ctx?: JxContext,
 ) {
+  // Already done for a document that was mounted or read from a URL; this is for one handed in raw.
+  const doc = inlineDocument(source, base);
   // A body run without an event dispatches from the mount's root, read when it fires.
   const dispatchRoot = (): EventTarget | null => ctx?.root ?? null;
   const raw: JxScope = {};
@@ -1310,6 +1438,7 @@ function bindTemplate(source: string, run: () => void, fallback?: () => void): v
       run();
       heldTemplateErrors.delete(run);
     } catch (error) {
+      _templateThrows += 1;
       const thrown = error instanceof Error ? error : new Error(String(error));
       if (_templateErrorHandler) {
         _templateErrorHandler(thrown, source);
@@ -1323,6 +1452,20 @@ function bindTemplate(source: string, run: () => void, fallback?: () => void): v
   });
 }
 
+/**
+ * How many template evaluations have thrown and been survived. {@link updateInstanceProps} reads it
+ * around its writes: a binding that throws keeps what it last drew, which a fresh render of the
+ * same values never drew.
+ */
+let _templateThrows = 0;
+
+/**
+ * How many times a mapped list has been asked to redraw. A list redraws in a later microtask, so
+ * {@link updateInstanceProps} cannot answer for what that draws (a row that throws, for one) and
+ * reads this around its writes instead.
+ */
+let _listRedraws = 0;
+
 /** A compiled template: the scope, the row context, its item and index, and the page context. */
 type TemplateFn<R> = (
   state: JxScope,
@@ -1350,11 +1493,15 @@ function rowContext(state: JxScope): JxRowContext | undefined {
  * Whether a template is ONE expression end to end — `"${a.b}"` rather than `"a ${b}"` or
  * `"${a}${b}"`.
  *
- * Depth-counted rather than pattern-matched. A greedy `/^\$\{(.+)\}$/` also matched `"${a} /
- * ${b}"`, spliced the interior into `return (a} / ${b)`, and the SyntaxError became a silent null:
- * the node rendered empty and a `$head` entry shipped its own template text. A brace scan is exact
- * where a tightened regex is not — `"${`${a}-x`}"` is still one expression, and must keep its raw
- * value.
+ * Scanned rather than pattern-matched. A greedy `/^\$\{(.+)\}$/` also matched `"${a} / ${b}"`,
+ * spliced the interior into `return (a} / ${b)`, and the SyntaxError became a silent null: the node
+ * rendered empty and a `$head` entry shipped its own template text. A scan is exact where a
+ * tightened regex is not — `"${`${a}-x`}"` is still one expression, and must keep its raw value.
+ *
+ * The scan is `templateExpressions`, the one every reader of a template shares, so a `}` inside a
+ * string does not end the expression: a brace count read `"${a ? '}' : b}"` as text around an
+ * expression, and its value arrived as a string where the same expression without the quoted brace
+ * kept its type.
  *
  * Lives here rather than in the compiler because both renderers must draw the line in the same
  * place. It is what decides whether a value keeps its own type, and a value that is a boolean in
@@ -1368,19 +1515,8 @@ export function isSingleExpression(str: string): boolean {
   if (!str.startsWith("${") || !str.endsWith("}")) {
     return false;
   }
-  let depth = 0;
-  for (let i = 1; i < str.length; i += 1) {
-    const c = str[i];
-    if (c === "{") {
-      depth += 1;
-    } else if (c === "}") {
-      depth -= 1;
-      if (depth === 0) {
-        return i === str.length - 1;
-      }
-    }
-  }
-  return false;
+  const [only, ...more] = templateExpressions(str);
+  return only !== undefined && more.length === 0 && only.start === 0 && only.end === str.length;
 }
 
 /**
@@ -1419,6 +1555,26 @@ function evaluateValueTemplate(str: string, state: JxScope): JxScopeValue {
   return fn(...templateArgs(state));
 }
 
+/**
+ * Evaluate a template against a scope, for editor tooling: the value a binding would write.
+ *
+ * It is the runtime's own reading, so a tool that shows a template's live value cannot disagree
+ * with the render beside it. A template that is one whole `${…}` answers the expression's own value
+ * (an array, a boolean, a record); anything else answers the interpolated string. The expression
+ * sees exactly the names a rendered template does: `state` (the scope), `$map`, `item` and `index`
+ * (the scope's row context, undefined outside a mapped row), and `$site` and `$page` (read off the
+ * scope). Nothing is caught: an expression that throws, or a source that does not compile, throws
+ * here, and reads made during the call are tracked by whatever effect is running.
+ *
+ * @param {string} str - Template source
+ * @param {JxScope} scope - The scope to read, a row's own scope for a template inside a `map`
+ * @returns {JxScopeValue} The expression's value, or the interpolated string
+ * @docs extending/embedding/runtime-host
+ */
+export function evaluateTemplateValue(str: string, scope: JxScope): JxScopeValue {
+  return evaluateValueTemplate(str, scope);
+}
+
 // ─── Step 2b: Function resolution (Shape 4) ─────────────────────────────────
 
 /**
@@ -1478,6 +1634,14 @@ async function importSource(src: string, base?: string): Promise<ImportedModule>
     const specifier = src.slice(NPM_SCHEME.length);
     return importModule(_npmModuleResolver?.(specifier) ?? specifier);
   }
+  const typed = typeScriptSource(src, base);
+  // Asked only where an answer is possible, so a page with no loader waits no longer than it did.
+  if (typed !== null && (canLoadModules() || isScriptSpecifier(src))) {
+    const loaded = await importTypeScript(typed, src, base);
+    if (loaded) {
+      return loaded;
+    }
+  }
   if (base) {
     try {
       return await importModule(new URL(src, base).href);
@@ -1488,6 +1652,145 @@ async function importSource(src: string, base?: string): Promise<ImportedModule>
   return importModule(src);
 }
 
+/** The schemes a page can fetch a module's text from. */
+const FETCHED_SCHEMES = new Set(["http:", "https:"]);
+
+/**
+ * What the module loader is asked for when a `$src` names TypeScript (spec.md §23.2): a document
+ * script's specifier as it is, or the URL of a `.ts` file a page can fetch. Null for anything a
+ * browser imports as it is.
+ *
+ * @param {string} src - The `$src`, qualified if it named its document's script
+ * @param {string} [base] - The document's URL
+ * @returns {string | null}
+ * @throws {Error} For `#client` or `#server` in a document with no `$script`
+ */
+function typeScriptSource(src: string, base?: string): string | null {
+  if (isScriptSpecifier(src)) {
+    return src;
+  }
+  if (scriptRefSide(src) !== null) {
+    throw new Error(
+      `Jx: $src "${src}" names the script of the document it is written in, and that document ` +
+        `has no $script`,
+    );
+  }
+  const from = base ?? location.href;
+  if (!URL.canParse(src, from)) {
+    return null;
+  }
+  const url = new URL(src, from);
+  // A `file:` path is a test runner's, which imports TypeScript itself; a seeded scheme never gets here.
+  return FETCHED_SCHEMES.has(url.protocol) && isTypeScriptPath(url.pathname) ? url.href : null;
+}
+
+/**
+ * Import a module written in TypeScript through the host's module loader. Null when the page has
+ * none and the module is a `.ts` file, which is then imported as written: a host that transpiles
+ * what it serves still answers that. A document's script has no URL to fall back to, so it says
+ * what is missing.
+ *
+ * @param {string} specifier - What {@link typeScriptSource} gave
+ * @param {string} src - The `$src` as the document holds it
+ * @param {string} [base] - The document's URL
+ * @returns {Promise<ImportedModule | null>}
+ * @throws {Error} For a document's script on a page with no module loader
+ */
+async function importTypeScript(
+  specifier: string,
+  src: string,
+  base?: string,
+): Promise<ImportedModule | null> {
+  const load = await moduleLoaderFor();
+  if (load) {
+    const module = await load(specifier, {
+      base,
+      resolveNpm: _npmModuleResolver,
+      text: _documentScripts.get(src),
+    });
+    /* SAFETY: trust boundary, the same one as `importModule` below: the loader hands back the
+       module namespace `import()` gave it, read by export name and checked at each use. */
+    return module as ImportedModule;
+  }
+  if (isScriptSpecifier(src)) {
+    throw new Error(
+      `Jx: ${parseScriptSpecifier(src)?.path ?? src} has a script, and this page has nothing ` +
+        `that can load one. Give it a module loader with setModuleLoader(loadModule), loadModule ` +
+        `from @jxsuite/erase/browser, or let setBodyEraserLoader fetch that file when it is needed.`,
+    );
+  }
+  return null;
+}
+
+/**
+ * The text of each document's client script the runtime has read, by the qualified specifier that
+ * names it, so importing one fetches nothing.
+ */
+const _documentScripts = new Map<string, string>();
+
+/**
+ * A document as the runtime uses it: every `$src` naming its own script qualified with the
+ * document's address (spec.md §23.2), and its client script kept for the module loader.
+ *
+ * @param {JxDocument} doc - The document as read
+ * @param {string} source - Where it was read from: a URL, or a key a host serves it under
+ * @returns {JxDocument}
+ */
+function withOwnScripts(doc: JxDocument, source: string): JxDocument {
+  if (!doc.$script) {
+    return doc;
+  }
+  // Its absolute URL, so one document is one module however each reference to it was spelled.
+  const address = URL.canParse(source, location.href)
+    ? new URL(source, location.href).href
+    : source;
+  const { client } = doc.$script;
+  const specifier = scriptSpecifier(address, "client");
+  if (isString(client) && _documentScripts.get(specifier) !== client) {
+    /* Read again with its script edited, which an editing host does on every change: the module
+       made from the old text is not this document's any more. One the host seeded stays, because
+       the host is then what says what the module is. */
+    if (_documentScripts.has(specifier) && !_hostSeeded.has(specifier)) {
+      _moduleCache.delete(specifier);
+    }
+    _documentScripts.set(specifier, client);
+  }
+  const own = qualifyScripts(doc, address);
+  _addressed.set(own, own);
+  return own;
+}
+
+/**
+ * Each document that has a script, with the copy that names it: itself for one read from an
+ * address, so mounting what `resolve()` gave does not address it a second time.
+ */
+const _addressed = new WeakMap<JxDocument, JxDocument>();
+let _inlineCount = 0;
+
+/**
+ * A document handed over as an object, with every `$src` naming its own script qualified. It has no
+ * URL of its own, so it stands at its base, and under a name no other document on the page has: two
+ * documents mounted from one page are still two modules, and one mounted twice is one.
+ *
+ * @param {JxDocument} doc - The document as given
+ * @param {string} base - What its relative references resolve against
+ * @returns {JxDocument}
+ */
+function inlineDocument(doc: JxDocument, base: string): JxDocument {
+  if (!doc.$script) {
+    return doc;
+  }
+  let own = _addressed.get(doc);
+  if (!own) {
+    _inlineCount += 1;
+    const address = new URL(base, location.href);
+    address.hash = `jx-inline-${_inlineCount}`;
+    own = withOwnScripts(doc, address.href);
+    _addressed.set(doc, own);
+  }
+  return own;
+}
+
 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
@@ -1613,6 +1916,73 @@ function seededModule(src: string): ImportedModule | Promise<ImportedModule> | u
  */
 type ScopeFunction = (...args: JxScopeValue[]) => JxScopeValue;
 
+/**
+ * The module a `$src` names: the host's seeded copy, the cached one, or a fetch that is cached when
+ * it settles. Returned as it comes, a module or a promise of one, so an eager caller adds no
+ * microtask of its own: a kit element's scope is ready a fixed number of ticks after it connects,
+ * and `jx-field` names the control it slots at the end of them.
+ *
+ * @param {string} src - The specifier
+ * @param {string} [base] - Base URL for resolving relative specifiers
+ */
+function acquireModule(src: string, base?: string): ImportedModule | Promise<ImportedModule> {
+  const seeded = seededModule(src);
+  if (seeded) {
+    return seeded;
+  }
+  const loading = importSource(src, base);
+  // A side branch: it caches the module without delaying what the caller awaits.
+  loading.then(
+    (mod) => {
+      _moduleCache.set(src, mod);
+    },
+    () => {},
+  );
+  return loading;
+}
+
+/**
+ * The function a `$src` Function entry names, out of its module.
+ *
+ * @param {JxFunctionDef} def
+ * @param {string} key - Def key name
+ * @param {string} src - The specifier the module came from
+ * @param {ImportedModule} mod
+ */
+function exportedFunction(
+  def: JxFunctionDef,
+  key: string,
+  src: string,
+  mod: ImportedModule,
+): ScopeFunction {
+  const exportName = def.$export ?? key;
+  const candidate = mod[exportName] ?? mod.default?.[exportName];
+  if (!isFunction(candidate)) {
+    throw new TypeError(`Jx: export "${exportName}" not found or not a function in "${src}"`);
+  }
+  /* 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. */
+  return candidate as ScopeFunction;
+}
+
+/**
+ * Import the function a `$src` Function entry names, for a caller that can wait for it: a `$lazy`
+ * entry's first call. An eager entry does the same two steps inline, in `resolveFunction`.
+ *
+ * @param {JxFunctionDef} def
+ * @param {string} key - Def key name
+ * @param {string} src - The entry's `$src`
+ * @param {string} [base] - Base URL for resolving relative specifiers
+ */
+async function importFunctionExport(
+  def: JxFunctionDef,
+  key: string,
+  src: string,
+  base?: string,
+): Promise<ScopeFunction> {
+  return exportedFunction(def, key, src, await acquireModule(src, base));
+}
+
 /**
  * Resolve a $prototype: "Function" entry into a function or computed.
  *
@@ -1654,30 +2024,40 @@ async function resolveFunction(
       configurable: true,
       value: def.name ?? key,
     });
+  } else if (def.$lazy === true && def.$src) {
+    const { $src: src } = def;
+    /* Loaded on the first call, not here (spec.md §5.3 4d), as a compiled page does. The first call
+       starts the import and every call waits on it, so the module loads once and a call returns a
+       promise from then on. A computed reads its value now, which a promise cannot give, so the
+       document is refused at build rather than rendering one. */
+    if (role === "computed") {
+      throw new Error(
+        `Jx: "${key}" declares "$lazy": true but is used as a computed value, not called. ` +
+          `A lazily loaded function resolves to a promise; a computed must resolve now. ` +
+          `Remove "$lazy", or call ${key}() from a handler instead of binding its value.`,
+      );
+    }
+    let loaded: Promise<ScopeFunction> | undefined;
+    const load = (): Promise<ScopeFunction> =>
+      (loaded ??= importFunctionExport(def, key, src, base));
+    fn = (...args: JxScopeValue[]) => load().then((target) => target(...args));
+    Object.defineProperty(fn, "name", {
+      configurable: true,
+      value: def.name ?? key,
+    });
+    return fn;
   } else {
     // $src: dynamic import (the body/$src dichotomy was validated above)
-    const src = def.$src;
-    if (!src) {
+    if (!def.$src) {
       throw new Error(`Jx: '${key}' has neither body nor $src`);
     }
-    const exportName = def.$export ?? key;
-    let mod: ImportedModule;
-    const seeded = seededModule(src);
-    if (seeded instanceof Promise) {
-      mod = await seeded;
-    } else if (seeded) {
-      mod = seeded;
-    } else {
-      mod = await importSource(src, base);
-      _moduleCache.set(src, mod);
-    }
-    const candidate = mod[exportName] ?? mod.default?.[exportName];
-    if (!isFunction(candidate)) {
-      throw new TypeError(`Jx: export "${exportName}" not found or not a function in "${src}"`);
-    }
-    /* 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;
+    const acquired = acquireModule(def.$src, base);
+    fn = exportedFunction(
+      def,
+      key,
+      def.$src,
+      acquired instanceof Promise ? await acquired : acquired,
+    );
   }
 
   // The role comes from the document (spec.md §5.3 4b, 4d), never from the import's arity or source.
@@ -1709,6 +2089,7 @@ export const RESERVED_KEYS = new Set([
   "$prototype",
   "$src",
   "$export",
+  "$script",
   "$media",
   "$map",
   "timing",
@@ -2001,6 +2382,8 @@ export function renderNode(
       if (isMappedArray(child)) {
         // Array pseudo-element among siblings: expand inline, no wrapper.
         renderMappedArrayInto(el, child, localState, childOpts);
+      } else if (isString(child) && isSingleExpression(child)) {
+        renderTemplatedChild(el, child, localState, childOpts);
       } else {
         el.append(renderNode(child, localState, childOpts));
       }
@@ -2019,7 +2402,7 @@ export function renderNode(
 /**
  * Draw a whole-`children` template, the way the site build's template pass expands one (spec.md
  * §8.4). This is what an item's or an entry's parsed body looks like to something that renders the
- * source document rather than the build's output: Studio's Preview, chiefly.
+ * source document rather than the build's output: Studio's editing canvas, chiefly.
  *
  * A result that is not an array draws nothing, because a plain string is not a `children` value.
  * The children are rendered in a detached scope of their own, replaced when the template's value
@@ -2037,7 +2420,6 @@ function renderComputedChildren(
   state: JxScope,
   options: JxRenderOptions,
 ): void {
-  const path = options._path ?? [];
   let live: EffectScope | null = null;
   const retire = (): void => {
     // Detached before it is stopped, for the reason `teardown` in `renderMappedArray` gives.
@@ -2053,26 +2435,138 @@ function renderComputedChildren(
       if (!Array.isArray(nodes)) {
         return;
       }
-      const scope = effectScope(true);
-      live = scope;
-      pauseTracking();
-      try {
-        scope.run(() => {
-          /* SAFETY: a children template that yields an array stands for the child list itself, the
-             same reading the site build's template pass gives it. */
-          for (const [i, child] of (nodes as (JxElement | string)[]).entries()) {
-            el.append(renderNode(child, state, { ...options, _path: [...path, i] }));
-          }
-        });
-      } finally {
-        resetTracking();
-      }
+      live = effectScope(true);
+      drawTemplateNodes(live, nodes, state, options, (node) => {
+        el.append(node);
+      });
     },
     retire,
   );
   onScopeDispose(() => live?.stop(), true);
 }
 
+/**
+ * Render the members of a template's array value, each handed to `place` as it is made.
+ *
+ * The members render in `scope`, a detached scope the caller owns and stops when the value changes,
+ * and with tracking paused for the reason {@link renderSwitch} gives: the bindings inside track for
+ * themselves. A member is rendered as a child definition whatever it is, the reading the site
+ * build's template pass gives it: an object is an element, anything else is text. A member that is
+ * itself a template string is bound as text and never spliced a second time, which is also what the
+ * build does (it steps over what it spliced in).
+ *
+ * Each member renders at `[…options._path, index]`: the template's own position, then the member's
+ * place in the value. That is not a path into the document, which holds a string there; it is what
+ * `onNodeCreated` reports for the member, and it cannot collide with a sibling's path.
+ *
+ * @param {EffectScope} scope - Owns every effect the members create
+ * @param {readonly JxScopeValue[]} nodes - The template's value
+ * @param {JxScope} state
+ * @param {JxRenderOptions | undefined} options - `_path` is the template's own position
+ * @param {(node: HTMLElement | Text) => void} place - Puts a rendered member in the DOM
+ */
+function drawTemplateNodes(
+  scope: EffectScope,
+  nodes: readonly JxScopeValue[],
+  state: JxScope,
+  options: JxRenderOptions | undefined,
+  place: (node: HTMLElement | Text) => void,
+): void {
+  const path = options?._path ?? [];
+  /* Read HERE, tracked, before tracking is paused: the template's own read reaches the array and
+     no further, so an array changed in place (a `push`, an index write, a `length` of zero) would
+     otherwise leave what was drawn standing. The same string as text read every member when it
+     joined them, and a list that stopped following its array would be a regression against that.
+     SAFETY: a template that yields an array stands for the children themselves, the same reading
+     the site build's template pass gives it. */
+  const members = [...(nodes as readonly (JxElement | string)[])];
+  pauseTracking();
+  try {
+    scope.run(() => {
+      for (const [i, child] of members.entries()) {
+        place(renderNode(child, state, options ? { ...options, _path: [...path, i] } : undefined));
+      }
+    });
+  } finally {
+    resetTracking();
+  }
+}
+
+/**
+ * Render a string member of a `children` array that is one whole `${…}` (spec.md §8.4).
+ *
+ * Such a member is text unless its value is an array, and then it stands for the nodes the array
+ * holds: the site build's template pass (`resolveDocTemplates`) splices them in where the string
+ * stood, and this draws the same thing so a document reads alike prerendered and rendered live. The
+ * build's rule is the whole rule: ANY array is spliced, every member of it (an object as an
+ * element, anything else as text, mixed freely, an empty array as nothing), and a value that is not
+ * an array leaves the string a text child. Only a single-expression template can yield an array at
+ * all, so every other string child takes the plain text path in {@link renderNode} untouched.
+ *
+ * One Text node is always appended, exactly as before, and it is the stable anchor. While the value
+ * is text it holds the text. While the value is an array it is empty and the spliced nodes stand
+ * immediately before it, so a change replaces that range and nothing else: siblings on either side
+ * are never touched, and a value that turns from an array into text (or back) needs no second
+ * anchor. The spliced nodes own a detached scope that is stopped when the value changes.
+ *
+ * @param {Element} parent
+ * @param {string} template - A single-expression template
+ * @param {JxScope} state
+ * @param {JxRenderOptions | undefined} options - `_path` is the string's own `children` position
+ */
+function renderTemplatedChild(
+  parent: Element,
+  template: string,
+  state: JxScope,
+  options: JxRenderOptions | undefined,
+): void {
+  const anchor = document.createTextNode(template);
+  parent.append(anchor);
+  let live: EffectScope | null = null;
+  let drawn: (HTMLElement | Text)[] = [];
+  const retire = (): void => {
+    // Detached before it is stopped, for the reason `teardown` in `renderMappedArray` gives.
+    for (const node of drawn) {
+      node.remove();
+    }
+    drawn = [];
+    live?.stop();
+    live = null;
+  };
+  bindTemplate(
+    template,
+    () => {
+      const value = evaluateValueTemplate(template, state);
+      retire();
+      if (!Array.isArray(value)) {
+        anchor.textContent = templateText(value);
+        return;
+      }
+      anchor.textContent = "";
+      live = effectScope(true);
+      drawTemplateNodes(live, value, state, options, (node) => {
+        drawn.push(node);
+        anchor.before(node);
+      });
+    },
+    () => {
+      retire();
+      anchor.textContent = "";
+    },
+  );
+  onScopeDispose(() => live?.stop(), true);
+}
+
+/**
+ * A single expression's value as the text its template interpolates to: a template literal's own
+ * conversion, so a Symbol still throws where `String()` would print it.
+ */
+function templateText(value: JxScopeValue): string {
+  /* SAFETY: not a claim that the value is a string. A template literal converts whatever it is
+     handed, and the cast only names a type the literal accepts without a lint exemption. */
+  return `${value as string}`;
+}
+
 // ─── Template string utilities ────────────────────────────────────────────────
 
 /**
@@ -2946,12 +3440,19 @@ function applyStyleInto(
     const scope = effectScope();
     scope.run(() => {
       for (const { name, value } of sources) {
-        effect(() => {
-          const resolved = isRefValue(value)
-            ? resolveRef(value.$ref, state)
-            : evaluateTemplate(value, state);
+        const write = (resolved: JxScopeValue): void => {
           el.style.setProperty(name, canvasStyleValue(String(resolved ?? "")));
-        });
+        };
+        if (isRefValue(value)) {
+          effect(() => write(resolveRef(value.$ref, state)));
+        } else {
+          /* Survives its expression throwing, as every other template binding does (§6.1): the
+             variable is left unwritten, so the declaration that reads it has no value and the
+             cascade answers, and the binding re-runs when what it read changes. Unguarded, one
+             `${state.theme.accent}` read before `theme` arrived, or one `${item.data.tint}` on a
+             row with no `data`, threw out of the render and left the page blank. */
+          bindTemplate(value, () => write(evaluateTemplate(value, state)));
+        }
       }
     });
     entry.stop = () => scope.stop();
@@ -3095,7 +3596,13 @@ function applyAttributes(el: HTMLElement, attrs: Record<string, JxAttributeValue
  *
  * `options._path` is the array node's own document path (`[…, "children", i]`, or `[…, "children"]`
  * for a legacy whole-children repeater); item instances render at `[…that…, "map", index]`, and a
- * row that moves reports its new path through `options.onNodeMoved`.
+ * row that moves reports its new path through `options.onNodeMoved`: once, for the row's root. The
+ * nodes inside the row are not reported, though each one's path begins with the row's and so
+ * changed with it.
+ *
+ * Three options exist for an editor and do nothing unless a host sets them (`JxRenderOptions`):
+ * `rowLimit` caps the rows drawn, `emptyRow` supplies one row for a list with none, and
+ * `onListReconciled` reports what each reconciliation drew.
  *
  * @param {HTMLElement} parentEl
  * @param {import("@jxsuite/schema/types").JxMappedArray} arrayDef
@@ -3118,6 +3625,8 @@ function renderMappedArrayInto(
      re-run, and the instance it holds must connect under the chain of the definition that drew
      the list. */
   const instancePath = _instancePath;
+  // And whether it is drawn inside a stamped host, which a later row must be drawn as too.
+  const insideStamped = _canvasInsideStampedHost;
 
   let warned = false;
   const warnOnce = (message: string): void => {
@@ -3153,7 +3662,9 @@ function renderMappedArrayInto(
     const scope = effectScope(true);
     const childOpts = options ? { ...options, _path: [...path, "map", index] } : undefined;
     const node = scope.run(() => renderNode(mapDef!, child, childOpts))!;
-    return { key, map, node, scope };
+    const row: MappedRow = { key, map, node, scope };
+    listRows.set(node, row);
+    return row;
   };
 
   const reconcile = (list: readonly JxScopeValue[], keys: readonly MappedRow["key"][]): void => {
@@ -3219,10 +3730,27 @@ function renderMappedArrayInto(
         items = [...unsorted].toSorted(compare);
       }
     }
-    const list: readonly JxScopeValue[] = Array.isArray(items) && mapDef ? items : [];
+    let list: readonly JxScopeValue[] = Array.isArray(items) && mapDef ? items : [];
+    const count = list.length;
+
+    /* The authoring hooks (`JxRenderOptions`), both absent unless a host names them. A list with
+       nothing to draw may be given one row to stand for it, and a long one may be cut short. The
+       placeholder is keyed by a value no item can be, so it is never taken for a real row: it is
+       torn down when the list fills and rebuilt when it empties. */
+    const placeholder = count === 0 && mapDef ? options?.emptyRow?.(arrayDef, path) : undefined;
+    if (placeholder !== undefined) {
+      list = [placeholder];
+    }
+    const limit = options?.rowLimit;
+    if (isNumber(limit) && limit >= 0 && list.length > limit) {
+      list = list.slice(0, Math.floor(limit));
+    }
 
     // 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 keys =
+      placeholder === undefined
+        ? list.map((item, index) => mappedRowKey(keyPointer, item, index, warnOnce))
+        : list.map(() => EMPTY_ROW_KEY);
     const seen = new Set<MappedRow["key"]>();
     for (let i = 0; i < keys.length; i++) {
       if (seen.has(keys[i])) {
@@ -3237,7 +3765,15 @@ function renderMappedArrayInto(
 
     pauseTracking();
     try {
-      underInstancePath(reexpand(instancePath), () => reconcile(list, keys));
+      underInstancePath(reexpand(instancePath), () =>
+        insideStampedHost(insideStamped, () => reconcile(list, keys)),
+      );
+      options?.onListReconciled?.(path, {
+        count,
+        empty: count === 0,
+        nodes: rows.map((row) => row.node),
+        rendered: rows.length,
+      });
     } finally {
       resetTracking();
     }
@@ -3253,6 +3789,7 @@ function renderMappedArrayInto(
   let stopped = false;
   const runner = effect(update, {
     scheduler: () => {
+      _listRedraws += 1;
       if (queued) {
         return;
       }
@@ -3275,13 +3812,58 @@ function renderMappedArrayInto(
   }, true);
 }
 
+/** The key of the one row `emptyRow` supplies: an object, so no item's key can equal it. */
+const EMPTY_ROW_KEY: MappedRow["key"] = Object.freeze({ emptyRow: true });
+
 /** A rendered row of a mapped array. */
 interface MappedRow {
   key: JxScopeValue;
   /** The row's `$map` context; `item` and `index` are written in place when the row is reused. */
   map: JxRowContext;
   node: HTMLElement | Text;
-  scope: EffectScope;
+  /** What stops the row's effects: its own scope, or the disposer a host handed over with a node. */
+  scope: Pick<EffectScope, "stop">;
+}
+
+/** The row each rendered row node stands for, so a host can hand its list another node for it. */
+const listRows = new WeakMap<Node, MappedRow>();
+
+/**
+ * Put `next` where the mapped-list row `current` stands, and make it that row's node from now on.
+ * Answers whether `current` was a row's node; when it was not, nothing is touched.
+ *
+ * An authoring interface, beside {@link updateInstanceProps}: a host that edits a document draws a
+ * changed template again for a row that is already on screen, with the row's own scope (the one
+ * `onNodeCreated` reported for the old node). The list holds each row by its node, moves that node
+ * when the row is reused at another index and removes it when the row goes, so a node swapped in
+ * behind its back would be left standing when the list next redrew and the old one put back. Told
+ * here, the list moves and removes the new node instead. The row keeps its key and its `$map`
+ * record, so nothing is reconciled and no other row is touched.
+ *
+ * The old node's effects are stopped, after it has left the document for the reason `teardown` in
+ * {@link renderMappedArrayInto} gives. `stop` is what ends the new node's effects when the row is
+ * dropped or the list is torn down; the host created them, so only it can say how.
+ *
+ * @param current A node the list drew as a row's root.
+ * @param next The node to stand there instead, rendered by the host.
+ * @param [stop] Called once when the row is removed.
+ */
+export function replaceListRow(
+  current: Node,
+  next: HTMLElement | Text,
+  stop?: () => void,
+): boolean {
+  const row = listRows.get(current);
+  if (!row || row.node !== current) {
+    return false;
+  }
+  row.node.replaceWith(next);
+  row.scope.stop();
+  listRows.delete(current);
+  row.node = next;
+  row.scope = { stop: () => stop?.() };
+  listRows.set(next, row);
+  return true;
 }
 
 /**
@@ -3357,6 +3939,8 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
      around the insertion, so an instance the new case creates connects under the chain of the
      definition that drew the switch rather than under none. See {@link _instancePath}. */
   const instancePath = _instancePath;
+  // And whether it is drawn inside a stamped host, which a later case must be drawn as too.
+  const insideStamped = _canvasInsideStampedHost;
 
   if (options?.onNodeCreated) {
     options.onNodeCreated(container, path, def, state);
@@ -3420,13 +4004,16 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
           if (gen !== generation) {
             return;
           }
-          const childScope = await buildScope(doc, {}, href, options?._ctx);
+          // An external case is a component boundary, so it inherits what a component does (§13.4).
+          const childScope = await buildScope(withProjectFormulas(doc), {}, href, options?._ctx);
           if (gen !== generation) {
             return;
           }
           container.replaceChildren();
           underInstancePath(reexpand(instancePath), () =>
-            scope.run(() => container.append(renderNode(doc, childScope, childOpts))),
+            insideStampedHost(insideStamped, () =>
+              scope.run(() => container.append(renderNode(doc, childScope, childOpts))),
+            ),
           );
         })
         .catch((error) =>
@@ -3441,7 +4028,9 @@ function renderSwitch(def: JxElement, state: JxScope, options?: JxRenderOptions)
     pauseTracking();
     try {
       underInstancePath(reexpand(instancePath), () =>
-        scope.run(() => container.append(renderNode(caseDef, state, childOpts))),
+        insideStampedHost(insideStamped, () =>
+          scope.run(() => container.append(renderNode(caseDef, state, childOpts))),
+        ),
       );
     } finally {
       resetTracking();
@@ -3513,22 +4102,59 @@ export async function resolvePrototype(
             }
           });
 
+          /** The fetch itself. With a signal it dies with this binding; without, it is a host's. */
+          const request = (signal?: AbortSignal): Promise<JsonValue> =>
+            fetch(url, {
+              method: def.method ?? "GET",
+              ...(signal && { signal }),
+              ...(def.headers && { headers: def.headers }),
+              ...(def.body && {
+                body: isNonNullObject(def.body) ? JSON.stringify(def.body) : def.body,
+              }),
+            }).then((r): Promise<JsonValue> => (r.ok ? r.json() : Promise.reject(r.statusText)));
+
           const doFetch = () => {
+            const handler = _remoteLookupHandler;
+            let lookup: Promise<JsonValue>;
+            if (handler) {
+              const answer = handler(
+                {
+                  key,
+                  kind: "request",
+                  request: {
+                    method: def.method ?? "GET",
+                    url,
+                    ...(def.headers && { headers: def.headers }),
+                    ...(def.body !== undefined && { body: def.body }),
+                  },
+                  scope: state,
+                },
+                () => request(),
+              );
+              if (answer === null) {
+                return;
+              }
+              if (!(answer instanceof Promise)) {
+                s.value = answer.value;
+                return;
+              }
+              lookup = answer;
+            } else {
+              lookup = request(controller.signal);
+            }
             holdTemplateErrorsFor(
-              fetch(url, {
-                method: def.method ?? "GET",
-                signal: controller.signal,
-                ...(def.headers && { headers: def.headers }),
-                ...(def.body && {
-                  body: isNonNullObject(def.body) ? JSON.stringify(def.body) : def.body,
-                }),
-              })
-                .then((r): Promise<JsonValue> => (r.ok ? r.json() : Promise.reject(r.statusText)))
+              lookup
                 .then((d) => {
-                  s.value = d;
+                  // An answer a host kept may arrive for a binding that is gone: not written.
+                  if (!controller.signal.aborted) {
+                    s.value = d;
+                  }
                 })
                 .catch((error) => {
-                  if (!(error instanceof Error && error.name === "AbortError")) {
+                  if (
+                    !controller.signal.aborted &&
+                    !(error instanceof Error && error.name === "AbortError")
+                  ) {
                     s.value = { error: String(error) };
                   }
                 }),
@@ -4124,6 +4750,7 @@ function latestServerCall(
   s: Ref<JxScopeValue>,
   invoke: ServerCall,
   label: string,
+  describe: (args: JxScope) => RemoteLookup,
 ): (args: JxScope) => void {
   let seq = 0;
   return (args: JxScope) => {
@@ -4131,17 +4758,29 @@ function latestServerCall(
     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. */
-    holdTemplateErrorsFor(
+    const run = (): Promise<JsonValue> =>
       new Promise<JsonValue>((settle) => {
         settle(invoke(args));
-      })
+      });
+    const answer = _remoteLookupHandler ? _remoteLookupHandler(describe(args), run) : run();
+    if (answer === null) {
+      return;
+    }
+    if (!(answer instanceof Promise)) {
+      s.value = answer.value;
+      return;
+    }
+    holdTemplateErrorsFor(
+      answer
         .then((result) => {
           if (n === seq) {
             s.value = result;
           }
         })
         .catch((error) => {
-          if (n === seq) {
+          /* An abort is not a failure: it is how a host that stood for the lookup says nobody is
+             waiting for it any more (a wait it ended), as it is for a request (embedding.md §5.2). */
+          if (n === seq && !(error instanceof Error && error.name === "AbortError")) {
             console.error(label, error);
           }
         }),
@@ -4149,6 +4788,32 @@ function latestServerCall(
   };
 }
 
+/**
+ * What one call of a `timing: "server"` entry asks for, as a host's {@link RemoteLookupHandler} is
+ * told it.
+ */
+function serverLookup(
+  def: JxServerFnDef,
+  state: JxScope,
+  key: string,
+  args: JxScope,
+  base?: string,
+): RemoteLookup {
+  return {
+    key,
+    kind: "server",
+    /* SAFETY: the arguments cross the proxy as JSON, so a server function's are JSON by contract;
+       a value that is not is the call's own failure when it is serialized, as it always was. */
+    request: {
+      $export: def.$export,
+      $src: def.$src,
+      arguments: args,
+      ...(base !== undefined && { $base: base }),
+    } as JsonObject,
+    scope: state,
+  };
+}
+
 /**
  * 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
@@ -4212,7 +4877,9 @@ async function resolveServerFunction(
   // Always wrap in ref for reactivity
   const s: Ref<JxScopeValue> = ref(null);
   if (hasReactiveArg) {
-    const call = latestServerCall(s, fn, "Jx server function:");
+    const call = latestServerCall(s, fn, "Jx server function:", (args) =>
+      serverLookup(def, state, key, args, base),
+    );
     effect(() => {
       const args = resolveArgs();
       onEffectCleanup(() => {});
@@ -4276,7 +4943,9 @@ async function resolveServerFunctionViaProxy(
 
   // Always wrap in ref for reactivity
   const s: Ref<JxScopeValue> = ref(null);
-  const call = latestServerCall(s, doResolve, "Jx server proxy:");
+  const call = latestServerCall(s, doResolve, "Jx server proxy:", (args) =>
+    serverLookup(def, state, key, args, base),
+  );
   if (hasReactiveArg) {
     effect(() => {
       const args = resolveArgs();
@@ -4362,15 +5031,27 @@ export function isSignal(v: unknown): v is Ref<unknown> {
  * type. The default is the value the entry had before anyone set the attribute, which is what the
  * removal is asking to go back to.
  *
- * @param defaults The declared defaults by state key; a key absent from it has none.
+ * A COMPUTED entry is never written, by a change or by a removal: its value is produced, and
+ * attribute text replacing a `$prototype` or `$src` entry's function or record is not something a
+ * removal could give back. `declaredDefaults` records such an entry as present with the value
+ * `undefined`, which is what this reads.
+ *
+ * Exported for the compiler, which inlines the rule into generated modules and calls it for the
+ * prerender; `observed-attr-agreement.test.ts` there proves the copy agrees.
+ *
+ * @param defaults The declared defaults by state key; a key absent from it has none, and a key
+ *   present with `undefined` is computed.
  */
-function absorbAttribute(
+export function absorbAttribute(
   state: JxScope,
   name: string,
   value: string | null,
   defaults?: ReadonlyMap<string, JxScopeValue>,
 ): void {
   const camelKey = name.replaceAll(/-([a-z])/g, (_: string, c: string) => c.toUpperCase());
+  if (defaults?.has(camelKey) && defaults.get(camelKey) === undefined) {
+    return;
+  }
   const current = state[camelKey];
   if (isBoolean(current)) {
     // Presence IS the value for a boolean, so a removal is already spelled by the same rule.
@@ -4386,25 +5067,44 @@ function absorbAttribute(
 }
 
 /**
- * The declared default of every state entry that has one, by state key.
+ * The declared default of every state entry, by state key, read the way `buildScope` reads the
+ * entry's shape:
+ *
+ * - An object with `default` declares that value.
+ * - A computed entry (a marker of {@link COMPUTED_STATE_KEYS}, or a `${…}` template string) is
+ *   recorded as PRESENT with the value `undefined`: its value is produced, so it has no default and
+ *   an observed attribute never writes it ({@link absorbAttribute}).
+ * - A pure type definition (`{ "type": "number" }`), which `buildScope` leaves out of state, is
+ *   absent: it declares no default, and recording the schema object as one wrote that object into
+ *   state when its attribute was removed.
+ * - Anything else is its own default: the shorthand `{ "label": "none" }`, a plain object, an array.
+ *
+ * Exported for the compiler, which serializes the observed keys' defaults into generated modules;
+ * `observed-attr-agreement.test.ts` there proves the emitted map equals this function's output.
  *
  * @param def The element definition
  * @returns {Map<string, JxScopeValue>} Key → default
  */
-function declaredDefaults(def: JxElement): Map<string, JxScopeValue> {
+export function declaredDefaults(def: JxElement): Map<string, JxScopeValue> {
   const out = new Map<string, JxScopeValue>();
   for (const [key, entry] of Object.entries(def.state ?? {})) {
-    if (isNonNullObject(entry)) {
+    if (isString(entry) && isTemplateString(entry)) {
+      out.set(key, undefined);
+      continue;
+    }
+    if (isNonNullObject(entry) && !Array.isArray(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 entry)) {
+        out.set(key, undefined);
+        continue;
+      }
+      if (hasSchemaKeywords(entry)) {
         continue;
       }
     }
-    // The shorthand `{ "label": "none" }` IS the default, the same way `buildScope` reads it.
     out.set(key, entry);
   }
   return out;
@@ -4444,11 +5144,14 @@ const _privatePropWarned = new Set<string>();
  * declares one. What the accessor DOES do is write the attribute, so the attribute is the evidence
  * that somebody set it, whether that was `$props` before connection or the author in the document.
  *
+ * Exported for the compiler, which inlines the rule into generated modules; a compiler test proves
+ * the copy agrees.
+ *
  * @param {HTMLElement} el - The instance being connected.
  * @param {string} key - A state key declared by the component definition.
  * @returns {boolean}
  */
-function instanceSupplies(el: HTMLElement, key: string): boolean {
+export function instanceSupplies(el: HTMLElement, key: string): boolean {
   if (Object.hasOwn(el, key)) {
     return true;
   }
@@ -4530,6 +5233,7 @@ export {
   camelToKebab,
   COLOR_SCHEME_ATTR,
   COLOR_SCHEME_STORAGE_KEY,
+  commentedRuleText,
   cssPropertyName,
   cssRuleText,
   hashCss,
@@ -4620,6 +5324,50 @@ export async function redefineElement(doc: JxDocument, baseUrl?: string): Promis
   _elementDefs.set(tagName, { base, doc });
 }
 
+/** The project formulas every component scope in this realm inherits (spec.md §13.4). */
+let _projectFormulas: Record<string, JxStateDefinition> = {};
+/** A definition with the inherited formulas merged in, built once per definition. */
+let _withFormulas = new WeakMap<JxDocument, JxDocument>();
+
+/**
+ * Give this realm its project's `state`, from which a component inherits the pure named formulas
+ * (spec.md §13.4, §19.4c).
+ *
+ * A page receives project state merged into its own document, but a component's document is its own
+ * scope and is fetched as written, so the host that knows the project says so once: the site shell
+ * before it renders the page, Studio before it draws a canvas. Only closed pure formulas are taken
+ * (`inheritableFormulas`); data state never crosses. Realm-wide because the custom element registry
+ * is: one tag has one definition per realm, whatever mounted it.
+ *
+ * @param {Record<string, JxStateDefinition> | null} [projectState] - `project.json` `state`; absent
+ *   or null clears it, and a component is then exactly its own document
+ */
+export function setProjectFormulas(projectState?: Record<string, JxStateDefinition> | null): void {
+  _projectFormulas = inheritableFormulas(projectState);
+  _withFormulas = new WeakMap();
+}
+
+/**
+ * A component document as its scope is built: the inherited formulas first, then its own `state`,
+ * so an entry the component declares shadows a project formula of that name. The document itself
+ * when the project gives it nothing.
+ *
+ * @param {JxDocument} doc
+ * @returns {JxDocument}
+ */
+function withProjectFormulas(doc: JxDocument): JxDocument {
+  const cached = _withFormulas.get(doc);
+  if (cached) {
+    return cached;
+  }
+  const own = doc.state ?? {};
+  const added = Object.entries(_projectFormulas).filter(([key]) => !(key in own));
+  const merged =
+    added.length > 0 ? { ...doc, state: { ...Object.fromEntries(added), ...own } } : doc;
+  _withFormulas.set(doc, merged);
+  return merged;
+}
+
 /**
  * Seed the module-level root `$media` map used as the fallback for components that declare their
  * own `@--name` style blocks but carry no own `$media` (buildScope ~279-280). `Jx()` sets this from
@@ -4990,7 +5738,7 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
     _definedSources.add(base);
     source_ = await resolve(source);
   } else {
-    source_ = source;
+    source_ = inlineDocument(source, new URL(base ?? location.href, location.href).href);
   }
   base ??= location.href;
 
@@ -5014,6 +5762,7 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
   const initialDef = source_;
   const initialBase = base;
   const observedAttrs = initialDef.observedAttributes ?? [];
+  _observedAttributes.set(tagName, observedAttrs);
 
   const ElementClass = class extends HTMLElement {
     _jxInitialized = false;
@@ -5032,6 +5781,11 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
         return;
       }
       if (this._jxInitialized) {
+        /* Put back in a document (moved to another parent, or removed and inserted). Everything
+           below happens to an instance once, `onMount` included (§16.4): a sidecar wires up what it
+           was handed at the first insertion and is not handed it twice, which is what lets a
+           slotted element, moved by its parent's slot distribution straight after it rendered,
+           mount once. `onUnmount` still runs on every removal. */
         return;
       }
       this._jxInitialized = true;
@@ -5049,7 +5803,9 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
 
       // The definition as it stands NOW — a redefinition since this class was made is honoured.
       const live = _elementDefs.get(tagName) ?? { base: initialBase, doc: initialDef };
-      const def = live.doc;
+      _connectedDefs.set(this, live.doc);
+      // With the project's formulas under its own state (§13.4): the scope, and what a prop may set.
+      const def = withProjectFormulas(live.doc);
       const defBase = live.base;
 
       // The element is its own dispatch root: a body run without an event emits from the host.
@@ -5061,9 +5817,10 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
          for an attribute set before connection too — but on an instance with no state yet, so it
          had nothing to write into, and `<jx-icon name="plus">` rendered with the default. Before
          the `$props` merges below, so a property a parent set still wins (spec §16.2). */
+      const connectDefaults = declaredDefaults(def);
       for (const attr of observedAttrs) {
         if (this.hasAttribute(attr)) {
-          absorbAttribute(state, attr, this.getAttribute(attr));
+          absorbAttribute(state, attr, this.getAttribute(attr), connectDefaults);
           // The raw string, not the coerced value: coercion is a function of it, so two equal
           // Strings are one input.
           supplied[attr] = this.getAttribute(attr);
@@ -5157,10 +5914,20 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
        * accessor: the property-first interface IS the props mechanism, so defining one would leave
        * `el["#cache"] = x` writing straight through everything above.
        */
+      const declared = live.doc.state ?? {};
       for (const key of Object.keys(def.state ?? {})) {
         if (isPrivateStateKey(key)) {
           continue;
         }
+        /* An inherited project formula (§13.4) is a function in the scope, not part of the
+           element's interface: the component's author never chose its name. An accessor for one
+           would put a project formula called `append`, `remove` or `title` over the host's own
+           member of that name, on every component in the realm, and the render below then calls
+           the formula instead of the DOM method. Only an instance that was GIVEN the name as a prop
+           gets the accessor, so a live `$props` binding of that name still reaches state. */
+        if (!(key in declared) && !(key in supplied)) {
+          continue;
+        }
         /* 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
@@ -5220,7 +5987,7 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
            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;
+        _canvasInsideStampedHost ||= carriesCanvasStamp(this);
         /* 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;
@@ -5271,7 +6038,11 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
          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));
+      const inputs = Object.keys(def.state ?? {}).filter(
+        (key) =>
+          !isPrivateStateKey(key) &&
+          !(connectDefaults.has(key) && connectDefaults.get(key) === undefined),
+      );
       let lastMessage = failure.message;
       let queued = false;
       const watch = effect(
@@ -5348,6 +6119,396 @@ export async function defineElement(source: string | JxDocument, baseUrl?: strin
   customElements.define(tagName, ElementClass);
 }
 
+/**
+ * Write one `$props` value onto an instance, before or after it connected.
+ *
+ * The same resolution `bindProperty` gives an ordinary element. A `$props: { src }` on a custom
+ * 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.
+ *
+ * @param {HTMLElement} el - The instance.
+ * @param {string} key - The prop's name.
+ * @param {JxScopeValue} resolved - Its value, already resolved from any binding.
+ */
+function writeInstanceProp(el: HTMLElement, key: string, resolved: JxScopeValue): void {
+  const value = isString(resolved) ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+  elementProperties(el)[key] = value;
+  /* A prop that shares its name with an `HTMLElement` property (`title`, `lang`) is forwarded
+     like any other once the instance has connected (§16.2): its accessor calls the platform's
+     setter, then writes state, so the write above already reaches state there. The write below
+     covers the instance that holds the name in its state with NO accessor for it, which is a
+     name its live definition does not declare and it was not given at connection (an inherited
+     project formula, §13.4). There the write above lands on the platform's property alone, and
+     the instance would go on drawing the value it connected with. The binding is the parent's
+     `$props`, addressed to the instance's state, so it writes that state. */
+  const instanceState = instanceStateOf(el);
+  if (instanceState && key in HTMLElement.prototype && Object.hasOwn(toRaw(instanceState), key)) {
+    instanceState[key] = value;
+  }
+}
+
+/**
+ * The attributes each tag observes, as first defined: the list the platform froze, which a
+ * redefinition does not change ({@link redefineElement}).
+ */
+const _observedAttributes = new Map<string, readonly string[]>();
+
+/**
+ * The definition each instance connected with. A redefinition leaves a connected instance drawing
+ * the old one (embedding.md §7), and nothing read from the new one describes it.
+ */
+const _connectedDefs = new WeakMap<HTMLElement, JxDocument>();
+
+/** Whether an instance is still drawn by the definition its tag has now. */
+function drawnByCurrent(el: HTMLElement): boolean {
+  const drawn = _connectedDefs.get(el);
+  return drawn !== undefined && drawn === _elementDefs.get(el.localName)?.doc;
+}
+
+/** The markers of a state entry whose value is produced asynchronously or kept outside the scope. */
+function producedElsewhere(entry: JxDocumentValue | undefined): boolean {
+  if (!isJsonObject(entry)) {
+    return false;
+  }
+  const { $prototype: prototype } = entry;
+  if (prototype !== undefined) {
+    return prototype !== "Function";
+  }
+  return "$src" in entry || "timing" in entry;
+}
+
+/** Whether a `$props` value is a scalar written as it stands: no binding, no object, no `null`. */
+function isScalarProp(value: JxScopeValue | undefined): value is string | number | boolean {
+  return (isString(value) && !isTemplateString(value)) || isNumber(value) || isBoolean(value);
+}
+
+/**
+ * The platform's own properties that reflect a string to an attribute and read it back unchanged,
+ * so a declared prop of that name holds after a write exactly what connection would have read.
+ */
+const VERBATIM_PROPS: ReadonlySet<string> = new Set(["id", "lang", "role", "slot", "title"]);
+
+/** Whether a document value is drawn through a binding (a `$ref` or a `${…}` template). */
+function isBoundProp(value: JxDocumentValue | undefined): boolean {
+  return isRefValue(value) || isTemplateString(value);
+}
+
+/**
+ * Whether a definition, or one it draws, reads something ONCE when it renders, so that a later
+ * write to its state would not reach what it drew, or would undo it:
+ *
+ * - A tag expression. The tag is chosen at creation and is not tracked (§19.6).
+ * - A `$`-local bound to a `$ref`, which is a copy of the value taken at render, on a node or in the
+ *   `$props` of an element that is not a component; and an `id` bound to a `$ref`, written once.
+ * - A `<slot>` a write can redraw (under a `$switch` case or a `$map` template, or with a `$switch`
+ *   of its own) or re-address (a bound `name`), or whose fallback is bound text. Slots are
+ *   distributed once, at connection (§8.5): the redrawn one is empty, and a replaced one is gone.
+ * - A component it draws being handed a value by a route that component reads only when it connects
+ *   ({@link handsOverOnce}): bound `textContent`, slot content that is bound text, a mapped array
+ *   or a child with a bound `slot`, a bound `props.*` attribute, a bound attribute for a prop it
+ *   declares and does not observe (§16.5), or a bound prop or property the platform owns.
+ * - An `onMount` in its state (§16.4), which runs once with the values it had then.
+ * - A definition that can draw itself, whose instances are admitted against the props each connected
+ *   with (§16.9).
+ * - Children or `innerHTML` drawn from a binding: what they draw is not in the document, so nothing
+ *   can be said about it.
+ * - A state entry produced asynchronously or kept outside the scope (a `$prototype` other than
+ *   `Function`, a `$src`, a `timing`): a request, a class or a store answers for the value it was
+ *   built with, and a stored value outlives the write.
+ *
+ * The answer belongs to the definition, not to the instance: it is asked of the document, so a
+ * `$switch` case that is not drawn yet counts. It is not remembered, because it depends on every
+ * definition this one draws and any of them can be redefined (embedding.md §7).
+ *
+ * @param {JxDocument} def
+ * @param {Set<JxDocument>} [drawing] - The definitions this walk is inside.
+ * @returns {boolean}
+ */
+function rendersOnce(def: JxDocument, drawing = new Set<JxDocument>()): boolean {
+  const declared = def.state ?? {};
+  if ("onMount" in declared || Object.values(declared).some((entry) => producedElsewhere(entry))) {
+    return true;
+  }
+  drawing.add(def);
+  const walk = (value: JxDocumentValue | undefined, isRoot: boolean, redrawn: boolean): boolean => {
+    if (Array.isArray(value)) {
+      return value.some((item) => walk(item, false, redrawn));
+    }
+    if (!isNonNullObject(value)) {
+      return false;
+    }
+    /* SAFETY: a definition is a JSON document, so every member of every object in it is a document
+       value; `Object.entries` on the union of node shapes says `any` only because it cannot name
+       one type for them all. */
+    const node = Object.fromEntries(Object.entries(value)) as Record<string, JxDocumentValue>;
+    const { attributes, tagName } = node;
+    if (tagName !== undefined && !isString(tagName)) {
+      return true;
+    }
+    const attrs: Record<string, JxDocumentValue> = isJsonObject(attributes) ? attributes : {};
+    if (
+      tagName === "slot" &&
+      (redrawn ||
+        isBoundProp(attrs.name) ||
+        isBoundProp(node.name) ||
+        isBoundProp(node.textContent) ||
+        node.$switch !== undefined)
+    ) {
+      return true;
+    }
+    if (isBoundProp(node.innerHTML) || (!isRoot && isBoundProp(node.children))) {
+      return true;
+    }
+    const isInstance = !isRoot && isString(tagName) && tagName.includes("-");
+    const inner = isInstance ? _elementDefs.get(tagName)?.doc : undefined;
+    if (isInstance && handsOverOnce(node, attrs, inner)) {
+      return true;
+    }
+    if (inner && (drawing.has(inner) || rendersOnce(inner, drawing))) {
+      return true;
+    }
+    for (const [key, entry] of Object.entries(node)) {
+      // State is the scope a write reaches, not something drawn; the root's `$props` are defaults.
+      if (isRoot && (key === "state" || key === "$props")) {
+        continue;
+      }
+      if (key === "$props") {
+        if (!isInstance && isJsonObject(entry) && Object.values(entry).some((v) => isRefValue(v))) {
+          return true;
+        }
+        continue;
+      }
+      if ((key === "id" || (key.startsWith("$") && !RESERVED_KEYS.has(key))) && isRefValue(entry)) {
+        return true;
+      }
+      // `cases` is a map of nodes by name, not a node: a case may be called `state`.
+      const drawn = key === "cases" && isJsonObject(entry) ? Object.values(entry) : entry;
+      if (walk(drawn, false, redrawn || key === "cases" || key === "map")) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const answer = walk(def, true, false);
+  drawing.delete(def);
+  return answer;
+}
+
+/**
+ * Whether a component a definition draws is handed a bound value by a route it reads only when it
+ * connects ({@link rendersOnce}).
+ *
+ * @param node - The node that draws the component.
+ * @param attrs - That node's `attributes`.
+ * @param inner - The component's definition, when it is registered.
+ * @returns {boolean}
+ */
+function handsOverOnce(
+  node: Record<string, JxDocumentValue>,
+  attrs: Record<string, JxDocumentValue>,
+  inner: JxDocument | undefined,
+): boolean {
+  if (isBoundProp(node.textContent)) {
+    return true;
+  }
+  /* Its slot content is grouped, and tested for being empty, once (§8.5): text that fills in later,
+     a row that arrives later and a child that changes group are not distributed again. */
+  const kids = Array.isArray(node.children) ? node.children : [];
+  if (
+    kids.some(
+      (kid) =>
+        isBoundProp(kid) ||
+        isMappedArray(kid) ||
+        (isJsonObject(kid) &&
+          (isBoundProp(kid.slot) ||
+            (isJsonObject(kid.attributes) && isBoundProp(kid.attributes.slot)))),
+    )
+  ) {
+    return true;
+  }
+  /* A platform-named prop is read back through the platform's accessor at connection, which
+     coerces it; forwarded later, as a prop or as a property of the node, it reaches the
+     component's state as given. */
+  const coerced = (given: Record<string, JxDocumentValue>): boolean =>
+    Object.entries(given).some(
+      ([key, value]) => isBoundProp(value) && key in HTMLElement.prototype && key !== "textContent",
+    );
+  if (coerced(node) || (isJsonObject(node.$props) && coerced(node.$props))) {
+    return true;
+  }
+  const observed = isString(node.tagName) ? (_observedAttributes.get(node.tagName) ?? []) : [];
+  return Object.entries(attrs).some(([name, given]) => {
+    if (!isBoundProp(given)) {
+      return false;
+    }
+    if (name.startsWith("props.")) {
+      return true;
+    }
+    const prop = name.replaceAll(/-([a-z])/g, (_: string, c: string) => c.toUpperCase());
+    // An unregistered component is one whose declarations cannot be read: assume it reads this.
+    return !inner || (prop in (inner.state ?? {}) && !observed.includes(name));
+  });
+}
+
+/**
+ * Whether anything the instance's own definition drew has an `onMount` that already ran: the
+ * instance itself, or an instance inside it that no document node stands between.
+ *
+ * `onMount` runs once (§16.4), and what it read then it does not read again. An instance the
+ * DOCUMENT placed inside this one (slot content, stamped `data-jx-path` by the canvas) takes
+ * nothing from this instance's props, so it does not count.
+ *
+ * @param {HTMLElement} host
+ * @param {JxScope} state
+ * @returns {boolean}
+ */
+function mountedFromProps(host: HTMLElement, state: JxScope): boolean {
+  if (isScopeHook(state.onMount) || !drawnByCurrent(host)) {
+    return true;
+  }
+  for (const inner of host.querySelectorAll<HTMLElement>("*")) {
+    const innerState = instanceStateOf(inner);
+    if (!innerState || (!isScopeHook(innerState.onMount) && drawnByCurrent(inner))) {
+      continue;
+    }
+    let owner: HTMLElement | null = inner;
+    while (owner && owner !== host && owner.dataset.jxPath === undefined) {
+      owner = owner.parentElement;
+    }
+    if (owner === host) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Write a changed `$props` block into an instance that is already connected, in place, and answer
+ * whether that was done. `false` means the caller draws the instance again; nothing was written
+ * unless the refusal is the last case below.
+ *
+ * This is the property-first interface (§16.2) used by an editor: the Studio canvas calls it when
+ * an author edits a prop, so the instance's own bindings redraw what reads that prop and nothing
+ * else in it is rebuilt. It refuses whenever writing the properties could leave the instance
+ * showing something a fresh render of it would not:
+ *
+ * - The element is not a connected Jx instance, or its definition is gone.
+ * - Nothing changed. A block equal to the last one is a request to draw again, not a write.
+ * - A changed prop is not a scalar on both sides: a string, a number or a boolean, as it stands. A
+ *   `$ref` or a template is an effect the render that created the instance owns, and it would go on
+ *   writing the old source. An object, an array or `null` is refused because too much reads one
+ *   once: a list redraws its rows in a later microtask, where a throw can no longer be answered
+ *   for; a binding that reads a member survives `null` by keeping its last drawing; and the
+ *   canvas's inline-edit marker is stamped by the type the value had at render.
+ * - A changed prop overrides a state entry that is produced elsewhere (a store, a request).
+ * - A changed prop is named for a property the platform owns (`hidden`, `tabIndex`, `textContent`):
+ *   connection reads such a value back through the platform's accessor, which coerces it, reflects
+ *   it to an attribute, or for `textContent` makes it slot content, and a later write does none of
+ *   that the same way. The exception is a declared prop the platform reflects verbatim
+ *   ({@link VERBATIM_PROPS}) being given a string, which reads back as written.
+ * - A removed prop has no scalar declared default to go back to, or its attribute is observed and on
+ *   the host, where a fresh instance would read it instead of the default.
+ * - The definition, or one it draws, declares an `onMount`, or an instance already drawn has one: it
+ *   ran once with the old values.
+ * - The instance, or one its definition drew, connected with a definition since replaced
+ *   (embedding.md §7), and still draws the old one.
+ * - The definition, or one it draws, reads something once at render ({@link rendersOnce}): a tag
+ *   expression, a copied `$ref`, a slot a write would redraw, a nested component handed a value it
+ *   reads only at connection, or a definition that can draw itself.
+ * - A write throws, a template binding throws on the new value and is survived (§6.1), or a write
+ *   reaches a mapped list. The first is a render that throws, which the fresh render reports
+ *   (§16.4); the second keeps what it last drew, which a fresh render never drew; the third redraws
+ *   in a later microtask, where nothing can answer for what it draws. All three are known only
+ *   after the fact: the props are written, and the caller's redraw discards them with the
+ *   instance.
+ *
+ * What it does not put back is state the instance changed itself (a counter its own handler moved):
+ * the write changes the props that changed and leaves the rest of the scope as it stands.
+ *
+ * @param {HTMLElement} el - The instance host.
+ * @param {JxElement["$props"]} before - The `$props` block it was drawn with.
+ * @param {JxElement["$props"]} after - The block it should show now.
+ * @returns {boolean}
+ */
+export function updateInstanceProps(
+  el: HTMLElement,
+  before: JxElement["$props"],
+  after: JxElement["$props"],
+): boolean {
+  const state = instanceStateOf(el);
+  const registered = _elementDefs.get(el.localName)?.doc;
+  if (!state || !registered) {
+    return false;
+  }
+  // As the instance's scope was built: with the project's formulas under its own state (§13.4).
+  const def = withProjectFormulas(registered);
+  const defaults = declaredDefaults(def);
+  const declared = def.state ?? {};
+  const observed = _observedAttributes.get(el.localName) ?? [];
+  const writes: (() => void)[] = [];
+  for (const key of new Set([...Object.keys(before ?? {}), ...Object.keys(after ?? {})])) {
+    const was = before?.[key];
+    const now = after?.[key];
+    // A private key was refused when the instance was drawn and is refused now: nothing to write.
+    if (isPrivateStateKey(key) || JSON.stringify(was) === JSON.stringify(now)) {
+      continue;
+    }
+    if (
+      (was !== undefined && !isScalarProp(was)) ||
+      (now !== undefined && !isScalarProp(now)) ||
+      producedElsewhere(declared[key]) ||
+      // What the instance holds now decided things at render too (a marker, a handler).
+      (key in declared && !isScalarProp(toRaw(state)[key])) ||
+      // The element class's own fields, which a property write would overwrite.
+      key === "_state" ||
+      key === "_jxInitialized"
+    ) {
+      return false;
+    }
+    if (
+      key in HTMLElement.prototype &&
+      !(VERBATIM_PROPS.has(key) && key in declared && isString(now))
+    ) {
+      return false;
+    }
+    if (now !== undefined) {
+      writes.push(() => {
+        writeInstanceProp(el, key, now);
+      });
+      continue;
+    }
+    if (!(key in declared)) {
+      // Nothing reads an undeclared prop: a fresh instance simply would not carry it.
+      writes.push(() => {
+        Reflect.deleteProperty(el, key);
+      });
+      continue;
+    }
+    const fallback = defaults.get(key);
+    const attribute = key.replaceAll(/[A-Z]/gu, (c) => `-${c.toLowerCase()}`);
+    if (!isScalarProp(fallback) || (observed.includes(attribute) && el.hasAttribute(attribute))) {
+      return false;
+    }
+    writes.push(() => {
+      state[key] = fallback;
+    });
+  }
+  if (writes.length === 0 || mountedFromProps(el, state) || rendersOnce(def)) {
+    return false;
+  }
+  const thrown = _templateThrows;
+  const redraws = _listRedraws;
+  try {
+    for (const write of writes) {
+      write();
+    }
+  } catch {
+    return false;
+  }
+  return _templateThrows === thrown && _listRedraws === redraws;
+}
+
 /**
  * Render a registered custom element with $props (property-first interface).
  *
@@ -5374,27 +6535,8 @@ function renderCustomElementWithProps(
     if (refusePrivateProp(key, "$props")) {
       continue;
     }
-    /* The same resolution `bindProperty` gives an ordinary element. A `$props: { src }` on a custom
-       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: 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;
-      }
+      writeInstanceProp(el, key, resolved);
     };
     if (isRefValue(val)) {
       const refVal = val;
@@ -5436,6 +6578,8 @@ function renderCustomElementWithProps(
     const childOpts = options && path ? { ...options, _path: [...path, "children", i] } : undefined;
     if (isMappedArray(child)) {
       renderMappedArrayInto(el, child, state, childOpts);
+    } else if (isString(child) && isSingleExpression(child)) {
+      renderTemplatedChild(el, child, state, childOpts);
     } else {
       el.append(renderNode(child, state, childOpts));
     }