@velarscript/web 0.29.1 → 0.30.0

package/dist/emitter.js

@@ -1,10 +1,9 @@
 import { cssPropertyName, LOOK_ARITHMETIC_HINT, LOOK_MEDIA_LENGTH_UNITS, LOOK_PROPERTIES, LOOK_PROPERTY_KEYWORDS, LOOK_PROPERTY_VALUE_KINDS } from "./look.js";
 import { isCssDeclarationValue } from "./css-tokens.js";
-import { CSS_STRING_RUNTIME } from "./css-string.js";
 import { collectLookStaticValues, evaluateLookStaticExpression, isLookStaticValue, lookStaticCss } from "./look-static.js";
 import { keyframeCssValue, keyframesCanonical, keyframesName } from "./keyframes.js";
 import { JavaScriptEmitter, spanIdentity, VELAR_ERROR_NORMALIZATION_MODULE, VELAR_RUNTIME_REGISTRY_KEY } from "@velarscript/compiler/extension";
-import { WEB_RUNTIME_FOUNDATION, WEB_RUNTIME_FOUNDATION_SHARED_ERROR } from "./runtime-foundation.js";
+import { CSS_STRING_RUNTIME_BODY, LOOK_ARITHMETIC_RUNTIME, WEB_FILE_TYPE_RUNTIME, WEB_LOCAL_REACTIVE_BRIDGE_RUNTIME, WEB_LOCAL_REACTIVE_COLLECTION_BRIDGE_RUNTIME, WEB_RUNTIME_BODY, WEB_RUNTIME_FOUNDATION, WEB_RUNTIME_FOUNDATION_SHARED_ERROR, } from "./runtime-sources.generated.js";
 import { isWebExpression, isWebJsx, isWebKeyframes, isWebLook, isWebStatement, isWebUnit, webExpressionContainsDirectAwait, webStatementContainsDirectAwait, webWatchSubjectLabel, } from "./ast.js";
 /**
  * Statements whose body is not module evaluation. A `def`, a class method, and
@@ -19,32 +18,6 @@ const DEFERRED_BODY_STATEMENT_KINDS = new Set([
     "TestDeclaration",
     "TryStatement",
 ]);
-const FILE_TYPE_RUNTIME = String.raw `
-function __velarFileTypeIs(value) {
-  const descriptor = Object.getOwnPropertyDescriptor(globalThis, Symbol.for("velar.file.registry.v1"));
-  if (!descriptor || !("value" in descriptor) || descriptor.configurable || descriptor.enumerable || descriptor.writable) return false;
-  try { return WeakMap.prototype.has.call(descriptor.value, value); }
-  catch { return false; }
-}
-`.trimStart();
-const WEB_LOCAL_REACTIVE_BRIDGE_RUNTIME = String.raw `
-const __velarReactiveRaw = __velarToRaw;
-function __velarHostRaw(value) { return __velarToRaw(value); }
-`.trimStart();
-const WEB_LOCAL_REACTIVE_COLLECTION_BRIDGE_RUNTIME = String.raw `
-const __velarReactiveIterateKey = Symbol.for("velar.reactive.iterate.v1");
-const __velarReactiveStructureKey = Symbol.for("velar.reactive.structure.v1");
-const __velarReactiveCollectionReadOperation = __velarRuntime.collectionRead;
-const __velarReactiveCollectionTriggerOperation = __velarRuntime.collectionTrigger;
-const __velarReactiveCollectionUnlinkOperation = __velarRuntime.collectionUnlink;
-const __velarReactiveOperation = __velarRuntime.reactive;
-const __velarReactiveTrackOperation = __velarRuntime.track;
-function __velarReactiveCollectionRead(value, key, child) { return __velarReactiveCollectionReadOperation(value, key, child === undefined ? null : child); }
-function __velarReactiveCollectionTrack(value, key = __velarReactiveIterateKey) { __velarReactiveTrackOperation(__velarToRaw(value), key); }
-function __velarReactiveCollectionLink(value, child) { __velarReactiveOperation(child, __velarToRaw(value)); }
-function __velarReactiveCollectionTrigger(value, key, iterate = true, structure = false, indexFrom = null, allKeys = false) { __velarReactiveCollectionTriggerOperation(value, key, iterate, structure, indexFrom, allKeys); }
-function __velarReactiveCollectionUnlink(value, child) { __velarReactiveCollectionUnlinkOperation(value, child); }
-`.trimStart();
 export class WebJavaScriptEmitter extends JavaScriptEmitter {
     currentScope = null;
     /**
@@ -155,7 +128,7 @@ export class WebJavaScriptEmitter extends JavaScriptEmitter {
         return [
             ...(this.needsLookArithmeticRuntime ? [LOOK_ARITHMETIC_RUNTIME] : []),
             ...(this.webOutput ? this.webRuntimeHelpers() : []),
-            ...(this.needsFileTypeHelper ? [FILE_TYPE_RUNTIME] : []),
+            ...(this.needsFileTypeHelper ? [WEB_FILE_TYPE_RUNTIME] : []),
         ];
     }
     webRuntimeHelpers() {
@@ -1328,2067 +1301,15 @@ function containsWebSyntax(value) {
         return true;
     return Object.values(record).some((child) => Array.isArray(child) ? child.some(containsWebSyntax) : containsWebSyntax(child));
 }
-const LOOK_ARITHMETIC_RUNTIME = String.raw `
-function __velarLookDimension(value) {
-  if (typeof value !== "string") return null;
-  const match = /^([+-]?(?:\d+(?:\.\d+)?|\.\d+))(px|rem|em|vw|vh|vmin|vmax|%|fr|ms|s|deg|turn)$/.exec(value);
-  if (!match) return null;
-  const number = Number(match[1]);
-  return Number.isFinite(number) ? { number, unit: match[2] } : null;
-}
-
-function __velarLookNumber(value, label) {
-  if (typeof value !== "number" || !Number.isFinite(value)) throw new TypeError(label + " must be a finite number");
-  return value;
-}
-
-function __velarLookDimensionResult(number, unit) {
-  if (!Number.isFinite(number)) throw new RangeError("Look arithmetic must produce a finite value");
-  return String(Object.is(number, -0) ? 0 : number) + unit;
-}
-
-function __velarLookConvertibleDimension(value) {
-  if (value.unit === "s") return { number: value.number * 1000, unit: "ms" };
-  if (value.unit === "turn") return { number: value.number * 360, unit: "deg" };
-  return value;
-}
-
-function __velarLookUnary(operator, value) {
-  if (typeof value === "number") return operator === "-" ? -__velarLookNumber(value, "Look operand") : __velarLookNumber(value, "Look operand");
-  if (typeof value !== "string") throw new TypeError("Look unit arithmetic requires a number or typed visual value");
-  if (operator === "+") return value;
-  const dimension = __velarLookDimension(value);
-  if (dimension) return __velarLookDimensionResult(-dimension.number, dimension.unit);
-  return "calc(-1 * (" + value + "))";
-}
-
-function __velarLookMath(operator, left, right) {
-  if (typeof left === "number" && typeof right === "number") {
-    const first = __velarLookNumber(left, "Left Look operand");
-    const second = __velarLookNumber(right, "Right Look operand");
-    if (operator === "/" && second === 0) throw new RangeError("Look division cannot use zero");
-    const result = operator === "+" ? first + second : operator === "-" ? first - second : operator === "*" ? first * second : first / second;
-    return __velarLookNumber(result, "Look arithmetic result");
-  }
-  const leftDimension = __velarLookDimension(left);
-  const rightDimension = __velarLookDimension(right);
-  if ((operator === "+" || operator === "-") && leftDimension && rightDimension) {
-    const first = __velarLookConvertibleDimension(leftDimension);
-    const second = __velarLookConvertibleDimension(rightDimension);
-    if (first.unit === second.unit) {
-      return __velarLookDimensionResult(operator === "+" ? first.number + second.number : first.number - second.number, first.unit);
-    }
-  }
-  if (operator === "*" && leftDimension && typeof right === "number") {
-    return __velarLookDimensionResult(leftDimension.number * __velarLookNumber(right, "Right Look operand"), leftDimension.unit);
-  }
-  if (operator === "*" && typeof left === "number" && rightDimension) {
-    return __velarLookDimensionResult(__velarLookNumber(left, "Left Look operand") * rightDimension.number, rightDimension.unit);
-  }
-  if (operator === "/" && leftDimension && typeof right === "number") {
-    const divisor = __velarLookNumber(right, "Right Look operand");
-    if (divisor === 0) throw new RangeError("Look unit division cannot use zero");
-    return __velarLookDimensionResult(leftDimension.number / divisor, leftDimension.unit);
-  }
-  if ((typeof left !== "string" && typeof left !== "number") || (typeof right !== "string" && typeof right !== "number")) {
-    throw new TypeError("Look unit arithmetic requires numbers or typed visual values");
-  }
-  return "calc(" + left + " " + operator + " " + right + ")";
-}
-`.trimStart();
-const WEB_RUNTIME_BODY = String.raw `
-function __velarReport(value, phase, scope = null, detail = "", unhandled = true) {
-  return __velarRuntime.report(value, { phase, detail, component: scope ? scope.component : "", unhandled });
-}
-
-function __velarReportEvent(value, scope, detail) {
-  if (__velarIsError(value) && __velarGraphWeakSetRemove(__velarRuntime.actionFailures, value)) return null;
-  return __velarReport(value, "event", scope, detail);
-}
-
-const __velarWebIterateKey = Symbol.for("velar.reactive.iterate.v1");
-const __velarWebNativeJson = globalThis.JSON;
-const __velarWebJsonText = Object.getOwnPropertyDescriptor(__velarWebNativeJson, "stringify")?.value;
-const __velarEventReflectApply = Object.getOwnPropertyDescriptor(Reflect, "apply")?.value;
-const __velarEventConstructorDescriptor = Object.getOwnPropertyDescriptor(globalThis, "Event");
-const __velarEventConstructor = __velarEventConstructorDescriptor && "value" in __velarEventConstructorDescriptor ? __velarEventConstructorDescriptor.value : null;
-const __velarEventPrototype = typeof __velarEventConstructor === "function" ? Object.getOwnPropertyDescriptor(__velarEventConstructor, "prototype")?.value : null;
-const __velarEventTargetGetter = __velarEventPrototype && Object.getOwnPropertyDescriptor(__velarEventPrototype, "target")?.get;
-const __velarEventPreventDefault = __velarEventPrototype && Object.getOwnPropertyDescriptor(__velarEventPrototype, "preventDefault")?.value;
-const __velarEventStopPropagation = __velarEventPrototype && Object.getOwnPropertyDescriptor(__velarEventPrototype, "stopPropagation")?.value;
-const __velarEventMissingField = __velarGraphFreeze({});
-function __velarQuotedText(value) {
-  return __velarGraphApply(__velarWebJsonText, __velarWebNativeJson, [value], "JSON.stringify");
-}
-function __velarAppendOwned(values, value) {
-  values[values.length] = value;
-  return value;
-}
-function __velarHasName(values, name) {
-  for (let index = 0; index < values.length; index += 1) if (values[index] === name) return true;
-  return false;
-}
-function __velarEventField(value, name, nativeGetter) {
-  if (typeof nativeGetter === "function" && typeof __velarEventReflectApply === "function") {
-    try { return __velarEventReflectApply(nativeGetter, value, []); } catch {}
-  }
-  if (value === null || (typeof value !== "object" && typeof value !== "function")) return __velarEventMissingField;
-  const descriptor = __velarGraphOwnDescriptor(value, name);
-  return descriptor?.enumerable && "value" in descriptor ? descriptor.value : __velarEventMissingField;
-}
-function __velarEventCall(value, name, nativeMethod) {
-  if (typeof nativeMethod === "function" && typeof __velarEventReflectApply === "function") {
-    try { return __velarEventReflectApply(nativeMethod, value, []); } catch {}
-  }
-  const method = __velarEventField(value, name, null);
-  if (typeof method !== "function" || typeof __velarEventReflectApply !== "function") throw new TypeError("DOM event does not expose native " + name);
-  return __velarEventReflectApply(method, value, []);
-}
-
-function __velarTrack(subscribers) {
-  __velarRuntime.trackSubscribers(subscribers);
-}
-
-function __velarToRaw(value) { return __velarRuntime.toRaw(value); }
-function __velarReactive(value, parent = null) { return __velarRuntime.reactive(value, parent); }
-
-function __velarWebListPop(value, requested = -1) {
-  return __velarReactive(__velarListPop(value, requested));
-}
-
-function __velarUntracked(read) {
-  const previous = __velarRuntime.activeObserver;
-  __velarRuntime.activeObserver = null;
-  try { return read(); } finally { __velarRuntime.activeObserver = previous; }
-}
-
-function __velarCleanupObserver(observer) {
-  __velarRuntime.cleanupObserver(observer);
-}
-
-// P2b-9: a self-invalidating render used to report only that it happened. The
-// stack top was the graph's own trigger, so it named neither the collection
-// being written nor the scope reading it, and the distance between symptom and
-// cause was the whole debugging cost. Everything below is already known where
-// the budget trips: the observer carries its component and its watch subject,
-// and the graph has just recorded which path re-triggered it. Naming the write
-// is the difference between bisecting a render and reading one line.
-//
-// The advice is attached to the shape that earns it. A "collection" subject
-// means a collection was read for its size or contents and then written in the
-// same pass, and the two spellings that end it are the same two every time:
-// take the position from the loop instead of from the collection, or read the
-// value out before writing. The kind arrives beside the phrase, so nothing here
-// reads a sentence back apart to decide.
-function __velarSelfInvalidationMessage(mode, component, label, subject, kind) {
-  let message = "A reactive " + mode + " cannot invalidate itself more than 100 times";
-  if (component) message += " (" + component + ")";
-  else if (label) message += " (watching " + label + ")";
-  if (!subject) return message;
-  message += ": it writes " + subject + " while reading it";
-  if (kind === "collection") {
-    return message + ". A position taken from the collection being written -- 'items.get(built.size)' inside the loop that appends to 'built' -- reads it on every pass; take the position from a two-slot 'for value, index in ...' instead, or read what you need into a binding before the loop.";
-  }
-  return message + ". Read it into a binding before the code that writes it, so the write cannot reach the read that tracked it.";
-}
-
-// D90 R21: "label" names the observer in a report -- a watch carries its
-// subject as the author spelled it -- and "sequence" is its registration
-// number, which is the order the flush runs the watch tier in. The counter is
-// application-wide rather than per module, so two modules' watches order by the
-// order the two modules initialized.
-function __velarObserver(read, mode, scope, label = "") {
-  // The first run of a DOM observer executes while its JSX position is being
-  // constructed, and construction is transactional: the failure must reach
-  // the surrounding owner (the mount transaction at the root, the containing
-  // child position otherwise) so the promised fatal state or contained
-  // placeholder appears instead of a silently empty region. Later runs are
-  // updates; their failures are reported and the last valid DOM survives.
-  let initial = mode === "dom";
-  const observer = {
-    mode,
-    label,
-    sequence: __velarNextObserverSequence(),
-    component: scope !== null && scope !== undefined && typeof scope.component === "string" ? scope.component : "",
-    stopped: false,
-    running: false,
-    selfInvalidations: 0,
-    // P2b-9: the reactive path whose write landed while this observer was
-    // reading. The graph fills it in only on a self-invalidating write, so the
-    // runaway report can name what to go and look at.
-    selfInvalidationSubject: "",
-    selfInvalidationKind: "",
-    dependencies: __velarGraphCreateSet(),
-    run() {
-      if (observer.stopped) return;
-      observer.running = true;
-      try { __velarRuntime.runTracked(observer, read); }
-      catch (error) {
-        if (initial) throw error;
-        __velarReport(error, mode === "watch" ? "watch" : "render", scope);
-      }
-      finally {
-        observer.running = false;
-        initial = false;
-      }
-    },
-    notify() {
-      if (observer.stopped) return;
-      if (observer.running) {
-        observer.selfInvalidations += 1;
-        if (observer.selfInvalidations > 100) {
-          observer.stop();
-          __velarReport(new RangeError(__velarSelfInvalidationMessage(
-            mode === "watch" ? "watch" : "render",
-            observer.component,
-            observer.label,
-            observer.selfInvalidationSubject,
-            observer.selfInvalidationKind,
-          )), mode === "watch" ? "watch" : "render", scope);
-          return;
-        }
-      } else {
-        observer.selfInvalidations = 0;
-      }
-      // The registry owns the one scheduler: the emitted prelude used to carry
-      // its own copy of the queue insert and the flush drain, and the two
-      // definitions of one concept is what let a watch be classified three
-      // different ways. The capability observers in packages/web/src/runtime.ts
-      // have always scheduled this way.
-      __velarRuntime.schedule(observer);
-    },
-    stop() { observer.stopped = true; __velarCleanupObserver(observer); },
-  };
-  __velarAppendOwned(scope.cleanups, () => observer.stop());
-  observer.run();
-  return observer;
-}
-
-// D70 rule 180: a reactive source read during component setup and stored in a
-// plain binding is frozen. That is what const means, and a snapshot is a
-// legitimate thing to want -- so the report fires when the source *diverges*
-// from the snapshot, never when the snapshot is taken. A warning that fires on
-// correct code is a warning people learn to ignore; one that fires only after
-// the value on screen has actually gone stale cannot be wrong about that.
-//
-// The whole mechanism is installed only when the development host published its
-// hooks, so a production build pays nothing for it: no map, no stack capture,
-// and one already-false constant on the read path.
-// One module's copy of this runtime cannot own the state: a component in one
-// module reads a cell created in another, so the setup stack and the recorded
-// reads live on the shared hooks object every copy sees.
-const __velarFrozenHooks = (() => {
-  const hooks = globalThis.__velarDevelopmentHooks;
-  if (!hooks || typeof hooks.frozenRead !== "function") return null;
-  if (hooks.setupScopes === undefined) {
-    hooks.setupScopes = [];
-    hooks.reads = __velarGraphCreateWeakMap();
-    hooks.derived = [];
-    hooks.internalDepth = 0;
-  }
-  return hooks;
-})();
-const __velarFrozenReadLimit = 32;
-
-function __velarSetupBegin(scope) {
-  if (__velarFrozenHooks) __velarAppendOwned(__velarFrozenHooks.setupScopes, scope);
-  return scope;
-}
-
-function __velarSetupEnd(value) {
-  if (__velarFrozenHooks && __velarFrozenHooks.setupScopes.length > 0) __velarFrozenHooks.setupScopes.length -= 1;
-  return value;
-}
-
-// The framework's own reads on the author's behalf -- checking a prop is
-// present, building the content a children slot holds, reading a handler
-// thunk. None of them freezes anything the author wrote: the
-// prop handle behind them stays live. Reporting them would be the false-positive
-// flood D70 rule 180 rejected, in its most literal form.
-function __velarInternalRead(read) {
-  if (!__velarFrozenHooks) return __velarUntracked(read);
-  __velarFrozenHooks.internalDepth += 1;
-  try { return __velarUntracked(read); } finally { __velarFrozenHooks.internalDepth -= 1; }
-}
-
-function __velarRecordFrozenRead(cell, value) {
-  if (!__velarFrozenHooks) return;
-  if (__velarFrozenHooks.setupScopes.length === 0 || __velarFrozenHooks.internalDepth > 0) return;
-  if (__velarRuntime.activeObserver !== null) return;
-  // Only a value the reader can show is worth naming in the report; an object
-  // read out of setup is followed through the deep graph, not frozen by this
-  // read, so recording it would produce a report about the wrong thing.
-  if (value !== null && typeof value === "object") return;
-  const scope = __velarFrozenHooks.setupScopes[__velarFrozenHooks.setupScopes.length - 1];
-  const existing = __velarGraphWeakMapRead(__velarFrozenHooks.reads, cell);
-  if (existing) {
-    if (existing.length >= __velarFrozenReadLimit) return;
-    __velarAppendOwned(existing, { value, scope, site: new Error("velar frozen read") });
-    return;
-  }
-  __velarGraphWeakMapWrite(__velarFrozenHooks.reads, cell, [{ value, scope, site: new Error("velar frozen read") }]);
-}
-
-// A derived value frozen during setup has no cell to hang a report on, and a
-// read that left no subscriber is a read the cache never tells anything about.
-// So the entries are kept in one dev-mode list and re-read after a state write
-// -- the only thing that can move a derived value -- which is the same
-// "report on divergence" rule the cells follow, reached the only way it can be.
-function __velarRecordFrozenDerived(access, value) {
-  if (!__velarFrozenHooks) return;
-  if (__velarFrozenHooks.setupScopes.length === 0 || __velarFrozenHooks.internalDepth > 0) return;
-  if (__velarRuntime.activeObserver !== null) return;
-  if (value !== null && typeof value === "object") return;
-  if (__velarFrozenHooks.derived.length >= __velarFrozenReadLimit * 4) return;
-  const scope = __velarFrozenHooks.setupScopes[__velarFrozenHooks.setupScopes.length - 1];
-  __velarAppendOwned(__velarFrozenHooks.derived, { access, value, scope, site: new Error("velar frozen read") });
-}
-
-function __velarReportFrozenDerived() {
-  if (!__velarFrozenHooks || __velarFrozenHooks.derived.length === 0) return;
-  const entries = __velarFrozenHooks.derived;
-  const remaining = [];
-  for (let index = 0; index < entries.length; index += 1) {
-    const entry = entries[index];
-    let current = entry.value;
-    let failed = false;
-    try { current = __velarUntracked(entry.access); }
-    catch { failed = true; }
-    if (failed || __velarGraphSame(entry.value, current)) { remaining[remaining.length] = entry; continue; }
-    __velarPublishFrozenRead(entry, current);
-  }
-  __velarFrozenHooks.derived = remaining;
-}
-
-function __velarReportFrozenReads(cell, next) {
-  if (!__velarFrozenHooks) return;
-  __velarReportFrozenDerived();
-  const entries = __velarGraphWeakMapRead(__velarFrozenHooks.reads, cell);
-  if (!entries) return;
-  __velarGraphWeakMapRemove(__velarFrozenHooks.reads, cell);
-  for (let index = 0; index < entries.length; index += 1) {
-    if (__velarGraphSame(entries[index].value, next)) continue;
-    __velarPublishFrozenRead(entries[index], next);
-  }
-}
-
-function __velarPublishFrozenRead(entry, next) {
-  const component = entry.scope && entry.scope.component ? entry.scope.component : "a component";
-  __velarFrozenHooks.frozenRead({
-    message: "A reactive value read while " + component + " was being built was frozen at "
-      + __velarFrozenText(entry.value) + ", and the source has now changed to " + __velarFrozenText(next)
-      + ". Whatever was built from that read still shows the old value. If it is meant to follow, declare it with 'computed name = <expression>'; if the snapshot was intended, nothing here needs changing.",
-    stack: __velarDomString(entry.site && entry.site.stack ? entry.site.stack : ""),
-  });
-}
-
-function __velarFrozenText(value) {
-  return typeof value === "string" ? __velarQuotedText(value) : __velarDomString(value);
-}
-
-// "name" is the declared name an author "state" wrote, carried on the cell and
-// visible in the emitted source. The cells __velarResource and __velarAction
-// build for their own pending/error fields are created without one, because
-// they are the runtime's bookkeeping rather than state anyone declared.
-//
-// D90 R21: nothing read it any more. It existed for the two watch referees --
-// only a cell with a declared name could be a declared write target -- and they
-// went with the clause. It was left in place rather than removed with them,
-// because it is a fact about the cell rather than a mechanism, and it is what a
-// report naming the state a runaway wrote would have to read. D114 0.28.0 H-U1
-// is that report: __velarSelfInvalidationWrite below reads it.
-function __velarState(initial, name) {
-  let value = __velarToRaw(initial);
-  const subscribers = __velarGraphCreateSet();
-  const cell = {
-    velarStateName: name,
-    // Named rather than shorthand so a captured stack shows a compiler frame
-    // here: D70's report walks past its own frames to find the reading line,
-    // and every JavaScript engine spells an anonymous getter differently.
-    get: function __velarCellRead() {
-      __velarTrack(subscribers);
-      const current = __velarReactive(value, cell);
-      __velarRecordFrozenRead(cell, current);
-      return current;
-    },
-    set(next) {
-      next = __velarToRaw(next);
-      if (__velarGraphSame(value, next)) return next;
-      const previous = value;
-      value = next;
-      __velarReportFrozenReads(cell, next);
-      // Keep deep-change bubbling attached only to the value currently owned
-      // by this cell. Otherwise every replaced object remains linked to the
-      // state cell and continues to occupy the parent graph indefinitely.
-      __velarRuntime.collectionUnlink(cell, previous);
-      __velarReactive(value, cell);
-      for (const observer of __velarGraphSetItems(subscribers)) {
-        __velarSelfInvalidationWrite(observer, name);
-        observer.notify();
-      }
-      return next;
-    },
-  };
-  __velarReactive(value, cell);
-  return cell;
-}
-
-// D114 0.28.0 H-U1: a state cell notifies its own subscriber set rather than
-// going through the graph's keyed notify, so the write path the runaway report
-// names was recorded for every deep write and for no write of a declared
-// state -- and a scalar self-write only ever reaches the 100-round cap through
-// a helper, which is why the gap read as "a write through a plain def". The
-// condition is the graph's own, verbatim: a write that lands while its own
-// reader is still running is the self-invalidating shape, and it is the only
-// one worth describing. A cell with no declared name is runtime bookkeeping --
-// __velarResource and __velarAction build theirs that way -- so it falls back
-// to the same phrase describeSubject uses for a place it cannot name.
-function __velarSelfInvalidationWrite(observer, name) {
-  if (!observer.running) return;
-  observer.selfInvalidationSubject = name ? "state '" + name + "'" : "a tracked value";
-  observer.selfInvalidationKind = "value";
-}
-
-// D71 rule 182: a declared derived value reads bare, so it presents the same
-// .get() face a state cell does. The cache underneath is the runtime's own
-// memo; only the face it is read through differs.
-function __velarComputed(read) {
-  const access = __velarRuntime.computed(read);
-  if (!__velarFrozenHooks) return __velarGraphFreeze({ get: access });
-  return __velarGraphFreeze({
-    get: function __velarDerivedRead() {
-      const value = access();
-      __velarRecordFrozenDerived(access, value);
-      return value;
-    },
-  });
-}
-
-const __velarManagedAsyncNativePromise = globalThis.Promise;
-const __velarManagedAsyncPromisePrototype = __velarGraphOwnDescriptor(__velarManagedAsyncNativePromise, "prototype")?.value;
-const __velarManagedAsyncResolveOperation = __velarGraphOwnDescriptor(__velarManagedAsyncNativePromise, "resolve")?.value;
-const __velarManagedAsyncRejectOperation = __velarGraphOwnDescriptor(__velarManagedAsyncNativePromise, "reject")?.value;
-const __velarManagedAsyncThenOperation = __velarManagedAsyncPromisePrototype
-  ? __velarGraphOwnDescriptor(__velarManagedAsyncPromisePrototype, "then")?.value
-  : null;
-function __velarManagedAsyncResolve(value) {
-  return __velarGraphApply(__velarManagedAsyncResolveOperation, __velarManagedAsyncNativePromise, [value], "Promise.resolve");
-}
-function __velarManagedAsyncReject(error) {
-  return __velarGraphApply(__velarManagedAsyncRejectOperation, __velarManagedAsyncNativePromise, [error], "Promise.reject");
-}
-function __velarManagedAsyncThen(value, fulfilled, rejected) {
-  return __velarGraphApply(__velarManagedAsyncThenOperation, value, [fulfilled, rejected], "Promise.then");
-}
-function __velarManagedAsyncCreate(executor) {
-  if (typeof __velarManagedAsyncNativePromise !== "function") throw new TypeError("The JavaScript Promise API is unavailable");
-  return new __velarManagedAsyncNativePromise(executor);
-}
-
-function __velarResource(load, scope, name) {
-  const value = __velarState(null);
-  const loading = __velarState(true);
-  const ready = __velarState(false);
-  const error = __velarState(null);
-  let generation = 0;
-  let started = false;
-  let disposed = false;
-
-  const reload = () => {
-    if (disposed) return __velarManagedAsyncResolve(null);
-    started = true;
-    const current = ++generation;
-    loading.set(true);
-    error.set(null);
-    return __velarManagedAsyncThen(__velarManagedAsyncThen(__velarManagedAsyncResolve(), load),
-      (next) => {
-        if (disposed || current !== generation) return null;
-        value.set(next);
-        ready.set(true);
-        loading.set(false);
-        return null;
-      },
-      (failure) => {
-        if (disposed || current !== generation) return null;
-        const report = __velarRuntime.report(failure, { phase: "resource", detail: name, component: scope.component, unhandled: false });
-        error.set(report.error);
-        ready.set(true);
-        loading.set(false);
-        return null;
-      },
-    );
-  };
-
-  __velarAppendOwned(scope.mounts, () => started ? null : reload());
-  __velarAppendOwned(scope.cleanups, () => { disposed = true; generation += 1; });
-  return __velarGraphFreeze({
-    get value() { return value.get(); },
-    get loading() { return loading.get(); },
-    get ready() { return ready.get(); },
-    get error() { return error.get(); },
-    reload,
-  });
-}
-
-function __velarAction(execute, scope, name) {
-  const pending = __velarState(false);
-  const error = __velarState(null);
-  let active = 0;
-  let generation = 0;
-  let disposed = false;
-
-  const run = (...arguments_) => {
-    // D114 W2: the one place an action call enters the runtime. An action
-    // started from inside an observer run is asynchronous work that observer
-    // started, so the reactive window carries into the flush its completion
-    // schedules; started from anywhere else it records nothing.
-    __velarNoteAsyncWork();
-    if (disposed) return __velarManagedAsyncReject(__velarNormalizeError(
-      "Action '" + name + "' cannot run after its component is destroyed",
-    ));
-    const current = ++generation;
-    active += 1;
-    pending.set(true);
-    error.set(null);
-    return __velarManagedAsyncThen(__velarManagedAsyncThen(__velarManagedAsyncResolve(), () => __velarGraphApply(execute, null, arguments_, "action body")),
-      (value) => {
-        active -= 1;
-        if (!disposed) pending.set(active > 0);
-        return value;
-      },
-      (failure) => {
-        active -= 1;
-        let actionError = __velarNormalizeError(failure);
-        if (!disposed) {
-          pending.set(active > 0);
-          // Every action failure reports exactly once, through the action
-          // phase, carrying the action's name as its detail -- including a
-          // failure superseded by a newer call. Only the newest generation
-          // owns the public error field. The actionFailures mark lets the
-          // event and detached observers of the same rejection skip an
-          // already-reported failure instead of reporting it a second time.
-          const report = __velarRuntime.report(failure, { phase: "action", detail: name, component: scope.component, unhandled: false });
-          actionError = report.error;
-          __velarGraphWeakSetInsert(__velarRuntime.actionFailures, actionError);
-          if (current === generation) error.set(report.error);
-        }
-        throw actionError;
-      },
-    );
-  };
-
-  __velarGraphDefine(run, "pending", { enumerable: true, get: () => pending.get() });
-  __velarGraphDefine(run, "error", { enumerable: true, get: () => error.get() });
-  __velarAppendOwned(scope.cleanups, () => { disposed = true; generation += 1; });
-  return __velarGraphFreeze(run);
-}
-
-function __velarScope(component = "") {
-  return { cleanups: [], mounts: [], mounted: false, component };
-}
-
-const __velarGlobalScope = __velarScope();
-
-function __velarMountScope(scope) {
-  if (scope.mounted) return;
-  scope.mounted = true;
-  for (let index = 0; index < scope.mounts.length; index += 1) {
-    try {
-      const result = __velarUntracked(scope.mounts[index]);
-      __velarObservePromise(result, (error) => __velarReport(error, "mounted", scope));
-    } catch (error) { __velarReport(error, "mounted", scope); }
-  }
-}
-
-function __velarDestroyScope(scope) {
-  for (let index = scope.cleanups.length - 1; index >= 0; index -= 1) {
-    // A reentrant destroy can empty the list underneath this walk; a missing
-    // slot means the step already ran and must not run again.
-    const cleanup = scope.cleanups[index];
-    if (typeof cleanup !== "function") continue;
-    try {
-      const result = __velarUntracked(cleanup);
-      __velarObservePromise(result, (error) => __velarReport(error, "cleanup", scope));
-    } catch (error) { __velarReport(error, "cleanup", scope); }
-  }
-  scope.cleanups.length = 0;
-}
-
-function __velarCleanupStep(run, scope) {
-  try {
-    const result = __velarUntracked(run);
-    __velarObservePromise(result, (error) => __velarReport(error, "cleanup", scope));
-  } catch (error) { __velarReport(error, "cleanup", scope); }
-}
-
-// D90 R21: nothing here asks whether this watch writes. Execution order is
-// source order, so the only thing the flush needs of a watch is when it was
-// registered, and __velarObserver stamps that on it. The label is the subject
-// as the author spelled it, carried so a runaway flush can name the watches
-// that ran away.
-function __velarWatch(read, callback, scope, label = "") {
-  let current;
-  let currentVersion = 0;
-  let initialized = false;
-  let observer = null;
-  observer = __velarObserver(() => {
-    const next = read();
-    __velarRuntime.trackDeep(next);
-    const nextVersion = __velarRuntime.versionOf(next);
-    if (initialized && (!__velarGraphSame(next, current) || nextVersion !== currentVersion)) {
-      // The body is the author's effect, not part of the watched expression:
-      // its own reactive reads must never become dependencies of what is being
-      // watched, or one write re-evaluates the expression twice and an
-      // unwatched value re-runs the watch.
-      __velarUntracked(() => callback(next, current));
-    }
-    current = next;
-    currentVersion = nextVersion;
-    initialized = true;
-  }, "watch", scope, label);
-}
-
-function __velarComponentHandle(value, componentName) {
-  if (value === null || typeof value !== "object") throw new TypeError("Component " + componentName + " must expose an ordinary Handle record");
-  const prototype = __velarGraphPrototype(value);
-  if (prototype !== __velarGraphPrototype({}) && prototype !== null) throw new TypeError("Component " + componentName + " must expose an ordinary Handle record");
-  const output = {};
-  let active = true;
-  const names = __velarGraphOwnNames(value);
-  for (let index = 0; index < names.length; index += 1) {
-    const name = names[index];
-    const descriptor = __velarGraphOwnDescriptor(value, name);
-    if (!descriptor || !descriptor.enumerable || !("value" in descriptor)) throw new TypeError("Component " + componentName + " Handle fields must be enumerable data values");
-    const member = typeof descriptor.value === "function"
-      ? (...arguments_) => {
-        if (!active) throw new Error("Component " + componentName + " Handle is no longer active");
-        return __velarGraphApply(descriptor.value, null, arguments_, "component Handle method");
-      }
-      : descriptor.value;
-    __velarGraphDefine(output, name, { enumerable: true, value: member });
-  }
-  return __velarGraphFreeze({
-    value: __velarGraphFreeze(output),
-    revoke() { active = false; },
-  });
-}
-
-function __velarComponent(node, scope, mounted, cleanup, handleState) {
-  let destroyed = false;
-  const refCleanups = [];
-  const ownedNodes = node && __velarDomNodeType(node) === 11 ? __velarDomChildNodes(node) : [node];
-  // An enclosing component forwards to a nested component's host only when that
-  // component's root sits at its own root level. Marking the nodes here is what
-  // lets the enclosing scan walk past a nested host buried inside one of its
-  // own elements instead of counting it as a second host of its own.
-  for (let index = 0; index < ownedNodes.length; index += 1) {
-    if (ownedNodes[index] && __velarDomNodeType(ownedNodes[index]) === 1) {
-      __velarGraphDefine(ownedNodes[index], "__velarComponentNode", { value: true, enumerable: true, configurable: true });
-    }
-  }
-  if (mounted) __velarAppendOwned(scope.mounts, mounted);
-  return {
-    __velarComponent: true,
-    node,
-    __bindRef(setRef) {
-      if (!handleState) throw new TypeError("This component does not expose a Handle");
-      const handle = handleState.value;
-      let bound = true;
-      setRef(handle, undefined);
-      __velarAppendOwned(refCleanups, () => {
-        if (!bound) return;
-        bound = false;
-        setRef(null, handle);
-      });
-      return null;
-    },
-    mount(target, before = null) {
-      if (destroyed) throw new Error("Cannot mount a destroyed VelarScript component");
-      if (scope.mounted) throw new Error("Cannot mount a VelarScript component more than once");
-      const parent = typeof target === "string" ? __velarDomQuerySelector(target) : target;
-      if (!parent) throw new Error("VelarScript mount target was not found");
-      __velarDomInsertBefore(parent, node, before);
-      __velarMountScope(scope);
-      return null;
-    },
-    __mount() { if (!destroyed) __velarMountScope(scope); },
-    destroy(remove = true) {
-      if (destroyed) return null;
-      destroyed = true;
-      for (let index = refCleanups.length - 1; index >= 0; index -= 1) refCleanups[index]();
-      refCleanups.length = 0;
-      if (handleState) handleState.revoke();
-      if (cleanup) {
-        try {
-          const result = __velarUntracked(cleanup);
-          __velarObservePromise(result, (error) => __velarReport(error, "cleanup", scope));
-        } catch (error) { __velarReport(error, "cleanup", scope); }
-      }
-      __velarDestroyScope(scope);
-      if (remove) for (let index = 0; index < ownedNodes.length; index += 1) __velarDomRemove(ownedNodes[index]);
-      return null;
-    },
-  };
-}
-
-function __velarScopeComponentRoot(node, attribute) {
-  if (!attribute || !node) return;
-  if (__velarDomNodeType(node) === 1) {
-    __velarDomSetAttribute(node, attribute, "");
-    return;
-  }
-  if (__velarDomNodeType(node) === 11) {
-    const children = __velarDomChildNodes(node);
-    for (let index = 0; index < children.length; index += 1) {
-      if (__velarDomNodeType(children[index]) === 1) __velarDomSetAttribute(children[index], attribute, "");
-    }
-  }
-}
-
-function __velarUseComponent(instance, scope, parentStyleScope = "") {
-  __velarScopeComponentRoot(instance.node, parentStyleScope);
-  __velarAppendOwned(scope.mounts, () => instance.__mount());
-  __velarAppendOwned(scope.cleanups, () => instance.destroy(false));
-  return instance.node;
-}
-
-function __velarFatal(parent, error) {
-  const fallback = __velarDomCreateElement("section");
-  __velarDomSetAttribute(fallback, "role", "alert");
-  __velarDomSetAttribute(fallback, "data-velar-fatal", "");
-  __velarDomSetText(fallback, "The application could not start: " + error.message);
-  __velarDomReplaceChildren(parent, fallback);
-}
-
-// Whether any root has actually mounted, which is the whole question the
-// deferred module failure below has to answer: the no-blank-page promise is
-// about a page with nothing on it, and a page that already has an application
-// on it is not one the fatal state may replace.
-let __velarMountedRoot = false;
-
-// A component element built while the module evaluates sits outside every
-// transaction the runtime owns, so a construction throw there used to escape
-// module evaluation and leave the page blank -- the one initial-render path the
-// promise did not cover. The failure is caught into this value instead, and the
-// module keeps evaluating so the '@main' region still runs: that is where the
-// error handlers are installed and where 'mount' is called, and reporting ahead
-// of both would report to nobody.
-function __velarModuleInstantiate(component, thunks, children, scope, namespace, setRef) {
-  try {
-    return __velarInstantiate(component, thunks, children, scope, namespace, setRef);
-  } catch (error) {
-    const failure = { error, surfaced: false };
-    // The mount that takes this root surfaces the failure at its own target.
-    // Nothing having taken it by the first microtask means nothing ever will,
-    // and a root that was built to be mounted and never was is still a blank
-    // page: it surfaces there instead, into the document body.
-    __velarEnqueue(() => __velarSurfaceModuleFailure(failure, null));
-    return { __velarModuleFailure: failure };
-  }
-}
-
-function __velarSurfaceModuleFailure(failure, parent) {
-  if (failure.surfaced) return null;
-  failure.surfaced = true;
-  // The phase is 'mount' because this is the same failure 'mount(<App />, ...)'
-  // reports under that phase; the two spellings of one root differ in where the
-  // element is written, not in what went wrong.
-  const report = __velarReport(failure.error, "mount", null);
-  try {
-    const target = parent ?? (__velarMountedRoot ? null : __velarDomQuerySelector("body"));
-    if (target) __velarFatal(target, report.error);
-  } catch {}
-  return null;
-}
-
-function __velarMount(evaluate, fallbackTarget = null) {
-  let values;
-  try {
-    values = evaluate();
-  } catch (failure) {
-    const report = __velarReport(failure, "mount", null);
-    if (fallbackTarget !== null) {
-      try {
-        const fallback = __velarDomQuerySelector(fallbackTarget);
-        if (fallback) __velarFatal(fallback, report.error);
-      } catch {}
-    }
-    return null;
-  }
-  const value = values[0];
-  const target = values[1];
-  const parent = typeof target === "string" ? __velarDomQuerySelector(target) : target;
-  // A root whose construction failed while the module evaluated is answered
-  // here, ahead of the missing-target question: the construction failure is the
-  // cause, and reporting the target instead would name a symptom. The target
-  // still decides where the fatal state renders, and a missing one falls back
-  // to the document body exactly as it does below.
-  if (value && value.__velarModuleFailure) {
-    __velarSurfaceModuleFailure(value.__velarModuleFailure, parent || null);
-    return null;
-  }
-  if (!parent) {
-    // A missing mount target must keep the no-blank-page promise in every
-    // build: the failure is reported through velar/app and the fatal state
-    // renders into the document body, since the requested target is exactly
-    // what does not exist.
-    const report = __velarReport(new Error("VelarScript mount target was not found"), "mount", null);
-    try {
-      const body = __velarDomQuerySelector("body");
-      if (body) __velarFatal(body, report.error);
-    } catch {}
-    return null;
-  }
-  try {
-    if (value && value.__velarComponent) {
-      const result = value.mount(parent);
-      if (__velarGraphIsList(globalThis.__velarHotDisposers)) __velarAppendOwned(globalThis.__velarHotDisposers, () => value.destroy());
-      __velarMountedRoot = true;
-      return result;
-    }
-    __velarAppend(parent, value);
-    __velarMountScope(__velarGlobalScope);
-    __velarMountedRoot = true;
-    return null;
-  } catch (failure) {
-    const report = __velarReport(failure, "mount", null);
-    __velarFatal(parent, report.error);
-    return null;
-  }
-}
-
-const __velarSvgNamespace = "http://www.w3.org/2000/svg";
-const __velarXlinkNamespace = "http://www.w3.org/1999/xlink";
-const __velarXmlNamespace = "http://www.w3.org/XML/1998/namespace";
-
-function __velarCreateElement(tag, namespace) {
-  return namespace === "svg" || tag === "svg"
-    ? __velarDomCreateElementNS(__velarSvgNamespace, tag)
-    : __velarDomCreateElement(tag);
-}
-
-function __velarListSnapshot(value, name) {
-  value = __velarToRaw(value);
-  __velarRuntime.collectionRead(value, __velarWebIterateKey, undefined);
-  return __velarDomListSnapshot(value, name);
-}
-
-function __velarAppend(parent, value, state = null) {
-  state ??= { active: __velarDomCreateSet(), depth: 0, values: 0, text: 0 };
-  if (value == null || value === false || value === true) return;
-  state.values += 1;
-  if (state.values > 1000000) throw new RangeError("JSX cannot render more than 1000000 values");
-  if (typeof value === "string") {
-    state.text += value.length;
-    if (state.text > 16 * 1024 * 1024) throw new RangeError("JSX text cannot exceed 16 MiB");
-    __velarDomAppend(parent, __velarDomCreateTextNode(value));
-    return;
-  }
-  if (typeof value === "number") {
-    if (!__velarDomIsFinite(value)) throw new TypeError("JSX numbers must be finite");
-    __velarDomAppend(parent, __velarDomCreateTextNode(__velarDomString(value)));
-    return;
-  }
-  if (__velarDomIsNode(value)) { __velarDomAppend(parent, value); return; }
-  if (__velarDomIsArray(value)) {
-    if (state.depth >= 128) throw new RangeError("JSX Lists cannot exceed 128 nested levels");
-    if (__velarDomSetContains(state.active, value)) throw new TypeError("JSX cannot render a cyclic List");
-    const values = __velarListSnapshot(value, "JSX children");
-    __velarDomSetInsert(state.active, value);
-    state.depth += 1;
-    try {
-      for (let index = 0; index < values.length; index += 1) __velarAppend(parent, values[index], state);
-    } finally {
-      state.depth -= 1;
-      __velarDomSetRemove(state.active, value);
-    }
-    return;
-  }
-  throw new TypeError("JSX can render only text, finite numbers, bool, enums, WebNode values, and Lists of those values");
-}
-
-// The rendering region currently being constructed. A 'children' slot is built
-// by the position that shows it and must be destroyed with it, so the slot is
-// owned by this scope rather than by the caller's component scope, which would
-// keep every hidden build's observers alive for the component's whole lifetime.
-let __velarBuildScope = null;
-
-function __velarChildrenNode(build, scope) {
-  const owner = __velarBuildScope === null ? scope : __velarBuildScope;
-  return __velarInternalRead(() => build(owner));
-}
-
-// The scalar half of __velarAppend, lifted out so a region that can only ever
-// hold one text node can be that text node. The two branches are __velarAppend's
-// own, error text included: the checked type admits an unsound value only where
-// the program lied about it, and such a value must land exactly where it landed
-// before -- rendered if it is text or a finite number, refused with the same
-// message otherwise.
-function __velarTextValue(value) {
-  if (typeof value === "string") {
-    if (value.length > 16 * 1024 * 1024) throw new RangeError("JSX text cannot exceed 16 MiB");
-    return value;
-  }
-  if (typeof value === "number") {
-    if (!__velarDomIsFinite(value)) throw new TypeError("JSX numbers must be finite");
-    return __velarDomString(value);
-  }
-  throw new TypeError("JSX can render only text, finite numbers, bool, enums, WebNode values, and Lists of those values");
-}
-
-// F1: an interpolation whose checked type is 'string' or 'number' renders
-// exactly one text node -- never zero, never markup, never a list. So it needs
-// no comment pair to bracket content that can never grow or vanish, and no
-// child scope to own observers that can never exist: the text node is its own
-// anchor and its own content, created once and updated by assigning its data.
-// That is the same node identity a comment anchor gave, so a keyed row that
-// starts or ends on one still finds its bounds, and a focused sibling is never
-// detached by an update.
-function __velarText(parent, read, scope) {
-  let node = null;
-  __velarObserver(() => {
-    // Read and validate before touching the document: a failed update must
-    // leave the last valid text standing, exactly as a failed rebuild leaves
-    // the last valid region standing.
-    const value = __velarTextValue(read());
-    if (node === null) __velarDomAppend(parent, node = __velarDomCreateTextNode(value));
-    else __velarDomSetData(node, value);
-  }, "dom", scope);
-}
-
-function __velarDynamic(parent, read, scope, rootState = null) {
-  const start = __velarDomCreateComment("velar:start");
-  const end = __velarDomCreateComment("velar:end");
-  __velarDomAppend(parent, start, end);
-  let nodes = [];
-  let childScope = null;
-  __velarAppendOwned(scope.mounts, () => { if (childScope) __velarMountScope(childScope); });
-  __velarObserver(() => {
-    const nextScope = __velarScope(scope.component);
-    const fragment = __velarDomCreateFragment();
-    let nextHost = null;
-    const previousBuildScope = __velarBuildScope;
-    __velarBuildScope = nextScope;
-    try {
-      __velarAppend(fragment, read(nextScope));
-      if (rootState) nextHost = __velarRootHost(fragment, "dynamic component");
-    }
-    catch (error) { __velarDestroyScope(nextScope); throw error; }
-    finally { __velarBuildScope = previousBuildScope; }
-    const nextNodes = __velarDomChildNodes(fragment);
-    if (childScope) __velarDestroyScope(childScope);
-    for (let index = 0; index < nodes.length; index += 1) __velarDomRemove(nodes[index]);
-    __velarDomBefore(end, fragment);
-    childScope = nextScope;
-    nodes = nextNodes;
-    if (rootState) {
-      rootState.host = nextHost;
-      for (const listener of __velarGraphSetItems(rootState.listeners)) listener(nextHost);
-    }
-    if (scope.mounted) __velarMountScope(nextScope);
-  }, "dom", scope);
-  __velarAppendOwned(scope.cleanups, () => {
-    if (childScope) __velarDestroyScope(childScope);
-    for (let index = 0; index < nodes.length; index += 1) __velarDomRemove(nodes[index]);
-    nodes = [];
-    if (rootState) {
-      rootState.host = null;
-      for (const listener of __velarGraphSetItems(rootState.listeners)) listener(null);
-    }
-  });
-}
-
-function __velarDynamicComponent(read, scope) {
-  const fragment = __velarDomCreateFragment();
-  const rootState = { host: null, listeners: __velarGraphCreateSet() };
-  __velarGraphDefine(fragment, "__velarDynamicRoot", { value: rootState });
-  __velarDynamic(fragment, read, scope, rootState);
-  return fragment;
-}
-
-function __velarKeyed(parent, read, keyOf, render, scope) {
-  const start = __velarDomCreateComment("velar:keyed-start");
-  const end = __velarDomCreateComment("velar:keyed-end");
-  __velarDomAppend(parent, start, end);
-  let entries = __velarGraphCreateMap();
-  __velarAppendOwned(scope.mounts, () => { for (const entry of __velarGraphMapItems(entries)) __velarMountScope(entry.scope); });
-  __velarObserver(() => {
-    const source = __velarToRaw(read() ?? []);
-    const values = __velarListSnapshot(source, "Keyed JSX");
-    const next = __velarGraphCreateMap();
-    const created = [];
-    try {
-      for (let index = 0; index < values.length; index += 1) {
-        const rawValue = __velarToRaw(values[index]);
-        // The keyed source may be a fresh derived List on every render. A row
-        // is observed directly by its child scope, so linking it to that
-        // ephemeral container only retains dead Lists and slows later writes.
-        const trackedValue = __velarReactive(rawValue);
-        const key = __velarKey(keyOf(trackedValue));
-        if (__velarGraphMapContains(next, key)) throw new Error("Duplicate JSX key '" + (typeof key === "string" ? key : __velarDomString(key)) + "'");
-        let entry = __velarGraphMapRead(entries, key);
-        if (entry && !__velarGraphSame(entry.value, rawValue)) entry = undefined;
-        if (!entry) {
-          const childScope = __velarScope(scope.component);
-          const fragment = __velarDomCreateFragment();
-          const previousBuildScope = __velarBuildScope;
-          __velarBuildScope = childScope;
-          try { __velarAppend(fragment, render(trackedValue, childScope)); }
-          catch (error) { __velarDestroyScope(childScope); throw error; }
-          finally { __velarBuildScope = previousBuildScope; }
-          // A row is held by its first and last top-level nodes, never by a
-          // snapshot of the list between them: every dynamic construct brackets
-          // itself with comments created once, so those two nodes are stable
-          // while everything between them is replaced over time. Caching the
-          // whole list put destroyed nodes back into the document on a later
-          // reorder and stranded the live ones outside their own markers.
-          const rowNodes = __velarDomChildNodes(fragment);
-          entry = {
-            value: rawValue,
-            scope: childScope,
-            first: rowNodes.length > 0 ? rowNodes[0] : null,
-            last: rowNodes.length > 0 ? rowNodes[rowNodes.length - 1] : null,
-            fragment,
-          };
-          created[created.length] = entry;
-        }
-        __velarGraphMapWrite(next, key, entry);
-      }
-    } catch (error) {
-      for (let index = 0; index < created.length; index += 1) __velarDestroyScope(created[index].scope);
-      throw error;
-    }
-    for (const key of __velarGraphMapKeyItems(entries)) {
-      const entry = __velarGraphMapRead(entries, key);
-      if (__velarGraphMapRead(next, key) === entry) continue;
-      __velarDestroyScope(entry.scope);
-      let node = entry.first;
-      while (node !== null && node !== end) {
-        const following = __velarDomNextSibling(node);
-        __velarDomRemove(node);
-        if (node === entry.last) break;
-        node = following;
-      }
-    }
-    // A row already standing in its final position must not be detached and
-    // reattached: that moves focus off a live <input>, ends IME composition,
-    // and resets transient subtree state. The cursor walks the surviving nodes
-    // in order and only moves a node that is not already where it belongs.
-    let cursor = __velarDomNextSibling(start);
-    for (const entry of __velarGraphMapItems(next)) {
-      if (entry.fragment) {
-        __velarDomBefore(cursor === null ? end : cursor, entry.fragment);
-        entry.fragment = null;
-        if (scope.mounted) __velarMountScope(entry.scope);
-        continue;
-      }
-      let node = entry.first;
-      while (node !== null && node !== end) {
-        const following = __velarDomNextSibling(node);
-        if (node === cursor) cursor = __velarDomNextSibling(cursor);
-        else __velarDomBefore(cursor === null ? end : cursor, node);
-        if (node === entry.last) break;
-        node = following;
-      }
-    }
-    entries = next;
-  }, "dom", scope);
-  __velarAppendOwned(scope.cleanups, () => {
-    for (const entry of __velarGraphMapItems(entries)) __velarDestroyScope(entry.scope);
-    __velarGraphMapEmpty(entries);
-  });
-}
-
-function __velarStaticAttr(element, name, value) {
-  if (value === false || value == null) return;
-  __velarSetAttribute(element, name, __velarAttributeValue(value, name));
-}
-
-function __velarAttr(element, name, read, scope) {
-  __velarObserver(() => {
-    const value = read();
-    if (value == null || value === false) __velarRemoveAttribute(element, name);
-    else __velarSetAttribute(element, name, __velarAttributeValue(value, name));
-  }, "dom", scope);
-}
-
-// The attributes whose value the user agent navigates or fetches. For these the
-// scheme is part of what the value means, so it is checked; every other
-// attribute takes its text unchanged.
-const __velarUrlAttributes = ["href", "src", "action", "formaction", "poster", "data", "xlink:href", "ping", "cite"];
-const __velarUrlSchemes = ["http", "https", "mailto", "tel", "blob"];
-// 'data:' carries its own payload, so it is admitted only for media types the
-// user agent cannot execute. 'image/svg+xml' is deliberately absent: an SVG
-// document can carry script.
-const __velarInertDataTypes = [
-  "image/png", "image/jpeg", "image/gif", "image/webp", "image/avif", "image/bmp", "image/x-icon",
-  "video/mp4", "video/webm", "video/ogg", "audio/mpeg", "audio/ogg", "audio/wav", "audio/webm",
-  "font/woff", "font/woff2", "text/plain",
-];
-
-// 'javascript:' and 'vbscript:' are code, not locations. A value that arrived as
-// data must never become code because it reached an href, so an unknown scheme
-// is refused rather than passed through.
-function __velarUrlAttributeValue(value, name) {
-  let scheme = "";
-  for (let index = 0; index < value.length; index += 1) {
-    const code = value.charCodeAt(index);
-    // The user agent strips ASCII whitespace and control characters before it
-    // parses the scheme, so "java\tscript:" reads as "javascript:" to it and
-    // has to read that way here too.
-    if (code <= 0x20 || code === 0x7f) continue;
-    if (code === 58 && scheme.length > 0) {
-      const lowered = scheme.toLowerCase();
-      if (lowered === "data") {
-        const payload = value.slice(index + 1).toLowerCase();
-        for (let type = 0; type < __velarInertDataTypes.length; type += 1) {
-          if (payload.startsWith(__velarInertDataTypes[type])) return value;
-        }
-        throw new TypeError("JSX attribute '" + name + "' rejected a 'data:' URL whose media type is not a known inert one");
-      }
-      if (__velarHasName(__velarUrlSchemes, lowered)) return value;
-      throw new TypeError("JSX attribute '" + name + "' rejected the '" + lowered + ":' URL scheme");
-    }
-    const letter = (code >= 65 && code <= 90) || (code >= 97 && code <= 122);
-    if (letter || (scheme.length > 0 && ((code >= 48 && code <= 57) || code === 43 || code === 45 || code === 46))) {
-      scheme += value[index];
-      continue;
-    }
-    // Anything else this early means the value names no scheme: it is a
-    // relative URL, which is always the application's own origin.
-    return value;
-  }
-  return value;
-}
-
-function __velarAttributeValue(value, name) {
-  if (value === true) return "";
-  if (typeof value === "number") {
-    if (!__velarDomIsFinite(value)) throw new TypeError("JSX attribute '" + name + "' requires a finite number");
-    return __velarDomString(value);
-  }
-  if (typeof value !== "string") throw new TypeError("JSX attribute '" + name + "' requires text, a finite number, bool, an enum, or null");
-  if (value.length > 1024 * 1024) throw new RangeError("JSX attribute '" + name + "' cannot exceed 1 MiB");
-  if (__velarHasName(__velarUrlAttributes, name)) return __velarUrlAttributeValue(value, name);
-  return value;
-}
-
-function __velarKey(value) {
-  if (typeof value === "number") {
-    if (!__velarDomIsFinite(value)) throw new TypeError("A JSX key number must be finite");
-    return value;
-  }
-  if (typeof value !== "string") throw new TypeError("A JSX key must be a string, string-backed enum, or finite number");
-  if (value.length > 65536) throw new RangeError("A JSX key cannot exceed 65536 characters");
-  return value;
-}
-
-function __velarSetAttribute(element, name, value) {
-  if (name.startsWith("xlink:")) __velarDomSetAttributeNS(element, __velarXlinkNamespace, name, value);
-  else if (name.startsWith("xml:")) __velarDomSetAttributeNS(element, __velarXmlNamespace, name, value);
-  else __velarDomSetAttribute(element, name, value);
-}
-
-function __velarRemoveAttribute(element, name) {
-  if (name.startsWith("xlink:")) __velarDomRemoveAttributeNS(element, __velarXlinkNamespace, name.slice(6));
-  else if (name.startsWith("xml:")) __velarDomRemoveAttributeNS(element, __velarXmlNamespace, name.slice(4));
-  else __velarDomRemoveAttribute(element, name);
-}
-
-function __velarClass(element, name, read, scope) {
-  __velarClassBind(element, () => read() ? name : null, scope);
-}
-
-// The property a token carries. A token is '[target:]conditions:property' and
-// a CSS property name never contains ':', so the last segment is the property.
-function __velarLookProperty(token) {
-  return token.slice(token.lastIndexOf(":") + 1);
-}
-
-// The surface a token writes on: its pseudo-element target, if it has one, plus
-// its property. Composition overrides a property on the surface that owns it —
-// '@before: content' and a bare 'content' are two surfaces, not one property
-// written under two conditions.
-function __velarLookSurface(token) {
-  const first = token.indexOf(":");
-  const last = token.lastIndexOf(":");
-  return (first === last ? "" : token.slice(0, first + 1)) + token.slice(last + 1);
-}
-
-// Whether a token declares its property unconditionally: an unconditional
-// declaration spells its condition segment 'base', so the segment in front of
-// the property is what says a token stands on its own.
-function __velarLookUnconditional(token) {
-  const last = token.lastIndexOf(":");
-  return token.slice(token.lastIndexOf(":", last - 1) + 1, last) === "base";
-}
-
-// Composition is property-level across sources and token-level inside one look
-// block. A later unconditional declaration wins its property outright, so it
-// drops every condition the earlier sources wrote it under: the caller of a
-// component could otherwise not reach a padding the component set behind its
-// own private breakpoint, and 'the caller wins every property both of them set'
-// was true only under the identical condition (LOK-U10). A later conditional
-// declaration refines rather than replaces — it overwrites the identical token
-// and leaves the earlier unconditional value standing, because a caller that
-// writes only 'if @hover: color' never mentioned the resting colour and must
-// not delete it. Declarations written in one block are one source, so a block's
-// own 'if scheme.dark:' and 'if @hover:' still coexist and the cascade decides
-// between them.
-function __velarMergeRules(rules, groups, source, group) {
-  const names = __velarGraphOwnNames(source);
-  const owned = __velarGraphOwnNames(rules);
-  for (let index = 0; index < names.length; index += 1) {
-    const descriptor = __velarGraphOwnDescriptor(source, names[index]);
-    if (!descriptor || !("value" in descriptor)) continue;
-    if (!__velarLookUnconditional(names[index])) continue;
-    const surface = __velarLookSurface(names[index]);
-    for (let other = 0; other < owned.length; other += 1) {
-      const token = owned[other];
-      if (groups[token] === group || __velarLookSurface(token) !== surface) continue;
-      delete rules[token];
-      delete groups[token];
-    }
-  }
-  for (let index = 0; index < names.length; index += 1) {
-    const descriptor = __velarGraphOwnDescriptor(source, names[index]);
-    if (!descriptor || !("value" in descriptor)) continue;
-    if (descriptor.value == null) { delete rules[names[index]]; delete groups[names[index]]; continue; }
-    rules[names[index]] = descriptor.value;
-    groups[names[index]] = group;
-  }
-}
-
-function __velarLook(parts) {
-  const rules = __velarGraphCreateRecord();
-  const groups = __velarGraphCreateRecord();
-  // A built Look is one source. A bare rules record is a run of declarations
-  // written in one look block, so consecutive ones share a source and a spread
-  // between them opens the next.
-  let group = 0;
-  let run = 0;
-  const add = (part) => {
-    if (part == null || part === false) return;
-    if (__velarGraphIsList(part)) { for (let index = 0; index < part.length; index += 1) add(part[index]); return; }
-    if (part.__velarLook === true) {
-      group += 1;
-      run = 0;
-      __velarMergeRules(rules, groups, part.rules, group);
-      return;
-    }
-    if (part.rules && typeof part.rules === "object") {
-      if (run === 0) { group += 1; run = group; }
-      __velarMergeRules(rules, groups, part.rules, run);
-      return;
-    }
-    throw new TypeError("look composition accepts only Look, Look?, or lists of Look values");
-  };
-  add(parts);
-  return __velarGraphFreeze({ __velarLook: true, rules: __velarGraphFreeze(rules) });
-}
-
-function __velarKeyframesValue(name) {
-  if (typeof name !== "string" || !/^velar-kf-[0-9a-f]{8,32}$/.test(name)) throw new TypeError("Generated keyframes name is invalid");
-  return __velarGraphFreeze({ __velarKeyframes: true, name });
-}
-
-function __velarLookVariable(token) {
-  return "--velar-look-" + token.replace(/[^A-Za-z0-9_-]+/g, "-");
-}
-
-function __velarLookValue(token, value) {
-  if (token.endsWith(":animation")) return __velarAnimationLookValue(value);
-  if (typeof value === "number") {
-    if (!__velarDomIsFinite(value)) throw new TypeError("Look properties require finite numbers");
-    return __velarDomString(value);
-  }
-  if (typeof value !== "string") throw new TypeError("Look properties require text, finite numbers, typed visual values, or null");
-  if (value.length > 1024 * 1024) throw new RangeError("A Look property value cannot exceed 1 MiB");
-  if (token.endsWith(":content") && typeof value === "string" && value !== "none" && value !== "normal") return __velarCssString(value);
-  // A closed keyword set is the property's whole string vocabulary, so a value
-  // the compiler could not read — a prop, a record field, a call result — is
-  // checked here instead. Without this a 'display' bound to "grdi" reached the
-  // browser as a declaration it silently discards (LOK-U14).
-  const keywords = __velarLookKeywords[__velarLookProperty(token)];
-  if (keywords !== undefined && !__velarHasName(keywords, value.trim())) {
-    let expected = "";
-    for (let index = 0; index < keywords.length; index += 1) expected += (expected === "" ? "" : ", ") + keywords[index];
-    throw new TypeError("Look property '" + __velarLookProperty(token) + "' does not accept '" + value + "'; use one of " + expected);
-  }
-  return value;
-}
-
-function __velarAnimationLookValue(value) {
-  const parts = [];
-  const add = (item) => {
-    if (__velarGraphIsList(item)) {
-      for (let index = 0; index < item.length; index += 1) add(item[index]);
-      return;
-    }
-    const marker = item && (typeof item === "object" || typeof item === "function")
-      ? __velarGraphOwnDescriptor(item, "__velarAnimation") : null;
-    const css = item && (typeof item === "object" || typeof item === "function")
-      ? __velarGraphOwnDescriptor(item, "css") : null;
-    if (!marker || !("value" in marker) || marker.value !== true || !css || !("value" in css) || typeof css.value !== "string") {
-      throw new TypeError("Look animation requires Animation or a List of Animation values from animate()");
-    }
-    __velarAppendOwned(parts, css.value);
-  };
-  add(value);
-  if (parts.length === 0) throw new TypeError("A Look animation list cannot be empty");
-  let output = parts[0];
-  for (let index = 1; index < parts.length; index += 1) output += ", " + parts[index];
-  return output;
-}
-
-const __velarInlineStyleProperties = __velarGraphCreateSet(${JSON.stringify([...LOOK_PROPERTIES].map(cssPropertyName))});
-
-function __velarStyleDeclarations(value) {
-  if (!value || typeof value !== "object" || __velarGraphIsList(value)
-    || (__velarGraphPrototype(value) !== __velarGraphNativeObject.prototype && __velarGraphPrototype(value) !== null)
-    || __velarWebErrorOwnSymbols(value).length > 0) {
-    throw new TypeError("style:* requires compiler-owned inline declarations");
-  }
-  const names = __velarGraphOwnNames(value);
-  if (names.length > ${LOOK_PROPERTIES.size}) throw new RangeError("An inline Style has too many properties");
-  const output = {};
-  for (let index = 0; index < names.length; index += 1) {
-    const property = names[index];
-    if (!__velarGraphSetContains(__velarInlineStyleProperties, property)) throw new TypeError("Unknown inline Style property '" + property + "'");
-    const descriptor = __velarGraphOwnDescriptor(value, property);
-    if (!descriptor || !descriptor.enumerable || !("value" in descriptor)) throw new TypeError("Inline Style declarations cannot use accessors");
-    __velarGraphDefine(output, property, { value: descriptor.value, enumerable: true, configurable: false, writable: false });
-  }
-  return __velarGraphFreeze(output);
-}
-
-function __velarInlineStyleState(element) {
-  const current = __velarGraphOwnDescriptor(element, "__velarInlineStyleState");
-  if (current) {
-    if (!("value" in current) || current.enumerable || current.configurable || current.writable
-      || !current.value || typeof current.value !== "object") throw new TypeError("Inline Style ownership is invalid");
-    return current.value;
-  }
-  const state = __velarGraphFreeze({ base: __velarGraphCreateMap(), managed: __velarGraphCreateSet() });
-  __velarGraphDefine(element, "__velarInlineStyleState", { value: state });
-  return state;
-}
-
-function __velarAttachSource(registry, element, source) {
-  let sources = __velarGraphWeakMapRead(registry, element);
-  if (!sources) { sources = __velarGraphCreateSet(); __velarGraphWeakMapWrite(registry, element, sources); }
-  __velarGraphSetInsert(sources, source);
-  return sources;
-}
-
-function __velarDetachSource(registry, element, source) {
-  const sources = __velarGraphWeakMapRead(registry, element);
-  if (!sources) return;
-  __velarGraphSetRemove(sources, source);
-  if (__velarGraphSetCount(sources) === 0) __velarGraphWeakMapRemove(registry, element);
-}
-
-function __velarApplyStyles(element) {
-  const sources = __velarGraphWeakMapRead(__velarRuntime.lookSources, element);
-  const merged = __velarGraphCreateMap();
-  if (sources) {
-    for (const source of __velarGraphSetItems(sources)) {
-      if (!source.styles) continue;
-      const names = __velarGraphOwnNames(source.styles);
-      for (let index = 0; index < names.length; index += 1) {
-        __velarGraphMapWrite(merged, names[index], __velarGraphOwnDescriptor(source.styles, names[index]).value);
-      }
-    }
-  }
-  const state = __velarInlineStyleState(element);
-  const next = __velarGraphCreateSet(__velarGraphMapKeyItems(merged));
-  for (const property of __velarGraphSetItems(next)) {
-    if (__velarGraphSetContains(state.managed, property)) continue;
-    __velarGraphMapWrite(state.base, property, {
-      value: __velarDomStyleValue(element, property),
-      priority: __velarDomStylePriority(element, property),
-    });
-  }
-  for (const property of __velarGraphSetItems(state.managed)) {
-    if (__velarGraphSetContains(next, property)) continue;
-    const base = __velarGraphMapRead(state.base, property);
-    if (!base || (base.value === "" && base.priority === "")) __velarDomStyleClear(element, property);
-    else __velarDomStyleWrite(element, property, base.value, base.priority);
-    __velarGraphMapRemove(state.base, property);
-  }
-  for (const property of __velarGraphSetItems(next)) {
-    const value = __velarGraphMapRead(merged, property);
-    if (value == null) __velarDomStyleClear(element, property);
-    else __velarDomStyleWrite(element, property, __velarLookValue("base:" + property, value));
-  }
-  __velarGraphSetEmpty(state.managed);
-  for (const property of __velarGraphSetItems(next)) __velarGraphSetInsert(state.managed, property);
-}
-
-function __velarStyleBind(element, read, scope) {
-  const source = { rules: __velarGraphCreateRecord(), styles: {} };
-  __velarAttachSource(__velarRuntime.lookSources, element, source);
-  __velarObserver(() => {
-    source.styles = __velarStyleDeclarations(read());
-    __velarApplyStyles(element);
-  }, "dom", scope);
-  __velarAppendOwned(scope.cleanups, () => {
-    __velarDetachSource(__velarRuntime.lookSources, element, source);
-    __velarApplyStyles(element);
-  });
-}
-
-function __velarMoveStyleSource(source, previous, next) {
-  if (previous) {
-    __velarDetachSource(__velarRuntime.lookSources, previous, source);
-    __velarApplyStyles(previous);
-  }
-  if (next) {
-    __velarAttachSource(__velarRuntime.lookSources, next, source);
-    __velarApplyStyles(next);
-  }
-}
-
-// The dynamic-root marker sits on a fragment the emitter created, but the
-// fragment is still a host object: a planted prototype getter would otherwise
-// hand look/class/style application a forged host element.
-function __velarDynamicRootState(root) {
-  if (root === null || root === undefined) return null;
-  const descriptor = __velarGraphOwnDescriptor(root, "__velarDynamicRoot");
-  return descriptor && "value" in descriptor && descriptor.value && typeof descriptor.value === "object"
-    ? descriptor.value
-    : null;
-}
-
-function __velarStyleBindRoot(root, read, scope) {
-  const dynamic = __velarDynamicRootState(root);
-  if (!dynamic) {
-    __velarStyleBind(__velarRootHost(root, "style"), read, scope);
-    return;
-  }
-  const source = { rules: __velarGraphCreateRecord(), styles: {} };
-  let host = null;
-  const move = (next) => {
-    __velarMoveStyleSource(source, host, next);
-    host = next;
-  };
-  __velarGraphSetInsert(dynamic.listeners, move);
-  move(dynamic.host);
-  __velarObserver(() => {
-    source.styles = __velarStyleDeclarations(read());
-    if (host) __velarApplyStyles(host);
-  }, "dom", scope);
-  __velarAppendOwned(scope.cleanups, () => {
-    __velarGraphSetRemove(dynamic.listeners, move);
-    move(null);
-  });
-}
-
-// Look and class ownership lives in one non-enumerable, non-configurable data
-// property per element, discovered through the captured descriptor ABI exactly
-// like inline style ownership. An ambient expando read would let a hostile
-// prototype hand the framework a forged token set.
-function __velarElementState(element, name, create) {
-  const current = __velarGraphOwnDescriptor(element, name);
-  if (current) {
-    if (!("value" in current) || current.enumerable || current.configurable || current.writable
-      || !current.value || typeof current.value !== "object") throw new TypeError("VelarScript element ownership is invalid");
-    return current.value;
-  }
-  const state = create();
-  __velarGraphDefine(element, name, { value: state });
-  return state;
-}
-
-function __velarApplyLooks(element) {
-  const sources = __velarGraphWeakMapRead(__velarRuntime.lookSources, element);
-  const merged = __velarGraphCreateRecord();
-  const groups = __velarGraphCreateRecord();
-  if (sources) {
-    // Each attached source is one Look, so a source that sets a property
-    // unconditionally drops the property's other conditions from the sources
-    // before it: the caller of a component composes after the component's own
-    // host look and wins every property both of them set, whatever condition
-    // either wrote it under. A source that writes the property only under a
-    // condition refines that condition alone — the identical token is
-    // overwritten and the earlier unconditional value stays, so the caller does
-    // not delete a resting value it never mentioned.
-    //
-    // A null rule keeps its token: the token drives the generated selector and
-    // only the custom property behind it disappears.
-    let group = 0;
-    for (const source of __velarGraphSetItems(sources)) {
-      group += 1;
-      const names = __velarGraphOwnNames(source.rules);
-      const owned = __velarGraphOwnNames(merged);
-      for (let index = 0; index < names.length; index += 1) {
-        // A rule the assignment pass below refuses to read must not clear the
-        // earlier sources either, or the property disappears with nothing put
-        // in its place — the same 'a source deletes a value it never replaces'
-        // shape the conditional guard above closes. '__velarMergeRules' spells
-        // the test the same way.
-        const descriptor = __velarGraphOwnDescriptor(source.rules, names[index]);
-        if (!descriptor || !("value" in descriptor)) continue;
-        if (!__velarLookUnconditional(names[index])) continue;
-        const surface = __velarLookSurface(names[index]);
-        for (let other = 0; other < owned.length; other += 1) {
-          if (groups[owned[other]] === group || __velarLookSurface(owned[other]) !== surface) continue;
-          delete merged[owned[other]];
-          delete groups[owned[other]];
-        }
-      }
-      for (let index = 0; index < names.length; index += 1) {
-        const descriptor = __velarGraphOwnDescriptor(source.rules, names[index]);
-        if (!descriptor || !("value" in descriptor)) continue;
-        merged[names[index]] = descriptor.value;
-        groups[names[index]] = group;
-      }
-    }
-  }
-  // The last value written per token, so a reactive change to one dynamic
-  // property costs one DOM write instead of one per token plus a full attribute
-  // rewrite (LOK-U15).
-  const state = __velarElementState(element, "__velarLookTokens", () => __velarGraphFreeze({
-    tokens: __velarGraphCreateSet(), written: { record: __velarGraphCreateRecord(), attribute: undefined },
-  }));
-  const written = state.written.record;
-  const tokens = __velarGraphOwnNames(merged);
-  const next = __velarGraphCreateSet(tokens);
-  for (const token of __velarGraphSetItems(state.tokens)) {
-    if (__velarGraphSetContains(next, token)) continue;
-    __velarDomStyleClear(element, __velarLookVariable(token));
-    delete written[token];
-  }
-  let attribute = "";
-  for (let index = 0; index < tokens.length; index += 1) {
-    const token = tokens[index];
-    const value = __velarGraphOwnDescriptor(merged, token)?.value;
-    const text = value == null ? null : __velarLookValue(token, value);
-    if (!(token in written) || written[token] !== text) {
-      if (text === null) __velarDomStyleClear(element, __velarLookVariable(token));
-      else __velarDomStyleWrite(element, __velarLookVariable(token), text);
-      written[token] = text;
-    }
-    attribute = attribute === "" ? token : attribute + " " + token;
-  }
-  const desired = tokens.length === 0 ? null : attribute;
-  if (state.written.attribute !== desired) {
-    if (desired === null) __velarDomRemoveAttribute(element, "data-velar-look");
-    else __velarDomSetAttribute(element, "data-velar-look", desired);
-    state.written.attribute = desired;
-  }
-  __velarGraphSetEmpty(state.tokens);
-  for (let index = 0; index < tokens.length; index += 1) __velarGraphSetInsert(state.tokens, tokens[index]);
-}
-
-function __velarLookBind(element, read, scope) {
-  const source = { rules: __velarGraphCreateRecord() };
-  __velarAttachSource(__velarRuntime.lookSources, element, source);
-  __velarObserver(() => {
-    source.rules = __velarLook([read()]).rules;
-    __velarApplyLooks(element);
-  }, "dom", scope);
-  __velarAppendOwned(scope.cleanups, () => {
-    __velarDetachSource(__velarRuntime.lookSources, element, source);
-    __velarApplyLooks(element);
-  });
-}
-
-function __velarMoveLookSource(source, previous, next) {
-  if (previous) {
-    __velarDetachSource(__velarRuntime.lookSources, previous, source);
-    __velarApplyLooks(previous);
-  }
-  if (next) {
-    __velarAttachSource(__velarRuntime.lookSources, next, source);
-    __velarApplyLooks(next);
-  }
-}
-
-function __velarApplyExternalLook(element, value) {
-  const source = { rules: __velarLook([value]).rules };
-  __velarAttachSource(__velarRuntime.lookSources, element, source);
-  __velarApplyLooks(element);
-  return () => {
-    __velarDetachSource(__velarRuntime.lookSources, element, source);
-    __velarApplyLooks(element);
-  };
-}
-
-__velarRuntime.installLook(__velarApplyExternalLook);
-
-// One resolution per root, shared by every capability bound to it: look, class
-// and style used to pay a fresh O(subtree) walk each.
-const __velarRootHosts = __velarGraphCreateWeakMap();
-
-function __velarRootHostResolve(root) {
-  const elements = [];
-  const children = __velarDomChildNodes(root);
-  for (let index = 0; index < children.length; index += 1) {
-    if (__velarDomNodeType(children[index]) === 1) __velarAppendOwned(elements, children[index]);
-  }
-  const explicit = [];
-  const forwarded = [];
-  for (let index = 0; index < elements.length; index += 1) {
-    const element = elements[index];
-    // A nested component's own, perfectly legal host is that component's, not
-    // this one's, at the root level exactly as below it. Every root-level node
-    // of a nested component carries the marker and this component's own nodes
-    // do not yet — construction marks them after a caller's look binds — so
-    // the marker is what separates the two. Reading 'host' first counted a
-    // nested component's marked root as a second host of the enclosing one and
-    // collapsed the whole region, which is the buried-host defect standing at
-    // the root level instead of below it. Such a node is not this component's
-    // host but the host this component forwards to when it declares none of
-    // its own, so it is collected apart rather than dropped.
-    if (__velarDomOwnData(element, "__velarComponentNode") === true) {
-      if (__velarDomOwnData(element, "__velarHost") === true) __velarAppendOwned(forwarded, element);
-      continue;
-    }
-    if (__velarDomOwnData(element, "__velarHost") === true) { __velarAppendOwned(explicit, element); continue; }
-    // A walk that refuses to enter a marked node stops at a nested component's
-    // boundary whatever depth its host sits at; a flat 'querySelectorAll' scan
-    // could only skip the marked node itself and still counted a host one level
-    // below it.
-    const pending = [element];
-    for (let cursor = 0; cursor < pending.length; cursor += 1) {
-      const nodes = __velarDomChildNodes(pending[cursor]);
-      for (let child = 0; child < nodes.length; child += 1) {
-        const node = nodes[child];
-        if (__velarDomNodeType(node) !== 1) continue;
-        if (__velarDomOwnData(node, "__velarComponentNode") === true) continue;
-        if (__velarDomOwnData(node, "__velarHost") === true) __velarAppendOwned(explicit, node);
-        __velarAppendOwned(pending, node);
-      }
-    }
-  }
-  if (explicit.length === 1) return explicit[0];
-  if (explicit.length > 1) return "A component can declare only one host element";
-  // Nothing of this component's own is marked, so a single nested component
-  // root hands its host on. Two of them leave nothing to forward to, and the
-  // component has to mark a native element of its own to settle it.
-  if (forwarded.length === 1) return forwarded[0];
-  if (forwarded.length > 1) return "A component with multiple roots must mark exactly one native element with 'host'";
-  if (elements.length === 1) return elements[0];
-  return "A component with multiple roots must mark exactly one native element with 'host'";
-}
-
-function __velarRootHost(root, capability) {
-  if (root == null) throw new TypeError("A component with multiple roots must mark exactly one native element with 'host'");
-  if (__velarDomNodeType(root) === 1) return root;
-  let resolved = __velarGraphWeakMapRead(__velarRootHosts, root);
-  if (resolved === undefined) {
-    resolved = __velarRootHostResolve(root);
-    __velarGraphWeakMapWrite(__velarRootHosts, root, resolved);
-  }
-  if (typeof resolved === "string") throw new TypeError(resolved);
-  return resolved;
-}
-
-function __velarLookBindRoot(root, read, scope) {
-  const dynamic = __velarDynamicRootState(root);
-  if (!dynamic) {
-    __velarLookBind(__velarRootHost(root, "look"), read, scope);
-    return;
-  }
-  const source = { rules: __velarGraphCreateRecord() };
-  let host = null;
-  const move = (next) => {
-    __velarMoveLookSource(source, host, next);
-    host = next;
-  };
-  __velarGraphSetInsert(dynamic.listeners, move);
-  move(dynamic.host);
-  __velarObserver(() => {
-    source.rules = __velarLook([read()]).rules;
-    if (host) __velarApplyLooks(host);
-  }, "dom", scope);
-  __velarAppendOwned(scope.cleanups, () => {
-    __velarGraphSetRemove(dynamic.listeners, move);
-    move(null);
-  });
-}
-
-function __velarClassBindRoot(root, read, scope) {
-  const dynamic = __velarDynamicRootState(root);
-  if (!dynamic) {
-    __velarClassBind(__velarRootHost(root, "class"), read, scope);
-    return;
-  }
-  const source = { names: [] };
-  let host = null;
-  const move = (next) => {
-    __velarMoveClassSource(source, host, next);
-    host = next;
-  };
-  __velarGraphSetInsert(dynamic.listeners, move);
-  move(dynamic.host);
-  __velarObserver(() => {
-    source.names = __velarClassNames(read());
-    if (host) __velarApplyClasses(host);
-  }, "dom", scope);
-  __velarAppendOwned(scope.cleanups, () => {
-    __velarGraphSetRemove(dynamic.listeners, move);
-    move(null);
-  });
-}
-
-function __velarClassNames(value, output = []) {
-  if (value == null || value === false) return output;
-  if (__velarGraphIsList(value)) {
-    for (let index = 0; index < value.length; index += 1) __velarClassNames(value[index], output);
-    return output;
-  }
-  if (typeof value !== "string") throw new TypeError("class accepts strings, string?, or lists of strings");
-  let name = "";
-  for (let index = 0; index < value.length; index += 1) {
-    const character = value[index];
-    if (character === " " || character === "\t" || character === "\n" || character === "\r" || character === "\f" || character === "\v") {
-      if (name !== "") __velarAppendOwned(output, name);
-      name = "";
-      continue;
-    }
-    name += character;
-  }
-  if (name !== "") __velarAppendOwned(output, name);
-  return output;
-}
-
-function __velarApplyClasses(element) {
-  const sources = __velarGraphWeakMapRead(__velarRuntime.classSources, element);
-  const next = __velarGraphCreateSet();
-  if (sources) {
-    for (const source of __velarGraphSetItems(sources)) {
-      for (let index = 0; index < source.names.length; index += 1) __velarGraphSetInsert(next, source.names[index]);
-    }
-  }
-  const state = __velarElementState(element, "__velarClassState", () => __velarGraphFreeze({
-    base: __velarGraphCreateSet(__velarDomClassNames(element)),
-    managed: __velarGraphCreateSet(),
-  }));
-  for (const name of __velarGraphSetItems(state.managed)) {
-    if (!__velarGraphSetContains(next, name) && !__velarGraphSetContains(state.base, name)) __velarDomClassRemove(element, name);
-  }
-  for (const name of __velarGraphSetItems(next)) __velarDomClassInsert(element, name);
-  __velarGraphSetEmpty(state.managed);
-  for (const name of __velarGraphSetItems(next)) __velarGraphSetInsert(state.managed, name);
-}
-
-function __velarMoveClassSource(source, previous, next) {
-  if (previous) {
-    __velarDetachSource(__velarRuntime.classSources, previous, source);
-    __velarApplyClasses(previous);
-  }
-  if (next) {
-    __velarAttachSource(__velarRuntime.classSources, next, source);
-    __velarApplyClasses(next);
-  }
-}
-
-function __velarClassBind(element, read, scope) {
-  const source = { names: [] };
-  __velarAttachSource(__velarRuntime.classSources, element, source);
-  __velarObserver(() => {
-    source.names = __velarClassNames(read());
-    __velarApplyClasses(element);
-  }, "dom", scope);
-  __velarAppendOwned(scope.cleanups, () => {
-    __velarDetachSource(__velarRuntime.classSources, element, source);
-    __velarApplyClasses(element);
-  });
-}
-
-function __velarHtml(element, read, scope) {
-  __velarObserver(() => {
-    const value = read();
-    if (value != null && typeof value !== "string") throw new TypeError("unsafe:html requires string or null");
-    if (value?.length > 16 * 1024 * 1024) throw new RangeError("unsafe:html cannot exceed 16 MiB");
-    __velarDomSetHtml(element, value ?? "");
-  }, "dom", scope);
-}
-
-function __velarOn(element, event, read, scope, modifiers = []) {
-  if (typeof __velarInternalRead(read) !== "function") throw new TypeError("Event '" + event + "' requires a function");
-  const capture = __velarHasName(modifiers, "capture");
-  const once = __velarHasName(modifiers, "once");
-  let removed = false;
-  const remove = () => {
-    if (removed) return;
-    removed = true;
-    __velarDomRemoveListener(element, event, listener, capture);
-  };
-  const listener = (value) => {
-    try {
-      if (__velarHasName(modifiers, "self")) {
-        const target = __velarEventField(value, "target", __velarEventTargetGetter);
-        if (target === __velarEventMissingField) throw new TypeError("DOM event does not expose a native target");
-        if (target !== element) return;
-      }
-      // 'once' is spent here rather than through the native option, so the
-      // documented order -- self, then prevent, then stop, then the handler --
-      // holds for it too. The native option removes the registration on the
-      // first dispatch that merely reaches the element, which for 'self' is
-      // exactly the dispatch the handler must not see: 'on:click.self.once'
-      // could then never run at all.
-      if (once) remove();
-      if (__velarHasName(modifiers, "prevent")) __velarEventCall(value, "preventDefault", __velarEventPreventDefault);
-      if (__velarHasName(modifiers, "stop")) __velarEventCall(value, "stopPropagation", __velarEventStopPropagation);
-      // The handler expression is re-read per dispatch so handlers routed
-      // through live props always see the current value.
-      const handler = __velarInternalRead(read);
-      if (typeof handler !== "function") throw new TypeError("Event '" + event + "' requires a function");
-      const result = __velarUntracked(() => handler(value));
-      __velarObservePromise(result, (error) => __velarReportEvent(error, scope, event));
-    } catch (error) { __velarReportEvent(error, scope, event); }
-  };
-  __velarDomAddListener(element, event, listener, { capture });
-  __velarAppendOwned(scope.cleanups, remove);
-}
-
-function __velarBindValue(element, state, scope, numeric = false, parse = null) {
-  __velarObserver(() => {
-    const value = state.get();
-    if (value == null) __velarDomSetFieldValue(element, "");
-    else if (numeric) {
-      if (typeof value !== "number" || !__velarDomIsFinite(value)) throw new TypeError("Numeric bind:value requires a finite number");
-      __velarDomSetFieldValue(element, __velarDomString(value));
-    } else {
-      if (typeof value !== "string") throw new TypeError("bind:value requires text");
-      __velarDomSetFieldValue(element, value);
-    }
-  }, "dom", scope);
-  const update = () => state.set(numeric ? __velarDomFieldNumber(element) : parse ? parse(__velarDomFieldValue(element)) : __velarDomFieldValue(element));
-  __velarDomAddListener(element, "input", update, false);
-  __velarAppendOwned(scope.cleanups, () => __velarDomRemoveListener(element, "input", update, false));
-}
-
-function __velarBindGroupValues(state, own) {
-  const value = __velarInternalRead(() => state.get());
-  const values = __velarListSnapshot(value, "bind:group state");
-  const output = new __velarDomNativeArray(values.length);
-  let count = 0;
-  for (let index = 0; index < values.length; index += 1) {
-    const item = values[index];
-    if (typeof item !== "string") throw new TypeError("bind:group on a checkbox requires List<string> state");
-    if (item !== own) { output[count] = item; count += 1; }
-  }
-  output.length = count;
-  return output;
-}
-
-function __velarBindGroup(element, state, scope, multiple = false, parse = null) {
-  __velarObserver(() => {
-    const own = __velarDomFieldValue(element);
-    const value = state.get();
-    if (!multiple) {
-      if (value != null && typeof value !== "string") throw new TypeError("bind:group requires text state");
-      __velarDomSetFieldChecked(element, value === own);
-      return;
-    }
-    const values = __velarListSnapshot(value, "bind:group state");
-    let present = false;
-    for (let index = 0; index < values.length; index += 1) if (values[index] === own) present = true;
-    __velarDomSetFieldChecked(element, present);
-  }, "dom", scope);
-  const update = () => {
-    const own = __velarDomFieldValue(element);
-    if (!multiple) {
-      if (__velarDomFieldChecked(element)) state.set(parse ? parse(own) : own);
-      return;
-    }
-    const remaining = __velarBindGroupValues(state, own);
-    if (__velarDomFieldChecked(element)) remaining[remaining.length] = own;
-    state.set(remaining);
-  };
-  __velarDomAddListener(element, "change", update, false);
-  __velarAppendOwned(scope.cleanups, () => __velarDomRemoveListener(element, "change", update, false));
-}
-
-function __velarBindChecked(element, state, scope) {
-  __velarObserver(() => {
-    const value = state.get();
-    if (typeof value !== "boolean") throw new TypeError("bind:checked requires bool");
-    __velarDomSetFieldChecked(element, value);
-  }, "dom", scope);
-  const update = () => state.set(__velarDomFieldChecked(element));
-  __velarDomAddListener(element, "change", update, false);
-  __velarAppendOwned(scope.cleanups, () => __velarDomRemoveListener(element, "change", update, false));
-}
-
-// Prop handles give a component body live reads over its props store. The
-// component function still runs exactly once per instance; only reads race
-// ahead, so state initializers can never re-run on a prop update.
-function __velarPropProvided(props, name) {
-  // A children slot is rendered content rather than a value thunk. Asking for
-  // its value to decide whether the required slot exists would build the slot
-  // once here and again at the JSX position that owns it. Its own property is
-  // the presence proof; the first value read remains the one rendering read.
-  if (name === "children") return __velarGraphOwnDescriptor(props, name) !== undefined;
-  return __velarInternalRead(() => props[name]) !== undefined;
-}
-
-function __velarRequiredProp(props, name, component) {
-  if (!__velarPropProvided(props, name)) throw new TypeError("Component " + component + " requires prop " + name);
-  return __velarGraphFreeze({
-    get() {
-      const value = props[name];
-      if (value === undefined) throw new TypeError("Component " + component + " requires prop " + name);
-      return value;
-    },
-  });
-}
-
-function __velarProp(props, name, fallback) {
-  const fallbackValue = __velarPropProvided(props, name) ? undefined : fallback();
-  return __velarGraphFreeze({
-    get() {
-      const value = props[name];
-      return value === undefined ? fallbackValue : value;
-    },
-  });
-}
-
-function __velarBindComponentRef(instance, setRef) {
-  if (setRef === undefined) return instance;
-  if (!instance || typeof instance.__bindRef !== "function") throw new TypeError("This component does not expose a Handle");
-  instance.__bindRef(setRef);
-  return instance;
-}
-
-// Holds every prop's cache open for the length of one construction. The graph
-// records a dependency for whichever observer is running, so forcing the props
-// under this one keeps them clean while the component function runs: a read
-// during construction is served from the value the force produced, and a
-// tracked read still subscribes the observer that made it. Releasing the hold
-// hands each prop over to whatever actually observes it, which is the second
-// half of the rule -- recomputed on demand, cached while observed.
-function __velarConstructionHold() {
-  return {
-    mode: "computed",
-    stopped: false,
-    running: false,
-    selfInvalidations: 0,
-    dependencies: __velarGraphCreateSet(),
-    spareDependencies: null,
-    notify() {},
-    run() {},
-  };
-}
-
-// Instantiates a component with a live props store: each prop is a cached
-// derived value the props object exposes as a tracked getter, so a prop
-// expression that nothing reads costs nothing after construction. The component
-// call itself is untracked so construction can never subscribe an enclosing
-// dynamic region to prop reads.
-function __velarInstantiate(component, thunks, children, scope, namespace, setRef) {
-  const props = {};
-  // 'style:' on a component host is the caller decorating the instance's root,
-  // the way it decorates a native element. The slot the compiler inserts for it
-  // is not a field the component declares, so it is bound here rather than
-  // handed inward -- a component the runtime implements validates its props
-  // against the fields it does declare and would refuse an unknown one.
-  const styleRead = thunks.__velarStyle;
-  const propNames = __velarGraphOwnNames(thunks);
-  const accesses = [];
-  for (let index = 0; index < propNames.length; index += 1) {
-    const name = propNames[index];
-    if (name === "__velarStyle") continue;
-    // A prop is a derived value, not an eagerly pushed one: an unconditional
-    // observer per prop re-ran every prop expression on every dependency
-    // change, including the expensive ones behind props the component never
-    // reads. The cache is the same one a declared derived value uses.
-    const access = __velarComputed(thunks[name]);
-    accesses[accesses.length] = access;
-    __velarGraphDefine(props, name, { enumerable: true, get: () => access.get() });
-  }
-  // 'children' follows Vel's ordinary rules: it is rendered content owned by
-  // the position that shows it, rebuilt whenever that position renders again.
-  // As a one-shot fragment value it could be shown exactly once, and the first
-  // time a conditional position hid it the content was destroyed for good.
-  if (children !== undefined) __velarGraphDefine(props, "children", { enumerable: true, get: () => __velarChildrenNode(children, scope) });
-  const instance = __velarUntracked(() => {
-    if (accesses.length === 0) return component(props, namespace);
-    // Component JSX evaluates the way the charter says a JavaScript object
-    // literal does: every prop expression runs once, in the order the caller
-    // wrote it, and only then does the component function run. 'children' is
-    // not one of them -- it is rendered content owned by the position that
-    // shows it, so a position that never shows it never builds it.
-    const hold = __velarConstructionHold();
-    try {
-      __velarRuntime.runTracked(hold, () => {
-        for (let index = 0; index < accesses.length; index += 1) accesses[index].get();
-      });
-      return component(props, namespace);
-    } finally { __velarCleanupObserver(hold); }
-  });
-  if (styleRead !== undefined) __velarStyleBindRoot(instance.node, styleRead, scope);
-  return __velarBindComponentRef(instance, setRef);
-}
-
-// A component element in child position: one stable instance whose prop
-// observers live in a dedicated scope, destroyed only when the position
-// itself unmounts. Construction failures stay contained to the position.
-function __velarChild(component, thunks, children, scope, namespace, setRef) {
-  const childScope = __velarScope(scope.component);
-  let constructed = false;
-  __velarAppendOwned(scope.mounts, () => { if (constructed) __velarMountScope(childScope); });
-  __velarAppendOwned(scope.cleanups, () => { if (constructed) __velarDestroyScope(childScope); });
-  try {
-    const node = __velarUseComponent(__velarInstantiate(component, thunks, children, childScope, namespace, setRef), childScope);
-    constructed = true;
-    return node;
-  } catch (error) {
-    __velarDestroyScope(childScope);
-    __velarReport(error, "render", scope);
-    return __velarDomCreateComment("velar:component-error");
-  }
-}
-
-// tick() promises the settled flush, so it drains the reactive queues instead
-// of hopping one microtask and hoping. Each round runs the pending flush and
-// yields, so work an observer queued asynchronously is picked up too; the round
-// count is bounded for the same reason the flush budget is, and the flush's own
-// budget is what ends a runaway cycle.
-function __velarSettledStep() {
-  return __velarManagedAsyncCreate((resolve) => __velarEnqueue(resolve));
-}
-
-function __velarSettled(rounds = 10000) {
-  return __velarManagedAsyncThen(__velarSettledStep(), () => {
-    if (__velarRuntime.flushPending) __velarFlush();
-    if (rounds > 1 && (__velarGraphSetCount(__velarRuntime.domQueue)
-      || __velarGraphSetCount(__velarRuntime.watchQueue) || __velarRuntime.flushPending)) {
-      return __velarSettled(rounds - 1);
-    }
-    return null;
-  });
-}
-
-function __velarTakeUnhandledFailure() {
-  for (const failure of __velarGraphSetItems(__velarRuntime.unhandledFailures)) {
-    __velarGraphSetRemove(__velarRuntime.unhandledFailures, failure);
-    return failure;
-  }
-  return null;
-}
-
-// In a non-browser host an unhandled report cannot throw from a microtask
-// without ending the whole process, so the runtime parks it. tick() is where
-// an awaiting caller meets the reactive queue, which makes it the owned place
-// for that parked failure to surface: the test that awaited the flush fails
-// with the real error and the process -- the test runner -- continues.
-function __velarTick() {
-  return __velarManagedAsyncThen(__velarSettled(), () => {
-    const failure = __velarTakeUnhandledFailure();
-    if (failure !== null) throw failure;
-    return null;
-  });
-}
-`.trim();
+/**
+ * The runtime an emitted Web program carries inside itself: the foundation it
+ * installs, the CSS string serializer, the closed keyword sets of the Look
+ * properties *this* module styles, and the runtime body. Only the keyword table
+ * differs per compilation, which is why it is the one hole
+ * `runtime/manifest.json` records as an assembly (LOK-U13 keeps the serializer
+ * the one css-string.ts publishes rather than a second spelling of it).
+ */
 function webRuntime(foundation, lookKeywords) {
-    // `content` is written as a CSS string, which is not a JSON string, so the
-    // runtime carries the serializer css-string.ts publishes rather than a second
-    // spelling of it (LOK-U13).
-    return `${foundation}\n${CSS_STRING_RUNTIME.trim()}\n${lookKeywords}\n${WEB_RUNTIME_BODY}`;
+    return `${foundation}\n${CSS_STRING_RUNTIME_BODY}${lookKeywords}\n${WEB_RUNTIME_BODY}`;
 }
 //# sourceMappingURL=emitter.js.map