@jxsuite/runtime 3.1.0 → 4.0.0

package/dist/runtime.js

@@ -177,6 +177,13 @@ class EffectScope {
 function effectScope(detached) {
   return new EffectScope(detached);
 }
+function onScopeDispose(fn, failSilently = false) {
+  if (activeEffectScope) {
+    activeEffectScope.cleanups.push(fn);
+  } else if (!failSilently) {
+    warn(`onScopeDispose() is called when there is no active effect scope to be associated with.`);
+  }
+}
 var activeSub;
 var pausedQueueEffects = /* @__PURE__ */ new WeakSet;
 
@@ -1012,6 +1019,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
 }
 var mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler;
 var readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler;
+var shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(true);
 var toShallow = (value) => value;
 var getProto = (v) => Reflect.getPrototypeOf(v);
 function createIterableMethod(method, isReadonly2, isShallow2) {
@@ -1189,6 +1197,9 @@ function createInstrumentationGetter(isReadonly2, shallow) {
 var mutableCollectionHandlers = {
   get: /* @__PURE__ */ createInstrumentationGetter(false, false)
 };
+var shallowCollectionHandlers = {
+  get: /* @__PURE__ */ createInstrumentationGetter(false, true)
+};
 var readonlyCollectionHandlers = {
   get: /* @__PURE__ */ createInstrumentationGetter(true, false)
 };
@@ -1223,6 +1234,9 @@ function reactive(target) {
   }
   return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
 }
+function shallowReactive(target) {
+  return createReactiveObject(target, false, shallowReactiveHandlers, shallowCollectionHandlers, shallowReactiveMap);
+}
 function readonly(target) {
   return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap);
 }
@@ -1384,6 +1398,79 @@ function computed(getterOrOptions, debugOptions, isSSR = false) {
   return cRef;
 }
 
+// ../schema/src/guards.ts
+function isJsonObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isRef2(value) {
+  return isJsonObject(value) && typeof value.$ref === "string";
+}
+function isFunctionDef(value) {
+  return isJsonObject(value) && value.$prototype === "Function";
+}
+function isExpressionDef(value) {
+  return isJsonObject(value) && isJsonObject(value.$expression);
+}
+function isNamedFormulaDef(value) {
+  return isExpressionDef(value) && Array.isArray(value.parameters) && value.parameters.length > 0;
+}
+function hasStructuredBody(value) {
+  return isFunctionDef(value) && Array.isArray(value.body);
+}
+function isPrototypeDef(value) {
+  return isJsonObject(value) && typeof value.$prototype === "string" && value.$prototype !== "Function";
+}
+function isServerFnDef(value) {
+  return isJsonObject(value) && value.timing === "server" && typeof value.$src === "string" && typeof value.$export === "string" && !value.$prototype;
+}
+var SCHEMA_KEYWORDS = new Set([
+  "type",
+  "enum",
+  "minimum",
+  "maximum",
+  "minLength",
+  "maxLength",
+  "pattern",
+  "format",
+  "items",
+  "properties",
+  "required",
+  "description",
+  "title",
+  "$comment"
+]);
+function isMappedArray(value) {
+  return isJsonObject(value) && value.$prototype === "Array";
+}
+function isTemplateString(value) {
+  return typeof value === "string" && value.includes("${");
+}
+function bodyReturnsValue(body) {
+  return /\breturn\b[^\S\n]*(?![;}\s]|$)/.test(body);
+}
+function paramNames(parameters) {
+  if (!parameters) {
+    return [];
+  }
+  return parameters.map((p) => typeof p === "string" ? p : p.name);
+}
+function isTagExpression(tagName) {
+  if (!isJsonObject(tagName) || !isJsonObject(tagName.$expression)) {
+    return false;
+  }
+  const expression = tagName.$expression;
+  if (expression.operator === "?:") {
+    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 false;
+}
+function isPrivateStateKey(key) {
+  return key.startsWith("#");
+}
+
 // src/css.ts
 function camelToKebab(s) {
   return s.replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
@@ -1399,6 +1486,90 @@ function resolveAtQuery(atKey, mediaQueries) {
   }
   return null;
 }
+function isDeclarationAtRule(atKey) {
+  return atKey.startsWith("@position-try") || atKey.startsWith("@property") || atKey.startsWith("@font-face") || atKey.startsWith("@counter-style");
+}
+function isKeyframesAtRule(atKey) {
+  return atKey.startsWith("@keyframes");
+}
+function resolveNestedSelector(scope, key) {
+  const resolved = [];
+  for (const scopePart of splitSelectorList(scope)) {
+    for (const keyPart of splitSelectorList(key)) {
+      resolved.push(resolveOneNestedSelector(scopePart, keyPart));
+    }
+  }
+  return resolved.join(", ");
+}
+function resolveOneNestedSelector(scope, key) {
+  if (key.startsWith("&")) {
+    return key.replaceAll("&", scope);
+  }
+  if (key.startsWith("[") || key.startsWith(":") || key.startsWith(".")) {
+    return `${scope}${key}`;
+  }
+  return `${scope} ${key}`;
+}
+function splitSelectorList(selector) {
+  const members = [];
+  let depth = 0;
+  let quote = null;
+  let start = 0;
+  for (let i = 0;i < selector.length; i += 1) {
+    const ch = selector[i];
+    if (quote) {
+      if (ch === "\\") {
+        i += 1;
+      } else if (ch === quote) {
+        quote = null;
+      }
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+    } else if (ch === "(" || ch === "[") {
+      depth += 1;
+    } else if (ch === ")" || ch === "]") {
+      depth = Math.max(0, depth - 1);
+    } else if (ch === "," && depth === 0) {
+      members.push(selector.slice(start, i));
+      start = i + 1;
+    }
+  }
+  members.push(selector.slice(start));
+  const trimmed = members.map((member) => member.trim()).filter((member) => member !== "");
+  return trimmed.length > 0 ? trimmed : [selector];
+}
+function transposeCanvasPopoverSelector(selector) {
+  return transposeCanvasOverlaySelector(selector);
+}
+var COMPOUND_BREAK = /[\s>+~,()]/;
+var LEADING_TYPE = /^[A-Za-z_\u{00A0}-\u{FFFF}][\w\u{00A0}-\u{FFFF}-]*/u;
+function transposeOpenAttribute(selector, options) {
+  let out = "";
+  let from = 0;
+  for (;; ) {
+    const at = selector.indexOf("[open]", from);
+    if (at === -1) {
+      return out + selector.slice(from);
+    }
+    let start = at;
+    while (start > 0 && !COMPOUND_BREAK.test(selector[start - 1])) {
+      start -= 1;
+    }
+    const type = LEADING_TYPE.exec(selector.slice(start, at))?.[0]?.toLowerCase();
+    const dialog = type === undefined ? options.dialog === true : type === "dialog";
+    out += selector.slice(from, at) + (dialog ? "[data-jx-dialog-open]" : "[open]");
+    from = at + "[open]".length;
+  }
+}
+function transposeCanvasOverlaySelector(selector, options = {}) {
+  if (selector.includes("::backdrop")) {
+    return null;
+  }
+  const transposed = selector.replaceAll(":popover-open", "[data-jx-popover-open]").replaceAll(":modal", "[data-jx-dialog-open]").replaceAll("[inert]", "[data-jx-inert]");
+  return transposeOpenAttribute(transposed, options);
+}
 var COLOR_SCHEME_ATTR = "data-color-scheme";
 var COLOR_SCHEME_STORAGE_KEY = "jx-color-scheme";
 function pureSchemeOf(query) {
@@ -1417,6 +1588,195 @@ function schemeSelectors(selector, scheme) {
     forced: `:where(:root[${COLOR_SCHEME_ATTR}="${scheme}"]) ${selector}`
   };
 }
+function isNestedSelectorKey(key) {
+  return key.startsWith(":") || key.startsWith(".") || key.startsWith("&") || key.startsWith("[");
+}
+function cssPropertyName(property) {
+  return property.startsWith("--") ? property : camelToKebab(property);
+}
+function hashCss(text) {
+  let h = 2166136261;
+  for (let i = 0;i < text.length; i += 1) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36);
+}
+function cssRuleText(conditions, selector, declarations) {
+  const body = declarations.map(([property, value]) => `${property}: ${value}`).join("; ");
+  let text = selector === null ? body : `${selector} { ${body} }`;
+  for (let i = conditions.length - 1;i >= 0; i -= 1) {
+    text = `${conditions[i]} { ${text} }`;
+  }
+  return text;
+}
+function cssKeyframesText(conditions, name, blocks) {
+  const body = blocks.map(({ selector, declarations }) => `${selector} { ${declarations.map(([property, value]) => `${property}: ${value}`).join("; ")} }`).join(" ");
+  let text = `@keyframes ${name} { ${body} }`;
+  for (let i = conditions.length - 1;i >= 0; i -= 1) {
+    text = `${conditions[i]} { ${text} }`;
+  }
+  return text;
+}
+function withoutKeyframes(block) {
+  const keyframeKeys = Object.keys(block).filter((key) => isKeyframesAtRule(key));
+  if (keyframeKeys.length === 0) {
+    return block;
+  }
+  const rest = { ...block };
+  for (const key of keyframeKeys) {
+    delete rest[key];
+  }
+  return rest;
+}
+function compoundsOntoScope(key) {
+  const rest = key.startsWith("&") ? key.slice(1) : key;
+  return rest === "" || rest.startsWith(":") || rest.startsWith(".") || rest.startsWith("[");
+}
+function buildStyleRules(style, options = {}) {
+  const {
+    scope = null,
+    mediaQueries = {},
+    transposeValue = (value) => value,
+    transposeSelector = (selector) => selector,
+    resolveValue
+  } = options;
+  const rules = [];
+  const isBlock = (value) => value !== null && typeof value === "object" && !Array.isArray(value) && !isRef2(value);
+  const blocksOf = (key, value) => {
+    if (isBlock(value)) {
+      return [value];
+    }
+    if (!isDeclarationAtRule(key) || !Array.isArray(value) || value.length === 0) {
+      return [];
+    }
+    return value.every((entry) => isBlock(entry)) ? value : [];
+  };
+  const declarationValue = (property, value, reactive, target) => {
+    if (value === undefined || value === null) {
+      return null;
+    }
+    if (isRef2(value)) {
+      return reactive ? resolveValue?.(property, value, target) ?? null : null;
+    }
+    if (typeof value === "object") {
+      return null;
+    }
+    const raw = String(value);
+    if (isTemplateString(raw)) {
+      return reactive ? resolveValue?.(property, raw, target) ?? null : null;
+    }
+    return transposeValue(raw);
+  };
+  const declarationsOf = (node, skipSelectorKeys, reactive = true, target = "self") => {
+    const declarations = [];
+    for (const [key, value] of Object.entries(node)) {
+      if (blocksOf(key, value).length > 0) {
+        continue;
+      }
+      if (skipSelectorKeys && (key.startsWith("@") || isNestedSelectorKey(key))) {
+        continue;
+      }
+      if (key.startsWith("$")) {
+        continue;
+      }
+      const resolved = declarationValue(key, value, reactive, target);
+      if (resolved !== null) {
+        declarations.push([cssPropertyName(key), resolved]);
+      }
+    }
+    return declarations;
+  };
+  const emit = (conditions, selector, declarations, target, description) => {
+    if (declarations.length === 0) {
+      return;
+    }
+    let resolved = selector;
+    if (resolved !== null) {
+      const transposed = transposeSelector(resolved);
+      if (transposed === null) {
+        return;
+      }
+      resolved = transposed;
+    }
+    const text = cssRuleText(conditions, resolved, declarations);
+    rules.push({
+      text,
+      conditions: [...conditions],
+      selector: resolved,
+      declarations,
+      target,
+      key: hashCss(text),
+      ...typeof description === "string" && description !== "" ? { description } : {}
+    });
+  };
+  const emitKeyframes = (atKey, block, conditions) => {
+    const name = atKey.slice("@keyframes".length).trim();
+    if (name === "") {
+      return;
+    }
+    const blocks = [];
+    for (const [key, value] of Object.entries(block)) {
+      if (!isBlock(value)) {
+        continue;
+      }
+      const declarations = declarationsOf(value, true, false, "unscoped");
+      if (declarations.length > 0) {
+        blocks.push({ declarations, selector: key.trim() });
+      }
+    }
+    if (blocks.length === 0) {
+      return;
+    }
+    const text = cssKeyframesText(conditions, name, blocks);
+    rules.push({
+      blocks,
+      conditions: [...conditions],
+      declarations: [],
+      key: hashCss(text),
+      selector: null,
+      target: "unscoped",
+      text
+    });
+  };
+  const walkAt = (atKey, block, selector, conditions, target) => {
+    if (atKey === "@--") {
+      return;
+    }
+    if (isDeclarationAtRule(atKey)) {
+      emit([...conditions, atKey], null, declarationsOf(block, false, true, "unscoped"), "unscoped", block["$description"]);
+      return;
+    }
+    if (isKeyframesAtRule(atKey)) {
+      emitKeyframes(atKey, block, conditions);
+      return;
+    }
+    const query = resolveAtQuery(atKey, mediaQueries);
+    const atRule = query === null ? atKey : `@media ${query}`;
+    const scheme = query === null ? null : pureSchemeOf(query);
+    if (scheme !== null && selector !== null) {
+      const { auto, forced } = schemeSelectors(selector, scheme);
+      walk(block, auto, [...conditions, atRule], target);
+      walk(withoutKeyframes(block), forced, conditions, target);
+      return;
+    }
+    walk(block, selector, [...conditions, atRule], target);
+  };
+  function walk(node, selector, conditions, target) {
+    emit(conditions, selector, declarationsOf(node, true, true, target), target, node["$description"]);
+    for (const [key, value] of Object.entries(node)) {
+      for (const block of blocksOf(key, value)) {
+        if (key.startsWith("@")) {
+          walkAt(key, block, selector, conditions, target);
+        } else if (selector !== null) {
+          walk(block, resolveNestedSelector(selector, key), conditions, compoundsOntoScope(key) ? target : "descendant");
+        }
+      }
+    }
+  }
+  walk(style, scope, [], "self");
+  return rules;
+}
 
 // ../schema/src/intl.ts
 var DEFAULT_FORMAT_LOCALE = "en-US";
@@ -1648,8 +2008,8 @@ function withPageLocale(path, args, state) {
   filled[index] = locale;
   return filled;
 }
-function isBlessedGlobal(ref2) {
-  return ref2.startsWith("window#/") && BLESSED_GLOBALS.has(ref2.slice("window#/".length));
+function isBlessedGlobal(ref) {
+  return ref.startsWith("window#/") && BLESSED_GLOBALS.has(ref.slice("window#/".length));
 }
 function isMutating(op) {
   return MUTATING_OPS.has(op);
@@ -1688,24 +2048,43 @@ function resolveOperand(operand, state, event, iterCtx, trace) {
   trace?.report(trace.path ?? [], operand);
   return operand;
 }
-function resolveExprRef(ref2, state, event, iterCtx) {
-  if (ref2 === "$reduce/acc") {
+function calleeOwner(ref, state, event, iterCtx) {
+  const parentRef = (prefix) => {
+    const rest = ref.slice(prefix.length);
+    if (!rest.includes("/")) {
+      return state;
+    }
+    return resolveExprRef(ref.slice(0, ref.lastIndexOf("/")), state, event, iterCtx);
+  };
+  if (ref.startsWith("#/state/")) {
+    return parentRef("#/state/");
+  }
+  if (ref.startsWith("parent#/")) {
+    return parentRef("parent#/");
+  }
+  if (ref.startsWith("$map/") || ref.startsWith("$args/")) {
+    return ref.split("/").length > 2 ? resolveExprRef(ref.slice(0, ref.lastIndexOf("/")), state, event, iterCtx) : undefined;
+  }
+  return;
+}
+function resolveExprRef(ref, state, event, iterCtx) {
+  if (ref === "$reduce/acc") {
     return iterCtx?.acc;
   }
-  if (ref2.startsWith("$reduce/")) {
+  if (ref.startsWith("$reduce/")) {
     return iterCtx?.acc;
   }
-  if (ref2.startsWith("$args/")) {
-    const parts = ref2.slice("$args/".length).split("/");
+  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;
   }
-  if (ref2.startsWith("event#/")) {
-    const path = ref2.slice("event#/".length);
+  if (ref.startsWith("event#/")) {
+    const path = ref.slice("event#/".length);
     return getPath(event, path);
   }
-  if (ref2.startsWith("$map/")) {
-    const parts = ref2.split("/");
+  if (ref.startsWith("$map/")) {
+    const parts = ref.split("/");
     const [, key] = parts;
     let base;
     const map = scopeMap(state);
@@ -1718,23 +2097,23 @@ function resolveExprRef(ref2, state, event, iterCtx) {
     }
     return parts.length > 2 ? getPath(base, parts.slice(2).join("/")) : base;
   }
-  if (ref2.startsWith("#/state/")) {
-    return readPath(state, ref2.slice("#/state/".length));
+  if (ref.startsWith("#/state/")) {
+    return readPath(state, ref.slice("#/state/".length));
   }
-  if (ref2.startsWith("parent#/")) {
-    return readPath(state, ref2.slice("parent#/".length));
+  if (ref.startsWith("parent#/")) {
+    return readPath(state, ref.slice("parent#/".length));
   }
-  if (ref2.startsWith("window#/")) {
-    return getPath(globalThis.window, ref2.slice("window#/".length));
+  if (ref.startsWith("window#/")) {
+    return getPath(globalThis.window, ref.slice("window#/".length));
   }
-  if (ref2.startsWith("document#/")) {
-    return getPath(globalThis.document, ref2.slice("document#/".length));
+  if (ref.startsWith("document#/")) {
+    return getPath(globalThis.document, ref.slice("document#/".length));
   }
-  return readPath(state, ref2) ?? null;
+  return readPath(state, ref) ?? null;
 }
-function resolveWritableRef(ref2, state, _event, iterCtx) {
-  if (ref2.startsWith("$map/")) {
-    const parts = ref2.split("/");
+function resolveWritableRef(ref, state, _event, iterCtx) {
+  if (ref.startsWith("$map/")) {
+    const parts = ref.split("/");
     const [, key] = parts;
     let base;
     const map = scopeMap(state);
@@ -1756,8 +2135,8 @@ function resolveWritableRef(ref2, state, _event, iterCtx) {
       obj: scopeMap(state) ?? state
     };
   }
-  if (ref2.startsWith("#/state/")) {
-    const sub = ref2.slice("#/state/".length);
+  if (ref.startsWith("#/state/")) {
+    const sub = ref.slice("#/state/".length);
     const slash = sub.indexOf("/");
     if (slash === -1) {
       return { key: sub, obj: state };
@@ -1770,7 +2149,7 @@ function resolveWritableRef(ref2, state, _event, iterCtx) {
     }
     return { key: lastKey, obj };
   }
-  return { key: ref2, obj: state };
+  return { key: ref, obj: state };
 }
 function evaluateExpression(node, state, event, iterCtx, trace) {
   const result = evaluateNode(node, state, event, iterCtx, trace);
@@ -1817,19 +2196,19 @@ function evaluateNode(node, state, event, iterCtx, trace) {
     }
     const callee = resolveExprRef(calleeRef, state, event, iterCtx);
     if (typeof callee === "function") {
-      return callee(...argValues);
+      return callee.apply(calleeOwner(calleeRef, state, event, iterCtx), argValues);
     }
     if (callee && typeof callee === "object" && "$expression" in callee) {
-      const def2 = callee;
+      const def = callee;
       const args = {};
-      for (const [i, p] of (def2.parameters ?? []).entries()) {
+      for (const [i, p] of (def.parameters ?? []).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(def2.$expression, state, event, { args, callDepth });
+      return evaluateExpression(def.$expression, state, event, { args, callDepth });
     }
     throw new TypeError(`$expression: call target "${calleeRef}" is not callable`);
   }
@@ -2003,69 +2382,6 @@ function evaluateOperand(operand, state, event, iterCtx) {
   return resolveOperand(operand, state, event, iterCtx);
 }
 
-// ../schema/src/guards.ts
-function isJsonObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function isRef2(value) {
-  return isJsonObject(value) && typeof value.$ref === "string";
-}
-function isFunctionDef(value) {
-  return isJsonObject(value) && value.$prototype === "Function";
-}
-function isExpressionDef(value) {
-  return isJsonObject(value) && isJsonObject(value.$expression);
-}
-function isNamedFormulaDef(value) {
-  return isExpressionDef(value) && Array.isArray(value.parameters) && value.parameters.length > 0;
-}
-function hasStructuredBody(value) {
-  return isFunctionDef(value) && Array.isArray(value.body);
-}
-function isPrototypeDef(value) {
-  return isJsonObject(value) && typeof value.$prototype === "string" && value.$prototype !== "Function";
-}
-function isServerFnDef(value) {
-  return isJsonObject(value) && value.timing === "server" && typeof value.$src === "string" && typeof value.$export === "string" && !value.$prototype;
-}
-var SCHEMA_KEYWORDS = new Set([
-  "type",
-  "enum",
-  "minimum",
-  "maximum",
-  "minLength",
-  "maxLength",
-  "pattern",
-  "format",
-  "items",
-  "properties",
-  "required",
-  "description",
-  "title",
-  "$comment"
-]);
-function isMappedArray(value) {
-  return isJsonObject(value) && value.$prototype === "Array";
-}
-function isTemplateString(value) {
-  return typeof value === "string" && value.includes("${");
-}
-function bodyReturnsValue(body) {
-  return /\breturn\b[^\S\n]*(?![;}\s]|$)/.test(body);
-}
-function paramNames(parameters) {
-  if (!parameters) {
-    return [];
-  }
-  return parameters.map((p) => typeof p === "string" ? p : p.name);
-}
-function isTagExpression(tagName) {
-  return isJsonObject(tagName) && isJsonObject(tagName.$expression);
-}
-function isPrivateStateKey(key) {
-  return key.startsWith("#");
-}
-
 // ../schema/src/asset-paths.ts
 var URL_TERMINATOR = String.raw`"'\s<>()\\`;
 function parseSrcset(value) {
@@ -2118,6 +2434,12 @@ function statementKind(statement) {
   if ("$switch" in statement) {
     return "switch";
   }
+  if ("stopPropagation" in statement) {
+    return "stopPropagation";
+  }
+  if ("preventDefault" in statement) {
+    return "preventDefault";
+  }
   return "dispatch";
 }
 async function runStatements(statements, state, event, opts = {}) {
@@ -2151,7 +2473,8 @@ async function runStatements(statements, state, event, opts = {}) {
       }
       case "dispatch": {
         const dispatch = statement;
-        const target = opts.target ?? event?.currentTarget;
+        const fallback = typeof opts.target === "function" ? opts.target() : opts.target;
+        const target = event?.currentTarget ?? fallback;
         if (!target) {
           break;
         }
@@ -2168,6 +2491,14 @@ async function runStatements(statements, state, event, opts = {}) {
         target.dispatchEvent(new CustomEvent(dispatch.dispatchEvent, init));
         break;
       }
+      case "stopPropagation": {
+        event?.stopPropagation();
+        break;
+      }
+      case "preventDefault": {
+        event?.preventDefault();
+        break;
+      }
       default: {
         break;
       }
@@ -2230,28 +2561,99 @@ 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 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 } : {}
+  });
+  return mounted.scope;
+}
+var HOST_SCOPE_RESERVED = /^[$#]/;
+function assertHostScope(scope) {
+  for (const key of Object.keys(scope)) {
+    if (HOST_SCOPE_RESERVED.test(key)) {
+      throw new TypeError(`Jx mount: host scope key "${key}" is reserved — names beginning with "$" or "#" are ` + `runtime vocabulary`);
+    }
+  }
+}
+async function mount(doc, target, options = {}) {
+  const hostScope = 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 }
+  };
   checkSchemaVersion(doc.$schema);
   if (doc.$elements) {
-    await registerElements(doc.$elements, base);
+    await registerElements(doc.$elements, base, ctx);
   }
   if (doc.$head) {
     injectHead(doc.$head, base);
   }
-  if (doc.$media) {
-    _rootMedia = doc.$media;
-  }
-  const state = await buildScope(doc, {}, base);
-  target.append(renderNode(doc, state, options));
-  if (typeof state.onMount === "function") {
-    state.onMount(state);
+  const scope = await buildScope(doc, hostScope, base, ctx);
+  const elements = new Set;
+  const renderOptions = {
+    _ctx: ctx,
+    onNodeCreated: (el, path, def, state) => {
+      if (el instanceof Element && el.tagName.includes("-")) {
+        elements.add(el.tagName.toLowerCase());
+      }
+      options.onNodeCreated?.(el, path, def, state);
+    },
+    ...options.onNodeMoved ? { onNodeMoved: options.onNodeMoved } : {}
+  };
+  const { result: root, stop } = runScoped(() => renderNode(doc, scope, renderOptions));
+  ctx.root = root;
+  let mounted = false;
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) {
+      return;
+    }
+    disposed = true;
+    options.signal?.removeEventListener("abort", dispose);
+    stop();
+    if (mounted && typeof scope.onUnmount === "function") {
+      scope.onUnmount(scope);
+    }
+    root.remove();
+  };
+  if (options.signal?.aborted) {
+    dispose();
+  } else {
+    options.signal?.addEventListener("abort", dispose, { once: true });
+    target.append(root);
+    mounted = true;
+    if (typeof scope.onMount === "function") {
+      scope.onMount(scope);
+    }
   }
-  return state;
+  return { scope, root, elements, dispose };
 }
 var _resolveCache = new Map;
-async function resolve(source) {
+function preloadDocument(url, doc) {
+  const settled = Promise.resolve(doc);
+  _resolveCache.set(url, settled);
+  try {
+    _resolveCache.set(new URL(url, location.href).href, settled);
+  } catch {}
+}
+async function resolve(source, ctx) {
   if (typeof source !== "string") {
     return source;
   }
+  const served = ctx?.resolver?.(source);
+  if (served) {
+    return served;
+  }
   if (_resolveCache.has(source)) {
     return _resolveCache.get(source);
   }
@@ -2337,10 +2739,36 @@ var _canvasDelinkAnchors = false;
 function setCanvasDelinkAnchors(on) {
   _canvasDelinkAnchors = on;
 }
+var _canvasDelinkPopovers = false;
+function setCanvasDelinkPopovers(on) {
+  _canvasDelinkPopovers = on;
+}
+var _canvasDelinkCommands = false;
+function setCanvasDelinkCommands(on) {
+  _canvasDelinkCommands = on;
+}
+var _canvasInsideStampedHost = false;
+function canvasStamped(el) {
+  return _canvasInsideStampedHost || el.dataset.jxPath !== undefined;
+}
 function canvasAttrName(el, key) {
   if (_canvasDelinkAnchors && key === "href" && (el.tagName === "A" || el.tagName === "AREA")) {
     return "data-jx-href";
   }
+  if (_canvasDelinkPopovers && key === "popover" && canvasStamped(el)) {
+    return "data-jx-popover";
+  }
+  if (_canvasDelinkCommands && canvasStamped(el)) {
+    if (key === "commandfor") {
+      return "data-jx-commandfor";
+    }
+    if (key === "inert") {
+      return "data-jx-inert";
+    }
+    if (key === "open" && el.tagName === "DIALOG") {
+      return "data-jx-open";
+    }
+  }
   return key;
 }
 var _canvasAssetResolver = null;
@@ -2420,71 +2848,84 @@ function boundPropKey(key, val, state) {
   }
   return sub;
 }
-async function buildScope(doc, parentScope = {}, base = location.href) {
+async function buildScope(doc, parentScope = {}, base = location.href, ctx) {
+  const dispatchRoot = () => ctx?.root ?? null;
   const raw = {};
-  for (const [key, val] of Object.entries(parentScope)) {
-    raw[key] = val;
-  }
   const defs = doc.state ?? {};
+  const linked = isReactive(parentScope);
+  for (const key of Object.keys(parentScope)) {
+    if (linked && !(key in defs)) {
+      Object.defineProperty(raw, key, {
+        configurable: true,
+        enumerable: true,
+        get: () => parentScope[key],
+        set: (value) => {
+          parentScope[key] = value;
+        }
+      });
+    } else {
+      raw[key] = parentScope[key];
+    }
+  }
   const imports = doc.imports ?? {};
-  for (const [, def2] of Object.entries(defs)) {
-    if (isPrototypeDef(def2) && !def2.$src) {
-      const mapped = imports[def2.$prototype];
+  for (const [, def] of Object.entries(defs)) {
+    if (isPrototypeDef(def) && !def.$src) {
+      const mapped = imports[def.$prototype];
       if (mapped) {
         if (!mapped.endsWith(".class.json")) {
-          console.warn(`Jx: import "${def2.$prototype}" must map to a .class.json path, got "${mapped}"`);
+          console.warn(`Jx: import "${def.$prototype}" must map to a .class.json path, got "${mapped}"`);
           continue;
         }
-        def2.$src = mapped;
+        def.$src = mapped;
       }
     }
   }
-  for (const [key, def2] of Object.entries(defs)) {
-    if (typeof def2 === "string") {
-      if (!def2.includes("${")) {
-        raw[key] = def2;
+  for (const [key, def] of Object.entries(defs)) {
+    if (typeof def === "string") {
+      if (!def.includes("${")) {
+        raw[key] = def;
       }
       continue;
     }
-    if (typeof def2 === "number" || typeof def2 === "boolean" || def2 === null) {
-      raw[key] = def2;
+    if (typeof def === "number" || typeof def === "boolean" || def === null) {
+      raw[key] = def;
       continue;
     }
-    if (Array.isArray(def2)) {
-      raw[key] = def2;
+    if (Array.isArray(def)) {
+      raw[key] = def;
       continue;
     }
-    if (typeof def2 === "object") {
-      if (def2.$prototype) {
+    if (typeof def === "object") {
+      if (def.$prototype) {
         continue;
       }
-      if (isExpressionDef(def2)) {
+      if (isExpressionDef(def)) {
         continue;
       }
-      if (isServerFnDef(def2)) {
+      if (isServerFnDef(def)) {
         continue;
       }
-      if ("default" in def2) {
-        raw[key] = def2.default;
+      if ("default" in def) {
+        raw[key] = def.default;
         continue;
       }
-      if (hasSchemaKeywords(def2)) {
+      if (hasSchemaKeywords(def)) {
         continue;
       }
-      raw[key] = def2;
+      raw[key] = def;
     }
   }
   const state = reactive(raw);
-  for (const [key, def2] of Object.entries(defs)) {
-    if (typeof def2 === "string" && def2.includes("${")) {
-      state[key] = computed(() => evaluateTemplate(def2, state));
+  for (const [key, def] of Object.entries(defs)) {
+    if (typeof def === "string" && def.includes("${")) {
+      state[key] = computed(() => evaluateTemplate(def, state));
     }
   }
-  for (const [key, def2] of Object.entries(defs)) {
-    if (isExpressionDef(def2)) {
-      const node = def2.$expression;
-      if (isNamedFormulaDef(def2)) {
-        const params = def2.parameters;
+  for (const [key, def] of Object.entries(defs)) {
+    if (isExpressionDef(def)) {
+      const node = def.$expression;
+      if (isNamedFormulaDef(def)) {
+        const params = def.parameters;
         state[key] = (...argValues) => {
           const args = {};
           for (const [i, p] of params.entries()) {
@@ -2504,11 +2945,11 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
       }
     }
   }
-  for (const [key, def2] of Object.entries(defs)) {
-    if (hasStructuredBody(def2)) {
-      const { body } = def2;
-      if (Array.isArray(def2.parameters) && def2.parameters.length > 0) {
-        const params = def2.parameters;
+  for (const [key, def] of Object.entries(defs)) {
+    if (hasStructuredBody(def)) {
+      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()) {
@@ -2518,34 +2959,35 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
             }
             args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
           }
-          return runStatements(body, state, null, { args });
+          return runStatements(body, state, null, { args, target: dispatchRoot });
         };
       } else {
         const handler = (s, event) => {
-          runStatements(body, s, event ?? null);
+          runStatements(body, s, event ?? null, { target: dispatchRoot });
         };
         state[key] = handler;
       }
-    } else if (isFunctionDef(def2)) {
-      state[key] = await resolveFunction(def2, state, key, base);
+    } else if (isFunctionDef(def)) {
+      state[key] = await resolveFunction(def, state, key, base);
     }
   }
-  for (const [key, def2] of Object.entries(defs)) {
-    if (isPrototypeDef(def2)) {
-      state[key] = await resolvePrototype(def2, state, key, base);
+  for (const [key, def] of Object.entries(defs)) {
+    if (isPrototypeDef(def)) {
+      state[key] = await resolvePrototype(def, state, key, base, ctx);
     }
   }
-  if (!_serverFnConfig.skip) {
-    for (const [key, def2] of Object.entries(defs)) {
-      if (isServerFnDef(def2)) {
-        state[key] = await resolveServerFunction(def2, state, key, base);
+  if (!(ctx?.skipServerFunctions ?? _serverFnConfig.skip)) {
+    for (const [key, def] of Object.entries(defs)) {
+      if (isServerFnDef(def)) {
+        state[key] = await resolveServerFunction(def, state, key, base);
       }
     }
   }
+  const rootMedia = ctx?.media ?? _rootMedia;
   if (doc.$media) {
     state["$media"] = doc.$media;
-  } else if (!state["$media"] && Object.keys(_rootMedia).length > 0) {
-    state["$media"] = _rootMedia;
+  } else if (!state["$media"] && Object.keys(rootMedia).length > 0) {
+    state["$media"] = rootMedia;
   }
   return state;
 }
@@ -2589,36 +3031,72 @@ function evaluateAttrTemplate(str, state) {
   return fn(state, $map, $map?.item, $map?.index);
 }
 var _moduleCache = new Map;
-async function resolveFunction(def2, state, key, base) {
-  if (def2.body && def2.$src) {
+var _moduleLoaders = new Map;
+function preloadModule(specifier, mod) {
+  if (typeof mod === "function") {
+    _moduleCache.delete(specifier);
+    _moduleLoaders.set(specifier, mod);
+    return;
+  }
+  _moduleLoaders.delete(specifier);
+  _moduleCache.set(specifier, mod);
+}
+function seededModule(src) {
+  const cached = _moduleCache.get(src);
+  if (cached) {
+    return cached;
+  }
+  const pending = _moduleLoaders.get(src);
+  if (!pending) {
+    return;
+  }
+  if (typeof pending !== "function") {
+    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;
+  });
+  _moduleLoaders.set(src, load);
+  return load;
+}
+async function resolveFunction(def, state, key, base) {
+  if (def.body && def.$src) {
     throw new Error(`Jx: '${key}' declares both body and $src — these are mutually exclusive`);
   }
-  if (!def2.body && !def2.$src) {
-    const params = resolveParamNames(def2);
+  if (!def.body && !def.$src) {
+    const params = resolveParamNames(def);
     const noop = new Function(...params, "");
     Object.defineProperty(noop, "name", {
       configurable: true,
-      value: def2.name ?? key
+      value: def.name ?? key
     });
     return noop;
   }
   let fn;
-  if (typeof def2.body === "string") {
-    const params = resolveParamNames(def2);
-    fn = new Function(...params, def2.body);
+  if (typeof def.body === "string") {
+    const params = resolveParamNames(def);
+    fn = new Function(...params, def.body);
     Object.defineProperty(fn, "name", {
       configurable: true,
-      value: def2.name ?? key
+      value: def.name ?? key
     });
   } else {
-    const src = def2.$src;
+    const src = def.$src;
     if (!src) {
       throw new Error(`Jx: '${key}' has neither body nor $src`);
     }
-    const exportName = def2.$export ?? key;
+    const exportName = def.$export ?? key;
     let mod;
-    if (_moduleCache.has(src)) {
-      mod = _moduleCache.get(src);
+    const seeded = seededModule(src);
+    if (seeded instanceof Promise) {
+      mod = await seeded;
+    } else if (seeded) {
+      mod = seeded;
     } else {
       if (base) {
         const resolvedSrc = new URL(src, base).href;
@@ -2638,11 +3116,11 @@ async function resolveFunction(def2, state, key, base) {
     }
     fn = candidate;
   }
-  const hasParams = (def2.parameters ?? def2.arguments ?? []).length > 0;
+  const hasParams = (def.parameters ?? def.arguments ?? []).length > 0;
   let isComputed = false;
   if (!hasParams) {
-    if (typeof def2.body === "string") {
-      isComputed = bodyReturnsValue(def2.body);
+    if (typeof def.body === "string") {
+      isComputed = bodyReturnsValue(def.body);
     } else if (fn) {
       isComputed = fn.length <= 1 && bodyReturnsValue(fn.toString());
     }
@@ -2652,8 +3130,8 @@ async function resolveFunction(def2, state, key, base) {
   }
   return fn;
 }
-function resolveParamNames(def2) {
-  const names = def2.parameters ? paramNames(def2.parameters) : def2.arguments ?? [];
+function resolveParamNames(def) {
+  const names = def.parameters ? paramNames(def.parameters) : def.arguments ?? [];
   return names.length > 0 && names[0] === "state" ? names : ["state", ...names];
 }
 var RESERVED_KEYS = new Set([
@@ -2702,19 +3180,19 @@ function elementNamespace(tagName, inherited) {
   }
   return inherited ?? null;
 }
-function renderNode(def2, state, options) {
+function renderNode(def, state, options) {
   const path = options?._path ?? [];
-  if (typeof def2 === "string" || typeof def2 === "number" || typeof def2 === "boolean") {
-    const textNode = document.createTextNode(String(def2));
-    if (typeof def2 === "string" && isTemplateString(def2)) {
+  if (typeof def === "string" || typeof def === "number" || typeof def === "boolean") {
+    const textNode = document.createTextNode(String(def));
+    if (typeof def === "string" && isTemplateString(def)) {
       effect(() => {
-        textNode.textContent = evaluateTemplate(def2, state);
+        textNode.textContent = evaluateTemplate(def, state);
       });
     }
     return textNode;
   }
   let localState = state;
-  for (const [key, val] of Object.entries(def2)) {
+  for (const [key, val] of Object.entries(def)) {
     if (key.startsWith("$") && !RESERVED_KEYS.has(key)) {
       if (localState === state) {
         localState = Object.create(state);
@@ -2722,38 +3200,41 @@ function renderNode(def2, state, options) {
       localState[key] = isRefObj(val) ? resolveRef(val.$ref, state) : val;
     }
   }
-  if ("$ref" in def2 && !def2.tagName) {
-    const refTarget = String(def2.$ref ?? "");
+  if ("$ref" in def && !def.tagName) {
+    const refTarget = String(def.$ref ?? "");
     if (!warnedRefChildren.has(refTarget)) {
       warnedRefChildren.add(refTarget);
       console.warn(`Jx: a $ref child ("${refTarget}") is not a supported component instance; register the ` + `component in $elements and use its custom-element tag instead (spec §13).`);
     }
   }
-  const tagName = resolveTagName(def2.tagName, localState);
+  const tagName = resolveTagName(def.tagName, localState);
   const isCustomEl = tagName.includes("-") && customElements.get(tagName);
-  if (def2.$props && isCustomEl) {
-    return renderCustomElementWithProps(def2, localState, options, path);
+  if (def.$props && isCustomEl) {
+    return renderCustomElementWithProps(def, localState, options, path);
   }
-  if (def2.$props) {
+  if (def.$props) {
     if (tagName.includes("-")) {
-      return renderCustomElementWithProps(def2, localState, options, path);
+      return renderCustomElementWithProps(def, localState, options, path);
     }
-    const { $props: _$props, ...rest } = def2;
-    return renderNode(rest, mergeProps(def2, localState), options);
+    const { $props: _$props, ...rest } = def;
+    return renderNode(rest, mergeProps(def, localState), options);
   }
-  if (def2.$switch) {
-    return renderSwitch(def2, localState, options);
+  if (def.$switch) {
+    return renderSwitch(def, localState, options);
   }
   const ns = elementNamespace(tagName, options?._ns);
   const childNs = tagName === "foreignObject" ? null : ns;
   const el = ns ? document.createElementNS(ns, tagName) : document.createElement(tagName);
   if (options?.onNodeCreated) {
-    options.onNodeCreated(el, path, def2, localState);
+    options.onNodeCreated(el, path, def, localState);
+  }
+  applyProperties(el, def, localState);
+  if (def.style && tagName.includes("-")) {
+    callSiteStyles.set(el, def.style);
   }
-  applyProperties(el, def2, localState);
-  applyStyle(el, def2.style ?? {}, localState["$media"] ?? {}, localState);
-  applyAttributes(el, def2.attributes ?? {}, localState);
-  const kids = def2.children;
+  applyStyle(el, def.style ?? {}, localState["$media"] ?? {}, localState);
+  applyAttributes(el, def.attributes ?? {}, localState);
+  const kids = def.children;
   if (isMappedArray(kids)) {
     const arrOpts = options || childNs ? { ...options, _ns: childNs, _path: [...path, "children"] } : undefined;
     renderMappedArrayInto(el, kids, localState, arrOpts);
@@ -2770,49 +3251,58 @@ function renderNode(def2, state, options) {
   }
   return el;
 }
-function applyProperties(el, def2, state) {
-  for (const [key, val] of Object.entries(def2)) {
+function applyProperties(el, def, state) {
+  for (const [key, val] of Object.entries(def)) {
     if (RESERVED_KEYS.has(key)) {
       continue;
     }
     if (key.startsWith("$")) {
       continue;
     }
-    if (key.startsWith("on")) {
-      if (isRefObj(val)) {
-        const handler = resolveRef(val.$ref, state);
-        if (typeof handler === "function") {
-          const scope = state;
-          const handlerFn = handler;
-          el.addEventListener(key.slice(2), (e) => handlerFn(scope, e));
-        }
-        continue;
-      }
-      if (hasStructuredBody(val)) {
-        const { body } = val;
-        const scope = state;
-        el.addEventListener(key.slice(2), (e) => {
-          runStatements(body, scope, e);
-        });
-        continue;
-      }
-      if (isFunctionDef(val) && typeof val.body === "string") {
-        const params = resolveParamNames(val);
-        const fn = new Function(...params, val.body);
-        const scope = state;
-        el.addEventListener(key.slice(2), (e) => fn(scope, e));
-        continue;
-      }
-      if (isExpressionDef(val)) {
-        const node = val.$expression;
-        const scope = state;
-        el.addEventListener(key.slice(2), (e) => evaluateExpression(node, scope, e));
-        continue;
-      }
+    if (key.startsWith("on") && bindHandler(el, key, val, state)) {
+      continue;
     }
     bindProperty(el, key, val, state);
   }
 }
+function bindHandler(el, key, val, state) {
+  const type = key.slice(2);
+  const scope = state;
+  if (isRefObj(val)) {
+    const handler = resolveRef(val.$ref, state);
+    if (typeof handler === "function") {
+      const handlerFn = handler;
+      el.addEventListener(type, (e) => handlerFn(scope, e));
+    }
+    return true;
+  }
+  if (hasStructuredBody(val)) {
+    const { body } = val;
+    el.addEventListener(type, (e) => {
+      runStatements(body, scope, e);
+    });
+    return true;
+  }
+  if (isFunctionDef(val) && typeof val.body === "string") {
+    const params = resolveParamNames(val);
+    const fn = new Function(...params, val.body);
+    el.addEventListener(type, (e) => fn(scope, e));
+    return true;
+  }
+  if (isExpressionDef(val)) {
+    const node = val.$expression;
+    el.addEventListener(type, (e) => evaluateExpression(node, scope, e));
+    return true;
+  }
+  return false;
+}
+function bindDefinitionHandlers(host, def, state) {
+  for (const [key, val] of Object.entries(def)) {
+    if (key.startsWith("on") && !RESERVED_KEYS.has(key)) {
+      bindHandler(host, key, val, state);
+    }
+  }
+}
 function bindProperty(el, key, val, state) {
   const target = el;
   const boundProp = boundPropKey(key, val, state);
@@ -2826,6 +3316,9 @@ function bindProperty(el, key, val, state) {
       node.setAttribute("class", resolved == null ? "" : String(resolved));
       return;
     }
+    if (target[key] === resolved) {
+      return;
+    }
     target[key] = resolved;
   };
   if (isRefObj(val)) {
@@ -2847,144 +3340,300 @@ function bindProperty(el, key, val, state) {
   }
   write(asAsset(val));
 }
-function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
-  const nested = {};
-  const media = {};
-  const baseDecls = {};
-  const mediaOverriddenProps = new Set;
-  for (const [prop, val] of Object.entries(styleDef)) {
-    if (prop.startsWith("@") && val && typeof val === "object") {
-      for (const k of Object.keys(val)) {
-        if (!k.startsWith(":") && !k.startsWith(".") && !k.startsWith("&") && !k.startsWith("[") && !k.startsWith("@")) {
-          mediaOverriddenProps.add(k);
+function cssomSink(sheet, detach) {
+  const entries = [];
+  return {
+    detach,
+    insert(texts) {
+      const rules = [];
+      for (const text of texts) {
+        const index = sheet.cssRules.length;
+        try {
+          sheet.insertRule(text, index);
+        } catch {
+          continue;
+        }
+        const rule = sheet.cssRules[index];
+        if (rule) {
+          rules.push(rule);
         }
       }
-    }
-  }
-  for (const [prop, val] of Object.entries(styleDef)) {
-    if (val !== null && typeof val === "object" && !Array.isArray(val)) {
-      if (prop.startsWith("@")) {
-        media[prop] = val;
-      } else {
-        nested[prop] = val;
+      const inserted = { rules, texts };
+      entries.push(inserted);
+      return inserted;
+    },
+    remove(inserted) {
+      const at = entries.indexOf(inserted);
+      if (at !== -1) {
+        entries.splice(at, 1);
       }
-      continue;
-    }
-    if (prop.startsWith("@") || isNestedSelector(prop)) {
-      continue;
-    }
-    if (val === undefined) {
-      continue;
+      if (inserted.rules.length === 0) {
+        return;
+      }
+      const list = [...sheet.cssRules];
+      const indices = inserted.rules.map((rule) => list.indexOf(rule)).filter((index) => index >= 0).toSorted((a, b) => b - a);
+      for (const index of indices) {
+        sheet.deleteRule(index);
+      }
+      inserted.rules.length = 0;
+    },
+    replaceAll(texts) {
+      entries.length = 0;
+      entries.push({ rules: [], texts });
+      sheet.replaceSync(texts.join(`
+`));
+    },
+    text() {
+      return entries.flatMap((entry) => entry.texts.join(`
+`)).join(`
+`);
     }
-    const scalar = String(val);
-    if (prop.startsWith("--")) {
-      if (isTemplateString(val)) {
-        effect(() => {
-          el.style.setProperty(prop, canvasStyleValue(evaluateTemplate(val, state)));
-        });
-      } else {
-        el.style.setProperty(prop, canvasStyleValue(scalar));
+  };
+}
+function textSink(tag) {
+  const entries = [];
+  const write = () => {
+    tag.textContent = entries.map((entry) => entry.texts.join(`
+`)).join(`
+`);
+  };
+  return {
+    detach() {
+      tag.remove();
+    },
+    insert(texts) {
+      const inserted = { rules: [], texts };
+      entries.push(inserted);
+      write();
+      return inserted;
+    },
+    remove(inserted) {
+      const index = entries.indexOf(inserted);
+      if (index !== -1) {
+        entries.splice(index, 1);
+        write();
       }
-    } else if (isTemplateString(val)) {
-      effect(() => {
-        el.style[prop] = canvasStyleValue(evaluateTemplate(val, state));
-      });
-    } else if (mediaOverriddenProps.has(prop)) {
-      baseDecls[prop] = scalar;
-    } else {
-      el.style[prop] = canvasStyleValue(scalar);
+    },
+    replaceAll(texts) {
+      entries.length = 0;
+      entries.push({ rules: [], texts });
+      write();
+    },
+    text() {
+      return tag.textContent ?? "";
     }
+  };
+}
+function openSink(doc) {
+  const view = doc.defaultView;
+  const SheetConstructor = view?.CSSStyleSheet;
+  if (typeof SheetConstructor === "function" && Array.isArray(doc.adoptedStyleSheets)) {
+    try {
+      const sheet = new SheetConstructor;
+      doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];
+      return cssomSink(sheet, () => {
+        doc.adoptedStyleSheets = doc.adoptedStyleSheets.filter((s) => s !== sheet);
+      });
+    } catch {}
+  }
+  const tag = doc.createElement("style");
+  tag.dataset.jxSheet = "";
+  (doc.head ?? doc.documentElement).append(tag);
+  return tag.sheet ? cssomSink(tag.sheet, () => tag.remove()) : textSink(tag);
+}
+var sheetStates = new WeakMap;
+function sheetStateFor(doc) {
+  const existing = sheetStates.get(doc);
+  if (existing) {
+    return existing;
+  }
+  const created = {
+    hoisted: new Map,
+    interned: new Map,
+    scratch: null,
+    scratchOwners: new Map,
+    serial: 0,
+    shared: openSink(doc)
+  };
+  sheetStates.set(doc, created);
+  return created;
+}
+var elementStyles = new WeakMap;
+var SCOPE_TOKEN = "\x01jx-scope\x01";
+function rewriteScratch(state) {
+  if (!state.scratch) {
+    return;
   }
-  const hasNested = Object.keys(nested).length > 0;
-  const hasMedia = Object.keys(media).length > 0;
-  const hasBaseDecls = Object.keys(baseDecls).length > 0;
-  if (!hasNested && !hasMedia && !hasBaseDecls) {
+  state.scratch.replaceAll([...state.scratchOwners.values()].flat());
+}
+function releaseInterned(state, table, key) {
+  const entry = table.get(key);
+  if (!entry) {
     return;
   }
-  const uid = `jx-${Math.random().toString(36).slice(2, 7)}`;
-  el.dataset.jx = uid;
-  let css = "";
-  const baseCSS = toCSSText(baseDecls);
-  if (baseCSS) {
-    css += `[data-jx="${uid}"] { ${baseCSS} }
-`;
-  }
-  function emitNested(scope, rules) {
-    const props = toCSSText(rules);
-    if (props) {
-      css += `${scope} { ${props} }
-`;
-    }
-    for (const [sel, sub] of Object.entries(rules)) {
-      if (sub === null || typeof sub !== "object" || Array.isArray(sub)) {
-        continue;
-      }
-      if (sel.startsWith("@")) {
-        continue;
-      }
-      const resolved = sel.startsWith("&") ? sel.replace("&", scope) : sel.startsWith("[") ? `${scope}${sel}` : sel.startsWith(":") || sel.startsWith(".") ? `${scope}${sel}` : `${scope} ${sel}`;
-      emitNested(resolved, sub);
-    }
+  entry.refs -= 1;
+  if (entry.refs <= 0) {
+    table.delete(key);
+    state.shared.remove(entry.inserted);
   }
-  for (const [sel, rules] of Object.entries(nested)) {
-    const resolved = sel.startsWith("&") ? sel.replace("&", `[data-jx="${uid}"]`) : sel.startsWith("[") ? `[data-jx="${uid}"]${sel}` : sel.startsWith(":") || sel.startsWith(".") ? `[data-jx="${uid}"]${sel}` : `[data-jx="${uid}"] ${sel}`;
-    emitNested(resolved, rules);
+}
+function retainInterned(state, table, key, texts) {
+  const existing = table.get(key);
+  if (existing) {
+    existing.refs += 1;
+    return;
   }
-  function emitMediaNested(atRule, parentSel, obj) {
-    for (const [sel, sub] of Object.entries(obj)) {
-      if (sub === null || typeof sub !== "object" || Array.isArray(sub)) {
-        continue;
-      }
-      if (sel.startsWith("@")) {
-        continue;
-      }
-      const resolved = sel.startsWith("&") ? sel.replace("&", parentSel) : sel.startsWith("[") ? `${parentSel}${sel}` : sel.startsWith(":") || sel.startsWith(".") ? `${parentSel}${sel}` : `${parentSel} ${sel}`;
-      const props = toCSSText(sub);
-      if (props) {
-        css += `${atRule} { ${resolved} { ${props} } }
-`;
-      }
-      emitMediaNested(atRule, resolved, sub);
-    }
+  table.set(key, { inserted: state.shared.insert(texts), refs: 1 });
+}
+function releaseElementStyles(el, only) {
+  const entry = elementStyles.get(el);
+  if (!entry || only !== undefined && entry !== only) {
+    return;
   }
-  for (const [key, rules] of Object.entries(media)) {
-    if (key === "@--") {
-      continue;
-    }
-    const query = resolveAtQuery(key, mediaQueries);
-    const atRule = query === null ? key : `@media ${query}`;
-    const scope = `[data-jx="${uid}"]`;
-    const scheme = query === null ? null : pureSchemeOf(query);
-    if (scheme) {
-      const { auto, forced } = schemeSelectors(scope, scheme);
-      css += `${atRule} { ${auto} { ${toCSSText(rules)} } }
-`;
-      emitMediaNested(atRule, auto, rules);
-      emitNested(forced, rules);
-    } else {
-      css += `${atRule} { ${scope} { ${toCSSText(rules)} } }
-`;
-      emitMediaNested(atRule, scope, rules);
+  elementStyles.delete(el);
+  entry.stop?.();
+  for (const name of entry.vars) {
+    el.style.removeProperty(name);
+  }
+  delete el.dataset.jx;
+  if (sheetStates.get(entry.doc) !== entry.state) {
+    return;
+  }
+  const { state } = entry;
+  if (entry.interned === null) {
+    if (state.scratchOwners.delete(el)) {
+      rewriteScratch(state);
     }
+  } else {
+    releaseInterned(state, state.interned, entry.interned);
+  }
+  for (const key of entry.hoisted) {
+    releaseInterned(state, state.hoisted, key);
   }
-  const tag = document.createElement("style");
-  tag.textContent = css;
-  tag.dataset.jxOwner = uid;
-  document.head.append(tag);
-  elementStyleTags.set(el, tag);
 }
-var elementStyleTags = new WeakMap;
+function resetDocumentStyles(doc = document) {
+  const state = sheetStates.get(doc);
+  if (!state) {
+    return;
+  }
+  sheetStates.delete(doc);
+  for (const el of state.scratchOwners.keys()) {
+    elementStyles.delete(el);
+    delete el.dataset.jx;
+  }
+  state.scratchOwners.clear();
+  state.interned.clear();
+  state.hoisted.clear();
+  state.shared.detach();
+  state.scratch?.detach();
+}
+function documentStyleText(doc = document) {
+  const state = sheetStates.get(doc);
+  if (!state) {
+    return "";
+  }
+  return [state.shared.text(), state.scratch?.text() ?? ""].filter(Boolean).join(`
+`);
+}
+function declaresDisplay(style) {
+  return Boolean(style) && typeof style === "object" && "display" in style;
+}
+var callSiteStyles = new WeakMap;
+function mergeStyle(base, over) {
+  if (!over) {
+    return base;
+  }
+  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;
+  }
+  return out;
+}
+function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
+  applyStyleInto(el, styleDef, mediaQueries, state, false);
+}
 function reapplyStyle(el, styleDef, mediaQueries = {}, state = {}) {
-  const prev = elementStyleTags.get(el);
-  if (prev) {
-    prev.remove();
-    elementStyleTags.delete(el);
+  applyStyleInto(el, styleDef ?? {}, mediaQueries, state, true);
+}
+function applyStyleInto(el, styleDef, mediaQueries, state, live) {
+  releaseElementStyles(el);
+  const doc = el.ownerDocument ?? document;
+  const sheetState = sheetStateFor(doc);
+  const transposeSelector = (_canvasDelinkPopovers || _canvasDelinkCommands) && canvasStamped(el) ? (selector) => transposeCanvasOverlaySelector(selector, {
+    dialog: el.tagName === "DIALOG"
+  }) : (selector) => selector;
+  let serial = -1;
+  let indirect = 0;
+  const sources = [];
+  const rules = buildStyleRules(styleDef, {
+    mediaQueries,
+    resolveValue: (property, value, target) => {
+      if (target === "self" && property.startsWith("--")) {
+        sources.push({ name: property, value });
+        return null;
+      }
+      if (serial < 0) {
+        ({ serial } = sheetState);
+        sheetState.serial += 1;
+      }
+      const name = `--jx-r${serial}-${indirect}`;
+      indirect += 1;
+      sources.push({ name, value });
+      return `var(${name})`;
+    },
+    scope: SCOPE_TOKEN,
+    transposeSelector,
+    transposeValue: canvasStyleValue
+  });
+  if (rules.length === 0 && sources.length === 0) {
+    return;
   }
-  el.style.cssText = "";
-  delete el.dataset.jx;
-  applyStyle(el, styleDef ?? {}, mediaQueries, state);
+  const scoped = rules.filter((rule) => rule.target !== "unscoped");
+  const unscoped = rules.filter((rule) => rule.target === "unscoped");
+  for (const rule of unscoped) {
+    retainInterned(sheetState, sheetState.hoisted, rule.text, [rule.text]);
+  }
+  const uid = `jx-${hashCss(scoped.map((rule) => rule.key).join("|"))}`;
+  const texts = scoped.map((rule) => rule.text.replaceAll(SCOPE_TOKEN, `[data-jx="${uid}"]`));
+  if (texts.length > 0) {
+    el.dataset.jx = uid;
+    if (live) {
+      sheetState.scratch ??= openSink(doc);
+      sheetState.scratchOwners.set(el, texts);
+      rewriteScratch(sheetState);
+    } else {
+      retainInterned(sheetState, sheetState.interned, uid, texts);
+    }
+  }
+  const entry = {
+    doc,
+    hoisted: unscoped.map((rule) => rule.text),
+    interned: texts.length > 0 && !live ? uid : null,
+    state: sheetState,
+    stop: null,
+    uid,
+    vars: sources.map((source) => source.name)
+  };
+  if (sources.length > 0) {
+    const scope = effectScope();
+    scope.run(() => {
+      for (const { name, value } of sources) {
+        effect(() => {
+          const resolved = isRefObj(value) ? resolveRef(value.$ref, state) : evaluateTemplate(value, state);
+          el.style.setProperty(name, canvasStyleValue(String(resolved ?? "")));
+        });
+      }
+    });
+    entry.stop = () => scope.stop();
+  }
+  elementStyles.set(el, entry);
+  onScopeDispose(() => releaseElementStyles(el, entry), true);
 }
 var ENUMERATED_ATTRS = new Set(["contenteditable", "draggable", "spellcheck"]);
+function enumeratedAttrNames() {
+  return [...ENUMERATED_ATTRS].toSorted();
+}
 function booleanAttrValue(name, value) {
   const lower = name.toLowerCase();
   if (lower.startsWith("aria-") || ENUMERATED_ATTRS.has(lower)) {
@@ -2996,6 +3645,10 @@ function applyAttributes(el, attrs, state) {
   for (const [k, v] of Object.entries(attrs)) {
     const attr = canvasAttrName(el, k);
     const write = (resolved) => {
+      if (resolved === null || resolved === undefined) {
+        el.removeAttribute(attr);
+        return;
+      }
       if (typeof resolved === "boolean") {
         const text = booleanAttrValue(attr, resolved);
         if (text === null) {
@@ -3005,7 +3658,7 @@ function applyAttributes(el, attrs, state) {
         }
         return;
       }
-      el.setAttribute(attr, canvasAssetValue(el.tagName, k, String(resolved ?? "")));
+      el.setAttribute(attr, canvasAssetValue(el.tagName, k, String(resolved)));
     };
     if (isRefObj(v)) {
       effect(() => write(resolveRef(v.$ref, state)));
@@ -3020,8 +3673,69 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   const path = options?._path ?? [];
   const anchor = document.createComment("jx-array");
   parentEl.append(anchor);
-  const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef } = arrayDef;
-  effect(() => {
+  const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef, key: keyRef } = arrayDef;
+  const keyPointer = isRefObj(keyRef) ? keyRef.$ref : null;
+  let warned = false;
+  const warnOnce = (message) => {
+    if (!warned) {
+      warned = true;
+      console.warn(`Jx $map: ${message}`);
+    }
+  };
+  let rows = [];
+  const teardown = (row) => {
+    row.scope.stop();
+    row.node.remove();
+  };
+  const createRow = (key, item, index) => {
+    const map = shallowReactive({ index, item });
+    const child = Object.create(state);
+    child.$map = map;
+    Object.defineProperty(child, "$map/item", { enumerable: true, get: () => map.item });
+    Object.defineProperty(child, "$map/index", { enumerable: true, get: () => map.index });
+    const scope = effectScope(true);
+    const childOpts = options ? { ...options, _path: [...path, "map", index] } : undefined;
+    const node = scope.run(() => renderNode(mapDef, child, childOpts));
+    return { key, map, node, scope };
+  };
+  const reconcile = (list, keys) => {
+    const previous = new Map;
+    for (const row of rows) {
+      previous.set(row.key, row);
+    }
+    const next = [];
+    for (let index = 0;index < list.length; index++) {
+      const key = keys[index];
+      const item = list[index];
+      const existing = previous.get(key);
+      if (existing) {
+        previous.delete(key);
+        if (existing.map.item !== item) {
+          existing.map.item = item;
+        }
+        if (existing.map.index !== index) {
+          existing.map.index = index;
+          options?.onNodeMoved?.(existing.node, [...path, "map", index]);
+        }
+        next.push(existing);
+      } else {
+        next.push(createRow(key, item, index));
+      }
+    }
+    for (const row of previous.values()) {
+      teardown(row);
+    }
+    let cursor = rows.find((row) => !previous.has(row.key))?.node ?? anchor;
+    for (const row of next) {
+      if (row.node === cursor) {
+        cursor = cursor.nextSibling ?? anchor;
+        continue;
+      }
+      cursor.before(row.node);
+    }
+    rows = next;
+  };
+  const update = () => {
     let items = isRefObj(itemsSrc) ? resolveRef(itemsSrc.$ref, state) : itemsSrc;
     if (Array.isArray(items) && isRefObj(filterRef)) {
       const fn = resolveRef(filterRef.$ref, state);
@@ -3035,30 +3749,65 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
         items = [...items].toSorted(fn);
       }
     }
-    if (!Array.isArray(items) || !mapDef) {
-      return;
-    }
-    const scope = effectScope(true);
-    const nodes = [];
-    scope.run(() => {
-      for (const [index, item] of items.entries()) {
-        const child = Object.create(state);
-        child.$map = { index, item };
-        child["$map/item"] = item;
-        child["$map/index"] = index;
-        const childOpts = options ? { ...options, _path: [...path, "map", index] } : undefined;
-        const node = renderNode(mapDef, child, childOpts);
-        anchor.before(node);
-        nodes.push(node);
+    const list = Array.isArray(items) && mapDef ? items : [];
+    const keys = list.map((item, index) => mappedRowKey(keyPointer, item, index, warnOnce));
+    const seen = new Set;
+    for (let i = 0;i < keys.length; i++) {
+      if (seen.has(keys[i])) {
+        warnOnce(`duplicate key ${String(keys[i])} — every occurrence after the first is rebuilt on each change`);
+        keys[i] = { duplicate: i };
+      } else {
+        seen.add(keys[i]);
       }
-    });
-    onEffectCleanup(() => {
-      scope.stop();
-      for (const n of nodes) {
-        n.remove();
+    }
+    pauseTracking();
+    try {
+      reconcile(list, keys);
+    } finally {
+      resetTracking();
+    }
+  };
+  let queued = false;
+  let stopped = false;
+  const runner = effect(update, {
+    scheduler: () => {
+      if (queued) {
+        return;
       }
-    });
+      queued = true;
+      queueMicrotask(() => {
+        queued = false;
+        if (!stopped) {
+          runner();
+        }
+      });
+    }
   });
+  onScopeDispose(() => {
+    stopped = true;
+    for (const row of rows) {
+      teardown(row);
+    }
+    rows = [];
+  }, true);
+}
+function mappedRowKey(pointer, item, index, warnOnce) {
+  if (pointer === null) {
+    return index;
+  }
+  if (pointer === "$map/item") {
+    return item;
+  }
+  if (pointer.startsWith("$map/item/")) {
+    const key = readPath(item, pointer.slice("$map/item/".length));
+    if (key === undefined || key === null) {
+      warnOnce(`key "${pointer}" is empty for some items — those rows fall back to their index`);
+      return index;
+    }
+    return key;
+  }
+  warnOnce(`key "${pointer}" is not a $map/item pointer — rows fall back to their index`);
+  return index;
 }
 function resolveTagName(tagName, scope) {
   if (typeof tagName === "string") {
@@ -3074,65 +3823,86 @@ function resolveTagName(tagName, scope) {
   const key = evaluateOperand(expression.target, scope, null);
   return expression.cases[String(key)] ?? expression.default;
 }
-function renderSwitch(def2, state, options) {
+function renderSwitch(def, state, options) {
   const path = options?._path ?? [];
-  const container = document.createElement(resolveTagName(def2.tagName, state));
+  const container = document.createElement(resolveTagName(def.tagName, state));
   if (options?.onNodeCreated) {
-    options.onNodeCreated(container, path, def2, state);
+    options.onNodeCreated(container, path, def, state);
   }
-  applyProperties(container, def2, state);
-  applyStyle(container, def2.style ?? {}, state["$media"] ?? {}, state);
-  applyAttributes(container, def2.attributes ?? {}, state);
+  applyProperties(container, def, state);
+  applyStyle(container, def.style ?? {}, state["$media"] ?? {}, state);
+  applyAttributes(container, def.attributes ?? {}, state);
   let generation = 0;
+  let live = null;
+  let renderedKey = null;
+  const retire = () => {
+    live?.stop();
+    live = null;
+  };
   effect(() => {
-    container.replaceChildren();
-    if (!isRefObj(def2.$switch)) {
+    if (!isRefObj(def.$switch)) {
+      retire();
+      container.replaceChildren();
+      generation += 1;
+      return;
+    }
+    const key = String(resolveRef(def.$switch.$ref, state));
+    if (key === renderedKey) {
       return;
     }
-    const key = resolveRef(def2.$switch.$ref, state);
-    const caseDef = def2.cases?.[key];
+    renderedKey = key;
+    retire();
+    container.replaceChildren();
+    generation += 1;
+    const caseDef = def.cases?.[key];
     if (!caseDef) {
       return;
     }
+    const gen = generation;
+    const scope = effectScope(true);
+    live = scope;
+    const childOpts = options ? { ...options, _path: [...path, "cases", key] } : undefined;
     if (isRefObj(caseDef)) {
-      generation += 1;
-      const gen = generation;
-      const { href } = new URL(caseDef.$ref, location.href);
-      resolve(href).then(async (doc) => {
+      const { href } = new URL(caseDef.$ref, options?._ctx?.base ?? location.href);
+      resolve(href, options?._ctx).then(async (doc) => {
         if (gen !== generation) {
           return;
         }
-        const childScope = await buildScope(doc, {}, href);
+        const childScope = await buildScope(doc, {}, href, options?._ctx);
         if (gen !== generation) {
           return;
         }
         container.replaceChildren();
-        const childOpts2 = options ? { ...options, _path: [...path, "cases", key] } : undefined;
-        container.append(renderNode(doc, childScope, childOpts2));
+        scope.run(() => container.append(renderNode(doc, childScope, childOpts)));
       }).catch((error) => console.error("Jx $switch: failed to load external case", caseDef.$ref, error));
       return;
     }
-    const childOpts = options ? { ...options, _path: [...path, "cases", key] } : undefined;
-    container.append(renderNode(caseDef, state, childOpts));
+    pauseTracking();
+    try {
+      scope.run(() => container.append(renderNode(caseDef, state, childOpts)));
+    } finally {
+      resetTracking();
+    }
   });
+  onScopeDispose(retire, true);
   return container;
 }
-async function resolvePrototype(def2, state, key, base) {
-  if (def2.$src) {
-    return resolveExternalPrototype(def2, state, key, base);
+async function resolvePrototype(def, state, key, base, ctx) {
+  if (def.$src) {
+    return resolveExternalPrototype(def, state, key, base);
   }
-  switch (def2.$prototype) {
+  switch (def.$prototype) {
     case "Request": {
       const s = ref(null);
-      const debounceMs = def2.debounce ?? 0;
+      const debounceMs = def.debounce ?? 0;
       let debounceTimer = null;
-      if (!def2.manual && !_autoRequestConfig.skip) {
+      if (!def.manual && !(ctx?.skipAutoRequests ?? _autoRequestConfig.skip)) {
         effect(() => {
           let url;
-          if (isTemplateString(def2.url)) {
-            url = evaluateTemplate(def2.url, state);
+          if (isTemplateString(def.url)) {
+            url = evaluateTemplate(def.url, state);
           } else {
-            ({ url } = def2);
+            ({ url } = def);
           }
           if (!url || url === "undefined" || url.includes("undefined")) {
             return;
@@ -3145,11 +3915,11 @@ async function resolvePrototype(def2, state, key, base) {
             }
           });
           const doFetch = () => fetch(url, {
-            method: def2.method ?? "GET",
+            method: def.method ?? "GET",
             signal: controller.signal,
-            ...def2.headers && { headers: def2.headers },
-            ...def2.body && {
-              body: typeof def2.body === "object" ? JSON.stringify(def2.body) : def2.body
+            ...def.headers && { headers: def.headers },
+            ...def.body && {
+              body: typeof def.body === "object" ? JSON.stringify(def.body) : def.body
             }
           }).then((r) => r.ok ? r.json() : Promise.reject(r.statusText)).then((d) => {
             s.value = d;
@@ -3170,7 +3940,7 @@ async function resolvePrototype(def2, state, key, base) {
     case "URLSearchParams": {
       return computed(() => {
         const p = {};
-        for (const [k, v] of Object.entries(def2)) {
+        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;
           }
@@ -3180,14 +3950,14 @@ async function resolvePrototype(def2, state, key, base) {
     }
     case "LocalStorage":
     case "SessionStorage": {
-      const store = def2.$prototype === "LocalStorage" ? localStorage : sessionStorage;
-      const k = def2.key ?? key;
+      const store = def.$prototype === "LocalStorage" ? localStorage : sessionStorage;
+      const k = def.key ?? key;
       let init;
       try {
         const s = store.getItem(k);
-        init = s !== null ? JSON.parse(s) : def2.default ?? null;
+        init = s !== null ? JSON.parse(s) : def.default ?? null;
       } catch {
-        init = def2.default ?? null;
+        init = def.default ?? null;
       }
       const storageState = ref(init);
       effect(() => {
@@ -3205,7 +3975,7 @@ async function resolvePrototype(def2, state, key, base) {
       return storageState;
     }
     case "Cookie": {
-      const name = def2.name ?? key;
+      const name = def.name ?? key;
       const read = () => {
         const raw = readCookie(document.cookie, name);
         if (raw === null) {
@@ -3217,9 +3987,9 @@ async function resolvePrototype(def2, state, key, base) {
           return raw;
         }
       };
-      const cookieState = ref(read() ?? def2.default ?? null);
+      const cookieState = ref(read() ?? def.default ?? null);
       effect(() => {
-        document.cookie = serializeCookie(name, cookieState.value, def2);
+        document.cookie = serializeCookie(name, cookieState.value, def);
       });
       return cookieState;
     }
@@ -3232,7 +4002,7 @@ async function resolvePrototype(def2, state, key, base) {
         keyPath = "id",
         autoIncrement = true,
         indexes = []
-      } = def2;
+      } = def;
       if (!database || !store) {
         throw new Error(`Jx: IndexedDB entry '${key}' requires database and store`);
       }
@@ -3262,28 +4032,28 @@ async function resolvePrototype(def2, state, key, base) {
       return idbState;
     }
     case "Set": {
-      return new Set(Array.isArray(def2.default) ? def2.default : []);
+      return new Set(Array.isArray(def.default) ? def.default : []);
     }
     case "Map": {
-      return new Map(Object.entries(isJsonObject(def2.default) ? def2.default : {}));
+      return new Map(Object.entries(isJsonObject(def.default) ? def.default : {}));
     }
     case "FormData": {
       const fd = new FormData;
-      for (const [k, v] of Object.entries(def2.fields ?? {})) {
+      for (const [k, v] of Object.entries(def.fields ?? {})) {
         fd.append(k, v);
       }
       return fd;
     }
     case "Blob": {
-      return new Blob(def2.parts ?? [], {
-        type: typeof def2.type === "string" ? def2.type : "text/plain"
+      return new Blob(def.parts ?? [], {
+        type: typeof def.type === "string" ? def.type : "text/plain"
       });
     }
     case "ReadableStream": {
       return null;
     }
     default: {
-      console.warn(`Jx: unknown $prototype "${def2.$prototype}" for "${key}". Did you mean to add '$src'?`);
+      console.warn(`Jx: unknown $prototype "${def.$prototype}" for "${key}". Did you mean to add '$src'?`);
       return ref(null);
     }
   }
@@ -3300,17 +4070,20 @@ var EXTERNAL_RESERVED = new Set([
   "arguments",
   "name"
 ]);
-async function resolveExternalPrototype(def2, state, key, base) {
-  const src = def2.$src;
+async function resolveExternalPrototype(def, state, key, base) {
+  const src = def.$src;
   if (!src || !src.endsWith(".class.json")) {
-    throw new Error(`Jx: $prototype "${def2.$prototype}" requires a .class.json $src, got "${src}". Wrap the class in a .class.json schema with $implementation.`);
+    throw new Error(`Jx: $prototype "${def.$prototype}" requires a .class.json $src, got "${src}". Wrap the class in a .class.json schema with $implementation.`);
   }
-  return resolveClassJson(def2, state, key, base);
+  return resolveClassJson(def, state, key, base);
 }
-async function importAndInstantiate(def2, src, exportName, base) {
+async function importAndInstantiate(def, src, exportName, base) {
   let mod;
-  if (_moduleCache.has(src)) {
-    mod = _moduleCache.get(src);
+  const seeded = seededModule(src);
+  if (seeded instanceof Promise) {
+    mod = await seeded;
+  } else if (seeded) {
+    mod = seeded;
   } else {
     try {
       mod = await import(src);
@@ -3332,7 +4105,7 @@ async function importAndInstantiate(def2, src, exportName, base) {
     throw new TypeError(`Jx: "${exportName}" from "${src}" is not a class`);
   }
   const config = {};
-  for (const [k, v] of Object.entries(def2)) {
+  for (const [k, v] of Object.entries(def)) {
     if (!EXTERNAL_RESERVED.has(k)) {
       config[k] = v;
     }
@@ -3355,15 +4128,15 @@ async function importAndInstantiate(def2, src, exportName, base) {
   }
   return s;
 }
-async function resolveClassJson(def2, state, key, base) {
-  const src = def2.$src;
+async function resolveClassJson(def, state, key, base) {
+  const src = def.$src;
   if (!src) {
     throw new Error(`Jx: class entry '${key}' has no $src`);
   }
   let classDef;
   const isBareSpecifier = !src.startsWith(".") && !src.startsWith("/") && !src.startsWith("http") && !src.startsWith("file:");
   if (isBareSpecifier) {
-    return resolveViaDevProxy(def2, state, key, base);
+    return resolveViaDevProxy(def, state, key, base);
   }
   try {
     const url = base ? new URL(src, base).href : src;
@@ -3373,25 +4146,25 @@ async function resolveClassJson(def2, state, key, base) {
     }
     classDef = await res.json();
   } catch {
-    return resolveViaDevProxy(def2, state, key, base);
+    return resolveViaDevProxy(def, state, key, base);
   }
   if (classDef.$implementation) {
     const schemaStr = JSON.stringify(classDef);
     if (schemaStr.includes('"#/$context/')) {
-      return resolveViaDevProxy(def2, state, key, base);
+      return resolveViaDevProxy(def, state, key, base);
     }
     const schemaUrl = base ? new URL(src, base).href : new URL(src, location.href).href;
     const implSrc = new URL(classDef.$implementation, schemaUrl).href;
-    const exportName = def2.$export ?? classDef.title ?? def2.$prototype;
+    const exportName = def.$export ?? classDef.title ?? def.$prototype;
     try {
-      return await importAndInstantiate(def2, implSrc, exportName, base);
+      return await importAndInstantiate(def, implSrc, exportName, base);
     } catch {
-      return resolveViaDevProxy(def2, state, key, base);
+      return resolveViaDevProxy(def, state, key, base);
     }
   }
   const DynClass = classFromSchema(classDef);
   const config = {};
-  for (const [k, v] of Object.entries(def2)) {
+  for (const [k, v] of Object.entries(def)) {
     if (!EXTERNAL_RESERVED.has(k)) {
       config[k] = v;
     }
@@ -3478,9 +4251,9 @@ function classFromSchema(classDef) {
   const dynCtor = DynClass;
   return dynCtor;
 }
-async function resolveViaDevProxy(def2, state, key, base) {
+async function resolveViaDevProxy(def, state, key, base) {
   const config = {};
-  for (const [k, v] of Object.entries(def2)) {
+  for (const [k, v] of Object.entries(def)) {
     if (!EXTERNAL_RESERVED.has(k)) {
       config[k] = v;
     }
@@ -3489,9 +4262,9 @@ async function resolveViaDevProxy(def2, state, key, base) {
   const doResolve = (resolvedConfig) => fetch(resolveProxyPath("/__jx_resolve__"), {
     body: JSON.stringify({
       $base: base,
-      $export: def2.$export,
-      $prototype: def2.$prototype,
-      $src: def2.$src,
+      $export: def.$export,
+      $prototype: def.$prototype,
+      $src: def.$src,
       ...resolvedConfig
     }),
     headers: { "Content-Type": "application/json" },
@@ -3520,12 +4293,15 @@ async function resolveViaDevProxy(def2, state, key, base) {
   }
   return s;
 }
-async function resolveServerFunction(def2, state, key, base) {
-  const src = def2.$src;
-  const exportName = def2.$export;
+async function resolveServerFunction(def, state, key, base) {
+  const src = def.$src;
+  const exportName = def.$export;
   let mod;
-  if (_moduleCache.has(src)) {
-    mod = _moduleCache.get(src);
+  const seeded = seededModule(src);
+  if (seeded instanceof Promise) {
+    mod = await seeded;
+  } else if (seeded) {
+    mod = seeded;
   } else {
     try {
       mod = await import(src);
@@ -3535,10 +4311,10 @@ async function resolveServerFunction(def2, state, key, base) {
           const resolvedSrc = new URL(src, base).href;
           mod = await import(resolvedSrc);
         } catch {
-          return resolveServerFunctionViaProxy(def2, state, key, base);
+          return resolveServerFunctionViaProxy(def, state, key, base);
         }
       } else {
-        return resolveServerFunctionViaProxy(def2, state, key, base);
+        return resolveServerFunctionViaProxy(def, state, key, base);
       }
     }
     _moduleCache.set(src, mod);
@@ -3551,7 +4327,7 @@ async function resolveServerFunction(def2, state, key, base) {
     throw new TypeError(`Jx: "${exportName}" from "${src}" is not a function`);
   }
   const fn = candidate;
-  const rawArgs = def2.arguments ?? {};
+  const rawArgs = def.arguments ?? {};
   const hasReactiveArg = Object.values(rawArgs).some((v) => isRefObj(v));
   const resolveArgs = () => {
     const args = {};
@@ -3574,8 +4350,8 @@ async function resolveServerFunction(def2, state, key, base) {
   }
   return s;
 }
-async function resolveServerFunctionViaProxy(def2, state, key, base) {
-  const rawArgs = def2.arguments ?? {};
+async function resolveServerFunctionViaProxy(def, state, key, base) {
+  const rawArgs = def.arguments ?? {};
   const hasReactiveArg = Object.values(rawArgs).some((v) => isRefObj(v));
   const resolveArgs = () => {
     const args = {};
@@ -3587,8 +4363,8 @@ async function resolveServerFunctionViaProxy(def2, state, key, base) {
   const doResolve = (args) => fetch(resolveProxyPath("/__jx_server__"), {
     body: JSON.stringify({
       $base: base,
-      $export: def2.$export,
-      $src: def2.$src,
+      $export: def.$export,
+      $src: def.$src,
       arguments: args
     }),
     headers: { "Content-Type": "application/json" },
@@ -3619,8 +4395,8 @@ function resolveRef(refPath, state) {
   if (typeof refPath !== "string") {
     return refPath;
   }
-  if (refPath.startsWith("$map/")) {
-    const parts = refPath.split("/");
+  if (refPath.startsWith("$map/") || refPath.startsWith("#/$map/")) {
+    const parts = (refPath.startsWith("#/") ? refPath.slice(2) : refPath).split("/");
     const [, key] = parts;
     const map = state.$map;
     const base = map?.[key] ?? state[`$map/${key}`];
@@ -3646,12 +4422,41 @@ function isSignal(v) {
 function isRefObj(v) {
   return isRef2(v);
 }
-function isNestedSelector(k) {
-  return k.startsWith(":") || k.startsWith(".") || k.startsWith("&") || k.startsWith("[");
-}
 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") {
+    state[camelKey] = value !== null && value !== "false";
+    return;
+  }
+  if (value === null) {
+    const declared = defaults?.get(camelKey);
+    state[camelKey] = declared === undefined ? typeof current === "number" ? 0 : "" : declared;
+    return;
+  }
+  state[camelKey] = typeof current === "number" ? 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"]);
+        continue;
+      }
+      if (COMPUTED_STATE_KEYS.some((marker) => (marker in obj))) {
+        continue;
+      }
+    }
+    out.set(key, entry);
+  }
+  return out;
+}
+var COMPUTED_STATE_KEYS = ["$expression", "$prototype", "$ref", "$src"];
 var _privatePropWarned = new Set;
 function instanceSupplies(el, key) {
   if (Object.hasOwn(el, key)) {
@@ -3677,9 +4482,9 @@ function refusePrivateProp(key, where) {
 function _resetPrivatePropWarnings() {
   _privatePropWarned.clear();
 }
-function mergeProps(def2, parentState) {
+function mergeProps(def, parentState) {
   const child = Object.create(parentState);
-  for (const [k, v] of Object.entries(def2.$props ?? {})) {
+  for (const [k, v] of Object.entries(def.$props ?? {})) {
     if (refusePrivateProp(k, "$props")) {
       continue;
     }
@@ -3688,14 +4493,37 @@ function mergeProps(def2, parentState) {
   return child;
 }
 function toCSSText(rules) {
-  return Object.entries(rules).filter(([k, v]) => !isNestedSelector(k) && (v === null || typeof v !== "object")).map(([p, v]) => `${camelToKebab(p)}: ${canvasStyleValue(String(v))}`).join("; ");
+  return Object.entries(rules).filter(([k, v]) => !isNestedSelectorKey(k) && (v === null || typeof v !== "object")).map(([p, v]) => `${cssPropertyName(p)}: ${canvasStyleValue(String(v))}`).join("; ");
 }
 var _rootMedia = {};
 var _elementDefs = new Map;
+function elementDefinition(tagName) {
+  return _elementDefs.get(tagName);
+}
+async function redefineElement(doc, baseUrl) {
+  const base = baseUrl ?? location.href;
+  const { tagName } = doc;
+  if (!tagName || !tagName.includes("-")) {
+    throw new Error(`Jx redefineElement: tagName "${tagName}" must contain a hyphen`);
+  }
+  if (!customElements.get(tagName)) {
+    await defineElement(doc, base);
+    return;
+  }
+  if (doc.$elements) {
+    await registerElements(doc.$elements, base);
+  }
+  const before = _elementDefs.get(tagName)?.doc.observedAttributes ?? [];
+  const after = doc.observedAttributes ?? [];
+  if (JSON.stringify(before) !== JSON.stringify(after)) {
+    console.warn(`Jx redefineElement: <${tagName}> keeps observedAttributes [${before.join(", ")}] as first defined; [${after.join(", ")}] takes effect only in a fresh realm`);
+  }
+  _elementDefs.set(tagName, { base, doc });
+}
 function setRootMedia(map) {
   _rootMedia = map ?? {};
 }
-async function registerElements(elements, base) {
+async function registerElements(elements, base, ctx) {
   for (const entry of elements) {
     if (typeof entry === "string") {
       try {
@@ -3710,7 +4538,7 @@ async function registerElements(elements, base) {
       continue;
     }
     const { href } = new URL(entry.$ref, base);
-    const doc = await resolve(href);
+    const doc = await resolve(href, ctx);
     if (!doc.tagName || !doc.tagName.includes("-")) {
       continue;
     }
@@ -3718,7 +4546,7 @@ async function registerElements(elements, base) {
       continue;
     }
     if (doc.$elements) {
-      await registerElements(doc.$elements, href);
+      await registerElements(doc.$elements, href, ctx);
     }
     await defineElement(doc, href);
   }
@@ -3780,8 +4608,9 @@ async function defineElement(source, baseUrl) {
     await registerElements(source_.$elements, base);
   }
   _elementDefs.set(tagName, { base, doc: source_ });
-  const def2 = source_;
-  const observedAttrs = def2.observedAttributes ?? [];
+  const initialDef = source_;
+  const initialBase = base;
+  const observedAttrs = initialDef.observedAttributes ?? [];
   const ElementClass = class extends HTMLElement {
     _jxInitialized = false;
     _state = null;
@@ -3796,7 +4625,15 @@ async function defineElement(source, baseUrl) {
         return;
       }
       this._jxInitialized = true;
-      const state = await buildScope(def2, {}, base);
+      const live = _elementDefs.get(tagName) ?? { base: initialBase, doc: initialDef };
+      const def = live.doc;
+      const defBase = live.base;
+      const state = await buildScope(def, {}, defBase, { base: defBase, media: null, root: this });
+      for (const attr of observedAttrs) {
+        if (this.hasAttribute(attr)) {
+          absorbAttribute(state, attr, this.getAttribute(attr));
+        }
+      }
       const propsAttr = this.dataset.jxProps;
       if (propsAttr) {
         try {
@@ -3805,7 +4642,7 @@ async function defineElement(source, baseUrl) {
             if (refusePrivateProp(key, "data-jx-props")) {
               continue;
             }
-            if (key in (def2.state ?? {})) {
+            if (key in (def.state ?? {})) {
               state[key] = val;
             }
           }
@@ -3819,12 +4656,12 @@ async function defineElement(source, baseUrl) {
           this.removeAttribute(name);
           continue;
         }
-        if (key in (def2.state ?? {})) {
+        if (key in (def.state ?? {})) {
           state[key] = this.getAttribute(name);
           this.removeAttribute(name);
         }
       }
-      for (const key of Object.keys(def2.state ?? {})) {
+      for (const key of Object.keys(def.state ?? {})) {
         if (isPrivateStateKey(key)) {
           continue;
         }
@@ -3832,7 +4669,7 @@ async function defineElement(source, baseUrl) {
           state[key] = this[key];
         }
       }
-      for (const key of Object.keys(def2.state ?? {})) {
+      for (const key of Object.keys(def.state ?? {})) {
         if (isPrivateStateKey(key)) {
           continue;
         }
@@ -3849,22 +4686,28 @@ async function defineElement(source, baseUrl) {
       this._state = state;
       const slottedChildren = [...this.childNodes];
       this.replaceChildren();
-      if (!this.style.display) {
-        this.style.display = "block";
-      }
-      applyStyle(this, def2.style ?? {}, state["$media"] ?? {}, state);
-      applyAttributes(this, def2.attributes ?? {}, state);
-      if (!Array.isArray(def2.children) && def2.textContent !== undefined) {
-        bindProperty(this, "textContent", def2.textContent, state);
-      }
-      const children = Array.isArray(def2.children) ? def2.children : [];
-      for (const childDef of children) {
-        this.append(renderNode(childDef, state));
+      const defStyle = declaresDisplay(def.style) ? def.style : { display: "block", ...def.style };
+      const hostStyle = mergeStyle(defStyle, callSiteStyles.get(this));
+      applyStyle(this, hostStyle, state["$media"] ?? {}, 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 {
+        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));
+        queueMicrotask(() => onMount(state, this));
       }
     }
     disconnectedCallback() {
@@ -3881,25 +4724,17 @@ async function defineElement(source, baseUrl) {
       if (!this._state || oldVal === newVal) {
         return;
       }
-      const camelKey = name.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
-      const current = this._state[camelKey];
-      if (typeof current === "number") {
-        this._state[camelKey] = Number(newVal);
-      } else if (typeof current === "boolean") {
-        this._state[camelKey] = newVal !== null && newVal !== "false";
-      } else {
-        this._state[camelKey] = newVal;
-      }
+      absorbAttribute(this._state, name, newVal, declaredDefaults(_elementDefs.get(tagName)?.doc ?? initialDef));
     }
   };
   customElements.define(tagName, ElementClass);
 }
-function renderCustomElementWithProps(def2, state, options, path) {
-  const el = document.createElement(resolveTagName(def2.tagName, state));
+function renderCustomElementWithProps(def, state, options, path) {
+  const el = document.createElement(resolveTagName(def.tagName, state));
   if (options?.onNodeCreated) {
-    options.onNodeCreated(el, path ?? [], def2, state);
+    options.onNodeCreated(el, path ?? [], def, state);
   }
-  for (const [key, val] of Object.entries(def2.$props ?? {})) {
+  for (const [key, val] of Object.entries(def.$props ?? {})) {
     if (refusePrivateProp(key, "$props")) {
       continue;
     }
@@ -3920,19 +4755,25 @@ function renderCustomElementWithProps(def2, state, options, path) {
       write(val);
     }
   }
-  applyStyle(el, def2.style ?? {}, state["$media"] ?? {}, state);
-  applyAttributes(el, def2.attributes ?? {}, state);
-  const children = Array.isArray(def2.children) ? def2.children : [];
+  if (def.style) {
+    callSiteStyles.set(el, def.style);
+  }
+  applyStyle(el, def.style ?? {}, state["$media"] ?? {}, state);
+  applyAttributes(el, def.attributes ?? {}, state);
+  applyProperties(el, def, state);
+  const children = Array.isArray(def.children) ? def.children : [];
   for (let i = 0;i < children.length; i++) {
+    const child = children[i];
     const childOpts = options && path ? { ...options, _path: [...path, "children", i] } : undefined;
-    el.append(renderNode(children[i], state, childOpts));
+    if (isMappedArray(child)) {
+      renderMappedArrayInto(el, child, state, childOpts);
+    } else {
+      el.append(renderNode(child, state, childOpts));
+    }
   }
   return el;
 }
 function distributeSlots(host, slottedChildren) {
-  if (slottedChildren.length === 0) {
-    return;
-  }
   const slots = host.querySelectorAll("slot");
   if (slots.length === 0) {
     return;
@@ -3953,12 +4794,7 @@ function distributeSlots(host, slottedChildren) {
   for (const slot of slots) {
     const name = slot.getAttribute("name");
     const matches = name ? named.get(name) ?? [] : unnamed;
-    if (matches.length > 0) {
-      slot.replaceChildren();
-      for (const child of matches) {
-        slot.append(child);
-      }
-    }
+    slot.replaceWith(...matches.length > 0 ? matches : [...slot.childNodes]);
   }
 }
 export {
@@ -3971,19 +4807,35 @@ export {
   applyStyle,
   booleanAttrValue,
   buildScope,
+  buildStyleRules,
   camelToKebab,
   canvasStyleValue,
+  cssPropertyName,
+  cssRuleText,
   defineElement,
-  elementStyleTags,
+  documentStyleText,
+  elementDefinition,
+  enumeratedAttrNames,
   hasSchemaKeywords,
+  hashCss,
+  isDeclarationAtRule,
+  isKeyframesAtRule,
+  isNestedSelectorKey,
   isSignal,
   isSingleExpression,
+  mount,
   observeScope,
+  preloadDocument,
+  preloadModule,
   pureSchemeOf,
   reapplyStyle,
+  redefineElement,
+  releaseElementStyles,
   renderNode,
+  resetDocumentStyles,
   resolve,
   resolveAtQuery,
+  resolveNestedSelector,
   resolvePrototype,
   resolveRef,
   resolveTagName,
@@ -3991,6 +4843,8 @@ export {
   schemeSelectors,
   setCanvasAssetResolver,
   setCanvasDelinkAnchors,
+  setCanvasDelinkCommands,
+  setCanvasDelinkPopovers,
   setCanvasViewportTranspose,
   setResolveToken,
   setRootMedia,
@@ -3998,9 +4852,12 @@ export {
   setSkipContentResolution,
   setSkipServerFunctions,
   setStampPropBindings,
+  splitSelectorList,
   toCSSText,
+  transposeCanvasOverlaySelector,
+  transposeCanvasPopoverSelector,
   transposeCanvasUnits
 };
 
-//# debugId=899C7FD9D6AF1F1D64756E2164756E21
+//# debugId=A89AF23A7F8742C664756E2164756E21
 //# sourceMappingURL=runtime.js.map