@jxsuite/runtime 6.2.2 → 7.0.0

package/dist/runtime.js

@@ -1491,6 +1491,9 @@ function isTemplateString(value) {
 function bodyReturnsValue(body) {
   return /\breturn\b[^\S\n]*(?![;}\s]|$)/.test(maskCode(body));
 }
+function isFunctionEntry(value) {
+  return value.$prototype === "Function" || isString2(value.role) && value.role !== "field";
+}
 function maskCode(body) {
   if (!/[/'"`]/u.test(body)) {
     return body;
@@ -1508,7 +1511,91 @@ function maskCode(body) {
 }
 var masked = new Map;
 var MASKED_LIMIT = 2048;
-function scanCode(body) {
+function templateExpressions(template) {
+  if (!template.includes("${")) {
+    return NO_EXPRESSIONS;
+  }
+  const known = scanned.get(template);
+  if (known !== undefined) {
+    return known;
+  }
+  const found = [];
+  let from = 0;
+  while (from < template.length) {
+    const spans = [];
+    scanCode(template.slice(from), spans);
+    let unclosed = -1;
+    for (let i = 0;i < spans.length; i += 2) {
+      const start = from + (spans[i] ?? 0);
+      const end = spans[i + 1] ?? -1;
+      if (end === -1) {
+        unclosed = start;
+        break;
+      }
+      found.push(expressionAt(template, start, from + end));
+    }
+    if (unclosed === -1) {
+      break;
+    }
+    const end = closeByBraceDepth(template, unclosed);
+    if (end === -1) {
+      from = unclosed + 2;
+    } else {
+      found.push(expressionAt(template, unclosed, end));
+      from = end;
+    }
+  }
+  if (scanned.size >= MASKED_LIMIT) {
+    scanned.clear();
+  }
+  scanned.set(template, found);
+  return found;
+}
+var NO_EXPRESSIONS = [];
+var scanned = new Map;
+function expressionAt(template, start, end) {
+  return { end, expr: template.slice(start + 2, end - 1), start };
+}
+function closeByBraceDepth(template, start) {
+  let depth = 0;
+  for (let at = start + 1;at < template.length; at += 1) {
+    const char = template.charAt(at);
+    if (char === "{") {
+      depth += 1;
+    } else if (char === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return at + 1;
+      }
+    }
+  }
+  return -1;
+}
+var BEFORE_OPERAND = new Set("(,=:[!&|?{;+-*%<>~^");
+function endsUpdateOperator(body, before, at) {
+  return (before === "+" || before === "-") && body.charAt(at - 1) === before;
+}
+function regexLiteralEnd(body, at) {
+  let inClass = false;
+  for (let i = at + 1;i < body.length; i += 1) {
+    const char = body.charAt(i);
+    if (char === `
+`) {
+      return -1;
+    }
+    if (char === "\\") {
+      i += 1;
+    } else if (char === "[") {
+      inClass = true;
+    } else if (char === "]") {
+      inClass = false;
+    } else if (char === "/" && !inClass) {
+      return i + 1;
+    }
+  }
+  return -1;
+}
+function scanCode(body, spans) {
   const out = body.split("");
   const blank = (at) => {
     if (out[at] !== undefined && out[at] !== `
@@ -1517,7 +1604,9 @@ function scanCode(body) {
     }
   };
   const substitutions = [];
-  let inTemplate = false;
+  let inTemplate = spans !== undefined;
+  let before = "";
+  let beforeAt = -1;
   let at = 0;
   while (at < body.length) {
     const char = body.charAt(at);
@@ -1526,12 +1615,17 @@ function scanCode(body) {
         blank(at);
         blank(at + 1);
         at += 2;
-      } else if (char === "`") {
+      } else if (char === "`" && !(spans && substitutions.length === 0)) {
         inTemplate = false;
+        before = char;
         at += 1;
       } else if (char === "$" && body.charAt(at + 1) === "{") {
+        if (substitutions.length === 0) {
+          spans?.push(at, -1);
+        }
         substitutions.push(0);
         inTemplate = false;
+        before = "{";
         at += 2;
       } else {
         blank(at);
@@ -1560,10 +1654,18 @@ function scanCode(body) {
         blank(at);
         at += 1;
       }
+      before = char;
       at += 1;
     } else if (char === "`") {
       inTemplate = true;
       at += 1;
+    } else if (spans && char === "/" && BEFORE_OPERAND.has(before) && !endsUpdateOperator(body, before, beforeAt) && regexLiteralEnd(body, at) > 0) {
+      const stop = regexLiteralEnd(body, at);
+      for (at += 1;at < stop - 1; at += 1) {
+        blank(at);
+      }
+      before = "/";
+      at = stop;
     } else {
       const open = substitutions.length - 1;
       if (open >= 0 && char === "{") {
@@ -1572,10 +1674,17 @@ function scanCode(body) {
         if (substitutions[open] === 0) {
           substitutions.pop();
           inTemplate = true;
+          if (spans && substitutions.length === 0) {
+            spans[spans.length - 1] = at + 1;
+          }
         } else {
           substitutions[open] = (substitutions[open] ?? 1) - 1;
         }
       }
+      if (char.trim() !== "") {
+        before = char;
+        beforeAt = at;
+      }
       at += 1;
     }
   }
@@ -2222,12 +2331,77 @@ function withPageLocale(path, args, state) {
   filled[index] = locale;
   return filled;
 }
+function windowRoot() {
+  const root = globalThis.window;
+  return root ?? globalThis;
+}
 function isBlessedGlobal(ref) {
   return ref.startsWith("window#/") && BLESSED_GLOBALS.has(ref.slice("window#/".length));
 }
 function isMutating(op) {
   return MUTATING_OPS.has(op);
 }
+function operandMutates(operand) {
+  if (Array.isArray(operand)) {
+    return operand.some((item) => operandMutates(item));
+  }
+  if (operand === undefined || !isNodeOperand(operand)) {
+    return false;
+  }
+  return isMutating(operand.operator) || [operand.target, operand.value, operand.initial, operand.default].some((part) => operandMutates(part)) || Object.values(operand.cases ?? {}).some((part) => operandMutates(part));
+}
+function isPureNamedFormula(def) {
+  return isNamedFormulaDef(def) && !operandMutates(def.$expression);
+}
+var OUTSIDE_SCOPE_REF = /^(?:\$args\/|\$reduce\/|\$map\/|window#\/|document#\/|event#\/)/;
+function collectScopeReads(operand, into) {
+  if (Array.isArray(operand)) {
+    for (const item of operand) {
+      collectScopeReads(item, into);
+    }
+    return;
+  }
+  if (operand === undefined || !isNonNullObject(operand)) {
+    return;
+  }
+  if (isRefOperand(operand)) {
+    if (!OUTSIDE_SCOPE_REF.test(operand.$ref)) {
+      const path = operand.$ref.replace(/^(?:#\/state\/|parent#\/)/, "");
+      into.add(refSegments(path)[0] ?? "");
+    }
+    return;
+  }
+  if (isNodeOperand(operand)) {
+    const parts = [operand.target, operand.value, operand.initial, operand.default];
+    for (const part of [...parts, ...Object.values(operand.cases ?? {})]) {
+      collectScopeReads(part, into);
+    }
+  }
+}
+function formulaScopeReads(def) {
+  const reads = new Set;
+  collectScopeReads(def.$expression, reads);
+  return [...reads];
+}
+function inheritableFormulas(projectState) {
+  const candidates = new Map;
+  for (const [key, def] of Object.entries(projectState ?? {})) {
+    if (!key.startsWith("$") && isPureNamedFormula(def)) {
+      candidates.set(key, def);
+    }
+  }
+  let settled = false;
+  while (!settled) {
+    settled = true;
+    for (const [key, def] of candidates) {
+      if (formulaScopeReads(def).some((read) => !candidates.has(read))) {
+        candidates.delete(key);
+        settled = false;
+      }
+    }
+  }
+  return Object.fromEntries(candidates);
+}
 var MAX_CALL_DEPTH = 64;
 var MAX_REPORT_DEPTH = 64;
 function subTrace(trace, seg) {
@@ -2321,7 +2495,7 @@ function resolveExprRef(ref, state, event, iterCtx) {
     return readPath(state, ref.slice("parent#/".length));
   }
   if (ref.startsWith("window#/")) {
-    return readPath(globalThis.window, ref.slice("window#/".length));
+    return readPath(windowRoot(), ref.slice("window#/".length));
   }
   if (ref.startsWith("document#/")) {
     return readPath(globalThis.document, ref.slice("document#/".length));
@@ -2437,9 +2611,10 @@ function evaluateNode(node, state, event, iterCtx, trace) {
       if (helper) {
         return helper(...withPageLocale(globalPath, argValues, state));
       }
-      const fn = readPath(globalThis.window, globalPath);
+      const root = windowRoot();
+      const fn = readPath(root, globalPath);
       const lastSlash = globalPath.lastIndexOf("/");
-      const thisArg = lastSlash === -1 ? globalThis.window : readPath(globalThis.window, globalPath.slice(0, lastSlash));
+      const thisArg = lastSlash === -1 ? root : readPath(root, globalPath.slice(0, lastSlash));
       return fn.apply(thisArg, argValues);
     }
     const callee = resolveExprRef(calleeRef, state, event, iterCtx);
@@ -2573,6 +2748,96 @@ function evaluateOperand(operand, state, event, iterCtx) {
   return resolveOperand(operand, state, event, iterCtx);
 }
 
+// ../schema/src/function-role.ts
+var LIFECYCLE_KEYS = new Set(["onMount", "onUnmount", "onAdopted"]);
+function collectCallableKeys(doc) {
+  const keys = new Set;
+  const seen = new Set;
+  const addStateRef = (ref) => {
+    if (ref.startsWith("#/state/")) {
+      keys.add(ref.slice("#/state/".length).split("/")[0]);
+    }
+  };
+  const visit = (node) => {
+    if (isString2(node)) {
+      for (const call of node.matchAll(/\bstate\.([A-Za-z_$][\w$]*)\s*\(/gu)) {
+        keys.add(call[1]);
+      }
+      return;
+    }
+    if (Array.isArray(node)) {
+      if (!seen.has(node)) {
+        seen.add(node);
+        for (const item of node) {
+          visit(item);
+        }
+      }
+      return;
+    }
+    if (!isJsonObject(node) || seen.has(node)) {
+      return;
+    }
+    seen.add(node);
+    if (node.operator === "call" && isRef2(node.target)) {
+      addStateRef(node.target.$ref);
+    }
+    for (const [key, value] of Object.entries(node)) {
+      if (key === "$defs") {
+        continue;
+      }
+      if (key.startsWith("on") && isRef2(value)) {
+        addStateRef(value.$ref);
+      }
+      visit(value);
+    }
+  };
+  visit(doc);
+  for (const hook of LIFECYCLE_KEYS) {
+    if (isJsonObject(doc.state) && hook in doc.state) {
+      keys.add(hook);
+    }
+  }
+  return keys;
+}
+function declaresBodyAndSrc(def) {
+  return "body" in def && "$src" in def;
+}
+function handlerParamNames(def) {
+  const list = ["state"];
+  for (const name of paramNames(def.parameters ?? def.arguments)) {
+    if (name !== "state") {
+      list.push(name);
+    }
+  }
+  return list;
+}
+function functionEntryRole(key, def, callableKeys) {
+  if (hasStructuredBody(def)) {
+    return "callable";
+  }
+  if (paramNames(def.parameters ?? def.arguments).length > 0) {
+    return "callable";
+  }
+  if (isString2(def.body)) {
+    return bodyReturnsValue(def.body) ? "computed" : "callable";
+  }
+  if (def.$src) {
+    return callableKeys().has(key) ? "callable" : "computed";
+  }
+  return "callable";
+}
+function classifyFunctionEntries(doc) {
+  const roles = new Map;
+  let callable = null;
+  const callableKeys = () => callable ??= collectCallableKeys(doc);
+  for (const [key, def] of Object.entries(doc.state ?? {})) {
+    if (isFunctionDef(def)) {
+      roles.set(key, functionEntryRole(key, def, callableKeys));
+    }
+  }
+  return roles;
+}
+
 // ../schema/src/asset-paths.ts
 var URL_TERMINATOR = String.raw`"'\s<>()\\`;
 function parseSrcset(value) {
@@ -2701,6 +2966,205 @@ async function runStatements(statements, state, event, opts = {}) {
   }
 }
 
+// src/body-eraser.ts
+var eraser = null;
+var moduleLoader = null;
+var loader = null;
+var loading = null;
+var erased = new Map;
+function setBodyEraser(fn) {
+  eraser = fn;
+  erased.clear();
+  if (!fn) {
+    loading = null;
+  }
+}
+function setModuleLoader(fn) {
+  moduleLoader = fn;
+  if (!fn) {
+    loading = null;
+  }
+}
+function canLoadModules() {
+  return moduleLoader !== null || loader !== null;
+}
+function fetchEraser(load) {
+  loading ??= load().then((module) => {
+    if (loader !== load) {
+      return;
+    }
+    if (!eraser) {
+      setBodyEraser(module.eraseBody);
+    }
+    if (!moduleLoader && module.loadModule) {
+      setModuleLoader(module.loadModule);
+    }
+  });
+  return loading;
+}
+async function moduleLoaderFor() {
+  if (!moduleLoader && loader) {
+    await fetchEraser(loader);
+  }
+  return moduleLoader;
+}
+function setBodyEraserLoader(load) {
+  loader = load;
+  loading = null;
+}
+function compiles(text) {
+  for (const source of [text, `return async function () {
+${text}
+}`]) {
+    try {
+      Reflect.construct(Function, [source]);
+      return true;
+    } catch {}
+  }
+  return false;
+}
+var GENERIC_CALL = /<[^<>]*>\s*[(`]/u;
+function bodyNeedsEraser(text) {
+  return GENERIC_CALL.test(text) || !compiles(text);
+}
+function* bodiesOf(value) {
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      yield* bodiesOf(item);
+    }
+    return;
+  }
+  if (!isJsonObject(value)) {
+    return;
+  }
+  const isFunction = isFunctionEntry(value);
+  for (const [key, child] of Object.entries(value)) {
+    if (isFunction && key === "body") {
+      if (isString2(child)) {
+        yield child;
+      } else if (Array.isArray(child) && child.every((line) => isString2(line))) {
+        yield child.join(`
+`);
+      } else {
+        yield* bodiesOf(child);
+      }
+    } else if (isFunction && (key === "getter" || key === "setter") && isJsonObject(child)) {
+      if (isString2(child.body)) {
+        yield child.body;
+      }
+    } else {
+      yield* bodiesOf(child);
+    }
+  }
+}
+async function prepareBodies(doc) {
+  const load = loader;
+  if (eraser || !load) {
+    return;
+  }
+  const tree = doc;
+  if (!bodiesOf(tree).some((body) => bodyNeedsEraser(body))) {
+    return;
+  }
+  await fetchEraser(load);
+}
+function javaScriptOf(body, where) {
+  if (!eraser) {
+    return body;
+  }
+  let code = erased.get(body);
+  if (code === undefined) {
+    const result = eraser(body);
+    const refused = result.problems.find((problem) => problem.kind === "unsupported");
+    if (refused) {
+      throw new SyntaxError(`Jx: ${where} cannot run: ${refused.message}`);
+    }
+    ({ code } = result);
+    erased.set(body, code);
+  }
+  return code;
+}
+function compileBody(params, body, where) {
+  const code = javaScriptOf(body, where);
+  try {
+    return new Function(...params, code);
+  } catch (error) {
+    if (!(error instanceof SyntaxError) || eraser) {
+      throw error;
+    }
+    throw new SyntaxError(`Jx: ${where} does not compile as JavaScript (${error.message}). A function body may be ` + `TypeScript: give this page an eraser with setBodyEraser(eraseBody), eraseBody from ` + `@jxsuite/erase/browser.`, { cause: error });
+  }
+}
+
+// ../schema/src/document-scripts.ts
+var SCRIPT_SPECIFIER_PREFIX = "jx-script:";
+var CLIENT_SCRIPT_REF = "#client";
+var SERVER_SCRIPT_REF = "#server";
+var TYPESCRIPT_PATH = /\.[cm]?ts$/iu;
+function isTypeScriptPath(pathname) {
+  return TYPESCRIPT_PATH.test(pathname);
+}
+function scriptRefSide(src) {
+  if (src === CLIENT_SCRIPT_REF) {
+    return "client";
+  }
+  if (src === SERVER_SCRIPT_REF) {
+    return "server";
+  }
+  return null;
+}
+function normalizedPath(path) {
+  return path.replaceAll("\\", "/").replace(/^(?:\.\/)+/, "");
+}
+function scriptSpecifier(path, side) {
+  return `${SCRIPT_SPECIFIER_PREFIX}${normalizedPath(path)}#${side}`;
+}
+function isScriptSpecifier(src) {
+  return src.startsWith(SCRIPT_SPECIFIER_PREFIX);
+}
+function parseScriptSpecifier(src) {
+  if (!isScriptSpecifier(src)) {
+    return null;
+  }
+  const rest = src.slice(SCRIPT_SPECIFIER_PREFIX.length);
+  const hash = rest.lastIndexOf("#");
+  if (hash <= 0) {
+    return null;
+  }
+  const side = rest.slice(hash + 1);
+  if (side !== "client" && side !== "server") {
+    return null;
+  }
+  return { path: rest.slice(0, hash), side };
+}
+function qualifiedValue(value, path) {
+  if (Array.isArray(value)) {
+    const items = value.map((item) => qualifiedValue(item, path));
+    return items.some((item, index) => item !== value[index]) ? items : value;
+  }
+  if (!isJsonObject(value)) {
+    return value;
+  }
+  let copy = null;
+  for (const [key, member] of Object.entries(value)) {
+    let next = member;
+    if (key === "$src" && isString2(member)) {
+      const side = scriptRefSide(member);
+      next = side === null ? member : scriptSpecifier(path, side);
+    } else if (key !== "$script") {
+      next = qualifiedValue(member, path);
+    }
+    if (next !== member) {
+      copy ??= { ...value };
+      copy[key] = next;
+    }
+  }
+  return copy === null ? value : copy;
+}
+function qualifyScripts(doc, path) {
+  return qualifiedValue(doc, path);
+}
+
 // src/cookie.ts
 var HOST_PREFIX = "__Host-";
 var SECURE_PREFIX = "__Secure-";
@@ -2739,7 +3203,6 @@ function serializeCookie(name, value, options) {
   }
   return parts.join("; ");
 }
-
 // src/runtime.ts
 var SUPPORTED_SCHEMA_VERSION = 1;
 var _schemaVersionWarned = false;
@@ -2783,10 +3246,11 @@ function assertHostScope(scope) {
     }
   }
 }
-async function mount(doc, target, options = {}) {
+async function mount(source, target, options = {}) {
   const hostScope = options.scope ? hostScopeOf(options.scope) : {};
   assertHostScope(hostScope);
   const base = options.base ? new URL(options.base, location.href).href : location.href;
+  const doc = inlineDocument(source, base);
   const ctx = {
     base,
     media: options.media ?? doc.$media ?? null,
@@ -2822,6 +3286,15 @@ async function mount(doc, target, options = {}) {
   if (options.onNodeMoved) {
     renderOptions.onNodeMoved = options.onNodeMoved;
   }
+  if (options.rowLimit !== undefined) {
+    renderOptions.rowLimit = options.rowLimit;
+  }
+  if (options.emptyRow) {
+    renderOptions.emptyRow = options.emptyRow;
+  }
+  if (options.onListReconciled) {
+    renderOptions.onListReconciled = options.onListReconciled;
+  }
   const { result: root, stop } = runScoped(() => renderNode(doc, scope, renderOptions));
   ctx.root = root;
   let mounted = false;
@@ -2863,16 +3336,17 @@ function responseContentType(res) {
 }
 async function resolve(source, ctx) {
   if (!isString2(source)) {
+    await prepareBodies(source);
     return source;
   }
   const served = ctx?.resolver?.(source);
   if (served) {
-    return served;
+    return withOwnScripts(await served, source);
   }
   if (_resolveCache.has(source)) {
     return _resolveCache.get(source);
   }
-  const p = fetch(source).then(async (res) => {
+  const fetched = fetch(source).then(async (res) => {
     if (!res.ok) {
       throw new Error(`Jx: failed to fetch ${source} (${res.status})`);
     }
@@ -2888,6 +3362,11 @@ async function resolve(source, ctx) {
     }
     return await res.json();
   });
+  const p = fetched.then(async (read) => {
+    const doc = withOwnScripts(read, source);
+    await prepareBodies(doc);
+    return doc;
+  });
   _resolveCache.set(source, p);
   return p;
 }
@@ -2917,6 +3396,10 @@ var _autoRequestConfig = { skip: false };
 function setSkipAutoRequests(v) {
   _autoRequestConfig.skip = v;
 }
+var _remoteLookupHandler = null;
+function setRemoteLookupHandler(handler) {
+  _remoteLookupHandler = handler;
+}
 var _resolveToken = null;
 function setResolveToken(token) {
   _resolveToken = token || null;
@@ -2973,8 +3456,20 @@ function setCanvasDelinkCommands(on) {
   _canvasDelinkCommands = on;
 }
 var _canvasInsideStampedHost = false;
+function insideStampedHost(inside, fn) {
+  const was = _canvasInsideStampedHost;
+  _canvasInsideStampedHost = inside;
+  try {
+    return fn();
+  } finally {
+    _canvasInsideStampedHost = was;
+  }
+}
 function canvasStamped(el) {
-  return _canvasInsideStampedHost || el.dataset.jxPath !== undefined;
+  return _canvasInsideStampedHost || carriesCanvasStamp(el);
+}
+function carriesCanvasStamp(el) {
+  return el.dataset.jxPath !== undefined || el.dataset.jxEchoPath !== undefined;
 }
 function canvasAttrName(el, key) {
   if (_canvasDelinkAnchors && key === "href" && (el.tagName === "A" || el.tagName === "AREA")) {
@@ -3072,7 +3567,8 @@ function boundPropKey(key, val, state) {
   }
   return sub;
 }
-async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
+async function buildScope(source, parentScope = {}, base = location.href, ctx) {
+  const doc = inlineDocument(source, base);
   const dispatchRoot = () => ctx?.root ?? null;
   const raw = {};
   const defs = doc.state ?? {};
@@ -3159,7 +3655,11 @@ async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
       }
     }
   }
+  const roles = classifyFunctionEntries(doc);
   for (const [key, def] of Object.entries(defs)) {
+    if (isFunctionDef(def) && declaresBodyAndSrc(def)) {
+      throw new Error(`Jx: '${key}' declares both body and $src — these are mutually exclusive`);
+    }
     if (hasStructuredBody(def)) {
       const { body } = def;
       if (Array.isArray(def.parameters) && def.parameters.length > 0) {
@@ -3175,7 +3675,7 @@ async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
         state[key] = handler;
       }
     } else if (isFunctionDef(def)) {
-      state[key] = await resolveFunction(def, state, key, base);
+      state[key] = await resolveFunction(def, state, key, roles.get(key) ?? "callable", base);
     }
   }
   for (const [key, def] of Object.entries(defs)) {
@@ -3282,6 +3782,7 @@ function bindTemplate(source, run, fallback) {
       run();
       heldTemplateErrors.delete(run);
     } catch (error) {
+      _templateThrows += 1;
       const thrown = error instanceof Error ? error : new Error(String(error));
       if (_templateErrorHandler) {
         _templateErrorHandler(thrown, source);
@@ -3294,6 +3795,8 @@ function bindTemplate(source, run, fallback) {
     }
   });
 }
+var _templateThrows = 0;
+var _listRedraws = 0;
 function rowContext(state) {
   return state.$map;
 }
@@ -3301,19 +3804,8 @@ function isSingleExpression(str) {
   if (!str.startsWith("${") || !str.endsWith("}")) {
     return false;
   }
-  let depth = 0;
-  for (let i = 1;i < str.length; i += 1) {
-    const c = str[i];
-    if (c === "{") {
-      depth += 1;
-    } else if (c === "}") {
-      depth -= 1;
-      if (depth === 0) {
-        return i === str.length - 1;
-      }
-    }
-  }
-  return false;
+  const [only, ...more] = templateExpressions(str);
+  return only !== undefined && more.length === 0 && only.start === 0 && only.end === str.length;
 }
 function evaluateValueTemplate(str, state) {
   if (!isSingleExpression(str)) {
@@ -3326,6 +3818,9 @@ function evaluateValueTemplate(str, state) {
   }
   return fn(...templateArgs(state));
 }
+function evaluateTemplateValue(str, scope) {
+  return evaluateValueTemplate(str, scope);
+}
 var _npmModuleResolver = null;
 function setNpmModuleResolver(resolver) {
   _npmModuleResolver = resolver;
@@ -3336,6 +3831,13 @@ async function importSource(src, base) {
     const specifier = src.slice(NPM_SCHEME.length);
     return importModule(_npmModuleResolver?.(specifier) ?? specifier);
   }
+  const typed = typeScriptSource(src, base);
+  if (typed !== null && (canLoadModules() || isScriptSpecifier(src))) {
+    const loaded = await importTypeScript(typed, src, base);
+    if (loaded) {
+      return loaded;
+    }
+  }
   if (base) {
     try {
       return await importModule(new URL(src, base).href);
@@ -3345,6 +3847,70 @@ async function importSource(src, base) {
   }
   return importModule(src);
 }
+var FETCHED_SCHEMES = new Set(["http:", "https:"]);
+function typeScriptSource(src, base) {
+  if (isScriptSpecifier(src)) {
+    return src;
+  }
+  if (scriptRefSide(src) !== null) {
+    throw new Error(`Jx: $src "${src}" names the script of the document it is written in, and that document ` + `has no $script`);
+  }
+  const from = base ?? location.href;
+  if (!URL.canParse(src, from)) {
+    return null;
+  }
+  const url = new URL(src, from);
+  return FETCHED_SCHEMES.has(url.protocol) && isTypeScriptPath(url.pathname) ? url.href : null;
+}
+async function importTypeScript(specifier, src, base) {
+  const load = await moduleLoaderFor();
+  if (load) {
+    const module = await load(specifier, {
+      base,
+      resolveNpm: _npmModuleResolver,
+      text: _documentScripts.get(src)
+    });
+    return module;
+  }
+  if (isScriptSpecifier(src)) {
+    throw new Error(`Jx: ${parseScriptSpecifier(src)?.path ?? src} has a script, and this page has nothing ` + `that can load one. Give it a module loader with setModuleLoader(loadModule), loadModule ` + `from @jxsuite/erase/browser, or let setBodyEraserLoader fetch that file when it is needed.`);
+  }
+  return null;
+}
+var _documentScripts = new Map;
+function withOwnScripts(doc, source) {
+  if (!doc.$script) {
+    return doc;
+  }
+  const address = URL.canParse(source, location.href) ? new URL(source, location.href).href : source;
+  const { client } = doc.$script;
+  const specifier = scriptSpecifier(address, "client");
+  if (isString2(client) && _documentScripts.get(specifier) !== client) {
+    if (_documentScripts.has(specifier) && !_hostSeeded.has(specifier)) {
+      _moduleCache.delete(specifier);
+    }
+    _documentScripts.set(specifier, client);
+  }
+  const own = qualifyScripts(doc, address);
+  _addressed.set(own, own);
+  return own;
+}
+var _addressed = new WeakMap;
+var _inlineCount = 0;
+function inlineDocument(doc, base) {
+  if (!doc.$script) {
+    return doc;
+  }
+  let own = _addressed.get(doc);
+  if (!own) {
+    _inlineCount += 1;
+    const address = new URL(base, location.href);
+    address.hash = `jx-inline-${_inlineCount}`;
+    own = withOwnScripts(doc, address.href);
+    _addressed.set(doc, own);
+  }
+  return own;
+}
 function importModule(specifier) {
   return import(specifier);
 }
@@ -3388,12 +3954,31 @@ function seededModule(src) {
   _moduleLoaders.set(src, load);
   return load;
 }
-async function resolveFunction(def, state, key, base) {
-  if (def.body && def.$src) {
-    throw new Error(`Jx: '${key}' declares both body and $src — these are mutually exclusive`);
+function acquireModule(src, base) {
+  const seeded = seededModule(src);
+  if (seeded) {
+    return seeded;
+  }
+  const loading = importSource(src, base);
+  loading.then((mod) => {
+    _moduleCache.set(src, mod);
+  }, () => {});
+  return loading;
+}
+function exportedFunction(def, key, src, mod) {
+  const exportName = def.$export ?? key;
+  const candidate = mod[exportName] ?? mod.default?.[exportName];
+  if (!isFunction2(candidate)) {
+    throw new TypeError(`Jx: export "${exportName}" not found or not a function in "${src}"`);
   }
+  return candidate;
+}
+async function importFunctionExport(def, key, src, base) {
+  return exportedFunction(def, key, src, await acquireModule(src, base));
+}
+async function resolveFunction(def, state, key, role, base) {
   if (!def.body && !def.$src) {
-    const params = resolveParamNames(def);
+    const params = handlerParamNames(def);
     const noop = new Function(...params, "");
     Object.defineProperty(noop, "name", {
       configurable: true,
@@ -3403,48 +3988,37 @@ async function resolveFunction(def, state, key, base) {
   }
   let fn;
   if (isString2(def.body)) {
-    const params = resolveParamNames(def);
-    fn = new Function(...params, def.body);
+    const params = handlerParamNames(def);
+    fn = compileBody(params, def.body, `'${key}'`);
+    Object.defineProperty(fn, "name", {
+      configurable: true,
+      value: def.name ?? key
+    });
+  } else if (def.$lazy === true && def.$src) {
+    const { $src: src } = def;
+    if (role === "computed") {
+      throw new Error(`Jx: "${key}" declares "$lazy": true but is used as a computed value, not called. A lazily loaded function resolves to a promise; a computed must resolve now. Remove "$lazy", or call ${key}() from a handler instead of binding its value.`);
+    }
+    let loaded;
+    const load = () => loaded ??= importFunctionExport(def, key, src, base);
+    fn = (...args) => load().then((target) => target(...args));
     Object.defineProperty(fn, "name", {
       configurable: true,
       value: def.name ?? key
     });
+    return fn;
   } else {
-    const src = def.$src;
-    if (!src) {
+    if (!def.$src) {
       throw new Error(`Jx: '${key}' has neither body nor $src`);
     }
-    const exportName = def.$export ?? key;
-    let mod;
-    const seeded = seededModule(src);
-    if (seeded instanceof Promise) {
-      mod = await seeded;
-    } else if (seeded) {
-      mod = seeded;
-    } else {
-      mod = await importSource(src, base);
-      _moduleCache.set(src, mod);
-    }
-    const candidate = mod[exportName] ?? mod.default?.[exportName];
-    if (!isFunction2(candidate)) {
-      throw new TypeError(`Jx: export "${exportName}" not found or not a function in "${src}"`);
-    }
-    fn = candidate;
-  }
-  const hasParams = (def.parameters ?? def.arguments ?? []).length > 0;
-  let isComputed = false;
-  if (!hasParams) {
-    isComputed = isString2(def.body) ? bodyReturnsValue(def.body) : fn.length <= 1 && bodyReturnsValue(fn.toString());
+    const acquired = acquireModule(def.$src, base);
+    fn = exportedFunction(def, key, def.$src, acquired instanceof Promise ? await acquired : acquired);
   }
-  if (isComputed) {
+  if (role === "computed") {
     return computed(() => fn(state));
   }
   return fn;
 }
-function resolveParamNames(def) {
-  const names = def.parameters ? paramNames(def.parameters) : def.arguments ?? [];
-  return names.length > 0 && names[0] === "state" ? names : ["state", ...names];
-}
 var RESERVED_KEYS = new Set([
   "$schema",
   "$id",
@@ -3459,6 +4033,7 @@ var RESERVED_KEYS = new Set([
   "$prototype",
   "$src",
   "$export",
+  "$script",
   "$media",
   "$map",
   "timing",
@@ -3593,6 +4168,8 @@ function renderNode(def, state, options) {
       const childOpts = options || childNs ? { ...options, _ns: childNs, _path: [...path, "children", i] } : undefined;
       if (isMappedArray(child)) {
         renderMappedArrayInto(el, child, localState, childOpts);
+      } else if (isString2(child) && isSingleExpression(child)) {
+        renderTemplatedChild(el, child, localState, childOpts);
       } else {
         el.append(renderNode(child, localState, childOpts));
       }
@@ -3607,7 +4184,6 @@ function renderNode(def, state, options) {
   return el;
 }
 function renderComputedChildren(el, template, state, options) {
-  const path = options._path ?? [];
   let live = null;
   const retire = () => {
     el.replaceChildren();
@@ -3620,21 +4196,62 @@ function renderComputedChildren(el, template, state, options) {
     if (!Array.isArray(nodes)) {
       return;
     }
-    const scope = effectScope(true);
-    live = scope;
-    pauseTracking();
-    try {
-      scope.run(() => {
-        for (const [i, child] of nodes.entries()) {
-          el.append(renderNode(child, state, { ...options, _path: [...path, i] }));
-        }
-      });
-    } finally {
-      resetTracking();
-    }
+    live = effectScope(true);
+    drawTemplateNodes(live, nodes, state, options, (node) => {
+      el.append(node);
+    });
   }, retire);
   onScopeDispose(() => live?.stop(), true);
 }
+function drawTemplateNodes(scope, nodes, state, options, place) {
+  const path = options?._path ?? [];
+  const members = [...nodes];
+  pauseTracking();
+  try {
+    scope.run(() => {
+      for (const [i, child] of members.entries()) {
+        place(renderNode(child, state, options ? { ...options, _path: [...path, i] } : undefined));
+      }
+    });
+  } finally {
+    resetTracking();
+  }
+}
+function renderTemplatedChild(parent, template, state, options) {
+  const anchor = document.createTextNode(template);
+  parent.append(anchor);
+  let live = null;
+  let drawn = [];
+  const retire = () => {
+    for (const node of drawn) {
+      node.remove();
+    }
+    drawn = [];
+    live?.stop();
+    live = null;
+  };
+  bindTemplate(template, () => {
+    const value = evaluateValueTemplate(template, state);
+    retire();
+    if (!Array.isArray(value)) {
+      anchor.textContent = templateText(value);
+      return;
+    }
+    anchor.textContent = "";
+    live = effectScope(true);
+    drawTemplateNodes(live, value, state, options, (node) => {
+      drawn.push(node);
+      anchor.before(node);
+    });
+  }, () => {
+    retire();
+    anchor.textContent = "";
+  });
+  onScopeDispose(() => live?.stop(), true);
+}
+function templateText(value) {
+  return `${value}`;
+}
 function applyProperties(el, def, state) {
   for (const [key, val] of Object.entries(def)) {
     if (RESERVED_KEYS.has(key)) {
@@ -3659,6 +4276,9 @@ function bindHandler(el, key, val, state) {
     }
     return true;
   }
+  if (isFunctionDef(val) && declaresBodyAndSrc(val)) {
+    throw new Error(`Jx: inline '${key}' handler declares both body and $src — these are mutually exclusive`);
+  }
   if (hasStructuredBody(val)) {
     const { body } = val;
     el.addEventListener(type, (e) => {
@@ -3667,8 +4287,8 @@ function bindHandler(el, key, val, state) {
     return true;
   }
   if (isFunctionDef(val) && isString2(val.body)) {
-    const params = resolveParamNames(val);
-    const fn = new Function(...params, val.body);
+    const params = handlerParamNames(val);
+    const fn = compileBody(params, val.body, `the ${type} handler`);
     el.addEventListener(type, (e) => fn(scope, e));
     return true;
   }
@@ -4005,10 +4625,14 @@ function applyStyleInto(el, styleDef, mediaQueries, state, live) {
     const scope = effectScope();
     scope.run(() => {
       for (const { name, value } of sources) {
-        effect(() => {
-          const resolved = isRef2(value) ? resolveRef(value.$ref, state) : evaluateTemplate(value, state);
+        const write = (resolved) => {
           el.style.setProperty(name, canvasStyleValue(String(resolved ?? "")));
-        });
+        };
+        if (isRef2(value)) {
+          effect(() => write(resolveRef(value.$ref, state)));
+        } else {
+          bindTemplate(value, () => write(evaluateTemplate(value, state)));
+        }
       }
     });
     entry.stop = () => scope.stop();
@@ -4062,6 +4686,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef, key: keyRef } = arrayDef;
   const keyPointer = isRef2(keyRef) ? keyRef.$ref : null;
   const instancePath = _instancePath;
+  const insideStamped = _canvasInsideStampedHost;
   let warned = false;
   const warnOnce = (message) => {
     if (!warned) {
@@ -4083,7 +4708,9 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     const scope = effectScope(true);
     const childOpts = options ? { ...options, _path: [...path, "map", index] } : undefined;
     const node = scope.run(() => renderNode(mapDef, child, childOpts));
-    return { key, map, node, scope };
+    const row = { key, map, node, scope };
+    listRows.set(node, row);
+    return row;
   };
   const reconcile = (list, keys) => {
     const previous = new Map;
@@ -4138,8 +4765,17 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
         items = [...unsorted].toSorted(compare);
       }
     }
-    const list = Array.isArray(items) && mapDef ? items : [];
-    const keys = list.map((item, index) => mappedRowKey(keyPointer, item, index, warnOnce));
+    let list = Array.isArray(items) && mapDef ? items : [];
+    const count = list.length;
+    const placeholder = count === 0 && mapDef ? options?.emptyRow?.(arrayDef, path) : undefined;
+    if (placeholder !== undefined) {
+      list = [placeholder];
+    }
+    const limit = options?.rowLimit;
+    if (isNumber(limit) && limit >= 0 && list.length > limit) {
+      list = list.slice(0, Math.floor(limit));
+    }
+    const keys = placeholder === undefined ? list.map((item, index) => mappedRowKey(keyPointer, item, index, warnOnce)) : list.map(() => EMPTY_ROW_KEY);
     const seen = new Set;
     for (let i = 0;i < keys.length; i++) {
       if (seen.has(keys[i])) {
@@ -4151,7 +4787,13 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     }
     pauseTracking();
     try {
-      underInstancePath(reexpand(instancePath), () => reconcile(list, keys));
+      underInstancePath(reexpand(instancePath), () => insideStampedHost(insideStamped, () => reconcile(list, keys)));
+      options?.onListReconciled?.(path, {
+        count,
+        empty: count === 0,
+        nodes: rows.map((row) => row.node),
+        rendered: rows.length
+      });
     } finally {
       resetTracking();
     }
@@ -4160,6 +4802,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   let stopped = false;
   const runner = effect(update, {
     scheduler: () => {
+      _listRedraws += 1;
       if (queued) {
         return;
       }
@@ -4180,6 +4823,21 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     rows = [];
   }, true);
 }
+var EMPTY_ROW_KEY = Object.freeze({ emptyRow: true });
+var listRows = new WeakMap;
+function replaceListRow(current, next, stop) {
+  const row = listRows.get(current);
+  if (!row || row.node !== current) {
+    return false;
+  }
+  row.node.replaceWith(next);
+  row.scope.stop();
+  listRows.delete(current);
+  row.node = next;
+  row.scope = { stop: () => stop?.() };
+  listRows.set(next, row);
+  return true;
+}
 function mappedRowKey(pointer, item, index, warnOnce) {
   if (pointer === null) {
     return index;
@@ -4216,6 +4874,7 @@ function renderSwitch(def, state, options) {
   const path = options?._path ?? [];
   const container = document.createElement(resolveTagName(def.tagName, state));
   const instancePath = _instancePath;
+  const insideStamped = _canvasInsideStampedHost;
   if (options?.onNodeCreated) {
     options.onNodeCreated(container, path, def, state);
   }
@@ -4258,18 +4917,18 @@ function renderSwitch(def, state, options) {
         if (gen !== generation) {
           return;
         }
-        const childScope = await buildScope(doc, {}, href, options?._ctx);
+        const childScope = await buildScope(withProjectFormulas(doc), {}, href, options?._ctx);
         if (gen !== generation) {
           return;
         }
         container.replaceChildren();
-        underInstancePath(reexpand(instancePath), () => scope.run(() => container.append(renderNode(doc, childScope, childOpts))));
+        underInstancePath(reexpand(instancePath), () => insideStampedHost(insideStamped, () => scope.run(() => container.append(renderNode(doc, childScope, childOpts)))));
       }).catch((error) => console.error("Jx $switch: failed to load external case", caseDef.$ref, error));
       return;
     }
     pauseTracking();
     try {
-      underInstancePath(reexpand(instancePath), () => scope.run(() => container.append(renderNode(caseDef, state, childOpts))));
+      underInstancePath(reexpand(instancePath), () => insideStampedHost(insideStamped, () => scope.run(() => container.append(renderNode(caseDef, state, childOpts)))));
     } finally {
       resetTracking();
     }
@@ -4305,18 +4964,46 @@ async function resolvePrototype(def, state, key, base, ctx) {
               clearTimeout(debounceTimer);
             }
           });
+          const request = (signal) => fetch(url, {
+            method: def.method ?? "GET",
+            ...signal && { signal },
+            ...def.headers && { headers: def.headers },
+            ...def.body && {
+              body: isNonNullObject(def.body) ? JSON.stringify(def.body) : def.body
+            }
+          }).then((r) => r.ok ? r.json() : Promise.reject(r.statusText));
           const doFetch = () => {
-            holdTemplateErrorsFor(fetch(url, {
-              method: def.method ?? "GET",
-              signal: controller.signal,
-              ...def.headers && { headers: def.headers },
-              ...def.body && {
-                body: isNonNullObject(def.body) ? JSON.stringify(def.body) : def.body
+            const handler = _remoteLookupHandler;
+            let lookup;
+            if (handler) {
+              const answer = handler({
+                key,
+                kind: "request",
+                request: {
+                  method: def.method ?? "GET",
+                  url,
+                  ...def.headers && { headers: def.headers },
+                  ...def.body !== undefined && { body: def.body }
+                },
+                scope: state
+              }, () => request());
+              if (answer === null) {
+                return;
+              }
+              if (!(answer instanceof Promise)) {
+                s.value = answer.value;
+                return;
+              }
+              lookup = answer;
+            } else {
+              lookup = request(controller.signal);
+            }
+            holdTemplateErrorsFor(lookup.then((d) => {
+              if (!controller.signal.aborted) {
+                s.value = d;
               }
-            }).then((r) => r.ok ? r.json() : Promise.reject(r.statusText)).then((d) => {
-              s.value = d;
             }).catch((error) => {
-              if (!(error instanceof Error && error.name === "AbortError")) {
+              if (!controller.signal.aborted && !(error instanceof Error && error.name === "AbortError")) {
                 s.value = { error: String(error) };
               }
             }));
@@ -4534,6 +5221,7 @@ async function resolveClassJson(def, state, key, base) {
   } catch {
     return resolveViaDevProxy(def, state, key, base);
   }
+  await prepareBodies(classDef);
   if (classDef.$implementation) {
     const schemaStr = JSON.stringify(classDef);
     if (schemaStr.includes('"#/$context/')) {
@@ -4567,6 +5255,7 @@ function classFromSchema(classDef) {
   const rawCtor = classDef.$defs?.constructor;
   const ctor = isCtorDef(rawCtor) ? rawCtor : undefined;
   const methods = classDef.$defs?.methods ?? {};
+  const className = classDef.title ?? "a class";
 
   class DynClass {
     constructor(config = {}) {
@@ -4586,7 +5275,7 @@ function classFromSchema(classDef) {
       if (ctor?.body) {
         const bodyStr = Array.isArray(ctor.body) ? ctor.body.join(`
 `) : ctor.body;
-        const init = new Function("config", bodyStr);
+        const init = compileBody(["config"], bodyStr, `the constructor of ${className}`);
         init.call(this, config);
       }
     }
@@ -4605,20 +5294,20 @@ function classFromSchema(classDef) {
     if (typedMethod.role === "accessor") {
       const descriptor = {};
       if (typedMethod.getter) {
-        descriptor.get = new Function(typedMethod.getter.body ?? "");
+        descriptor.get = compileBody([], typedMethod.getter.body ?? "", `the getter ${name} of ${className}`);
       }
       if (typedMethod.setter) {
         const sp = (typedMethod.setter.parameters ?? []).map((p) => p.$ref?.split("/").pop() ?? "v");
-        descriptor.set = new Function(...sp, typedMethod.setter.body ?? "");
+        descriptor.set = compileBody(sp, typedMethod.setter.body ?? "", `the setter ${name} of ${className}`);
       }
       Object.defineProperty(DynClass.prototype, name, {
         ...descriptor,
         configurable: true
       });
     } else if (typedMethod.scope === "static") {
-      DynClass[name] = new Function(...params, bodyStr);
+      DynClass[name] = compileBody(params, bodyStr, `${name} of ${className}`);
     } else {
-      DynClass.prototype[name] = new Function(...params, bodyStr);
+      DynClass.prototype[name] = compileBody(params, bodyStr, `${name} of ${className}`);
     }
   }
   Object.defineProperty(DynClass, "name", {
@@ -4665,24 +5354,46 @@ async function resolveViaDevProxy(def, state, key, base) {
   }
   return s;
 }
-function latestServerCall(s, invoke, label) {
+function latestServerCall(s, invoke, label, describe) {
   let seq = 0;
   return (args) => {
     seq += 1;
     const n = seq;
-    holdTemplateErrorsFor(new Promise((settle) => {
+    const run = () => new Promise((settle) => {
       settle(invoke(args));
-    }).then((result) => {
+    });
+    const answer = _remoteLookupHandler ? _remoteLookupHandler(describe(args), run) : run();
+    if (answer === null) {
+      return;
+    }
+    if (!(answer instanceof Promise)) {
+      s.value = answer.value;
+      return;
+    }
+    holdTemplateErrorsFor(answer.then((result) => {
       if (n === seq) {
         s.value = result;
       }
     }).catch((error) => {
-      if (n === seq) {
+      if (n === seq && !(error instanceof Error && error.name === "AbortError")) {
         console.error(label, error);
       }
     }));
   };
 }
+function serverLookup(def, state, key, args, base) {
+  return {
+    key,
+    kind: "server",
+    request: {
+      $export: def.$export,
+      $src: def.$src,
+      arguments: args,
+      ...base !== undefined && { $base: base }
+    },
+    scope: state
+  };
+}
 async function resolveServerFunction(def, state, key, base) {
   const src = def.$src;
   const exportName = def.$export;
@@ -4710,7 +5421,7 @@ async function resolveServerFunction(def, state, key, base) {
   };
   const s = ref(null);
   if (hasReactiveArg) {
-    const call = latestServerCall(s, fn, "Jx server function:");
+    const call = latestServerCall(s, fn, "Jx server function:", (args) => serverLookup(def, state, key, args, base));
     effect(() => {
       const args = resolveArgs();
       onEffectCleanup(() => {});
@@ -4747,7 +5458,7 @@ async function resolveServerFunctionViaProxy(def, state, key, base) {
     return r.json();
   });
   const s = ref(null);
-  const call = latestServerCall(s, doResolve, "Jx server proxy:");
+  const call = latestServerCall(s, doResolve, "Jx server proxy:", (args) => serverLookup(def, state, key, args, base));
   if (hasReactiveArg) {
     effect(() => {
       const args = resolveArgs();
@@ -4890,6 +5601,23 @@ async function redefineElement(doc, baseUrl) {
   }
   _elementDefs.set(tagName, { base, doc });
 }
+var _projectFormulas = {};
+var _withFormulas = new WeakMap;
+function setProjectFormulas(projectState) {
+  _projectFormulas = inheritableFormulas(projectState);
+  _withFormulas = new WeakMap;
+}
+function withProjectFormulas(doc) {
+  const cached = _withFormulas.get(doc);
+  if (cached) {
+    return cached;
+  }
+  const own = doc.state ?? {};
+  const added = Object.entries(_projectFormulas).filter(([key]) => !(key in own));
+  const merged = added.length > 0 ? { ...doc, state: { ...Object.fromEntries(added), ...own } } : doc;
+  _withFormulas.set(doc, merged);
+  return merged;
+}
 function setRootMedia(map) {
   _rootMedia = map ?? {};
 }
@@ -5036,7 +5764,7 @@ async function defineElement(source, baseUrl) {
     _definedSources.add(base);
     source_ = await resolve(source);
   } else {
-    source_ = source;
+    source_ = inlineDocument(source, new URL(base ?? location.href, location.href).href);
   }
   base ??= location.href;
   const { tagName } = source_;
@@ -5053,6 +5781,7 @@ async function defineElement(source, baseUrl) {
   const initialDef = source_;
   const initialBase = base;
   const observedAttrs = initialDef.observedAttributes ?? [];
+  _observedAttributes.set(tagName, observedAttrs);
   const ElementClass = class extends HTMLElement {
     _jxInitialized = false;
     _state = null;
@@ -5070,7 +5799,8 @@ async function defineElement(source, baseUrl) {
       const enclosingPath = _instancePath;
       const supplied = {};
       const live = _elementDefs.get(tagName) ?? { base: initialBase, doc: initialDef };
-      const def = live.doc;
+      _connectedDefs.set(this, live.doc);
+      const def = withProjectFormulas(live.doc);
       const defBase = live.base;
       const state = await buildScope(def, {}, defBase, { base: defBase, media: null, root: this });
       for (const attr of observedAttrs) {
@@ -5127,10 +5857,14 @@ async function defineElement(source, baseUrl) {
         reportUnrendered(this, tagName, error instanceof Error ? error : new Error(String(error)));
         return;
       }
+      const declared = live.doc.state ?? {};
       for (const key of Object.keys(def.state ?? {})) {
         if (isPrivateStateKey(key)) {
           continue;
         }
+        if (!(key in declared) && !(key in supplied)) {
+          continue;
+        }
         const native = nativeSetter(this, key);
         Object.defineProperty(this, key, {
           configurable: true,
@@ -5156,7 +5890,7 @@ async function defineElement(source, baseUrl) {
       const children = Array.isArray(def.children) ? def.children : [];
       const draw = () => {
         const wasInside = _canvasInsideStampedHost;
-        _canvasInsideStampedHost ||= this.dataset.jxPath !== undefined;
+        _canvasInsideStampedHost ||= carriesCanvasStamp(this);
         let failure = null;
         try {
           underInstancePath(ownPath, () => {
@@ -5246,6 +5980,195 @@ async function defineElement(source, baseUrl) {
   };
   customElements.define(tagName, ElementClass);
 }
+function writeInstanceProp(el, key, resolved) {
+  const value = isString2(resolved) ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+  elementProperties(el)[key] = value;
+  const instanceState = instanceStateOf(el);
+  if (instanceState && key in HTMLElement.prototype && Object.hasOwn(toRaw(instanceState), key)) {
+    instanceState[key] = value;
+  }
+}
+var _observedAttributes = new Map;
+var _connectedDefs = new WeakMap;
+function drawnByCurrent(el) {
+  const drawn = _connectedDefs.get(el);
+  return drawn !== undefined && drawn === _elementDefs.get(el.localName)?.doc;
+}
+function producedElsewhere(entry) {
+  if (!isJsonObject(entry)) {
+    return false;
+  }
+  const { $prototype: prototype } = entry;
+  if (prototype !== undefined) {
+    return prototype !== "Function";
+  }
+  return "$src" in entry || "timing" in entry;
+}
+function isScalarProp(value) {
+  return isString2(value) && !isTemplateString(value) || isNumber(value) || isBoolean(value);
+}
+var VERBATIM_PROPS = new Set(["id", "lang", "role", "slot", "title"]);
+function isBoundProp(value) {
+  return isRef2(value) || isTemplateString(value);
+}
+function rendersOnce(def, drawing = new Set) {
+  const declared = def.state ?? {};
+  if ("onMount" in declared || Object.values(declared).some((entry) => producedElsewhere(entry))) {
+    return true;
+  }
+  drawing.add(def);
+  const walk = (value, isRoot, redrawn) => {
+    if (Array.isArray(value)) {
+      return value.some((item) => walk(item, false, redrawn));
+    }
+    if (!isNonNullObject(value)) {
+      return false;
+    }
+    const node = Object.fromEntries(Object.entries(value));
+    const { attributes, tagName } = node;
+    if (tagName !== undefined && !isString2(tagName)) {
+      return true;
+    }
+    const attrs = isJsonObject(attributes) ? attributes : {};
+    if (tagName === "slot" && (redrawn || isBoundProp(attrs.name) || isBoundProp(node.name) || isBoundProp(node.textContent) || node.$switch !== undefined)) {
+      return true;
+    }
+    if (isBoundProp(node.innerHTML) || !isRoot && isBoundProp(node.children)) {
+      return true;
+    }
+    const isInstance = !isRoot && isString2(tagName) && tagName.includes("-");
+    const inner = isInstance ? _elementDefs.get(tagName)?.doc : undefined;
+    if (isInstance && handsOverOnce(node, attrs, inner)) {
+      return true;
+    }
+    if (inner && (drawing.has(inner) || rendersOnce(inner, drawing))) {
+      return true;
+    }
+    for (const [key, entry] of Object.entries(node)) {
+      if (isRoot && (key === "state" || key === "$props")) {
+        continue;
+      }
+      if (key === "$props") {
+        if (!isInstance && isJsonObject(entry) && Object.values(entry).some((v) => isRef2(v))) {
+          return true;
+        }
+        continue;
+      }
+      if ((key === "id" || key.startsWith("$") && !RESERVED_KEYS.has(key)) && isRef2(entry)) {
+        return true;
+      }
+      const drawn = key === "cases" && isJsonObject(entry) ? Object.values(entry) : entry;
+      if (walk(drawn, false, redrawn || key === "cases" || key === "map")) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const answer = walk(def, true, false);
+  drawing.delete(def);
+  return answer;
+}
+function handsOverOnce(node, attrs, inner) {
+  if (isBoundProp(node.textContent)) {
+    return true;
+  }
+  const kids = Array.isArray(node.children) ? node.children : [];
+  if (kids.some((kid) => isBoundProp(kid) || isMappedArray(kid) || isJsonObject(kid) && (isBoundProp(kid.slot) || isJsonObject(kid.attributes) && isBoundProp(kid.attributes.slot)))) {
+    return true;
+  }
+  const coerced = (given) => Object.entries(given).some(([key, value]) => isBoundProp(value) && (key in HTMLElement.prototype) && key !== "textContent");
+  if (coerced(node) || isJsonObject(node.$props) && coerced(node.$props)) {
+    return true;
+  }
+  const observed = isString2(node.tagName) ? _observedAttributes.get(node.tagName) ?? [] : [];
+  return Object.entries(attrs).some(([name, given]) => {
+    if (!isBoundProp(given)) {
+      return false;
+    }
+    if (name.startsWith("props.")) {
+      return true;
+    }
+    const prop = name.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+    return !inner || prop in (inner.state ?? {}) && !observed.includes(name);
+  });
+}
+function mountedFromProps(host, state) {
+  if (isScopeHook(state.onMount) || !drawnByCurrent(host)) {
+    return true;
+  }
+  for (const inner of host.querySelectorAll("*")) {
+    const innerState = instanceStateOf(inner);
+    if (!innerState || !isScopeHook(innerState.onMount) && drawnByCurrent(inner)) {
+      continue;
+    }
+    let owner = inner;
+    while (owner && owner !== host && owner.dataset.jxPath === undefined) {
+      owner = owner.parentElement;
+    }
+    if (owner === host) {
+      return true;
+    }
+  }
+  return false;
+}
+function updateInstanceProps(el, before, after) {
+  const state = instanceStateOf(el);
+  const registered = _elementDefs.get(el.localName)?.doc;
+  if (!state || !registered) {
+    return false;
+  }
+  const def = withProjectFormulas(registered);
+  const defaults = declaredDefaults(def);
+  const declared = def.state ?? {};
+  const observed = _observedAttributes.get(el.localName) ?? [];
+  const writes = [];
+  for (const key of new Set([...Object.keys(before ?? {}), ...Object.keys(after ?? {})])) {
+    const was = before?.[key];
+    const now = after?.[key];
+    if (isPrivateStateKey(key) || JSON.stringify(was) === JSON.stringify(now)) {
+      continue;
+    }
+    if (was !== undefined && !isScalarProp(was) || now !== undefined && !isScalarProp(now) || producedElsewhere(declared[key]) || key in declared && !isScalarProp(toRaw(state)[key]) || key === "_state" || key === "_jxInitialized") {
+      return false;
+    }
+    if (key in HTMLElement.prototype && !(VERBATIM_PROPS.has(key) && (key in declared) && isString2(now))) {
+      return false;
+    }
+    if (now !== undefined) {
+      writes.push(() => {
+        writeInstanceProp(el, key, now);
+      });
+      continue;
+    }
+    if (!(key in declared)) {
+      writes.push(() => {
+        Reflect.deleteProperty(el, key);
+      });
+      continue;
+    }
+    const fallback = defaults.get(key);
+    const attribute = key.replaceAll(/[A-Z]/gu, (c) => `-${c.toLowerCase()}`);
+    if (!isScalarProp(fallback) || observed.includes(attribute) && el.hasAttribute(attribute)) {
+      return false;
+    }
+    writes.push(() => {
+      state[key] = fallback;
+    });
+  }
+  if (writes.length === 0 || mountedFromProps(el, state) || rendersOnce(def)) {
+    return false;
+  }
+  const thrown = _templateThrows;
+  const redraws = _listRedraws;
+  try {
+    for (const write of writes) {
+      write();
+    }
+  } catch {
+    return false;
+  }
+  return _templateThrows === thrown && _listRedraws === redraws;
+}
 function renderCustomElementWithProps(def, state, options, path) {
   const el = document.createElement(resolveTagName(def.tagName, state));
   if (options?.onNodeCreated) {
@@ -5256,12 +6179,7 @@ function renderCustomElementWithProps(def, state, options, path) {
       continue;
     }
     const write = (resolved) => {
-      const value = isString2(resolved) ? canvasAssetValue(el.tagName, key, resolved) : resolved;
-      elementProperties(el)[key] = value;
-      const instanceState = instanceStateOf(el);
-      if (instanceState && key in HTMLElement.prototype && Object.hasOwn(toRaw(instanceState), key)) {
-        instanceState[key] = value;
-      }
+      writeInstanceProp(el, key, resolved);
     };
     if (isRef2(val)) {
       const refVal = val;
@@ -5289,6 +6207,8 @@ function renderCustomElementWithProps(def, state, options, path) {
     const childOpts = options && path ? { ...options, _path: [...path, "children", i] } : undefined;
     if (isMappedArray(child)) {
       renderMappedArrayInto(el, child, state, childOpts);
+    } else if (isString2(child) && isSingleExpression(child)) {
+      renderTemplatedChild(el, child, state, childOpts);
     } else {
       el.append(renderNode(child, state, childOpts));
     }
@@ -5397,6 +6317,7 @@ export {
   SUPPORTED_SCHEMA_VERSION,
   _resetPrivatePropWarnings,
   applyStyle,
+  bodyNeedsEraser,
   booleanAttrValue,
   buildScope,
   buildStyleRules,
@@ -5410,6 +6331,7 @@ export {
   documentStyleText,
   elementDefinition,
   enumeratedAttrNames,
+  evaluateTemplateValue,
   hasSchemaKeywords,
   hashCss,
   isDeclarationAtRule,
@@ -5422,11 +6344,13 @@ export {
   observeScope,
   preloadDocument,
   preloadModule,
+  prepareBodies,
   pureSchemeOf,
   reapplyStyle,
   redefineElement,
   releaseElementStyles,
   renderNode,
+  replaceListRow,
   resetDocumentStyles,
   resolve,
   resolveAtQuery,
@@ -5436,13 +6360,18 @@ export {
   resolveTagName,
   runScoped,
   schemeSelectors,
+  setBodyEraser,
+  setBodyEraserLoader,
   setCanvasAssetResolver,
   setCanvasDelinkAnchors,
   setCanvasDelinkCommands,
   setCanvasDelinkPopovers,
   setCanvasViewportTranspose,
   setDocumentParser,
+  setModuleLoader,
   setNpmModuleResolver,
+  setProjectFormulas,
+  setRemoteLookupHandler,
   setResolveToken,
   setRootMedia,
   setSkipAutoRequests,
@@ -5454,8 +6383,9 @@ export {
   toCSSText,
   transposeCanvasOverlaySelector,
   transposeCanvasPopoverSelector,
-  transposeCanvasUnits
+  transposeCanvasUnits,
+  updateInstanceProps
 };
 
-//# debugId=0833DD60FD5CF0CE64756E2164756E21
+//# debugId=A3ACE1824EF1406664756E2164756E21
 //# sourceMappingURL=runtime.js.map