@jxsuite/runtime 4.0.3 → 5.1.0

package/dist/runtime.js

@@ -43,7 +43,7 @@ var toHandlerKey = cacheStringFunction((str) => {
   return s;
 });
 var hasChanged = (value, oldValue) => !Object.is(value, oldValue);
-var specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
+var specialBooleanAttrs = `itemscope,allowfullscreen,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
@@ -805,19 +805,41 @@ var arrayInstrumentations = {
 };
 function iterator(self2, method, wrapValue) {
   const arr = shallowReadArray(self2);
-  const iter = arr[method]();
+  const methodFn = arr[method];
+  const iter = methodFn.call(arr);
   if (arr !== self2 && !isShallow(self2)) {
-    iter._next = iter.next;
-    iter.next = () => {
-      const result = iter._next();
-      if (!result.done) {
-        result.value = wrapValue(result.value);
+    if (iter[Symbol.toStringTag] === "Array Iterator") {
+      const wrapped = Object.create(Object.getPrototypeOf(iter));
+      wrapped.next = () => wrapResult(iter.next(), wrapValue);
+      if (methodFn !== arrayProto[method]) {
+        Object.defineProperties(wrapped, {
+          return: {
+            get() {
+              const fn = iter.return;
+              return typeof fn === "function" ? fn.bind(iter) : fn;
+            }
+          },
+          throw: {
+            get() {
+              const fn = iter.throw;
+              return typeof fn === "function" ? fn.bind(iter) : fn;
+            }
+          }
+        });
       }
-      return result;
-    };
+      return wrapped;
+    }
+    iter._next = iter.next;
+    iter.next = () => wrapResult(iter._next(), wrapValue);
   }
   return iter;
 }
+function wrapResult(result, wrapValue) {
+  if (!result.done) {
+    result.value = wrapValue(result.value);
+  }
+  return result;
+}
 var arrayProto = Array.prototype;
 function apply(self2, method, fn, thisArg, wrappedRetFn, args) {
   const arr = shallowReadArray(self2);
@@ -1192,6 +1214,8 @@ function createInstrumentationGetter(isReadonly2, shallow) {
       return !isReadonly2;
     } else if (key === "__v_isReadonly") {
       return isReadonly2;
+    } else if (key === "__v_isShallow") {
+      return shallow;
     } else if (key === "__v_raw") {
       return target;
     }
@@ -1403,6 +1427,21 @@ function computed(getterOrOptions, debugOptions, isSSR = false) {
 }
 
 // ../schema/src/guards.ts
+function isString2(value) {
+  return typeof value === "string";
+}
+function isNumber(value) {
+  return typeof value === "number";
+}
+function isBoolean(value) {
+  return typeof value === "boolean";
+}
+function isFunction2(value) {
+  return typeof value === "function";
+}
+function isNonNullObject(value) {
+  return typeof value === "object" && value !== null;
+}
 function isJsonObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -1452,14 +1491,17 @@ function isTemplateString(value) {
 function bodyReturnsValue(body) {
   return /\breturn\b[^\S\n]*(?![;}\s]|$)/.test(body);
 }
+function isNestedStyle(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 function paramNames(parameters) {
   if (!parameters) {
     return [];
   }
-  return parameters.map((p) => typeof p === "string" ? p : p.name);
+  return parameters.map((p) => isString2(p) ? p : p.name);
 }
 function isTagExpression(tagName) {
-  if (!isJsonObject(tagName) || !isJsonObject(tagName.$expression)) {
+  if (typeof tagName !== "object" || tagName === null || Array.isArray(tagName) || !isJsonObject(tagName.$expression)) {
     return false;
   }
   const expression = tagName.$expression;
@@ -1467,7 +1509,7 @@ function isTagExpression(tagName) {
     return typeof expression.value === "string" && typeof expression.initial === "string";
   }
   if (expression.operator === "switch") {
-    return isJsonObject(expression.cases) && Object.values(expression.cases).every((tag) => typeof tag === "string") && typeof expression.default === "string";
+    return isJsonObject(expression.cases) && Object.values(expression.cases).every((tag) => isString2(tag)) && typeof expression.default === "string";
   }
   return false;
 }
@@ -1541,7 +1583,10 @@ function splitSelectorList(selector) {
     }
   }
   members.push(selector.slice(start));
-  const trimmed = members.map((member) => member.trim()).filter((member) => member !== "");
+  const trimmed = members.flatMap((member) => {
+    const text = member.trim();
+    return text === "" ? [] : [text];
+  });
   return trimmed.length > 0 ? trimmed : [selector];
 }
 function transposeCanvasPopoverSelector(selector) {
@@ -1558,7 +1603,7 @@ function transposeOpenAttribute(selector, options) {
       return out + selector.slice(from);
     }
     let start = at;
-    while (start > 0 && !COMPOUND_BREAK.test(selector[start - 1])) {
+    while (start > 0 && !COMPOUND_BREAK.test(selector.charAt(start - 1))) {
       start -= 1;
     }
     const type = LEADING_TYPE.exec(selector.slice(start, at))?.[0]?.toLowerCase();
@@ -1577,8 +1622,8 @@ function transposeCanvasOverlaySelector(selector, options = {}) {
 var COLOR_SCHEME_ATTR = "data-color-scheme";
 var COLOR_SCHEME_STORAGE_KEY = "jx-color-scheme";
 function pureSchemeOf(query) {
-  const m = /^\(\s*prefers-color-scheme\s*:\s*(light|dark)\s*\)$/.exec(query.trim());
-  return m?.[1] ?? null;
+  const scheme = /^\(\s*prefers-color-scheme\s*:\s*(light|dark)\s*\)$/.exec(query.trim())?.[1];
+  return scheme === "light" || scheme === "dark" ? scheme : null;
 }
 function schemeSelectors(selector, scheme) {
   if (selector === ":root" || selector === "html") {
@@ -1663,7 +1708,7 @@ function buildStyleRules(style, options = {}) {
     if (isRef2(value)) {
       return reactive ? resolveValue?.(property, value, target) ?? null : null;
     }
-    if (typeof value === "object") {
+    if (isNonNullObject(value)) {
       return null;
     }
     const raw = String(value);
@@ -1704,15 +1749,18 @@ function buildStyleRules(style, options = {}) {
       resolved = transposed;
     }
     const text = cssRuleText(conditions, resolved, declarations);
-    rules.push({
+    const rule = {
       text,
       conditions: [...conditions],
       selector: resolved,
       declarations,
       target,
-      key: hashCss(text),
-      ...typeof description === "string" && description !== "" ? { description } : {}
-    });
+      key: hashCss(text)
+    };
+    if (isString2(description) && description !== "") {
+      rule.description = description;
+    }
+    rules.push(rule);
   };
   const emitKeyframes = (atKey, block, conditions) => {
     const name = atKey.slice("@keyframes".length).trim();
@@ -1859,7 +1907,13 @@ function readPath(root, path) {
 // src/expression.ts
 function scopeMap(state) {
   const map = state.$map;
-  return map && typeof map === "object" ? map : undefined;
+  return isNonNullObject(map) ? map : undefined;
+}
+function isNodeOperand(operand) {
+  return isNonNullObject(operand) && !Array.isArray(operand) && "operator" in operand;
+}
+function isRefOperand(operand) {
+  return isNonNullObject(operand) && !Array.isArray(operand) && "$ref" in operand;
 }
 var MUTATING_OPS = new Set([
   "=",
@@ -1978,34 +2032,57 @@ var BLESSED_GLOBALS = new Set([
   "String/fromCodePoint",
   ...INTL_HELPER_PATHS
 ]);
-var BLESSED_HELPERS = {
-  "Intl/compare": (a, b, locale, options) => new Intl.Collator(locale ?? DEFAULT_FORMAT_LOCALE, options).compare(a, b),
-  "Intl/displayName": (code, type, locale, options) => new Intl.DisplayNames(locale ?? DEFAULT_FORMAT_LOCALE, {
-    ...options,
-    type: type ?? "language"
-  }).of(code),
-  "Intl/formatDate": (value, locale, options) => new Intl.DateTimeFormat(locale ?? DEFAULT_FORMAT_LOCALE, {
-    timeZone: DEFAULT_TIME_ZONE,
-    ...options
-  }).format(new Date(value)),
-  "Intl/formatList": (values, locale, options) => new Intl.ListFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(values),
-  "Intl/formatNumber": (value, locale, options) => new Intl.NumberFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(value),
-  "Intl/formatRelativeTime": (value, unit, locale, options) => new Intl.RelativeTimeFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(value, unit),
-  "Intl/plural": (value, locale, options) => new Intl.PluralRules(locale ?? DEFAULT_FORMAT_LOCALE, options).select(value),
-  "Intl/segment": (value, granularity, locale) => [
-    ...new Intl.Segmenter(locale ?? DEFAULT_FORMAT_LOCALE, {
-      granularity: granularity ?? "grapheme"
-    }).segment(value)
-  ].map((part) => part.segment)
-};
+var BLESSED_HELPERS = new Map([
+  [
+    "Intl/compare",
+    (a, b, locale, options) => new Intl.Collator(locale ?? DEFAULT_FORMAT_LOCALE, options).compare(a, b)
+  ],
+  [
+    "Intl/displayName",
+    (code, type, locale, options) => new Intl.DisplayNames(locale ?? DEFAULT_FORMAT_LOCALE, {
+      ...options,
+      type: type ?? "language"
+    }).of(code)
+  ],
+  [
+    "Intl/formatDate",
+    (value, locale, options) => new Intl.DateTimeFormat(locale ?? DEFAULT_FORMAT_LOCALE, {
+      timeZone: DEFAULT_TIME_ZONE,
+      ...options
+    }).format(new Date(value))
+  ],
+  [
+    "Intl/formatList",
+    (values, locale, options) => new Intl.ListFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(values)
+  ],
+  [
+    "Intl/formatNumber",
+    (value, locale, options) => new Intl.NumberFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(value)
+  ],
+  [
+    "Intl/formatRelativeTime",
+    (value, unit, locale, options) => new Intl.RelativeTimeFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(value, unit)
+  ],
+  [
+    "Intl/plural",
+    (value, locale, options) => new Intl.PluralRules(locale ?? DEFAULT_FORMAT_LOCALE, options).select(value)
+  ],
+  [
+    "Intl/segment",
+    (value, granularity, locale) => [
+      ...new Intl.Segmenter(locale ?? DEFAULT_FORMAT_LOCALE, {
+        granularity: granularity ?? "grapheme"
+      }).segment(value)
+    ].map((part) => part.segment)
+  ]
+]);
 function withPageLocale(path, args, state) {
   const index = INTL_LOCALE_PARAM[path];
   if (index === undefined || index < 0 || args[index] != null) {
     return args;
   }
-  const page = state.$page;
-  const locale = page?.locale;
-  if (typeof locale !== "string" || locale === "") {
+  const locale = readPath(state.$page, "locale");
+  if (!isString2(locale) || locale === "") {
     return args;
   }
   const filled = [...args];
@@ -2038,20 +2115,23 @@ function resolveOperand(operand, state, event, iterCtx, trace) {
   if (operand === null || operand === undefined) {
     return operand;
   }
-  if (typeof operand === "object" && !Array.isArray(operand) && "operator" in operand) {
+  if (isNodeOperand(operand)) {
     return evaluateExpression(operand, state, event, iterCtx, trace);
   }
-  if (typeof operand === "object" && !Array.isArray(operand) && "$ref" in operand) {
+  if (isRefOperand(operand)) {
     const resolved = resolveExprRef(operand.$ref, state, event, iterCtx);
     trace?.report(trace.path ?? [], resolved);
     return resolved;
   }
   if (Array.isArray(operand)) {
-    return operand.map((o, i) => resolveOperand(o, state, event, iterCtx, subTrace(trace, i)));
+    return resolveOperands(operand, state, event, iterCtx, trace);
   }
   trace?.report(trace.path ?? [], operand);
   return operand;
 }
+function resolveOperands(operands, state, event, iterCtx, trace) {
+  return operands.map((o, i) => resolveOperand(o, state, event, iterCtx, subTrace(trace, i)));
+}
 function calleeOwner(ref, state, event, iterCtx) {
   const parentRef = (prefix) => {
     const rest = ref.slice(prefix.length);
@@ -2081,11 +2161,11 @@ function resolveExprRef(ref, state, event, iterCtx) {
   if (ref.startsWith("$args/")) {
     const parts = ref.slice("$args/".length).split("/");
     const base = iterCtx?.args?.[parts[0]];
-    return parts.length > 1 ? getPath(base, parts.slice(1).join("/")) : base;
+    return parts.length > 1 ? readPath(base, parts.slice(1).join("/")) : base;
   }
   if (ref.startsWith("event#/")) {
     const path = ref.slice("event#/".length);
-    return getPath(event, path);
+    return readPath(event, path);
   }
   if (ref.startsWith("$map/")) {
     const parts = ref.split("/");
@@ -2099,7 +2179,7 @@ function resolveExprRef(ref, state, event, iterCtx) {
     } else {
       base = map?.[key] ?? state[`$map/${key}`];
     }
-    return parts.length > 2 ? getPath(base, parts.slice(2).join("/")) : base;
+    return parts.length > 2 ? readPath(base, parts.slice(2).join("/")) : base;
   }
   if (ref.startsWith("#/state/")) {
     return readPath(state, ref.slice("#/state/".length));
@@ -2108,10 +2188,10 @@ function resolveExprRef(ref, state, event, iterCtx) {
     return readPath(state, ref.slice("parent#/".length));
   }
   if (ref.startsWith("window#/")) {
-    return getPath(globalThis.window, ref.slice("window#/".length));
+    return readPath(globalThis.window, ref.slice("window#/".length));
   }
   if (ref.startsWith("document#/")) {
-    return getPath(globalThis.document, ref.slice("document#/".length));
+    return readPath(globalThis.document, ref.slice("document#/".length));
   }
   return readPath(state, ref) ?? null;
 }
@@ -2131,7 +2211,7 @@ function resolveWritableRef(ref, state, _event, iterCtx) {
     if (parts.length > 2) {
       const pathParts = parts.slice(2);
       const lastKey = pathParts.pop();
-      const obj = pathParts.length > 0 ? getPath(base, pathParts.join("/")) : base;
+      const obj = pathParts.length > 0 ? readPath(base, pathParts.join("/")) : base;
       return { key: lastKey, obj };
     }
     return {
@@ -2160,6 +2240,37 @@ function evaluateExpression(node, state, event, iterCtx, trace) {
   trace?.report(trace.path ?? [], result);
   return result;
 }
+function applyCoercingOperator(operator, left, right) {
+  switch (operator) {
+    case "+": {
+      return left + right;
+    }
+    case "-": {
+      return left - right;
+    }
+    case "*": {
+      return left * right;
+    }
+    case "/": {
+      return left / right;
+    }
+    case "%": {
+      return left % right;
+    }
+    case "<": {
+      return left < right;
+    }
+    case "<=": {
+      return left <= right;
+    }
+    case ">": {
+      return left > right;
+    }
+    default: {
+      return left >= right;
+    }
+  }
+}
 function evaluateNode(node, state, event, iterCtx, trace) {
   const { operator, target, value, initial } = node;
   if (!BLESSED_OPERATORS.has(operator)) {
@@ -2175,8 +2286,8 @@ function evaluateNode(node, state, event, iterCtx, trace) {
     }
   }
   if (operator === "call") {
-    const calleeRef = target?.$ref;
-    if (typeof calleeRef !== "string") {
+    const calleeRef = isRefOperand(target) ? target.$ref : undefined;
+    if (!isString2(calleeRef)) {
       throw new TypeError("$expression: call target must be a $ref pointer");
     }
     const callDepth = (iterCtx?.callDepth ?? 0) + 1;
@@ -2189,28 +2300,28 @@ function evaluateNode(node, state, event, iterCtx, trace) {
         throw new Error(`$expression: "${calleeRef}" is not a blessed pure global`);
       }
       const globalPath = calleeRef.slice("window#/".length);
-      const helper = BLESSED_HELPERS[globalPath];
+      const helper = BLESSED_HELPERS.get(globalPath);
       if (helper) {
         return helper(...withPageLocale(globalPath, argValues, state));
       }
-      const fn = getPath(globalThis.window, globalPath);
+      const fn = readPath(globalThis.window, globalPath);
       const lastSlash = globalPath.lastIndexOf("/");
-      const thisArg = lastSlash === -1 ? globalThis.window : getPath(globalThis.window, globalPath.slice(0, lastSlash));
+      const thisArg = lastSlash === -1 ? globalThis.window : readPath(globalThis.window, globalPath.slice(0, lastSlash));
       return fn.apply(thisArg, argValues);
     }
     const callee = resolveExprRef(calleeRef, state, event, iterCtx);
-    if (typeof callee === "function") {
+    if (isFunction2(callee)) {
       return callee.apply(calleeOwner(calleeRef, state, event, iterCtx), argValues);
     }
-    if (callee && typeof callee === "object" && "$expression" in callee) {
+    if (isNonNullObject(callee) && "$expression" in callee) {
       const def = callee;
       const args = {};
       for (const [i, p] of (def.parameters ?? []).entries()) {
-        const name = typeof p === "string" ? p : p?.name ?? "";
+        const name = isString2(p) ? p : p?.name ?? "";
         if (!name) {
           continue;
         }
-        args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
+        args[name] = argValues[i] === undefined && isNonNullObject(p) && "default" in p ? p.default : argValues[i];
       }
       return evaluateExpression(def.$expression, state, event, { args, callDepth });
     }
@@ -2247,39 +2358,12 @@ function evaluateNode(node, state, event, iterCtx, trace) {
     const left = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
     const right = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
     switch (operator) {
-      case "+": {
-        return left + right;
-      }
-      case "-": {
-        return left - right;
-      }
-      case "*": {
-        return left * right;
-      }
-      case "/": {
-        return left / right;
-      }
-      case "%": {
-        return left % right;
-      }
       case "===": {
         return left === right;
       }
       case "!==": {
         return left !== right;
       }
-      case "<": {
-        return left < right;
-      }
-      case "<=": {
-        return left <= right;
-      }
-      case ">": {
-        return left > right;
-      }
-      case ">=": {
-        return left >= right;
-      }
       case "&&": {
         return left && right;
       }
@@ -2290,42 +2374,14 @@ function evaluateNode(node, state, event, iterCtx, trace) {
         return left ?? right;
       }
       default: {
-        break;
+        return applyCoercingOperator(operator, left, right);
       }
     }
   }
   if (ASSIGNMENT_OPS.has(operator)) {
     const rhs = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
     const { obj, key } = resolveWritableRef(target.$ref, state, event, iterCtx);
-    switch (operator) {
-      case "=": {
-        obj[key] = rhs;
-        break;
-      }
-      case "+=": {
-        const current = obj[key];
-        obj[key] = current + rhs;
-        break;
-      }
-      case "-=": {
-        const current = obj[key];
-        obj[key] = current - rhs;
-        break;
-      }
-      case "*=": {
-        const current = obj[key];
-        obj[key] = current * rhs;
-        break;
-      }
-      case "/=": {
-        const current = obj[key];
-        obj[key] = current / rhs;
-        break;
-      }
-      default: {
-        break;
-      }
-    }
+    obj[key] = operator === "=" ? rhs : applyCoercingOperator(operator.slice(0, -1), obj[key], rhs);
     return;
   }
   if (ARRAY_METHOD_OPS.has(operator)) {
@@ -2354,34 +2410,32 @@ function evaluateNode(node, state, event, iterCtx, trace) {
   }
   if (PURE_METHOD_OPS.has(operator)) {
     const receiver = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
-    const args = value === undefined ? [] : Array.isArray(value) ? resolveOperand(value, state, event, iterCtx, subTrace(trace, "value")) : [resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"))];
-    const method = receiver?.[operator];
-    if (typeof method !== "function") {
+    const args = value === undefined ? [] : Array.isArray(value) ? resolveOperands(value, state, event, iterCtx, subTrace(trace, "value")) : [resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"))];
+    const method = readPath(receiver, operator);
+    if (!isFunction2(method)) {
       return;
     }
     return method.apply(receiver, args);
   }
   if (AGGREGATE_OPS.has(operator)) {
     const arr = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
+    const perItem = value;
     if (operator === "reduce") {
       let acc = resolveOperand(initial, state, event, iterCtx, subTrace(trace, "initial"));
       for (const [index, item] of arr.entries()) {
-        acc = evaluateExpression(value, state, event, { acc, index, item }, index === 0 ? subTrace(trace, "value") : undefined);
+        acc = evaluateExpression(perItem, state, event, { acc, index, item }, index === 0 ? subTrace(trace, "value") : undefined);
       }
       return acc;
     }
     if (operator === "map") {
-      return arr.map((item, index) => evaluateExpression(value, state, event, { ...iterCtx, index, item }, index === 0 ? subTrace(trace, "value") : undefined));
+      return arr.map((item, index) => evaluateExpression(perItem, state, event, { ...iterCtx, index, item }, index === 0 ? subTrace(trace, "value") : undefined));
     }
     if (operator === "filter") {
-      return arr.filter((item, index) => evaluateExpression(value, state, event, { ...iterCtx, index, item }, index === 0 ? subTrace(trace, "value") : undefined));
+      return arr.filter((item, index) => evaluateExpression(perItem, state, event, { ...iterCtx, index, item }, index === 0 ? subTrace(trace, "value") : undefined));
     }
   }
   return;
 }
-function getPath(obj, path) {
-  return readPath(obj, path);
-}
 function evaluateOperand(operand, state, event, iterCtx) {
   return resolveOperand(operand, state, event, iterCtx);
 }
@@ -2428,37 +2482,41 @@ function formatSrcset(candidates) {
 }
 
 // src/statements.ts
-function statementKind(statement) {
+function classifyStatement(statement) {
   if ("operator" in statement) {
-    return "expression";
+    return { kind: "expression", node: statement };
   }
   if ("if" in statement) {
-    return "if";
+    return { kind: "if", node: statement };
   }
   if ("$switch" in statement) {
-    return "switch";
+    return { kind: "switch", node: statement };
   }
   if ("stopPropagation" in statement) {
-    return "stopPropagation";
+    return { kind: "stopPropagation" };
   }
   if ("preventDefault" in statement) {
-    return "preventDefault";
+    return { kind: "preventDefault" };
   }
-  return "dispatch";
+  return { kind: "dispatch", node: statement };
+}
+function isThenable(value) {
+  return (isNonNullObject(value) || isFunction2(value)) && "then" in value && isFunction2(value.then);
 }
 async function runStatements(statements, state, event, opts = {}) {
   const iterCtx = opts.args ? { args: opts.args } : undefined;
   for (const statement of statements) {
-    switch (statementKind(statement)) {
+    const classified = classifyStatement(statement);
+    switch (classified.kind) {
       case "expression": {
-        const result = evaluateExpression(statement, state, event, iterCtx);
-        if (result && typeof result.then === "function") {
+        const result = evaluateExpression(classified.node, state, event, iterCtx);
+        if (isThenable(result)) {
           await result;
         }
         break;
       }
       case "if": {
-        const branch = statement;
+        const branch = classified.node;
         const taken = evaluateOperand(branch.if, state, event, iterCtx) ? branch.then : branch.else;
         if (Array.isArray(taken)) {
           await runStatements(taken, state, event, opts);
@@ -2466,7 +2524,7 @@ async function runStatements(statements, state, event, opts = {}) {
         break;
       }
       case "switch": {
-        const branch = statement;
+        const branch = classified.node;
         const key = String(evaluateOperand(branch.$switch, state, event, iterCtx));
         const cases = branch.cases ?? {};
         const taken = Object.hasOwn(cases, key) ? cases[key] : branch.default;
@@ -2476,8 +2534,8 @@ async function runStatements(statements, state, event, opts = {}) {
         break;
       }
       case "dispatch": {
-        const dispatch = statement;
-        const fallback = typeof opts.target === "function" ? opts.target() : opts.target;
+        const dispatch = classified.node;
+        const fallback = isFunction2(opts.target) ? opts.target() : opts.target;
         const target = event?.currentTarget ?? fallback;
         if (!target) {
           break;
@@ -2553,7 +2611,7 @@ function serializeCookie(name, value, options) {
 var SUPPORTED_SCHEMA_VERSION = 1;
 var _schemaVersionWarned = false;
 function checkSchemaVersion($schema) {
-  if (_schemaVersionWarned || typeof $schema !== "string") {
+  if (_schemaVersionWarned || !isString2($schema)) {
     return;
   }
   const match = $schema.match(/\/schema\/v(\d+)\b/);
@@ -2563,19 +2621,28 @@ function checkSchemaVersion($schema) {
   }
 }
 async function Jx(source, target = document.body, options) {
-  const base = options?.base ? new URL(options.base, location.href).href : typeof source === "string" ? new URL(source, location.href).href : location.href;
+  const base = options?.base ? new URL(options.base, location.href).href : isString2(source) ? new URL(source, location.href).href : location.href;
   const doc = await resolve(source);
   if (doc.$media) {
     _rootMedia = doc.$media;
   }
-  const mounted = await mount(doc, target, {
-    base,
-    ...options?.onNodeCreated ? { onNodeCreated: options.onNodeCreated } : {},
-    ...options?.signal ? { signal: options.signal } : {}
-  });
+  const mountOptions = { base };
+  if (options?.onNodeCreated) {
+    mountOptions.onNodeCreated = options.onNodeCreated;
+  }
+  if (options?.signal) {
+    mountOptions.signal = options.signal;
+  }
+  const mounted = await mount(doc, target, mountOptions);
   return mounted.scope;
 }
+function isScopeHook(value) {
+  return isFunction2(value);
+}
 var HOST_SCOPE_RESERVED = /^[$#]/;
+function hostScopeOf(scope) {
+  return scope;
+}
 function assertHostScope(scope) {
   for (const key of Object.keys(scope)) {
     if (HOST_SCOPE_RESERVED.test(key)) {
@@ -2584,17 +2651,23 @@ function assertHostScope(scope) {
   }
 }
 async function mount(doc, target, options = {}) {
-  const hostScope = options.scope ?? {};
+  const hostScope = options.scope ? hostScopeOf(options.scope) : {};
   assertHostScope(hostScope);
   const base = options.base ? new URL(options.base, location.href).href : location.href;
   const ctx = {
     base,
     media: options.media ?? doc.$media ?? null,
-    root: null,
-    ...options.resolver ? { resolver: options.resolver } : {},
-    ...options.skipServerFunctions === undefined ? {} : { skipServerFunctions: options.skipServerFunctions },
-    ...options.skipAutoRequests === undefined ? {} : { skipAutoRequests: options.skipAutoRequests }
+    root: null
   };
+  if (options.resolver) {
+    ctx.resolver = options.resolver;
+  }
+  if (options.skipServerFunctions !== undefined) {
+    ctx.skipServerFunctions = options.skipServerFunctions;
+  }
+  if (options.skipAutoRequests !== undefined) {
+    ctx.skipAutoRequests = options.skipAutoRequests;
+  }
   checkSchemaVersion(doc.$schema);
   if (doc.$elements) {
     await registerElements(doc.$elements, base, ctx);
@@ -2611,9 +2684,11 @@ async function mount(doc, target, options = {}) {
         elements.add(el.tagName.toLowerCase());
       }
       options.onNodeCreated?.(el, path, def, state);
-    },
-    ...options.onNodeMoved ? { onNodeMoved: options.onNodeMoved } : {}
+    }
   };
+  if (options.onNodeMoved) {
+    renderOptions.onNodeMoved = options.onNodeMoved;
+  }
   const { result: root, stop } = runScoped(() => renderNode(doc, scope, renderOptions));
   ctx.root = root;
   let mounted = false;
@@ -2624,11 +2699,11 @@ async function mount(doc, target, options = {}) {
     }
     disposed = true;
     options.signal?.removeEventListener("abort", dispose);
+    root.remove();
     stop();
-    if (mounted && typeof scope.onUnmount === "function") {
+    if (mounted && isScopeHook(scope.onUnmount)) {
       scope.onUnmount(scope);
     }
-    root.remove();
   };
   if (options.signal?.aborted) {
     dispose();
@@ -2636,7 +2711,7 @@ async function mount(doc, target, options = {}) {
     options.signal?.addEventListener("abort", dispose, { once: true });
     target.append(root);
     mounted = true;
-    if (typeof scope.onMount === "function") {
+    if (isScopeHook(scope.onMount)) {
       scope.onMount(scope);
     }
   }
@@ -2650,8 +2725,11 @@ function preloadDocument(url, doc) {
     _resolveCache.set(new URL(url, location.href).href, settled);
   } catch {}
 }
+function responseContentType(res) {
+  return res.headers?.get("Content-Type") ?? "";
+}
 async function resolve(source, ctx) {
-  if (typeof source !== "string") {
+  if (!isString2(source)) {
     return source;
   }
   const served = ctx?.resolver?.(source);
@@ -2665,7 +2743,7 @@ async function resolve(source, ctx) {
     if (!res.ok) {
       throw new Error(`Jx: failed to fetch ${source} (${res.status})`);
     }
-    const contentType = res.headers?.get("Content-Type") ?? "";
+    const contentType = responseContentType(res);
     if (contentType.includes("text/html")) {
       throw new Error(`Jx: ${source} returned HTML, not a document — the host answered a missing file with its ` + `app shell (a single-page fallback), so this path is not served.`);
     }
@@ -2702,7 +2780,6 @@ function setResolveToken(token) {
 function resolveProxyPath(path) {
   return _resolveToken ? `${path}?token=${encodeURIComponent(_resolveToken)}` : path;
 }
-function setSkipContentResolution(_v) {}
 function observeScope(fn) {
   const scope = effectScope(true);
   scope.run(() => {
@@ -2725,19 +2802,19 @@ function setCanvasViewportTranspose(on) {
   _canvasViewportTranspose = on;
 }
 var VIEWPORT_UNIT_RE = /(-?\d*\.?\d+)(?:s|l|d)?v(h|w|min|max|i|b)\b/gi;
-var VIEWPORT_UNIT_MAP = {
-  b: "cqb",
-  h: "cqh",
-  i: "cqi",
-  max: "cqmax",
-  min: "cqmin",
-  w: "cqw"
-};
+var VIEWPORT_UNIT_MAP = new Map([
+  ["b", "cqb"],
+  ["h", "cqh"],
+  ["i", "cqi"],
+  ["max", "cqmax"],
+  ["min", "cqmin"],
+  ["w", "cqw"]
+]);
 function transposeCanvasUnits(value) {
   if (!_canvasViewportTranspose || !value.includes("v")) {
     return value;
   }
-  return value.replace(VIEWPORT_UNIT_RE, (_m, num, dim) => `${num}${VIEWPORT_UNIT_MAP[dim.toLowerCase()] ?? `cq${dim}`}`);
+  return value.replace(VIEWPORT_UNIT_RE, (_m, num, dim) => `${num}${VIEWPORT_UNIT_MAP.get(dim.toLowerCase()) ?? `cq${dim}`}`);
 }
 var _canvasDelinkAnchors = false;
 function setCanvasDelinkAnchors(on) {
@@ -2792,15 +2869,14 @@ function canvasAssetValue(tagName, key, value) {
   const name = key.toLowerCase();
   if (SRCSET_KEYS.has(name)) {
     const candidates = parseSrcset(value);
-    let changed = false;
     const next = candidates.map((candidate) => {
       const resolved = _canvasAssetResolver?.(candidate.url, name) ?? null;
       if (resolved === null || resolved === candidate.url) {
         return candidate;
       }
-      changed = true;
       return { descriptor: candidate.descriptor, url: resolved };
     });
+    const changed = next.some((candidate, index) => candidate !== candidates[index]);
     return changed ? formatSrcset(next) : value;
   }
   if (!isAssetKey(tagName, name)) {
@@ -2831,23 +2907,23 @@ function boundPropKey(key, val, state) {
     return null;
   }
   let sub = null;
-  if (isRefObj(val)) {
+  if (isRef2(val)) {
     if (!val.$ref.startsWith("#/state/")) {
       return null;
     }
     const rest = val.$ref.slice("#/state/".length);
     sub = rest && !rest.includes("/") ? rest : null;
-  } else if (typeof val === "string") {
+  } else if (isString2(val)) {
     sub = PURE_STATE_TEMPLATE.exec(val)?.[1] ?? null;
   }
   if (!sub) {
     return null;
   }
   const stored = toRaw(state)[sub];
-  if (isRef(stored) || typeof stored === "function") {
+  if (isRef(stored) || isFunction2(stored)) {
     return null;
   }
-  if (typeof stored === "object" && stored !== null) {
+  if (isNonNullObject(stored)) {
     return null;
   }
   return sub;
@@ -2885,13 +2961,13 @@ async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
     }
   }
   for (const [key, def] of Object.entries(defs)) {
-    if (typeof def === "string") {
+    if (isString2(def)) {
       if (!def.includes("${")) {
         raw[key] = def;
       }
       continue;
     }
-    if (typeof def === "number" || typeof def === "boolean" || def === null) {
+    if (isNumber(def) || isBoolean(def) || def === null) {
       raw[key] = def;
       continue;
     }
@@ -2899,7 +2975,7 @@ async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
       raw[key] = def;
       continue;
     }
-    if (typeof def === "object") {
+    if (isNonNullObject(def)) {
       if (def.$prototype) {
         continue;
       }
@@ -2921,8 +2997,8 @@ async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
   }
   const state = reactive(raw);
   for (const [key, def] of Object.entries(defs)) {
-    if (typeof def === "string" && def.includes("${")) {
-      state[key] = computed(() => evaluateTemplate(def, state));
+    if (isString2(def) && def.includes("${")) {
+      state[key] = computed(() => evaluateValueTemplate(def, state));
     }
   }
   for (const [key, def] of Object.entries(defs)) {
@@ -2930,17 +3006,7 @@ async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
       const node = def.$expression;
       if (isNamedFormulaDef(def)) {
         const params = def.parameters;
-        state[key] = (...argValues) => {
-          const args = {};
-          for (const [i, p] of params.entries()) {
-            const name = typeof p === "string" ? p : p?.name ?? "";
-            if (!name) {
-              continue;
-            }
-            args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
-          }
-          return evaluateExpression(node, state, null, { args });
-        };
+        state[key] = (...argValues) => evaluateExpression(node, state, null, { args: bindPositionalArgs(params, argValues) });
       } else if (isMutating(node.operator)) {
         const handler = (s, event) => evaluateExpression(node, s, event);
         state[key] = handler;
@@ -2954,17 +3020,10 @@ async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
       const { body } = def;
       if (Array.isArray(def.parameters) && def.parameters.length > 0) {
         const params = def.parameters;
-        state[key] = (...argValues) => {
-          const args = {};
-          for (const [i, p] of params.entries()) {
-            const name = typeof p === "string" ? p : p?.name ?? "";
-            if (!name) {
-              continue;
-            }
-            args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
-          }
-          return runStatements(body, state, null, { args, target: dispatchRoot });
-        };
+        state[key] = (...argValues) => runStatements(body, state, null, {
+          args: bindPositionalArgs(params, argValues),
+          target: dispatchRoot
+        });
       } else {
         const handler = (s, event) => {
           runStatements(body, s, event ?? null, { target: dispatchRoot });
@@ -2995,6 +3054,17 @@ async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
   }
   return state;
 }
+function bindPositionalArgs(parameters, argValues) {
+  const args = {};
+  for (const [i, p] of parameters.entries()) {
+    const name = isString2(p) ? p : p?.name ?? "";
+    if (!name) {
+      continue;
+    }
+    args[name] = argValues[i] === undefined && p !== null && !isString2(p) && "default" in p ? p.default : argValues[i];
+  }
+  return args;
+}
 function hasSchemaKeywords(obj) {
   for (const k of Object.keys(obj)) {
     if (SCHEMA_KEYWORDS2.has(k)) {
@@ -3003,10 +3073,50 @@ function hasSchemaKeywords(obj) {
   }
   return false;
 }
+var TEMPLATE_PARAMS = ["state", "$map", "item", "index", "$site", "$page"];
+function templateArgs(state) {
+  const $map = rowContext(state);
+  return [state, $map, $map?.item, $map?.index, state.$site, state.$page];
+}
 function evaluateTemplate(str, state) {
-  const $map = state?.$map;
-  const fn = new Function("state", "$map", "item", "index", `return \`${str}\``);
-  return fn(state, $map, $map?.item, $map?.index);
+  let fn = textTemplates.get(str);
+  if (!fn) {
+    fn = new Function(...TEMPLATE_PARAMS, `return \`${str}\``);
+    remember(textTemplates, str, fn);
+  }
+  return fn(...templateArgs(state));
+}
+var textTemplates = new Map;
+var valueTemplates = new Map;
+var TEMPLATE_CACHE_MAX = 4096;
+function remember(cache, source, fn) {
+  if (cache.size >= TEMPLATE_CACHE_MAX) {
+    cache.clear();
+  }
+  cache.set(source, fn);
+}
+var reportedTemplates = new Set;
+var _templateErrorHandler = null;
+function setTemplateErrorHandler(handler) {
+  _templateErrorHandler = handler;
+}
+function bindTemplate(source, run, fallback) {
+  effect(() => {
+    try {
+      run();
+    } catch (error) {
+      if (_templateErrorHandler) {
+        _templateErrorHandler(error instanceof Error ? error : new Error(String(error)), source);
+      } else if (!reportedTemplates.has(source)) {
+        reportedTemplates.add(source);
+        console.warn(`jx: template ${JSON.stringify(source)} threw:`, error);
+      }
+      fallback?.();
+    }
+  });
+}
+function rowContext(state) {
+  return state.$map;
 }
 function isSingleExpression(str) {
   if (!str.startsWith("${") || !str.endsWith("}")) {
@@ -3026,18 +3136,45 @@ function isSingleExpression(str) {
   }
   return false;
 }
-function evaluateAttrTemplate(str, state) {
+function evaluateValueTemplate(str, state) {
   if (!isSingleExpression(str)) {
     return evaluateTemplate(str, state);
   }
-  const $map = state?.$map;
-  const fn = new Function("state", "$map", "item", "index", `return (${str.slice(2, -1)})`);
-  return fn(state, $map, $map?.item, $map?.index);
+  let fn = valueTemplates.get(str);
+  if (!fn) {
+    fn = new Function(...TEMPLATE_PARAMS, `return (${str.slice(2, -1)})`);
+    remember(valueTemplates, str, fn);
+  }
+  return fn(...templateArgs(state));
+}
+var _npmModuleResolver = null;
+function setNpmModuleResolver(resolver) {
+  _npmModuleResolver = resolver;
+}
+var NPM_SCHEME = "npm:";
+async function importSource(src, base) {
+  if (src.startsWith(NPM_SCHEME)) {
+    const specifier = src.slice(NPM_SCHEME.length);
+    return importModule(_npmModuleResolver?.(specifier) ?? specifier);
+  }
+  if (base) {
+    try {
+      return await importModule(new URL(src, base).href);
+    } catch {
+      return importModule(src);
+    }
+  }
+  return importModule(src);
+}
+function importModule(specifier) {
+  return import(specifier);
 }
 var _moduleCache = new Map;
 var _moduleLoaders = new Map;
+var _hostSeeded = new Set;
 function preloadModule(specifier, mod) {
-  if (typeof mod === "function") {
+  _hostSeeded.add(specifier);
+  if (isFunction2(mod)) {
     _moduleCache.delete(specifier);
     _moduleLoaders.set(specifier, mod);
     return;
@@ -3054,17 +3191,21 @@ function seededModule(src) {
   if (!pending) {
     return;
   }
-  if (typeof pending !== "function") {
+  if (!isFunction2(pending)) {
     return pending;
   }
-  const load = Promise.resolve(pending()).then((mod) => {
-    _moduleCache.set(src, mod);
-    _moduleLoaders.delete(src);
-    return mod;
-  }, (error) => {
-    _moduleLoaders.set(src, pending);
-    throw error;
-  });
+  const started = pending();
+  const load = (async () => {
+    try {
+      const mod = await started;
+      _moduleCache.set(src, mod);
+      _moduleLoaders.delete(src);
+      return mod;
+    } catch (error) {
+      _moduleLoaders.set(src, pending);
+      throw error;
+    }
+  })();
   _moduleLoaders.set(src, load);
   return load;
 }
@@ -3082,7 +3223,7 @@ async function resolveFunction(def, state, key, base) {
     return noop;
   }
   let fn;
-  if (typeof def.body === "string") {
+  if (isString2(def.body)) {
     const params = resolveParamNames(def);
     fn = new Function(...params, def.body);
     Object.defineProperty(fn, "name", {
@@ -3102,20 +3243,11 @@ async function resolveFunction(def, state, key, base) {
     } else if (seeded) {
       mod = seeded;
     } else {
-      if (base) {
-        const resolvedSrc = new URL(src, base).href;
-        try {
-          mod = await import(resolvedSrc);
-        } catch {
-          mod = await import(src);
-        }
-      } else {
-        mod = await import(src);
-      }
+      mod = await importSource(src, base);
       _moduleCache.set(src, mod);
     }
     const candidate = mod[exportName] ?? mod.default?.[exportName];
-    if (typeof candidate !== "function") {
+    if (!isFunction2(candidate)) {
       throw new TypeError(`Jx: export "${exportName}" not found or not a function in "${src}"`);
     }
     fn = candidate;
@@ -3123,11 +3255,7 @@ async function resolveFunction(def, state, key, base) {
   const hasParams = (def.parameters ?? def.arguments ?? []).length > 0;
   let isComputed = false;
   if (!hasParams) {
-    if (typeof def.body === "string") {
-      isComputed = bodyReturnsValue(def.body);
-    } else if (fn) {
-      isComputed = fn.length <= 1 && bodyReturnsValue(fn.toString());
-    }
+    isComputed = isString2(def.body) ? bodyReturnsValue(def.body) : fn.length <= 1 && bodyReturnsValue(fn.toString());
   }
   if (isComputed) {
     return computed(() => fn(state));
@@ -3172,6 +3300,22 @@ var RESERVED_KEYS = new Set([
   "cases",
   "observedAttributes"
 ]);
+function inheritScope(parent) {
+  return Object.create(parent);
+}
+function scopeMedia(state) {
+  return state["$media"] ?? {};
+}
+function elementProperties(el) {
+  return el;
+}
+function instanceStateOf(el) {
+  const state = elementProperties(el)._state;
+  return isNonNullObject(state) ? state : null;
+}
+function isEventHandler(value) {
+  return isFunction2(value);
+}
 var warnedRefChildren = new Set;
 var SVG_NS = "http://www.w3.org/2000/svg";
 var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
@@ -3186,11 +3330,13 @@ function elementNamespace(tagName, inherited) {
 }
 function renderNode(def, state, options) {
   const path = options?._path ?? [];
-  if (typeof def === "string" || typeof def === "number" || typeof def === "boolean") {
+  if (isString2(def) || isNumber(def) || isBoolean(def)) {
     const textNode = document.createTextNode(String(def));
-    if (typeof def === "string" && isTemplateString(def)) {
-      effect(() => {
+    if (isTemplateString(def)) {
+      bindTemplate(def, () => {
         textNode.textContent = evaluateTemplate(def, state);
+      }, () => {
+        textNode.textContent = "";
       });
     }
     return textNode;
@@ -3199,9 +3345,9 @@ function renderNode(def, state, options) {
   for (const [key, val] of Object.entries(def)) {
     if (key.startsWith("$") && !RESERVED_KEYS.has(key)) {
       if (localState === state) {
-        localState = Object.create(state);
+        localState = inheritScope(state);
       }
-      localState[key] = isRefObj(val) ? resolveRef(val.$ref, state) : val;
+      localState[key] = isRef2(val) ? resolveRef(val.$ref, state) : val;
     }
   }
   if ("$ref" in def && !def.tagName) {
@@ -3236,7 +3382,7 @@ function renderNode(def, state, options) {
   if (def.style && tagName.includes("-")) {
     callSiteStyles.set(el, def.style);
   }
-  applyStyle(el, def.style ?? {}, localState["$media"] ?? {}, localState);
+  applyStyle(el, def.style ?? {}, scopeMedia(localState), localState);
   applyAttributes(el, def.attributes ?? {}, localState);
   const kids = def.children;
   if (isMappedArray(kids)) {
@@ -3272,11 +3418,10 @@ function applyProperties(el, def, state) {
 function bindHandler(el, key, val, state) {
   const type = key.slice(2);
   const scope = state;
-  if (isRefObj(val)) {
+  if (isRef2(val)) {
     const handler = resolveRef(val.$ref, state);
-    if (typeof handler === "function") {
-      const handlerFn = handler;
-      el.addEventListener(type, (e) => handlerFn(scope, e));
+    if (isEventHandler(handler)) {
+      el.addEventListener(type, (e) => handler(scope, e));
     }
     return true;
   }
@@ -3287,7 +3432,7 @@ function bindHandler(el, key, val, state) {
     });
     return true;
   }
-  if (isFunctionDef(val) && typeof val.body === "string") {
+  if (isFunctionDef(val) && isString2(val.body)) {
     const params = resolveParamNames(val);
     const fn = new Function(...params, val.body);
     el.addEventListener(type, (e) => fn(scope, e));
@@ -3308,12 +3453,12 @@ function bindDefinitionHandlers(host, def, state) {
   }
 }
 function bindProperty(el, key, val, state) {
-  const target = el;
+  const target = elementProperties(el);
   const boundProp = boundPropKey(key, val, state);
   if (boundProp) {
     el.dataset.jxBoundProp = boundProp;
   }
-  const asAsset = (resolved) => typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+  const asAsset = (resolved) => isString2(resolved) ? canvasAssetValue(el.tagName, key, resolved) : resolved;
   const write = (resolved) => {
     const node = el;
     if (key === "className" && !(node instanceof HTMLElement)) {
@@ -3325,7 +3470,7 @@ function bindProperty(el, key, val, state) {
     }
     target[key] = resolved;
   };
-  if (isRefObj(val)) {
+  if (isRef2(val)) {
     const refVal = val;
     if (key === "id") {
       target[key] = resolveRef(refVal.$ref, state);
@@ -3337,8 +3482,9 @@ function bindProperty(el, key, val, state) {
     return;
   }
   if (isTemplateString(val)) {
-    effect(() => {
-      write(asAsset(evaluateTemplate(val, state)));
+    const template = val;
+    bindTemplate(template, () => {
+      write(asAsset(evaluateTemplate(template, state)));
     });
     return;
   }
@@ -3424,14 +3570,14 @@ function textSink(tag) {
       write();
     },
     text() {
-      return tag.textContent ?? "";
+      return tag.textContent;
     }
   };
 }
 function openSink(doc) {
   const view = doc.defaultView;
   const SheetConstructor = view?.CSSStyleSheet;
-  if (typeof SheetConstructor === "function" && Array.isArray(doc.adoptedStyleSheets)) {
+  if (isFunction2(SheetConstructor) && Array.isArray(doc.adoptedStyleSheets)) {
     try {
       const sheet = new SheetConstructor;
       doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];
@@ -3442,9 +3588,12 @@ function openSink(doc) {
   }
   const tag = doc.createElement("style");
   tag.dataset.jxSheet = "";
-  (doc.head ?? doc.documentElement).append(tag);
+  (documentHead(doc) ?? doc.documentElement).append(tag);
   return tag.sheet ? cssomSink(tag.sheet, () => tag.remove()) : textSink(tag);
 }
+function documentHead(doc) {
+  return doc.head;
+}
 var sheetStates = new WeakMap;
 function sheetStateFor(doc) {
   const existing = sheetStates.get(doc);
@@ -3534,7 +3683,7 @@ function documentStyleText(doc = document) {
 `);
 }
 function declaresDisplay(style) {
-  return Boolean(style) && typeof style === "object" && "display" in style;
+  return isNonNullObject(style) && "display" in style;
 }
 var callSiteStyles = new WeakMap;
 function mergeStyle(base, over) {
@@ -3544,7 +3693,7 @@ function mergeStyle(base, over) {
   const out = { ...base };
   for (const [key, value] of Object.entries(over)) {
     const prior = out[key];
-    out[key] = prior !== null && typeof prior === "object" && value !== null && typeof value === "object" && !Array.isArray(value) ? mergeStyle(prior, value) : value;
+    out[key] = isNestedStyle(value) && isNonNullObject(prior) ? mergeStyle(Array.isArray(prior) ? Object.fromEntries(Object.entries(prior)) : prior, value) : value;
   }
   return out;
 }
@@ -3556,7 +3705,7 @@ function reapplyStyle(el, styleDef, mediaQueries = {}, state = {}) {
 }
 function applyStyleInto(el, styleDef, mediaQueries, state, live) {
   releaseElementStyles(el);
-  const doc = el.ownerDocument ?? document;
+  const doc = el.ownerDocument;
   const sheetState = sheetStateFor(doc);
   const transposeSelector = (_canvasDelinkPopovers || _canvasDelinkCommands) && canvasStamped(el) ? (selector) => transposeCanvasOverlaySelector(selector, {
     dialog: el.tagName === "DIALOG"
@@ -3571,11 +3720,16 @@ function applyStyleInto(el, styleDef, mediaQueries, state, live) {
         sources.push({ name: property, value });
         return null;
       }
-      if (serial < 0) {
-        ({ serial } = sheetState);
-        sheetState.serial += 1;
+      let name;
+      if (target === "self") {
+        name = `--jx-s${indirect}`;
+      } else {
+        if (serial < 0) {
+          ({ serial } = sheetState);
+          sheetState.serial += 1;
+        }
+        name = `--jx-r${serial}-${indirect}`;
       }
-      const name = `--jx-r${serial}-${indirect}`;
       indirect += 1;
       sources.push({ name, value });
       return `var(${name})`;
@@ -3618,7 +3772,7 @@ function applyStyleInto(el, styleDef, mediaQueries, state, live) {
     scope.run(() => {
       for (const { name, value } of sources) {
         effect(() => {
-          const resolved = isRefObj(value) ? resolveRef(value.$ref, state) : evaluateTemplate(value, state);
+          const resolved = isRef2(value) ? resolveRef(value.$ref, state) : evaluateTemplate(value, state);
           el.style.setProperty(name, canvasStyleValue(String(resolved ?? "")));
         });
       }
@@ -3647,7 +3801,7 @@ function applyAttributes(el, attrs, state) {
         el.removeAttribute(attr);
         return;
       }
-      if (typeof resolved === "boolean") {
+      if (isBoolean(resolved)) {
         const text = booleanAttrValue(attr, resolved);
         if (text === null) {
           el.removeAttribute(attr);
@@ -3658,10 +3812,10 @@ function applyAttributes(el, attrs, state) {
       }
       el.setAttribute(attr, canvasAssetValue(el.tagName, k, String(resolved)));
     };
-    if (isRefObj(v)) {
+    if (isRef2(v)) {
       effect(() => write(resolveRef(v.$ref, state)));
     } else if (isTemplateString(v)) {
-      effect(() => write(evaluateAttrTemplate(v, state)));
+      bindTemplate(v, () => write(evaluateValueTemplate(v, state)));
     } else {
       write(v);
     }
@@ -3672,7 +3826,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   const anchor = document.createComment("jx-array");
   parentEl.append(anchor);
   const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef, key: keyRef } = arrayDef;
-  const keyPointer = isRefObj(keyRef) ? keyRef.$ref : null;
+  const keyPointer = isRef2(keyRef) ? keyRef.$ref : null;
   const instancePath = _instancePath;
   let warned = false;
   const warnOnce = (message) => {
@@ -3683,12 +3837,12 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   };
   let rows = [];
   const teardown = (row) => {
-    row.scope.stop();
     row.node.remove();
+    row.scope.stop();
   };
   const createRow = (key, item, index) => {
     const map = shallowReactive({ index, item });
-    const child = Object.create(state);
+    const child = inheritScope(state);
     child.$map = map;
     Object.defineProperty(child, "$map/item", { enumerable: true, get: () => map.item });
     Object.defineProperty(child, "$map/index", { enumerable: true, get: () => map.index });
@@ -3735,17 +3889,19 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     rows = next;
   };
   const update = () => {
-    let items = isRefObj(itemsSrc) ? resolveRef(itemsSrc.$ref, state) : itemsSrc;
-    if (Array.isArray(items) && isRefObj(filterRef)) {
+    let items = isRef2(itemsSrc) ? resolveRef(itemsSrc.$ref, state) : itemsSrc;
+    if (Array.isArray(items) && isRef2(filterRef)) {
       const fn = resolveRef(filterRef.$ref, state);
-      if (typeof fn === "function") {
+      if (isFunction2(fn)) {
         items = items.filter(fn);
       }
     }
-    if (Array.isArray(items) && isRefObj(sortRef)) {
+    if (Array.isArray(items) && isRef2(sortRef)) {
       const fn = resolveRef(sortRef.$ref, state);
-      if (typeof fn === "function") {
-        items = [...items].toSorted(fn);
+      if (isFunction2(fn)) {
+        const compare = fn;
+        const unsorted = items;
+        items = [...unsorted].toSorted(compare);
       }
     }
     const list = Array.isArray(items) && mapDef ? items : [];
@@ -3809,7 +3965,7 @@ function mappedRowKey(pointer, item, index, warnOnce) {
   return index;
 }
 function resolveTagName(tagName, scope) {
-  if (typeof tagName === "string") {
+  if (isString2(tagName)) {
     return tagName;
   }
   if (!isTagExpression(tagName)) {
@@ -3830,7 +3986,7 @@ function renderSwitch(def, state, options) {
     options.onNodeCreated(container, path, def, state);
   }
   applyProperties(container, def, state);
-  applyStyle(container, def.style ?? {}, state["$media"] ?? {}, state);
+  applyStyle(container, def.style ?? {}, scopeMedia(state), state);
   applyAttributes(container, def.attributes ?? {}, state);
   let generation = 0;
   let live = null;
@@ -3840,9 +3996,9 @@ function renderSwitch(def, state, options) {
     live = null;
   };
   effect(() => {
-    if (!isRefObj(def.$switch)) {
-      retire();
+    if (!isRef2(def.$switch)) {
       container.replaceChildren();
+      retire();
       generation += 1;
       return;
     }
@@ -3851,8 +4007,8 @@ function renderSwitch(def, state, options) {
       return;
     }
     renderedKey = key;
-    retire();
     container.replaceChildren();
+    retire();
     generation += 1;
     const caseDef = def.cases?.[key];
     if (!caseDef) {
@@ -3862,7 +4018,7 @@ function renderSwitch(def, state, options) {
     const scope = effectScope(true);
     live = scope;
     const childOpts = options ? { ...options, _path: [...path, "cases", key] } : undefined;
-    if (isRefObj(caseDef)) {
+    if (isRef2(caseDef)) {
       const { href } = new URL(caseDef.$ref, options?._ctx?.base ?? location.href);
       resolve(href, options?._ctx).then(async (doc) => {
         if (gen !== generation) {
@@ -3887,6 +4043,7 @@ function renderSwitch(def, state, options) {
   onScopeDispose(retire, true);
   return container;
 }
+var scopeRef = ref;
 async function resolvePrototype(def, state, key, base, ctx) {
   if (def.$src) {
     return resolveExternalPrototype(def, state, key, base);
@@ -3919,7 +4076,7 @@ async function resolvePrototype(def, state, key, base, ctx) {
             signal: controller.signal,
             ...def.headers && { headers: def.headers },
             ...def.body && {
-              body: typeof def.body === "object" ? JSON.stringify(def.body) : def.body
+              body: isNonNullObject(def.body) ? JSON.stringify(def.body) : def.body
             }
           }).then((r) => r.ok ? r.json() : Promise.reject(r.statusText)).then((d) => {
             s.value = d;
@@ -3942,7 +4099,7 @@ async function resolvePrototype(def, state, key, base, ctx) {
         const p = {};
         for (const [k, v] of Object.entries(def)) {
           if (k !== "$prototype") {
-            p[k] = isRefObj(v) ? resolveRef(v.$ref, state) : isTemplateString(v) ? evaluateTemplate(v, state) : v;
+            p[k] = isRef2(v) ? resolveRef(v.$ref, state) : isTemplateString(v) ? evaluateTemplate(v, state) : v;
           }
         }
         return new URLSearchParams(p).toString();
@@ -3959,7 +4116,7 @@ async function resolvePrototype(def, state, key, base, ctx) {
       } catch {
         init = def.default ?? null;
       }
-      const storageState = ref(init);
+      const storageState = scopeRef(init);
       effect(() => {
         const v = storageState.value;
         if (v === null) {
@@ -3987,7 +4144,7 @@ async function resolvePrototype(def, state, key, base, ctx) {
           return raw;
         }
       };
-      const cookieState = ref(read() ?? def.default ?? null);
+      const cookieState = scopeRef(read() ?? def.default ?? null);
       effect(() => {
         document.cookie = serializeCookie(name, cookieState.value, def);
       });
@@ -4045,8 +4202,9 @@ async function resolvePrototype(def, state, key, base, ctx) {
       return fd;
     }
     case "Blob": {
-      return new Blob(def.parts ?? [], {
-        type: typeof def.type === "string" ? def.type : "text/plain"
+      const parts = def.parts;
+      return new Blob(parts ?? [], {
+        type: isString2(def.type) ? def.type : "text/plain"
       });
     }
     case "ReadableStream": {
@@ -4070,6 +4228,15 @@ var EXTERNAL_RESERVED = new Set([
   "arguments",
   "name"
 ]);
+function externalConfig(def) {
+  const config = {};
+  for (const [k, v] of Object.entries(def)) {
+    if (!EXTERNAL_RESERVED.has(k)) {
+      config[k] = v;
+    }
+  }
+  return config;
+}
 async function resolveExternalPrototype(def, state, key, base) {
   const src = def.$src;
   if (!src || !src.endsWith(".class.json")) {
@@ -4086,11 +4253,11 @@ async function importAndInstantiate(def, src, exportName, base) {
     mod = seeded;
   } else {
     try {
-      mod = await import(src);
+      mod = await importModule(src);
     } catch {
       if (base) {
         const resolvedSrc = new URL(src, base).href;
-        mod = await import(resolvedSrc);
+        mod = await importModule(resolvedSrc);
       } else {
         throw new Error(`Failed to import "${src}"`);
       }
@@ -4101,27 +4268,13 @@ async function importAndInstantiate(def, src, exportName, base) {
   if (!ExportedClass) {
     throw new Error(`Jx: export "${exportName}" not found in "${src}"`);
   }
-  if (typeof ExportedClass !== "function") {
+  if (!isFunction2(ExportedClass)) {
     throw new TypeError(`Jx: "${exportName}" from "${src}" is not a class`);
   }
-  const config = {};
-  for (const [k, v] of Object.entries(def)) {
-    if (!EXTERNAL_RESERVED.has(k)) {
-      config[k] = v;
-    }
-  }
-  const Ctor = ExportedClass;
-  const instance = new Ctor(config);
-  let value;
-  if (typeof instance.resolve === "function") {
-    value = await instance.resolve();
-  } else if ("value" in instance) {
-    ({ value } = instance);
-  } else {
-    value = instance;
-  }
-  const s = ref(value);
-  if (typeof instance.subscribe === "function") {
+  const instance = new ExportedClass(externalConfig(def));
+  const value = isFunction2(instance.resolve) ? await instance.resolve() : ("value" in instance) ? instance.value : instance;
+  const s = scopeRef(value);
+  if (isFunction2(instance.subscribe)) {
     instance.subscribe((newVal) => {
       s.value = newVal;
     });
@@ -4160,33 +4313,23 @@ async function resolveClassJson(def, state, key, base) {
     }
   }
   const DynClass = classFromSchema(classDef);
-  const config = {};
-  for (const [k, v] of Object.entries(def)) {
-    if (!EXTERNAL_RESERVED.has(k)) {
-      config[k] = v;
-    }
-  }
-  const instance = new DynClass(config);
-  let value;
-  if (typeof instance.resolve === "function") {
-    value = await instance.resolve();
-  } else if ("value" in instance) {
-    ({ value } = instance);
-  } else {
-    value = instance;
-  }
-  const s = ref(value);
-  if (typeof instance.subscribe === "function") {
+  const instance = new DynClass(externalConfig(def));
+  const value = isFunction2(instance.resolve) ? await instance.resolve() : ("value" in instance) ? instance.value : instance;
+  const s = scopeRef(value);
+  if (isFunction2(instance.subscribe)) {
     instance.subscribe((newVal) => {
       s.value = newVal;
     });
   }
   return s;
 }
+function isCtorDef(rawCtor) {
+  return isNonNullObject(rawCtor);
+}
 function classFromSchema(classDef) {
   const fields = classDef.$defs?.fields ?? {};
   const rawCtor = classDef.$defs?.constructor;
-  const ctor = typeof rawCtor === "object" ? rawCtor : undefined;
+  const ctor = isCtorDef(rawCtor) ? rawCtor : undefined;
   const methods = classDef.$defs?.methods ?? {};
 
   class DynClass {
@@ -4207,7 +4350,8 @@ function classFromSchema(classDef) {
       if (ctor?.body) {
         const bodyStr = Array.isArray(ctor.body) ? ctor.body.join(`
 `) : ctor.body;
-        new Function("config", bodyStr).call(this, config);
+        const init = new Function("config", bodyStr);
+        init.call(this, config);
       }
     }
   }
@@ -4215,10 +4359,10 @@ function classFromSchema(classDef) {
     const name = typedMethod.identifier ?? key;
     const params = (typedMethod.parameters ?? []).map((p) => {
       if (p.$ref) {
-        return p.$ref.split("/").pop();
+        return p.$ref.split("/").pop() ?? "";
       }
       const n = p.identifier ?? p.name;
-      return typeof n === "string" ? n : "arg";
+      return isString2(n) ? n : "arg";
     });
     const bodyStr = Array.isArray(typedMethod.body) ? typedMethod.body.join(`
 `) : typedMethod.body ?? "";
@@ -4245,16 +4389,10 @@ function classFromSchema(classDef) {
     configurable: true,
     value: classDef.title
   });
-  const dynCtor = DynClass;
-  return dynCtor;
+  return DynClass;
 }
 async function resolveViaDevProxy(def, state, key, base) {
-  const config = {};
-  for (const [k, v] of Object.entries(def)) {
-    if (!EXTERNAL_RESERVED.has(k)) {
-      config[k] = v;
-    }
-  }
+  const config = externalConfig(def);
   const hasTemplates = Object.values(config).some((v) => isTemplateString(v));
   const doResolve = (resolvedConfig) => fetch(resolveProxyPath("/__jx_resolve__"), {
     body: JSON.stringify({
@@ -4290,57 +4428,56 @@ async function resolveViaDevProxy(def, state, key, base) {
   }
   return s;
 }
+function latestServerCall(s, invoke, label) {
+  let seq = 0;
+  return (args) => {
+    seq += 1;
+    const n = seq;
+    new Promise((settle) => {
+      settle(invoke(args));
+    }).then((result) => {
+      if (n === seq) {
+        s.value = result;
+      }
+    }).catch((error) => {
+      if (n === seq) {
+        console.error(label, error);
+      }
+    });
+  };
+}
 async function resolveServerFunction(def, state, key, base) {
   const src = def.$src;
   const exportName = def.$export;
-  let mod;
-  const seeded = seededModule(src);
-  if (seeded instanceof Promise) {
-    mod = await seeded;
-  } else if (seeded) {
-    mod = seeded;
-  } else {
-    try {
-      mod = await import(src);
-    } catch {
-      if (base) {
-        try {
-          const resolvedSrc = new URL(src, base).href;
-          mod = await import(resolvedSrc);
-        } catch {
-          return resolveServerFunctionViaProxy(def, state, key, base);
-        }
-      } else {
-        return resolveServerFunctionViaProxy(def, state, key, base);
-      }
-    }
-    _moduleCache.set(src, mod);
+  const seeded = _hostSeeded.has(src) ? seededModule(src) : undefined;
+  if (!seeded) {
+    return resolveServerFunctionViaProxy(def, state, key, base);
   }
+  const mod = seeded instanceof Promise ? await seeded : seeded;
   const candidate = mod[exportName] ?? mod.default?.[exportName];
   if (!candidate) {
     throw new Error(`Jx: export "${exportName}" not found in "${src}" for "${key}"`);
   }
-  if (typeof candidate !== "function") {
+  if (!isFunction2(candidate)) {
     throw new TypeError(`Jx: "${exportName}" from "${src}" is not a function`);
   }
   const fn = candidate;
   const rawArgs = def.arguments ?? {};
-  const hasReactiveArg = Object.values(rawArgs).some((v) => isRefObj(v));
+  const hasReactiveArg = Object.values(rawArgs).some((v) => isRef2(v));
   const resolveArgs = () => {
     const args = {};
     for (const [k, v] of Object.entries(rawArgs)) {
-      args[k] = isRefObj(v) ? resolveRef(v.$ref, state) : v;
+      args[k] = isRef2(v) ? resolveRef(v.$ref, state) : v;
     }
     return args;
   };
   const s = ref(null);
   if (hasReactiveArg) {
+    const call = latestServerCall(s, fn, "Jx server function:");
     effect(() => {
       const args = resolveArgs();
       onEffectCleanup(() => {});
-      fn(args).then((result) => {
-        s.value = result;
-      }).catch(() => {});
+      call(args);
     });
   } else {
     s.value = await fn(resolveArgs());
@@ -4349,11 +4486,11 @@ async function resolveServerFunction(def, state, key, base) {
 }
 async function resolveServerFunctionViaProxy(def, state, key, base) {
   const rawArgs = def.arguments ?? {};
-  const hasReactiveArg = Object.values(rawArgs).some((v) => isRefObj(v));
+  const hasReactiveArg = Object.values(rawArgs).some((v) => isRef2(v));
   const resolveArgs = () => {
     const args = {};
     for (const [k, v] of Object.entries(rawArgs)) {
-      args[k] = isRefObj(v) ? resolveRef(v.$ref, state) : v;
+      args[k] = isRef2(v) ? resolveRef(v.$ref, state) : v;
     }
     return args;
   };
@@ -4373,23 +4510,20 @@ async function resolveServerFunctionViaProxy(def, state, key, base) {
     return r.json();
   });
   const s = ref(null);
+  const call = latestServerCall(s, doResolve, "Jx server proxy:");
   if (hasReactiveArg) {
     effect(() => {
       const args = resolveArgs();
       onEffectCleanup(() => {});
-      doResolve(args).then((result) => {
-        s.value = result;
-      }).catch((error) => console.error("Jx server proxy:", error));
+      call(args);
     });
   } else {
-    doResolve(resolveArgs()).then((result) => {
-      s.value = result;
-    }).catch((error) => console.error("Jx server proxy:", error));
+    call(resolveArgs());
   }
   return s;
 }
 function resolveRef(refPath, state) {
-  if (typeof refPath !== "string") {
+  if (!isString2(refPath)) {
     return refPath;
   }
   if (refPath.startsWith("$map/") || refPath.startsWith("#/$map/")) {
@@ -4397,7 +4531,7 @@ function resolveRef(refPath, state) {
     const [, key] = parts;
     const map = state.$map;
     const base = map?.[key] ?? state[`$map/${key}`];
-    return parts.length > 2 ? getPath2(base, parts.slice(2).join("/")) : base;
+    return parts.length > 2 ? readPath(base, parts.slice(2).join("/")) : base;
   }
   if (refPath.startsWith("#/state/")) {
     return readPath(state, refPath.slice("#/state/".length));
@@ -4406,46 +4540,39 @@ function resolveRef(refPath, state) {
     return readPath(state, refPath.slice("parent#/".length));
   }
   if (refPath.startsWith("window#/")) {
-    return getPath2(globalThis.window, refPath.slice("window#/".length));
+    return readPath(globalThis.window, refPath.slice("window#/".length));
   }
   if (refPath.startsWith("document#/")) {
-    return getPath2(globalThis.document, refPath.slice("document#/".length));
+    return readPath(globalThis.document, refPath.slice("document#/".length));
   }
   return readPath(state, refPath) ?? null;
 }
 function isSignal(v) {
   return isRef(v);
 }
-function isRefObj(v) {
-  return isRef2(v);
-}
-function getPath2(obj, path) {
-  return readPath(obj, path);
-}
 function absorbAttribute(state, name, value, defaults) {
   const camelKey = name.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
   const current = state[camelKey];
-  if (typeof current === "boolean") {
+  if (isBoolean(current)) {
     state[camelKey] = value !== null && value !== "false";
     return;
   }
   if (value === null) {
     const declared = defaults?.get(camelKey);
-    state[camelKey] = declared === undefined ? typeof current === "number" ? 0 : "" : declared;
+    state[camelKey] = declared === undefined ? isNumber(current) ? 0 : "" : declared;
     return;
   }
-  state[camelKey] = typeof current === "number" ? Number(value) : value;
+  state[camelKey] = isNumber(current) ? Number(value) : value;
 }
 function declaredDefaults(def) {
   const out = new Map;
   for (const [key, entry] of Object.entries(def.state ?? {})) {
-    if (entry !== null && typeof entry === "object") {
-      const obj = entry;
-      if ("default" in obj) {
-        out.set(key, obj["default"]);
+    if (isNonNullObject(entry)) {
+      if ("default" in entry) {
+        out.set(key, entry.default);
         continue;
       }
-      if (COMPUTED_STATE_KEYS.some((marker) => (marker in obj))) {
+      if (COMPUTED_STATE_KEYS.some((marker) => (marker in entry))) {
         continue;
       }
     }
@@ -4465,6 +4592,15 @@ function instanceSupplies(el, key) {
   const kebab = key.replaceAll(/[A-Z]/gu, (c) => `-${c.toLowerCase()}`);
   return kebab !== key && el.hasAttribute(kebab);
 }
+function nativeSetter(el, key) {
+  for (let proto = Reflect.getPrototypeOf(el);proto; proto = Reflect.getPrototypeOf(proto)) {
+    const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+    if (descriptor) {
+      return descriptor.set;
+    }
+  }
+  return;
+}
 function refusePrivateProp(key, where) {
   if (!isPrivateStateKey(key)) {
     return false;
@@ -4480,17 +4616,17 @@ function _resetPrivatePropWarnings() {
   _privatePropWarned.clear();
 }
 function mergeProps(def, parentState) {
-  const child = Object.create(parentState);
+  const child = inheritScope(parentState);
   for (const [k, v] of Object.entries(def.$props ?? {})) {
     if (refusePrivateProp(k, "$props")) {
       continue;
     }
-    child[k] = isRefObj(v) ? resolveRef(v.$ref, parentState) : v;
+    child[k] = isRef2(v) ? resolveRef(v.$ref, parentState) : v;
   }
   return child;
 }
 function toCSSText(rules) {
-  return Object.entries(rules).filter(([k, v]) => !isNestedSelectorKey(k) && (v === null || typeof v !== "object")).map(([p, v]) => `${cssPropertyName(p)}: ${canvasStyleValue(String(v))}`).join("; ");
+  return Object.entries(rules).filter(([k, v]) => !isNestedSelectorKey(k) && !isNonNullObject(v)).map(([p, v]) => `${cssPropertyName(p)}: ${canvasStyleValue(String(v))}`).join("; ");
 }
 var _rootMedia = {};
 var _elementDefs = new Map;
@@ -4522,7 +4658,7 @@ function setRootMedia(map) {
 }
 async function registerElements(elements, base, ctx) {
   for (const entry of elements) {
-    if (typeof entry === "string") {
+    if (isString2(entry)) {
       try {
         const specifier = entry.startsWith("/") || entry.startsWith(".") ? entry : `/node_modules/${entry}`;
         await import(specifier);
@@ -4531,7 +4667,7 @@ async function registerElements(elements, base, ctx) {
       }
       continue;
     }
-    if (!isRefObj(entry)) {
+    if (!isRef2(entry)) {
       continue;
     }
     const { href } = new URL(entry.$ref, base);
@@ -4557,7 +4693,7 @@ function injectHead(entries, _base) {
     const attrs = { ...entry.attributes };
     for (const key of ["href", "src"]) {
       const v = attrs[key];
-      if (typeof v !== "string" || v === "") {
+      if (!isString2(v) || v === "") {
         continue;
       }
       if (!v.startsWith("/") && !v.startsWith(".") && !v.startsWith("http")) {
@@ -4575,7 +4711,7 @@ function injectHead(entries, _base) {
       el.setAttribute(k, String(v));
     }
     if (entry.textContent) {
-      el.textContent = typeof entry.textContent === "object" ? JSON.stringify(entry.textContent, null, 2) : entry.textContent;
+      el.textContent = isNonNullObject(entry.textContent) ? JSON.stringify(entry.textContent, null, 2) : entry.textContent;
     }
     document.head.append(el);
   }
@@ -4583,6 +4719,18 @@ function injectHead(entries, _base) {
 var MAX_COMPONENT_NESTING = 32;
 var ROOT_INSTANCE_PATH = { expansion: 0, frames: [] };
 var _instancePath = ROOT_INSTANCE_PATH;
+function reportUnrendered(host, tagName, error) {
+  if (!host.isConnected) {
+    return;
+  }
+  console.error(`Jx: <${tagName}> was not rendered:`, error);
+  host.dispatchEvent(new ErrorEvent("jx-error", {
+    bubbles: true,
+    composed: true,
+    error,
+    message: error.message
+  }));
+}
 function underInstancePath(path, fn) {
   const was = _instancePath;
   _instancePath = path;
@@ -4609,7 +4757,7 @@ function samePropValue(a, b) {
   }
 }
 function isPlainData(value) {
-  if (typeof value !== "object" || value === null) {
+  if (!isNonNullObject(value)) {
     return false;
   }
   const raw = toRaw(value);
@@ -4642,17 +4790,18 @@ function extendInstancePath(path, frame) {
 var _definedSources = new Set;
 async function defineElement(source, baseUrl) {
   let base = baseUrl;
-  let doc = source;
-  if (typeof source === "string") {
+  let source_;
+  if (isString2(source)) {
     base = new URL(source, base ?? location.href).href;
     if (_definedSources.has(base)) {
       return;
     }
     _definedSources.add(base);
-    doc = await resolve(source);
+    source_ = await resolve(source);
+  } else {
+    source_ = source;
   }
   base ??= location.href;
-  const source_ = doc;
   const { tagName } = source_;
   if (!tagName || !tagName.includes("-")) {
     throw new Error(`Jx defineElement: tagName "${tagName}" must contain a hyphen`);
@@ -4697,7 +4846,8 @@ async function defineElement(source, baseUrl) {
       if (propsAttr) {
         try {
           const props = JSON.parse(propsAttr);
-          for (const [key, val] of Object.entries(props)) {
+          const entries = isNonNullObject(props) || isString2(props) ? Object.entries(props) : [];
+          for (const [key, val] of entries) {
             if (refusePrivateProp(key, "data-jx-props")) {
               continue;
             }
@@ -4726,9 +4876,10 @@ async function defineElement(source, baseUrl) {
         if (isPrivateStateKey(key)) {
           continue;
         }
-        if (key in this && this[key] !== undefined && instanceSupplies(this, key)) {
-          state[key] = this[key];
-          supplied[key] = this[key];
+        const own = elementProperties(this);
+        if (key in this && own[key] !== undefined && instanceSupplies(this, key)) {
+          state[key] = own[key];
+          supplied[key] = own[key];
         }
       }
       let ownPath;
@@ -4736,69 +4887,117 @@ async function defineElement(source, baseUrl) {
         ownPath = extendInstancePath(enclosingPath, { props: supplied, tag: tagName });
       } catch (error) {
         this.replaceChildren();
-        if (!this.isConnected) {
-          return;
-        }
-        console.error(`Jx: <${tagName}> was not rendered:`, error);
-        this.dispatchEvent(new ErrorEvent("jx-error", {
-          bubbles: true,
-          composed: true,
-          error,
-          message: error instanceof Error ? error.message : String(error)
-        }));
+        reportUnrendered(this, tagName, error instanceof Error ? error : new Error(String(error)));
         return;
       }
       for (const key of Object.keys(def.state ?? {})) {
         if (isPrivateStateKey(key)) {
           continue;
         }
-        if (!(key in HTMLElement.prototype)) {
-          Object.defineProperty(this, key, {
-            configurable: true,
-            get: () => state[key],
-            set: (v) => {
-              state[key] = v;
-            }
-          });
-        }
+        const native = nativeSetter(this, key);
+        Object.defineProperty(this, key, {
+          configurable: true,
+          get: () => state[key],
+          set: (v) => {
+            native?.call(this, v);
+            state[key] = v;
+          }
+        });
       }
       this._state = state;
-      const slottedChildren = [...this.childNodes];
+      const slottedChildren = captureSlotted(this);
       this.replaceChildren();
-      const defStyle = declaresDisplay(def.style) ? def.style : { display: "block", ...def.style };
+      const ownStyle = def.style;
+      const defStyle = ownStyle && declaresDisplay(ownStyle) ? ownStyle : { display: "block", ...ownStyle };
       const hostStyle = mergeStyle(defStyle, callSiteStyles.get(this));
-      applyStyle(this, hostStyle, state["$media"] ?? {}, state);
+      applyStyle(this, hostStyle, scopeMedia(state), state);
       applyAttributes(this, def.attributes ?? {}, state);
       bindDefinitionHandlers(this, def, state);
       if (!Array.isArray(def.children) && def.textContent !== undefined) {
         bindProperty(this, "textContent", def.textContent, state);
       }
       const children = Array.isArray(def.children) ? def.children : [];
-      const wasInside = _canvasInsideStampedHost;
-      _canvasInsideStampedHost ||= this.dataset.jxPath !== undefined;
-      try {
-        underInstancePath(ownPath, () => {
-          for (const childDef of children) {
-            this.append(renderNode(childDef, state));
-          }
-        });
-      } finally {
-        _canvasInsideStampedHost = wasInside;
-      }
-      distributeSlots(this, slottedChildren);
-      const { onMount } = state;
-      if (typeof onMount === "function") {
-        queueMicrotask(() => onMount(state, this));
+      const draw = () => {
+        const wasInside = _canvasInsideStampedHost;
+        _canvasInsideStampedHost ||= this.dataset.jxPath !== undefined;
+        let failure = null;
+        try {
+          underInstancePath(ownPath, () => {
+            for (const childDef of children) {
+              this.append(renderNode(childDef, state));
+            }
+          });
+        } catch (error) {
+          failure = error instanceof Error ? error : new Error(String(error));
+        } finally {
+          _canvasInsideStampedHost = wasInside;
+        }
+        distributeSlots(this, slottedChildren);
+        return failure;
+      };
+      const mounted = () => {
+        const { onMount } = state;
+        if (isScopeHook(onMount)) {
+          queueMicrotask(() => onMount.call(this, state, this));
+        }
+      };
+      let attempt = runScoped(draw);
+      const failure = attempt.result;
+      if (!failure) {
+        mounted();
+        return;
       }
+      reportUnrendered(this, tagName, failure);
+      const inputs = [...declaredDefaults(def).keys()].filter((key) => !isPrivateStateKey(key));
+      let lastMessage = failure.message;
+      let queued = false;
+      const watch = effect(() => {
+        for (const key of inputs) {
+          state[key];
+        }
+      }, {
+        scheduler: () => {
+          if (queued) {
+            return;
+          }
+          queued = true;
+          queueMicrotask(() => {
+            queued = false;
+            if (!this.isConnected) {
+              watch.effect.stop();
+              return;
+            }
+            watch();
+            attempt.stop();
+            this.replaceChildren();
+            pauseTracking();
+            try {
+              attempt = runScoped(draw);
+            } finally {
+              resetTracking();
+            }
+            const again = attempt.result;
+            if (!again) {
+              watch.effect.stop();
+              mounted();
+            } else if (again.message !== lastMessage) {
+              lastMessage = again.message;
+              reportUnrendered(this, tagName, again);
+            }
+          });
+        }
+      });
     }
     disconnectedCallback() {
-      if (typeof this._state?.onUnmount === "function") {
-        this._state.onUnmount(this._state);
+      const state = this._state;
+      if (state && isScopeHook(state.onUnmount)) {
+        state.onUnmount(state);
       }
     }
     adoptedCallback() {
-      if (typeof this._state?.onAdopted === "function") {
-        this._state.onAdopted(this._state);
+      const state = this._state;
+      if (state && isScopeHook(state.onAdopted)) {
+        state.onAdopted(state);
       }
     }
     attributeChangedCallback(name, oldVal, newVal) {
@@ -4820,16 +5019,21 @@ function renderCustomElementWithProps(def, state, options, path) {
       continue;
     }
     const write = (resolved) => {
-      el[key] = typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : 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;
+      }
     };
-    if (isRefObj(val)) {
+    if (isRef2(val)) {
       const refVal = val;
       write(resolveRef(refVal.$ref, state));
       effect(() => {
         write(resolveRef(refVal.$ref, state));
       });
     } else if (isTemplateString(val)) {
-      effect(() => {
+      bindTemplate(val, () => {
         write(evaluateTemplate(val, state));
       });
     } else {
@@ -4839,7 +5043,7 @@ function renderCustomElementWithProps(def, state, options, path) {
   if (def.style) {
     callSiteStyles.set(el, def.style);
   }
-  applyStyle(el, def.style ?? {}, state["$media"] ?? {}, state);
+  applyStyle(el, def.style ?? {}, scopeMedia(state), state);
   applyAttributes(el, def.attributes ?? {}, state);
   applyProperties(el, def, state);
   const children = Array.isArray(def.children) ? def.children : [];
@@ -4854,28 +5058,93 @@ function renderCustomElementWithProps(def, state, options, path) {
   }
   return el;
 }
-function distributeSlots(host, slottedChildren) {
-  const slots = host.querySelectorAll("slot");
+function isElementNode(node) {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+function isTextNode(node) {
+  return node.nodeType === Node.TEXT_NODE;
+}
+function isCommentNode(node) {
+  return node.nodeType === Node.COMMENT_NODE;
+}
+var SLOT_WHITESPACE = /^[\t\n\f\r ]+$/u;
+var SLOT_MARK = "jx-slot";
+var SLOT_ATTR = "data-jx-slots";
+var SLOT_RECORD_KEY = "jx.slot.group";
+var slotRecord = (() => {
+  const key = Symbol.for(SLOT_RECORD_KEY);
+  const holder = globalThis;
+  holder[key] ??= new WeakMap;
+  return holder[key];
+})();
+function captureSlotted(host) {
+  const id = host.getAttribute(SLOT_ATTR);
+  if (id === null) {
+    return [...host.childNodes];
+  }
+  host.removeAttribute(SLOT_ATTR);
+  const opener = `${SLOT_MARK} ${id} `;
+  const closer = `/${SLOT_MARK} ${id}`;
+  const openers = [];
+  const walker = host.ownerDocument.createTreeWalker(host, NodeFilter.SHOW_COMMENT);
+  for (let n = walker.nextNode();n; n = walker.nextNode()) {
+    if (isCommentNode(n) && n.data.startsWith(opener)) {
+      openers.push(n);
+    }
+  }
+  const captured = [];
+  for (const open of openers) {
+    const name = decodeURIComponent(open.data.slice(opener.length));
+    for (let n = open.nextSibling;n; n = n.nextSibling) {
+      if (isCommentNode(n) && n.data === closer) {
+        break;
+      }
+      slotRecord.set(n, name);
+      captured.push(n);
+    }
+  }
+  return captured;
+}
+function slotGroupHasContent(group) {
+  return group.some((n) => isElementNode(n) || isTextNode(n) && n.data !== "");
+}
+function distributeSlots(host, captured) {
+  const slots = [...host.querySelectorAll("slot")];
   if (slots.length === 0) {
     return;
   }
-  const named = new Map;
-  const unnamed = [];
-  for (const child of slottedChildren) {
-    if (child.nodeType === Node.ELEMENT_NODE && child.getAttribute("slot")) {
-      const name = child.getAttribute("slot");
-      if (!named.has(name)) {
-        named.set(name, []);
-      }
-      named.get(name).push(child);
-    } else {
-      unnamed.push(child);
+  const groups = new Map;
+  for (const n of captured) {
+    if (isTextNode(n) && SLOT_WHITESPACE.test(n.data)) {
+      continue;
     }
+    const recorded = slotRecord.get(n);
+    slotRecord.delete(n);
+    const name = recorded ?? (isElementNode(n) ? n.getAttribute("slot") ?? "" : "");
+    let group = groups.get(name);
+    if (!group) {
+      group = [];
+      groups.set(name, group);
+    }
+    group.push(n);
   }
+  const taken = new Set;
   for (const slot of slots) {
-    const name = slot.getAttribute("name");
-    const matches = name ? named.get(name) ?? [] : unnamed;
-    slot.replaceWith(...matches.length > 0 ? matches : [...slot.childNodes]);
+    const name = slot.getAttribute("name") ?? "";
+    let group = [];
+    if (!taken.has(name)) {
+      taken.add(name);
+      group = groups.get(name) ?? [];
+    }
+    const placed = slotGroupHasContent(group) ? group : [...group, ...slot.childNodes];
+    const parent = slot.parentElement;
+    if (parent && parent !== host && parent.localName.includes("-")) {
+      const forwarded = slotRecord.get(slot) ?? slot.getAttribute("slot") ?? "";
+      for (const n of placed) {
+        slotRecord.set(n, forwarded);
+      }
+    }
+    slot.replaceWith(...placed);
   }
 }
 export {
@@ -4884,6 +5153,10 @@ export {
   Jx,
   MAX_COMPONENT_NESTING,
   RESERVED_KEYS,
+  SLOT_ATTR,
+  SLOT_MARK,
+  SLOT_RECORD_KEY,
+  SLOT_WHITESPACE,
   SUPPORTED_SCHEMA_VERSION,
   _resetPrivatePropWarnings,
   applyStyle,
@@ -4892,9 +5165,11 @@ export {
   buildStyleRules,
   camelToKebab,
   canvasStyleValue,
+  captureSlotted,
   cssPropertyName,
   cssRuleText,
   defineElement,
+  distributeSlots,
   documentStyleText,
   elementDefinition,
   enumeratedAttrNames,
@@ -4928,12 +5203,13 @@ export {
   setCanvasDelinkCommands,
   setCanvasDelinkPopovers,
   setCanvasViewportTranspose,
+  setNpmModuleResolver,
   setResolveToken,
   setRootMedia,
   setSkipAutoRequests,
-  setSkipContentResolution,
   setSkipServerFunctions,
   setStampPropBindings,
+  setTemplateErrorHandler,
   splitSelectorList,
   toCSSText,
   transposeCanvasOverlaySelector,
@@ -4941,5 +5217,5 @@ export {
   transposeCanvasUnits
 };
 
-//# debugId=AA34AE79F7363B3164756E2164756E21
+//# debugId=F9E5ED7079B70E8764756E2164756E21
 //# sourceMappingURL=runtime.js.map