@jxsuite/runtime 6.3.0 → 7.1.0

package/dist/runtime.js

@@ -29,21 +29,11 @@ var cacheStringFunction = (fn) => {
     return hit || (cache[str] = fn(str));
   };
 };
-var camelizeRE = /-\w/g;
-var camelize = cacheStringFunction((str) => {
-  return str.replace(camelizeRE, (c) => c.slice(1).toUpperCase());
-});
-var hyphenateRE = /\B([A-Z])/g;
-var hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, "-$1").toLowerCase());
-var capitalize = cacheStringFunction((str) => {
+var capitalize = /* @__PURE__ */ cacheStringFunction((str) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 });
-var toHandlerKey = cacheStringFunction((str) => {
-  const s = str ? `on${capitalize(str)}` : ``;
-  return s;
-});
 var hasChanged = (value, oldValue) => !Object.is(value, oldValue);
-var specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,playsinline,readonly`;
+var specialBooleanAttrs = `itemscope,allowfullscreen,disablepictureinpicture,disableremoteplayback,formnovalidate,ismap,nomodule,novalidate,playsinline,readonly`;
 var isBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
 
 // ../../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
@@ -179,7 +169,11 @@ function effectScope(detached) {
 }
 function onScopeDispose(fn, failSilently = false) {
   if (activeEffectScope) {
-    activeEffectScope.cleanups.push(fn);
+    if (activeEffectScope.active) {
+      activeEffectScope.cleanups.push(fn);
+    } else {
+      fn();
+    }
   } else if (!failSilently) {
     warn(`onScopeDispose() is called when there is no active effect scope to be associated with.`);
   }
@@ -907,7 +901,7 @@ function noTracking(self2, method, args = []) {
   return res;
 }
 var isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`);
-var builtInSymbols = new Set(/* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol));
+var builtInSymbols = /* @__PURE__ */ new Set(/* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol));
 function hasOwnProperty2(key) {
   if (!isSymbol(key))
     key = String(key);
@@ -1511,7 +1505,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] !== `
@@ -1520,7 +1598,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);
@@ -1529,12 +1609,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);
@@ -1563,10 +1648,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 === "{") {
@@ -1575,10 +1668,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;
     }
   }
@@ -1793,6 +1893,13 @@ function cssRuleText(conditions, selector, declarations) {
   }
   return text;
 }
+function commentedRuleText(rule) {
+  if (rule.description === undefined) {
+    return rule.text;
+  }
+  return `/* ${rule.description.replaceAll("*/", "* /")} */
+${rule.text}`;
+}
 function cssKeyframesText(conditions, name, blocks) {
   const body = blocks.map(({ selector, declarations }) => `${selector} { ${declarations.map(([property, value]) => `${property}: ${value}`).join("; ")} }`).join(" ");
   let text = `@keyframes ${name} { ${body} }`;
@@ -1872,6 +1979,7 @@ function buildStyleRules(style, options = {}) {
     }
     return declarations;
   };
+  const describedBy = (description) => isString2(description) && description !== "" ? { description } : {};
   const emit = (conditions, selector, declarations, target, description) => {
     if (declarations.length === 0) {
       return;
@@ -1893,10 +2001,7 @@ function buildStyleRules(style, options = {}) {
       target,
       key: hashCss(text)
     };
-    if (isString2(description) && description !== "") {
-      rule.description = description;
-    }
-    rules.push(rule);
+    rules.push({ ...rule, ...describedBy(description) });
   };
   const emitKeyframes = (atKey, block, conditions) => {
     const name = atKey.slice("@keyframes".length).trim();
@@ -1924,7 +2029,8 @@ function buildStyleRules(style, options = {}) {
       key: hashCss(text),
       selector: null,
       target: "unscoped",
-      text
+      text,
+      ...describedBy(block["$description"])
     });
   };
   const walkAt = (atKey, block, selector, conditions, target) => {
@@ -2225,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) {
@@ -2324,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));
@@ -2440,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);
@@ -2796,6 +2968,7 @@ 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;
@@ -2806,6 +2979,35 @@ function setBodyEraser(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;
@@ -2864,12 +3066,7 @@ async function prepareBodies(doc) {
   if (!bodiesOf(tree).some((body) => bodyNeedsEraser(body))) {
     return;
   }
-  loading ??= load().then((module) => {
-    if (loader === load) {
-      setBodyEraser(module.eraseBody);
-    }
-  });
-  await loading;
+  await fetchEraser(load);
 }
 function javaScriptOf(body, where) {
   if (!eraser) {
@@ -2899,6 +3096,75 @@ function compileBody(params, body, where) {
   }
 }
 
+// ../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-";
@@ -2980,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,
@@ -3019,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;
@@ -3065,7 +3341,7 @@ async function resolve(source, ctx) {
   }
   const served = ctx?.resolver?.(source);
   if (served) {
-    return served;
+    return withOwnScripts(await served, source);
   }
   if (_resolveCache.has(source)) {
     return _resolveCache.get(source);
@@ -3086,7 +3362,8 @@ async function resolve(source, ctx) {
     }
     return await res.json();
   });
-  const p = fetched.then(async (doc) => {
+  const p = fetched.then(async (read) => {
+    const doc = withOwnScripts(read, source);
     await prepareBodies(doc);
     return doc;
   });
@@ -3119,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;
@@ -3175,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")) {
@@ -3274,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 ?? {};
@@ -3488,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);
@@ -3500,6 +3795,8 @@ function bindTemplate(source, run, fallback) {
     }
   });
 }
+var _templateThrows = 0;
+var _listRedraws = 0;
 function rowContext(state) {
   return state.$map;
 }
@@ -3507,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)) {
@@ -3532,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;
@@ -3542,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);
@@ -3551,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);
 }
@@ -3594,6 +3954,28 @@ function seededModule(src) {
   _moduleLoaders.set(src, load);
   return load;
 }
+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 = handlerParamNames(def);
@@ -3612,27 +3994,25 @@ async function resolveFunction(def, state, key, role, base) {
       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 acquired = acquireModule(def.$src, base);
+    fn = exportedFunction(def, key, def.$src, acquired instanceof Promise ? await acquired : acquired);
   }
   if (role === "computed") {
     return computed(() => fn(state));
@@ -3653,6 +4033,7 @@ var RESERVED_KEYS = new Set([
   "$prototype",
   "$src",
   "$export",
+  "$script",
   "$media",
   "$map",
   "timing",
@@ -3787,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));
       }
@@ -3801,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();
@@ -3814,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)) {
@@ -4202,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();
@@ -4259,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) {
@@ -4280,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;
@@ -4335,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])) {
@@ -4348,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();
     }
@@ -4357,6 +4802,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   let stopped = false;
   const runner = effect(update, {
     scheduler: () => {
+      _listRedraws += 1;
       if (queued) {
         return;
       }
@@ -4377,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;
@@ -4413,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);
   }
@@ -4455,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();
     }
@@ -4502,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) };
               }
             }));
@@ -4864,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;
@@ -4909,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(() => {});
@@ -4946,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();
@@ -4988,6 +5500,9 @@ function isSignal(v) {
 }
 function absorbAttribute(state, name, value, defaults) {
   const camelKey = name.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+  if (defaults?.has(camelKey) && defaults.get(camelKey) === undefined) {
+    return;
+  }
   const current = state[camelKey];
   if (isBoolean(current)) {
     state[camelKey] = value !== null && value !== "false";
@@ -5003,12 +5518,20 @@ function absorbAttribute(state, name, value, defaults) {
 function declaredDefaults(def) {
   const out = new Map;
   for (const [key, entry] of Object.entries(def.state ?? {})) {
-    if (isNonNullObject(entry)) {
+    if (isString2(entry) && isTemplateString(entry)) {
+      out.set(key, undefined);
+      continue;
+    }
+    if (isNonNullObject(entry) && !Array.isArray(entry)) {
       if ("default" in entry) {
         out.set(key, entry.default);
         continue;
       }
       if (COMPUTED_STATE_KEYS.some((marker) => (marker in entry))) {
+        out.set(key, undefined);
+        continue;
+      }
+      if (hasSchemaKeywords(entry)) {
         continue;
       }
     }
@@ -5089,6 +5612,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 ?? {};
 }
@@ -5235,7 +5775,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_;
@@ -5252,6 +5792,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;
@@ -5269,12 +5810,14 @@ 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 });
+      const connectDefaults = declaredDefaults(def);
       for (const attr of observedAttrs) {
         if (this.hasAttribute(attr)) {
-          absorbAttribute(state, attr, this.getAttribute(attr));
+          absorbAttribute(state, attr, this.getAttribute(attr), connectDefaults);
           supplied[attr] = this.getAttribute(attr);
         }
       }
@@ -5326,10 +5869,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,
@@ -5355,7 +5902,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, () => {
@@ -5384,7 +5931,7 @@ async function defineElement(source, baseUrl) {
         return;
       }
       reportUnrendered(this, tagName, failure);
-      const inputs = [...declaredDefaults(def).keys()].filter((key) => !isPrivateStateKey(key));
+      const inputs = Object.keys(def.state ?? {}).filter((key) => !isPrivateStateKey(key) && !(connectDefaults.has(key) && connectDefaults.get(key) === undefined));
       let lastMessage = failure.message;
       let queued = false;
       const watch = effect(() => {
@@ -5445,6 +5992,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) {
@@ -5455,12 +6191,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;
@@ -5488,6 +6219,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));
     }
@@ -5595,6 +6328,7 @@ export {
   SLOT_WHITESPACE,
   SUPPORTED_SCHEMA_VERSION,
   _resetPrivatePropWarnings,
+  absorbAttribute,
   applyStyle,
   bodyNeedsEraser,
   booleanAttrValue,
@@ -5603,15 +6337,19 @@ export {
   camelToKebab,
   canvasStyleValue,
   captureSlotted,
+  commentedRuleText,
   cssPropertyName,
   cssRuleText,
+  declaredDefaults,
   defineElement,
   distributeSlots,
   documentStyleText,
   elementDefinition,
   enumeratedAttrNames,
+  evaluateTemplateValue,
   hasSchemaKeywords,
   hashCss,
+  instanceSupplies,
   isDeclarationAtRule,
   isKeyframesAtRule,
   isNestedSelectorKey,
@@ -5628,6 +6366,7 @@ export {
   redefineElement,
   releaseElementStyles,
   renderNode,
+  replaceListRow,
   resetDocumentStyles,
   resolve,
   resolveAtQuery,
@@ -5645,7 +6384,10 @@ export {
   setCanvasDelinkPopovers,
   setCanvasViewportTranspose,
   setDocumentParser,
+  setModuleLoader,
   setNpmModuleResolver,
+  setProjectFormulas,
+  setRemoteLookupHandler,
   setResolveToken,
   setRootMedia,
   setSkipAutoRequests,
@@ -5657,8 +6399,9 @@ export {
   toCSSText,
   transposeCanvasOverlaySelector,
   transposeCanvasPopoverSelector,
-  transposeCanvasUnits
+  transposeCanvasUnits,
+  updateInstanceProps
 };
 
-//# debugId=E573B4C42927B2CC64756E2164756E21
+//# debugId=00BEC97E8AE119E064756E2164756E21
 //# sourceMappingURL=runtime.js.map