npm - @jxsuite/runtime - Versions diffs - 4.1.0 → 5.1.0 - Mend

@jxsuite/runtime 4.1.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/runtime.js CHANGED Viewed

@@ -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,20 +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) {
   _hostSeeded.add(specifier);
-  if (typeof mod === "function") {
+  if (isFunction2(mod)) {
     _moduleCache.delete(specifier);
     _moduleLoaders.set(specifier, mod);
     return;
@@ -3056,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;
 }
@@ -3084,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", {
@@ -3104,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;
@@ -3125,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));
@@ -3174,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";
@@ -3188,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;
@@ -3201,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) {
@@ -3238,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)) {
@@ -3274,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;
   }
@@ -3289,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));
@@ -3310,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)) {
@@ -3327,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);
@@ -3339,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;
   }
@@ -3426,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];
@@ -3444,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);
@@ -3536,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) {
@@ -3546,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;
 }
@@ -3558,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"
@@ -3573,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})`;
@@ -3620,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 ?? "")));
         });
       }
@@ -3649,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);
@@ -3660,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);
     }
@@ -3674,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) => {
@@ -3685,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 });
@@ -3737,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 : [];
@@ -3811,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)) {
@@ -3832,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;
@@ -3842,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;
     }
@@ -3853,8 +4007,8 @@ function renderSwitch(def, state, options) {
       return;
     }
     renderedKey = key;
-    retire();
     container.replaceChildren();
+    retire();
     generation += 1;
     const caseDef = def.cases?.[key];
     if (!caseDef) {
@@ -3864,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) {
@@ -3889,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);
@@ -3921,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;
@@ -3944,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();
@@ -3961,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) {
@@ -3989,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);
       });
@@ -4047,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": {
@@ -4072,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")) {
@@ -4088,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}"`);
       }
@@ -4103,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;
     });
@@ -4162,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 {
@@ -4209,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);
       }
     }
   }
@@ -4217,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 ?? "";
@@ -4247,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({
@@ -4322,16 +4458,16 @@ async function resolveServerFunction(def, state, key, base) {
   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;
   };
@@ -4350,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;
   };
@@ -4387,7 +4523,7 @@ async function resolveServerFunctionViaProxy(def, state, key, base) {
   return s;
 }
 function resolveRef(refPath, state) {
-  if (typeof refPath !== "string") {
+  if (!isString2(refPath)) {
     return refPath;
   }
   if (refPath.startsWith("$map/") || refPath.startsWith("#/$map/")) {
@@ -4395,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));
@@ -4404,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;
       }
     }
@@ -4463,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;
@@ -4478,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;
@@ -4520,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);
@@ -4529,7 +4667,7 @@ async function registerElements(elements, base, ctx) {
       }
       continue;
     }
-    if (!isRefObj(entry)) {
+    if (!isRef2(entry)) {
       continue;
     }
     const { href } = new URL(entry.$ref, base);
@@ -4555,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")) {
@@ -4573,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);
   }
@@ -4581,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;
@@ -4607,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);
@@ -4640,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`);
@@ -4695,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;
             }
@@ -4724,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;
@@ -4734,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) {
@@ -4818,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 {
@@ -4837,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 : [];
@@ -4852,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 {
@@ -4882,6 +5153,10 @@ export {
   Jx,
   MAX_COMPONENT_NESTING,
   RESERVED_KEYS,
+  SLOT_ATTR,
+  SLOT_MARK,
+  SLOT_RECORD_KEY,
+  SLOT_WHITESPACE,
   SUPPORTED_SCHEMA_VERSION,
   _resetPrivatePropWarnings,
   applyStyle,
@@ -4890,9 +5165,11 @@ export {
   buildStyleRules,
   camelToKebab,
   canvasStyleValue,
+  captureSlotted,
   cssPropertyName,
   cssRuleText,
   defineElement,
+  distributeSlots,
   documentStyleText,
   elementDefinition,
   enumeratedAttrNames,
@@ -4926,12 +5203,13 @@ export {
   setCanvasDelinkCommands,
   setCanvasDelinkPopovers,
   setCanvasViewportTranspose,
+  setNpmModuleResolver,
   setResolveToken,
   setRootMedia,
   setSkipAutoRequests,
-  setSkipContentResolution,
   setSkipServerFunctions,
   setStampPropBindings,
+  setTemplateErrorHandler,
   splitSelectorList,
   toCSSText,
   transposeCanvasOverlaySelector,
@@ -4939,5 +5217,5 @@ export {
   transposeCanvasUnits
 };
-//# debugId=9BAF2C3B31911D4B64756E2164756E21
+//# debugId=F9E5ED7079B70E8764756E2164756E21
 //# sourceMappingURL=runtime.js.map