@jxsuite/studio 4.1.0 → 5.1.0

package/dist/iframe-entry.js

@@ -1,3 +1,35 @@
+var __chunkGraphs;
+var __chunkSeen;
+var __chunkNonce;
+var __preload = (id, seenOnly) => {
+  for (var [base, graph, ids] of __chunkGraphs || [])
+    for (var stack = [id], g = globalThis, d = g.document, head, j, node, k, link;j = stack.pop(); )
+      if (!__chunkSeen[j] && (node = graph[j])) {
+        __chunkSeen[j] = 1;
+        for (k = 1;k < node.length; k++)
+          stack.push(ids[node[k]]);
+        if (!seenOnly && j !== id && (head = d && d.head)) {
+          if (__chunkNonce === undefined)
+            __chunkNonce = (k = d.querySelector("meta[property=csp-nonce]")) && (k.nonce || k.getAttribute("nonce")) || "";
+          link = d.createElement("link");
+          link.rel = "modulepreload";
+          link.crossOrigin = "";
+          if (__chunkNonce)
+            link.nonce = __chunkNonce;
+          link.href = new g.URL(node[0], base);
+          head.appendChild(link);
+        }
+      }
+};
+var __chunks = (base, ids, nodes, entry) => {
+  for (var graph = {}, i = 0;i < ids.length; i++)
+    graph[ids[i]] = nodes[i];
+  (__chunkGraphs ||= []).push([base, graph, ids]);
+  __chunkSeen ||= {};
+  __preload(ids[entry], 1);
+};
+__chunks(import.meta.url,["1zk4r753","a73p0pqm","eptb614w","abk6qyee","780pvfbv","3sqv46sn","xgg3kfw7","yy10wk9r","5cndyft8","sp6tna8v","47z3ytva","2r16ez41","g7nm1rgb","t0n6h2rn","wbp1cdws","xbh5bhtr","v17df7b8","anwybnkn","44ez96fc","5e7jev23","s890b918","6v2ac08j","q99sy9rf","nbyxee1y","15g3n6xv","b27vq81n"],[["./iframe-entry.js"],["./chunks/tree-a73p0pqm.js"],["./chunks/tooltip-eptb614w.js",23],["./chunks/textfield-abk6qyee.js"],["./chunks/toast-780pvfbv.js",24],["./chunks/toast-host-3sqv46sn.js",24],["./chunks/color-xgg3kfw7.js",25],["./chunks/icons-yy10wk9r.js"],["./chunks/number-field-5cndyft8.js"],["./chunks/action-group-sp6tna8v.js"],["./chunks/popover-47z3ytva.js",23],["./chunks/select-2r16ez41.js"],["./chunks/split-g7nm1rgb.js"],["./chunks/swatch-group-t0n6h2rn.js"],["./chunks/tabs-wbp1cdws.js"],["./chunks/toolbar-xbh5bhtr.js"],["./chunks/color-area-v17df7b8.js",25],["./chunks/color-field-anwybnkn.js",25,23],["./chunks/color-slider-44ez96fc.js",25],["./chunks/combobox-5e7jev23.js",23],["./chunks/dialog-s890b918.js"],["./chunks/listbox-6v2ac08j.js"],["./chunks/menu-q99sy9rf.js",23],["./chunks/iframe-entry-nbyxee1y.js"],["./chunks/iframe-entry-15g3n6xv.js"],["./chunks/iframe-entry-b27vq81n.js"]],0);
+
 // src/canvas/iframe-channel.ts
 var ENVELOPE = "jx:canvas";
 function postMessageChannel(opts) {
@@ -31,6 +63,17 @@ function postMessageChannel(opts) {
   };
 }
 
+// src/utils/geometry.ts
+function rectOf(el) {
+  return el.getBoundingClientRect();
+}
+function rectOfRange(r) {
+  return r.getBoundingClientRect();
+}
+function elementAtPoint(x, y, root = document) {
+  return root.elementFromPoint(x, y);
+}
+
 // ../schema/src/guards.ts
 function isJsonObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -91,7 +134,17 @@ function paramNames(parameters) {
   return parameters.map((p) => typeof p === "string" ? p : p.name);
 }
 function isTagExpression(tagName) {
-  return isJsonObject(tagName) && isJsonObject(tagName.$expression);
+  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 tagNameCandidates(tagName) {
   if (typeof tagName === "string") {
@@ -292,6 +345,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;
 
@@ -1127,6 +1187,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) {
@@ -1304,6 +1365,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)
 };
@@ -1338,6 +1402,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);
 }
@@ -1514,6 +1581,87 @@ 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];
+}
+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";
 function pureSchemeOf(query) {
   const m = /^\(\s*prefers-color-scheme\s*:\s*(light|dark)\s*\)$/.exec(query.trim());
@@ -1531,6 +1679,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) && !isRef(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 (isRef(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";
@@ -1762,8 +2099,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);
@@ -1802,24 +2139,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);
@@ -1832,23 +2188,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);
@@ -1870,8 +2226,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 };
@@ -1884,7 +2240,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);
@@ -1931,19 +2287,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`);
   }
@@ -2185,10 +2541,10 @@ function isNonRelativeRef(value) {
 function normalizeProjectPath(path) {
   return path.replaceAll("\\", "/").replace(/^\.\//, "").replace(/^\/+/, "").replace(/\/+$/, "");
 }
-function joinProjectPath(dir, ref2) {
+function joinProjectPath(dir, ref) {
   const base = dir === "" || dir === "." ? [] : normalizeProjectPath(dir).split("/");
   const out = base.filter((segment) => segment !== "" && segment !== ".");
-  for (const segment of ref2.replaceAll("\\", "/").split("/")) {
+  for (const segment of ref.replaceAll("\\", "/").split("/")) {
     if (segment === "" || segment === ".") {
       continue;
     }
@@ -2310,6 +2666,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 = {}) {
@@ -2343,7 +2705,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;
         }
@@ -2360,6 +2723,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;
       }
@@ -2407,10 +2778,14 @@ function serializeCookie(name, value, options) {
 }
 // ../runtime/src/runtime.ts
 var _resolveCache = new Map;
-async function resolve(source) {
+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);
   }
@@ -2495,10 +2870,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;
@@ -2578,71 +2979,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()) {
@@ -2662,11 +3076,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()) {
@@ -2676,34 +3090,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;
 }
@@ -2747,36 +3162,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;
@@ -2796,11 +3247,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());
     }
@@ -2810,8 +3261,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([
@@ -2860,19 +3311,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);
@@ -2880,38 +3331,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);
@@ -2928,49 +3382,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);
@@ -2984,6 +3447,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)) {
@@ -3005,142 +3471,287 @@ 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 hasNested = Object.keys(nested).length > 0;
-  const hasMedia = Object.keys(media).length > 0;
-  const hasBaseDecls = Object.keys(baseDecls).length > 0;
-  if (!hasNested && !hasMedia && !hasBaseDecls) {
+  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 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);
-    }
-  }
-  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);
+  state.scratch.replaceAll([...state.scratchOwners.values()].flat());
+}
+function releaseInterned(state, table, key) {
+  const entry = table.get(key);
+  if (!entry) {
+    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);
-    }
+  entry.refs -= 1;
+  if (entry.refs <= 0) {
+    table.delete(key);
+    state.shared.remove(entry.inserted);
   }
-  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);
-    }
+}
+function retainInterned(state, table, key, texts) {
+  const existing = table.get(key);
+  if (existing) {
+    existing.refs += 1;
+    return;
   }
-  const tag = document.createElement("style");
-  tag.textContent = css;
-  tag.dataset.jxOwner = uid;
-  document.head.append(tag);
-  elementStyleTags.set(el, tag);
+  table.set(key, { inserted: state.shared.insert(texts), refs: 1 });
 }
-var elementStyleTags = new WeakMap;
-function reapplyStyle(el, styleDef, mediaQueries = {}, state = {}) {
-  const prev = elementStyleTags.get(el);
-  if (prev) {
-    prev.remove();
-    elementStyleTags.delete(el);
+function releaseElementStyles(el, only) {
+  const entry = elementStyles.get(el);
+  if (!entry || only !== undefined && entry !== only) {
+    return;
+  }
+  elementStyles.delete(el);
+  entry.stop?.();
+  for (const name of entry.vars) {
+    el.style.removeProperty(name);
   }
-  el.style.cssText = "";
   delete el.dataset.jx;
-  applyStyle(el, styleDef ?? {}, mediaQueries, state);
+  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);
+  }
+}
+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 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 = {}) {
+  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;
+  }
+  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 booleanAttrValue(name, value) {
@@ -3154,6 +3765,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) {
@@ -3163,7 +3778,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)));
@@ -3178,8 +3793,70 @@ 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;
+  const instancePath = _instancePath;
+  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);
@@ -3193,30 +3870,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 {
+      underInstancePath(reexpand(instancePath), () => 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") {
@@ -3232,65 +3944,87 @@ 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));
+  const instancePath = _instancePath;
   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 = resolveRef(def2.$switch.$ref, state);
-    const caseDef = def2.cases?.[key];
+    const key = String(resolveRef(def.$switch.$ref, state));
+    if (key === renderedKey) {
+      return;
+    }
+    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));
+        underInstancePath(reexpand(instancePath), () => 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 {
+      underInstancePath(reexpand(instancePath), () => 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;
@@ -3303,11 +4037,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;
@@ -3328,7 +4062,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;
           }
@@ -3338,14 +4072,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(() => {
@@ -3363,7 +4097,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) {
@@ -3375,9 +4109,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;
     }
@@ -3390,7 +4124,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`);
       }
@@ -3420,28 +4154,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);
     }
   }
@@ -3458,17 +4192,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);
@@ -3490,7 +4227,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;
     }
@@ -3513,15 +4250,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;
@@ -3531,25 +4268,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;
     }
@@ -3636,9 +4373,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;
     }
@@ -3647,9 +4384,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" },
@@ -3678,12 +4415,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);
@@ -3693,10 +4433,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);
@@ -3709,7 +4449,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 = {};
@@ -3732,8 +4472,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 = {};
@@ -3745,8 +4485,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" },
@@ -3777,8 +4517,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}`];
@@ -3801,12 +4541,41 @@ function resolveRef(refPath, state) {
 function isRefObj(v) {
   return isRef(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)) {
@@ -3829,9 +4598,9 @@ function refusePrivateProp(key, where) {
   }
   return true;
 }
-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;
     }
@@ -3839,15 +4608,32 @@ 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("; ");
-}
 var _rootMedia = {};
 var _elementDefs = new Map;
+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 {
@@ -3862,7 +4648,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;
     }
@@ -3870,11 +4656,70 @@ async function registerElements(elements, base) {
       continue;
     }
     if (doc.$elements) {
-      await registerElements(doc.$elements, href);
+      await registerElements(doc.$elements, href, ctx);
     }
     await defineElement(doc, href);
   }
 }
+var MAX_COMPONENT_NESTING = 32;
+var ROOT_INSTANCE_PATH = { expansion: 0, frames: [] };
+var _instancePath = ROOT_INSTANCE_PATH;
+function underInstancePath(path, fn) {
+  const was = _instancePath;
+  _instancePath = path;
+  try {
+    return fn();
+  } finally {
+    _instancePath = was;
+  }
+}
+function reexpand(path) {
+  return { expansion: path.frames.length, frames: path.frames };
+}
+function samePropValue(a, b) {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (!isPlainData(a) || !isPlainData(b)) {
+    return false;
+  }
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+function isPlainData(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const raw = toRaw(value);
+  if (Array.isArray(raw)) {
+    return true;
+  }
+  const proto = Object.getPrototypeOf(raw);
+  return proto === Object.prototype || proto === null;
+}
+function sameFrame(a, b) {
+  if (a.tag !== b.tag) {
+    return false;
+  }
+  const keys = Object.keys(a.props);
+  if (keys.length !== Object.keys(b.props).length) {
+    return false;
+  }
+  return keys.every((key) => Object.hasOwn(b.props, key) && samePropValue(a.props[key], b.props[key]));
+}
+function extendInstancePath(path, frame) {
+  const chain = [...path.frames.map((f) => f.tag), frame.tag].join(" → ");
+  if (path.frames.slice(path.expansion).some((f) => sameFrame(f, frame))) {
+    throw new Error(`Component <${frame.tag}> renders itself: ${chain}. A component cannot appear inside its own ` + `definition with the same props — the expansion would never end.`);
+  }
+  if (path.frames.length >= MAX_COMPONENT_NESTING) {
+    throw new Error(`Component nesting exceeds ${MAX_COMPONENT_NESTING} levels: ${chain}. A component that renders itself with changing props needs a case that stops.`);
+  }
+  return { expansion: path.expansion, frames: [...path.frames, frame] };
+}
 var _definedSources = new Set;
 async function defineElement(source, baseUrl) {
   let base = baseUrl;
@@ -3900,8 +4745,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;
@@ -3916,7 +4762,18 @@ async function defineElement(source, baseUrl) {
         return;
       }
       this._jxInitialized = true;
-      const state = await buildScope(def2, {}, base);
+      const enclosingPath = _instancePath;
+      const supplied = {};
+      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));
+          supplied[attr] = this.getAttribute(attr);
+        }
+      }
       const propsAttr = this.dataset.jxProps;
       if (propsAttr) {
         try {
@@ -3925,8 +4782,9 @@ 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;
+              supplied[key] = val;
             }
           }
         } catch {}
@@ -3939,20 +4797,39 @@ async function defineElement(source, baseUrl) {
           this.removeAttribute(name);
           continue;
         }
-        if (key in (def2.state ?? {})) {
+        if (key in (def.state ?? {})) {
           state[key] = this.getAttribute(name);
+          supplied[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;
         }
         if (key in this && this[key] !== undefined && instanceSupplies(this, key)) {
           state[key] = this[key];
+          supplied[key] = this[key];
         }
       }
-      for (const key of Object.keys(def2.state ?? {})) {
+      let ownPath;
+      try {
+        ownPath = extendInstancePath(enclosingPath, { props: supplied, tag: tagName });
+      } catch (error) {
+        this.replaceChildren();
+        if (!this.isConnected) {
+          return;
+        }
+        console.error(`Jx: <${tagName}> was not rendered:`, error);
+        this.dispatchEvent(new ErrorEvent("jx-error", {
+          bubbles: true,
+          composed: true,
+          error,
+          message: error instanceof Error ? error.message : String(error)
+        }));
+        return;
+      }
+      for (const key of Object.keys(def.state ?? {})) {
         if (isPrivateStateKey(key)) {
           continue;
         }
@@ -3969,22 +4846,30 @@ 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 {
+        underInstancePath(ownPath, () => {
+          for (const childDef of children) {
+            this.append(renderNode(childDef, state));
+          }
+        });
+      } finally {
+        _canvasInsideStampedHost = wasInside;
       }
       distributeSlots(this, slottedChildren);
       const { onMount } = state;
       if (typeof onMount === "function") {
-        queueMicrotask(() => onMount(state));
+        queueMicrotask(() => onMount(state, this));
       }
     }
     disconnectedCallback() {
@@ -4001,25 +4886,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;
     }
@@ -4040,19 +4917,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;
@@ -4073,12 +4956,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]);
   }
 }
 
@@ -4124,14 +5002,18 @@ function mountedRefFor(value, entryDir, mount) {
 }
 
 // src/canvas/path-mapping.ts
+function jxPathSelector(serialized) {
+  const escaped = serialized.replaceAll("\\", String.raw`\\`).replaceAll("'", String.raw`\'`);
+  return `[data-jx-path='${escaped}']`;
+}
 function wrapsPageContent(path, prefix) {
   if (!prefix) {
     return false;
   }
   return path.length <= prefix.length && path.every((seg, i) => prefix[i] === seg);
 }
-function classifyRenderNode(path, def2, ctx) {
-  const marker = ctx.layoutWrapped && typeof def2 === "object" ? def2?.$__layout : undefined;
+function classifyRenderNode(path, def, ctx) {
+  const marker = ctx.layoutWrapped && typeof def === "object" ? def?.$__layout : undefined;
   if (marker) {
     const origin = typeof marker === "object" ? marker : {};
     return {
@@ -4150,7 +5032,7 @@ function classifyRenderNode(path, def2, ctx) {
       mappedPath = typeof containerIdx === "number" ? ["children", containerIdx - (ctx.pageContentOffset ?? 0), ...rest.slice(1)] : ["children", ...rest];
     }
   }
-  if ((ctx.canvasMode === "design" || ctx.canvasMode === "edit") && ctx.arrayPaths.size > 0) {
+  if (ctx.arrayPaths.size > 0) {
     let changed = true;
     while (changed) {
       changed = false;
@@ -4172,57 +5054,160 @@ function parseJxPath(serialized) {
   return JSON.parse(serialized);
 }
 
+// src/canvas/iframe-position.ts
+function isIslandBoundary(el) {
+  if (el.dataset.jxDefinitionRoot !== undefined) {
+    return false;
+  }
+  return el.getAttribute("contenteditable") === "false" || el.tagName.includes("-");
+}
+function activeBlockAt(node, isEditable) {
+  let el = node instanceof Element ? node : node?.parentElement ?? null;
+  while (el) {
+    if (el instanceof HTMLElement) {
+      if (el.dataset.jxPath && isEditable(el)) {
+        return { el, path: parseJxPath(el.dataset.jxPath) };
+      }
+      if (isIslandBoundary(el)) {
+        return null;
+      }
+    }
+    el = el.parentElement;
+  }
+  return null;
+}
+function elementForPath(container, path) {
+  const el = container.querySelector(jxPathSelector(serializeJxPath(path)));
+  return el instanceof HTMLElement ? el : null;
+}
+function blockTextLength(block) {
+  return block.textContent?.length ?? 0;
+}
+function offsetOf(block, node, offset) {
+  if (!block.contains(node)) {
+    return null;
+  }
+  const range = block.ownerDocument.createRange();
+  range.setStart(block, 0);
+  try {
+    range.setEnd(node, offset);
+  } catch {
+    return null;
+  }
+  return range.toString().length;
+}
+function domPositionAt(block, offset) {
+  const target = Math.max(0, Math.min(offset, blockTextLength(block)));
+  const walker = block.ownerDocument.createTreeWalker(block, NodeFilter.SHOW_TEXT);
+  let seen = 0;
+  let last = null;
+  let current = walker.nextNode();
+  while (current) {
+    const len = current.length;
+    if (seen + len >= target) {
+      return { node: current, offset: target - seen };
+    }
+    seen += len;
+    last = current;
+    current = walker.nextNode();
+  }
+  return last ? { node: last, offset: last.length } : { node: block, offset: 0 };
+}
+function toDocPos(node, offset, isEditable) {
+  const block = activeBlockAt(node, isEditable);
+  if (!block || !node) {
+    return null;
+  }
+  const charOffset = offsetOf(block.el, node, offset);
+  return charOffset === null ? null : { offset: charOffset, path: block.path };
+}
+function toDomPosition(container, pos) {
+  const el = elementForPath(container, pos.path);
+  return el ? domPositionAt(el, pos.offset) : null;
+}
+function isAtBlockStart(pos) {
+  return pos.offset <= 0;
+}
+function samePath(a, b) {
+  return serializeJxPath(a.path) === serializeJxPath(b.path);
+}
+function blocksInOrder(container, isEditable) {
+  const out = [];
+  for (const el of container.querySelectorAll("[data-jx-path]")) {
+    if (isEditable(el) && !sealedInIsland(el, container)) {
+      out.push(el);
+    }
+  }
+  return out;
+}
+function sealedInIsland(el, container) {
+  let cur = el.parentElement;
+  while (cur && cur !== container) {
+    if (isIslandBoundary(cur)) {
+      return true;
+    }
+    cur = cur.parentElement;
+  }
+  return false;
+}
+function adjacentBlock(container, path, direction, isEditable) {
+  const blocks = blocksInOrder(container, isEditable);
+  const key = serializeJxPath(path);
+  const index = blocks.findIndex((el) => el.dataset.jxPath === key);
+  const neighbour = index === -1 ? undefined : blocks[index + direction];
+  return neighbour ? { el: neighbour, path: parseJxPath(neighbour.dataset.jxPath) } : null;
+}
+
 // ../site/src/site-style.ts
 var SITE_STYLE_ID = "jx-site-style";
-function toDecls(props, transpose) {
-  return Object.entries(props).map(([key, value]) => `${camelToKebab(key)}: ${transpose(String(value))}`).join("; ");
-}
-function buildSiteStyleCSS(siteStyle, mediaQueries, transpose) {
+function buildSiteStyleCSS(siteStyle, mediaQueries, transpose, resolveValue) {
   const rules = [];
+  const push = (style, selector) => {
+    for (const rule of buildStyleRules(style, {
+      mediaQueries,
+      scope: selector,
+      transposeValue: transpose,
+      ...resolveValue ? { resolveValue: (property, value) => resolveValue(property, value, selector) } : {}
+    })) {
+      rules.push(rule.text);
+    }
+  };
   const rootProps = {};
   const bodyProps = {};
   const condBlocks = [];
+  const selectorBlocks = [];
   for (const [key, value] of Object.entries(siteStyle)) {
     if (value !== null && typeof value === "object" && !Array.isArray(value)) {
       if (key.startsWith("@")) {
         condBlocks.push([key, value]);
+      } else if (!key.startsWith("--")) {
+        selectorBlocks.push([key, value]);
       }
       continue;
     }
-    if (key.startsWith(":") || key.startsWith(".") || key.startsWith("[") || key.startsWith("@")) {
+    if (isNestedSelectorKey(key) || key.startsWith("@")) {
       continue;
     }
-    if (key.startsWith("--")) {
+    if (key.startsWith("--") || key === "colorScheme" || key === "color-scheme") {
       rootProps[key] = value;
     } else {
       bodyProps[key] = value;
     }
   }
-  const rootCSS = toDecls(rootProps, transpose);
-  if (rootCSS) {
-    rules.push(`:root { ${rootCSS} }`);
-  }
-  const bodyCSS = toDecls(bodyProps, transpose);
-  if (bodyCSS) {
-    rules.push(`body { ${bodyCSS} }`);
-  }
-  for (const [atKey, block] of condBlocks) {
-    const query = resolveAtQuery(atKey, mediaQueries);
-    if (query === null) {
-      continue;
+  push(rootProps, ":root");
+  push(bodyProps, "body");
+  for (const [key, block] of selectorBlocks) {
+    if (key.startsWith("&")) {
+      push({ [key]: block }, ":root");
+    } else {
+      push(block, key);
+    }
+  }
+  for (const [atKey, block] of condBlocks) {
+    if (isDeclarationAtRule(atKey) || isKeyframesAtRule(atKey)) {
+      push({ [atKey]: block }, null);
+      continue;
     }
-    const scheme = pureSchemeOf(query);
-    const emit = (selector, props) => {
-      if (!props) {
-        return;
-      }
-      if (scheme) {
-        const { auto, forced } = schemeSelectors(selector, scheme);
-        rules.push(`@media ${query} { ${auto} { ${props} } }`, `${forced} { ${props} }`);
-      } else {
-        rules.push(`@media ${query} { ${selector} { ${props} } }`);
-      }
-    };
     const condRoot = {};
     const condBody = {};
     const condSubs = [];
@@ -4239,14 +5224,14 @@ function buildSiteStyleCSS(siteStyle, mediaQueries, transpose) {
         condBody[k] = v;
       }
     }
-    emit(":root", toDecls(condRoot, transpose));
-    emit("body", toDecls(condBody, transpose));
+    push({ [atKey]: condRoot }, ":root");
+    push({ [atKey]: condBody }, "body");
     for (const [sel, sub] of condSubs) {
-      emit(sel, toDecls(sub, transpose));
+      push({ [atKey]: sub }, sel);
     }
   }
-  if (Object.values(mediaQueries).some((q) => pureSchemeOf(q) !== null)) {
-    rules.push(":root { color-scheme: light dark }");
+  if (Object.values(mediaQueries).some((q) => pureSchemeOf(q) !== null) && !("colorScheme" in siteStyle)) {
+    rules.push(":root { color-scheme: light dark }", `:root:where([${COLOR_SCHEME_ATTR}="light"]) { color-scheme: light }`, `:root:where([${COLOR_SCHEME_ATTR}="dark"]) { color-scheme: dark }`);
   }
   return rules.join(`
 `);
@@ -4386,6 +5371,196 @@ function syncEditModeCss(doc, mode) {
   style.textContent = EDIT_PLACEHOLDER_CSS;
   doc.head.append(style);
 }
+var CANVAS_OVERLAY_STYLE_ID = "jx-canvas-overlay-css";
+var CANVAS_OVERLAY_CSS = `
+/* The UA rule a de-popovered element lost, re-supplied at UA-EQUIVALENT PRECEDENCE.
+
+   The cascade layer is the mechanism and it is the whole point. An unlayered author declaration
+   beats a layered one whatever its specificity, and every declaration applyStyle emits is an
+   unlayered rule in an adopted sheet. That is exactly how author origin beats UA origin on the
+   shipped page, so the canvas reproduces the real cascade rather than an approximation of it.
+
+   This used to read "a base declaration is written as an INLINE style", which was true and is the
+   reason the guarantee survived the move: inline beat layered harder still, and unlayered beats it
+   by the same rule one step down. Jx emits no layer of its own, which is what keeps that true.
+
+   Deliberately NOT forced with a priority flag. A popover whose base rule sets display is laid out
+   on every page whether open or not; that is a real defect, @jxsuite/schema/overlays reports it as
+   base-display, and the canvas's job is to SHOW it, not to hide it behind a stronger rule. */
+@layer jx-canvas-ua {
+  [data-jx-popover]:not([data-jx-popover-open]) {
+    display: none;
+  }
+  dialog[data-jx-dialog-open] {
+    display: block;
+  }
+}
+/* SHOWN IN PLACE, and the position declaration is what makes that true.
+
+   Dropping the popover attribute drops the UA rule that made the panel fixed, so a panel that never
+   set position itself — every one in the fleet — lands in normal flow at its document position,
+   contributes to #jx-canvas-root's scrollHeight, and the host grows the artboard to fit it. That is
+   the whole geometry fix, and it is why an open panel is reachable at all.
+
+   The two alignment declarations are the other half, and they were found by measuring rather than
+   by reasoning. Every drawer in the fleet is declared inside its header's flex row, so in flow it
+   becomes a FLEX ITEM: align-items:center on the row centres a 904px panel on a 64px header and
+   half of it sits above the artboard at a negative offset, where it contributes nothing to the
+   scrollable overflow the host measures. Pinned to the start and refused any flex sizing, the same
+   panel hangs down from its own position and the artboard grows by its full height.
+
+   Forced, because a panel that DOES set position: fixed would otherwise keep it and be laid out
+   against the frame's own viewport — which in a de-linked mode is the document's full height, so a
+   drawer pinned with inset: 0 lands halfway down a long page and a short component frame clips it.
+   This is a presentation override for a canvas affordance, the same kind as the layout-region
+   dimming in EDIT_PLACEHOLDER_CSS, and it is NOT the same move as forcing display: that would hide
+   a real defect in the document (base-display), while this hides nothing — Preview renders the
+   panel natively, top layer and all. */
+[data-jx-popover][data-jx-popover-open] {
+  position: relative !important;
+  inset: auto !important;
+  align-self: start !important;
+  flex: none !important;
+  outline: 1px dashed color-mix(in srgb, #808080 55%, transparent);
+  outline-offset: 2px;
+}
+[data-jx-popover][data-jx-popover-open]::before {
+  content: "POPOVER \\00B7  SHOWN IN PLACE";
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  padding: 1px 5px;
+  border-radius: 0 0 3px 0;
+  background: color-mix(in srgb, #808080 78%, transparent);
+  color: #fff;
+  font: 700 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+  letter-spacing: 0.08em;
+  pointer-events: none;
+}
+dialog[data-jx-dialog-open] {
+  position: relative !important;
+  inset: auto !important;
+  align-self: start !important;
+  flex: none !important;
+  outline: 1px dashed color-mix(in srgb, #808080 55%, transparent);
+  outline-offset: 2px;
+}
+dialog[data-jx-dialog-open]::before {
+  content: "DIALOG \\00B7  SHOWN IN PLACE";
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  padding: 1px 5px;
+  border-radius: 0 0 3px 0;
+  background: color-mix(in srgb, #808080 78%, transparent);
+  color: #fff;
+  font: 700 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+  letter-spacing: 0.08em;
+  pointer-events: none;
+}
+`;
+function syncCanvasOverlayCss(doc, mode) {
+  const existing = doc.head.querySelector(`#${CANVAS_OVERLAY_STYLE_ID}`);
+  if (mode === "preview") {
+    existing?.remove();
+    return;
+  }
+  if (existing) {
+    return;
+  }
+  const style = doc.createElement("style");
+  style.id = CANVAS_OVERLAY_STYLE_ID;
+  style.textContent = CANVAS_OVERLAY_CSS;
+  doc.head.append(style);
+}
+var DIFF_MARK_STYLE_ID = "jx-canvas-diff-css";
+var DIFF_MARK_CSS = `
+[data-jx-diff] {
+  position: relative;
+  border-left-width: 3px;
+  border-left-color: currentColor;
+}
+[data-jx-diff]::before {
+  position: absolute;
+  top: 0;
+  left: -3px;
+  width: 3px;
+  content: "";
+}
+[data-jx-diff="added"] {
+  border-left-style: solid;
+  border-left-color: #0a7c42;
+  background: color-mix(in srgb, #0a7c42 12%, transparent);
+}
+[data-jx-diff="removed"] {
+  border-left-style: double;
+  border-left-color: #c9252d;
+  background: color-mix(in srgb, #c9252d 12%, transparent);
+}
+[data-jx-diff="modified-before"] {
+  border-left-style: dashed;
+  border-left-color: #c9252d;
+  background: color-mix(in srgb, #c9252d 8%, transparent);
+}
+[data-jx-diff="modified-after"] {
+  border-left-style: dashed;
+  border-left-color: #0a7c42;
+  background: color-mix(in srgb, #0a7c42 8%, transparent);
+}
+[data-jx-diff-within] {
+  border-left: 3px dotted color-mix(in srgb, #808080 60%, transparent);
+}
+@media (forced-colors: active) {
+  [data-jx-diff],
+  [data-jx-diff-within] {
+    background: none;
+    border-left-color: CanvasText;
+  }
+}
+`;
+function syncDiffCss(doc, on) {
+  const existing = doc.head.querySelector(`#${DIFF_MARK_STYLE_ID}`);
+  if (!on) {
+    existing?.remove();
+    return;
+  }
+  if (existing) {
+    return;
+  }
+  const style = doc.createElement("style");
+  style.id = DIFF_MARK_STYLE_ID;
+  style.textContent = DIFF_MARK_CSS;
+  doc.head.append(style);
+}
+function applyDiffMarks(container, marks) {
+  for (const stale of container.querySelectorAll("[data-jx-diff], [data-jx-diff-within]")) {
+    if (stale instanceof HTMLElement) {
+      delete stale.dataset.jxDiff;
+      delete stale.dataset.jxDiffWithin;
+    }
+  }
+  if (!marks?.length) {
+    return;
+  }
+  for (const mark of marks) {
+    const exact = elementForPath(container, mark.path);
+    if (exact) {
+      exact.dataset.jxDiff = mark.kind;
+      continue;
+    }
+    let { path } = mark;
+    while (path.length >= 2) {
+      path = path.slice(0, -2);
+      const ancestor = elementForPath(container, path);
+      if (ancestor) {
+        ancestor.dataset.jxDiffWithin = "";
+        break;
+      }
+    }
+  }
+}
 function syncPreviewShell(doc, mode) {
   doc.documentElement.toggleAttribute("data-jx-preview", mode === "preview");
 }
@@ -4528,6 +5703,30 @@ function applyPreviewColorScheme(doc, scheme) {
     delete doc.documentElement.dataset.colorScheme;
   }
 }
+function applyCanvasPopoverOpen(root, path) {
+  for (const el of root.querySelectorAll("[data-jx-popover-open]")) {
+    delete el.dataset.jxPopoverOpen;
+  }
+  if (path === null) {
+    return;
+  }
+  const target = root.querySelector(`[data-jx-popover]${jxPathSelector(path)}`);
+  if (target) {
+    target.dataset.jxPopoverOpen = "";
+  }
+}
+function applyCanvasDialogOpen(root, path) {
+  for (const el of root.querySelectorAll("[data-jx-dialog-open]")) {
+    delete el.dataset.jxDialogOpen;
+  }
+  if (path === null) {
+    return;
+  }
+  const target = root.querySelector(`dialog${jxPathSelector(path)}`);
+  if (target) {
+    target.dataset.jxDialogOpen = "";
+  }
+}
 function injectHead(doc, assets = null) {
   const head = doc.$head;
   if (!Array.isArray(head)) {
@@ -4570,11 +5769,11 @@ function injectHead(doc, assets = null) {
 function makeStamper(ctx) {
   const islands = [];
   const insideIsland = (path) => islands.some((island) => path.length > island.length && island.every((seg, i) => path[i] === seg));
-  return (created, path, def2) => {
+  return (created, path, def) => {
     if (!(created instanceof HTMLElement)) {
       return;
     }
-    const isDefinitionRoot = path.length === 0 && def2?.tagName?.includes("-");
+    const isDefinitionRoot = path.length === 0 && def?.tagName?.includes("-");
     if (isDefinitionRoot) {
       created.dataset.jxDefinitionRoot = "";
     }
@@ -4583,7 +5782,7 @@ function makeStamper(ctx) {
       created.contentEditable = "false";
       islands.push(path);
     }
-    const classified = classifyRenderNode(path, def2, ctx);
+    const classified = classifyRenderNode(path, def, ctx);
     if (classified.kind === "layout") {
       created.dataset.jxLayoutPath = serializeJxPath(classified.layoutPath);
       if (classified.layoutFile) {
@@ -4634,36 +5833,32 @@ async function renderResolvedDocument(opts) {
   setSkipAutoRequests(opts.mode !== "preview" && !opts.allowAutoRequests);
   setCanvasViewportTranspose(true);
   setCanvasDelinkAnchors(opts.mode !== "preview");
+  setCanvasDelinkPopovers(opts.mode !== "preview");
+  setCanvasDelinkCommands(opts.mode !== "preview");
   setStampPropBindings(opts.mode === "design" || opts.mode === "edit");
   applySiteStyle(opts.siteStyle, opts.doc.$media ?? {});
   injectHead(opts.doc, assets);
   syncEditModeCss(opts.container.ownerDocument, opts.mode);
+  syncCanvasOverlayCss(opts.container.ownerDocument, opts.mode);
   syncPreviewShell(opts.container.ownerDocument, opts.mode);
   syncStylebookCss(opts.container.ownerDocument, opts.mode);
+  syncDiffCss(opts.container.ownerDocument, Boolean(opts.diffMarks?.length));
   setRootMedia(opts.doc.$media ?? {});
   await registerElements2(opts.doc, opts.docBase);
   const $defs = await buildScope(opts.doc, {}, opts.docBase);
   const onNodeCreated = makeStamper(opts.mapperCtx);
   const { result: el, stop } = runScoped(() => renderNode(opts.doc, $defs, { _path: [], onNodeCreated }));
   opts.container.replaceChildren(el);
+  applyCanvasPopoverOpen(opts.container, opts.popoverOpen ?? null);
+  applyCanvasDialogOpen(opts.container, opts.dialogOpen ?? null);
   syncEditableRoot(opts.container, opts.mode);
+  applyDiffMarks(opts.container, opts.diffMarks ?? null);
   return {
     ctx: { defs: $defs, docBase: opts.docBase, mapperCtx: opts.mapperCtx, mode: opts.mode },
     dispose: stop
   };
 }
 
-// src/utils/geometry.ts
-function rectOf(el) {
-  return el.getBoundingClientRect();
-}
-function rectOfRange(r) {
-  return r.getBoundingClientRect();
-}
-function elementAtPoint(x, y, root = document) {
-  return root.elementFromPoint(x, y);
-}
-
 // src/state.ts
 function getNodeAtPath(doc, path) {
   let node = doc;
@@ -4811,41 +6006,35 @@ var elements_meta_default = {
         {
           tag: "strong",
           label: "Bold",
-          icon: "sp-icon-text-bold",
           command: "bold"
         },
         {
           tag: "em",
           label: "Italic",
-          icon: "sp-icon-text-italic",
           command: "italic"
         },
         {
           tag: "u",
           label: "Underline",
-          icon: "sp-icon-text-underline",
           command: "underline"
         },
         {
           tag: "del",
           label: "Strikethrough",
-          icon: "sp-icon-text-strikethrough",
           command: "strikethrough"
         },
         {
           tag: "sup",
           label: "Superscript",
-          icon: "sp-icon-text-superscript",
           command: "superscript"
         },
         {
           tag: "sub",
           label: "Subscript",
-          icon: "sp-icon-text-subscript",
           command: "subscript"
         },
-        { tag: "code", label: "Code", icon: "sp-icon-code", command: "code" },
-        { tag: "a", label: "Link", icon: "sp-icon-link", command: "link" }
+        { tag: "code", label: "Code", command: "code" },
+        { tag: "a", label: "Link", command: "link" }
       ]
     },
     h1: {
@@ -4855,17 +6044,15 @@ var elements_meta_default = {
         {
           tag: "strong",
           label: "Bold",
-          icon: "sp-icon-text-bold",
           command: "bold"
         },
         {
           tag: "em",
           label: "Italic",
-          icon: "sp-icon-text-italic",
           command: "italic"
         },
-        { tag: "code", label: "Code", icon: "sp-icon-code", command: "code" },
-        { tag: "a", label: "Link", icon: "sp-icon-link", command: "link" }
+        { tag: "code", label: "Code", command: "code" },
+        { tag: "a", label: "Link", command: "link" }
       ]
     },
     h2: {
@@ -5088,16 +6275,14 @@ var elements_meta_default = {
         {
           tag: "strong",
           label: "Bold",
-          icon: "sp-icon-text-bold",
           command: "bold"
         },
         {
           tag: "em",
           label: "Italic",
-          icon: "sp-icon-text-italic",
           command: "italic"
         },
-        { tag: "code", label: "Code", icon: "sp-icon-code", command: "code" }
+        { tag: "code", label: "Code", command: "code" }
       ]
     },
     span: {
@@ -5526,7 +6711,7 @@ function findTemplateExpressions(text) {
 
 // src/editor/editable-tags.ts
 var EXCLUDED = new Set(["pre"]);
-var BUILTIN_EDITABLE_TAGS = new Set(Object.entries(elements_meta_default.$defs).filter(([tag, def2]) => !EXCLUDED.has(tag) && (def2.$inlineChildren?.length ?? 0) > 0).map(([tag]) => tag));
+var BUILTIN_EDITABLE_TAGS = new Set(Object.entries(elements_meta_default.$defs).filter(([tag, def]) => !EXCLUDED.has(tag) && (def.$inlineChildren?.length ?? 0) > 0).map(([tag]) => tag));
 function isEditableTag(tag, verdicts) {
   const declared = verdicts?.[tag.toLowerCase()];
   return declared ?? BUILTIN_EDITABLE_TAGS.has(tag.toLowerCase());
@@ -5978,18 +7163,64 @@ function nearestHit(target) {
   }
   return measureHit(el, el.dataset.jxPath);
 }
+function isRendered(el) {
+  const check = el.checkVisibility;
+  return typeof check === "function" ? check.call(el, { checkVisibilityCSS: true }) : true;
+}
 function measureHits(paths, doc = document) {
-  const out = [];
+  const hits = [];
+  const hidden = [];
   for (const path of paths) {
-    const serialized = serializeJxPath(path);
-    const esc = serialized.replaceAll("\\", String.raw`\\`).replaceAll("'", String.raw`\'`);
-    const el = doc.querySelector(`[data-jx-path='${esc}']`);
-    if (el) {
+    const el = doc.querySelector(jxPathSelector(serializeJxPath(path)));
+    if (!el) {
+      continue;
+    }
+    if (isRendered(el)) {
       const r = rectOf(el);
-      out.push({ path, rect: { height: r.height, width: r.width, x: r.x, y: r.y } });
+      hits.push({ path, rect: { height: r.height, width: r.width, x: r.x, y: r.y } });
+    } else {
+      hidden.push(path);
     }
   }
-  return out;
+  return { hidden, hits };
+}
+var INVOKER_ACTIONS = new Set(["toggle", "show", "hide"]);
+function postPopoverInvoke(target, channel) {
+  if (!(target instanceof Element)) {
+    return;
+  }
+  const invoker = target.closest("[popovertarget]");
+  const id = invoker?.getAttribute("popovertarget");
+  if (!invoker || !id) {
+    return;
+  }
+  const panels = invoker.ownerDocument.querySelectorAll("[data-jx-popover]");
+  const panel = [...panels].find((el) => el.id === id);
+  const serialized = panel?.dataset.jxPath;
+  if (!serialized) {
+    return;
+  }
+  const raw = invoker.getAttribute("popovertargetaction") ?? "toggle";
+  const action = INVOKER_ACTIONS.has(raw) ? raw : "toggle";
+  channel.post({ action, kind: "popoverTargetClick", targetPath: parseJxPath(serialized) });
+}
+function postCommandInvoke(target, channel) {
+  if (!(target instanceof Element)) {
+    return;
+  }
+  const invoker = target.closest("[data-jx-commandfor]");
+  const id = invoker?.dataset["jxCommandfor"];
+  const command = invoker?.getAttribute("command")?.trim().toLowerCase() ?? "";
+  if (!invoker || !id || !command) {
+    return;
+  }
+  const overlays = invoker.ownerDocument.querySelectorAll("[data-jx-popover], dialog[data-jx-path]");
+  const overlay = [...overlays].find((el) => el.id === id);
+  const serialized = overlay?.dataset.jxPath;
+  if (!serialized) {
+    return;
+  }
+  channel.post({ command, kind: "commandTargetClick", targetPath: parseJxPath(serialized) });
 }
 function startInteraction(channel, doc = document, deps) {
   let lastHoverKey = null;
@@ -6020,6 +7251,8 @@ function startInteraction(channel, doc = document, deps) {
         kind: "hit"
       });
     }
+    postPopoverInvoke(e.target, channel);
+    postCommandInvoke(e.target, channel);
   };
   const reportHover = (el) => {
     if (isPreview()) {
@@ -6251,112 +7484,6 @@ function scrollDirection(y, viewportH, band = AUTO_SCROLL_BAND) {
   return 0;
 }
 
-// src/canvas/iframe-position.ts
-function isIslandBoundary(el) {
-  if (el.dataset.jxDefinitionRoot !== undefined) {
-    return false;
-  }
-  return el.getAttribute("contenteditable") === "false" || el.tagName.includes("-");
-}
-function activeBlockAt(node, isEditable) {
-  let el = node instanceof Element ? node : node?.parentElement ?? null;
-  while (el) {
-    if (el instanceof HTMLElement) {
-      if (el.dataset.jxPath && isEditable(el)) {
-        return { el, path: parseJxPath(el.dataset.jxPath) };
-      }
-      if (isIslandBoundary(el)) {
-        return null;
-      }
-    }
-    el = el.parentElement;
-  }
-  return null;
-}
-function elementForPath(container, path) {
-  const serialized = serializeJxPath(path);
-  const esc = serialized.replaceAll("\\", String.raw`\\`).replaceAll("'", String.raw`\'`);
-  const el = container.querySelector(`[data-jx-path='${esc}']`);
-  return el instanceof HTMLElement ? el : null;
-}
-function blockTextLength(block) {
-  return block.textContent?.length ?? 0;
-}
-function offsetOf(block, node, offset) {
-  if (!block.contains(node)) {
-    return null;
-  }
-  const range = block.ownerDocument.createRange();
-  range.setStart(block, 0);
-  try {
-    range.setEnd(node, offset);
-  } catch {
-    return null;
-  }
-  return range.toString().length;
-}
-function domPositionAt(block, offset) {
-  const target = Math.max(0, Math.min(offset, blockTextLength(block)));
-  const walker = block.ownerDocument.createTreeWalker(block, NodeFilter.SHOW_TEXT);
-  let seen = 0;
-  let last = null;
-  let current = walker.nextNode();
-  while (current) {
-    const len = current.length;
-    if (seen + len >= target) {
-      return { node: current, offset: target - seen };
-    }
-    seen += len;
-    last = current;
-    current = walker.nextNode();
-  }
-  return last ? { node: last, offset: last.length } : { node: block, offset: 0 };
-}
-function toDocPos(node, offset, isEditable) {
-  const block = activeBlockAt(node, isEditable);
-  if (!block || !node) {
-    return null;
-  }
-  const charOffset = offsetOf(block.el, node, offset);
-  return charOffset === null ? null : { offset: charOffset, path: block.path };
-}
-function toDomPosition(container, pos) {
-  const el = elementForPath(container, pos.path);
-  return el ? domPositionAt(el, pos.offset) : null;
-}
-function isAtBlockStart(pos) {
-  return pos.offset <= 0;
-}
-function samePath(a, b) {
-  return serializeJxPath(a.path) === serializeJxPath(b.path);
-}
-function blocksInOrder(container, isEditable) {
-  const out = [];
-  for (const el of container.querySelectorAll("[data-jx-path]")) {
-    if (isEditable(el) && !sealedInIsland(el, container)) {
-      out.push(el);
-    }
-  }
-  return out;
-}
-function sealedInIsland(el, container) {
-  let cur = el.parentElement;
-  while (cur && cur !== container) {
-    if (isIslandBoundary(cur)) {
-      return true;
-    }
-    cur = cur.parentElement;
-  }
-  return false;
-}
-function adjacentBlock(container, path, direction, isEditable) {
-  const blocks = blocksInOrder(container, isEditable);
-  const key = serializeJxPath(path);
-  const index = blocks.findIndex((el) => el.dataset.jxPath === key);
-  const neighbour = index === -1 ? undefined : blocks[index + direction];
-  return neighbour ? { el: neighbour, path: parseJxPath(neighbour.dataset.jxPath) } : null;
-}
-
 // src/canvas/editable-actions.ts
 var DELETE_BACKWARD = new Set([
   "deleteContentBackward",
@@ -6465,7 +7592,7 @@ function restoreDocSelection(container, range) {
 }
 function startEditableRoot(container, deps) {
   const doc = container.ownerDocument;
-  let activeEl2 = null;
+  let activeEl = null;
   let activeKey = null;
   const editingAllowed = () => {
     const mode = deps.getMode?.();
@@ -6480,7 +7607,7 @@ function startEditableRoot(container, deps) {
   };
   const commitTick = () => {
     commitTimer = 0;
-    if (!activeEl2 || !deps.onCommitTick) {
+    if (!activeEl || !deps.onCommitTick) {
       return;
     }
     const caret = captureDocSelection(container, deps.isEditableBlock);
@@ -6491,7 +7618,7 @@ function startEditableRoot(container, deps) {
   };
   let composing = false;
   const scheduleCommitTick = () => {
-    if (!deps.onCommitTick || !activeEl2 || composing) {
+    if (!deps.onCommitTick || !activeEl || composing) {
       return;
     }
     cancelCommitTick();
@@ -6507,15 +7634,15 @@ function startEditableRoot(container, deps) {
   };
   const forget = () => {
     cancelCommitTick();
-    activeEl2 = null;
+    activeEl = null;
     activeKey = null;
   };
   const deactivate = () => {
-    if (!activeEl2) {
+    if (!activeEl) {
       return;
     }
     cancelCommitTick();
-    activeEl2 = null;
+    activeEl = null;
     activeKey = null;
     deps.onDeactivate();
   };
@@ -6535,7 +7662,7 @@ function startEditableRoot(container, deps) {
     }
     const block = activeBlockAt(focus, deps.isEditableBlock);
     if (!block) {
-      if (activeEl2?.contains(focus)) {
+      if (activeEl?.contains(focus)) {
         deps.onSelectionChange?.();
         return;
       }
@@ -6548,7 +7675,7 @@ function startEditableRoot(container, deps) {
       return;
     }
     deactivate();
-    activeEl2 = block.el;
+    activeEl = block.el;
     activeKey = key;
     deps.onActivate(block.el, block.path);
   };
@@ -6584,7 +7711,7 @@ function startEditableRoot(container, deps) {
       atBlockStart: resolved ? isAtBlockStart(resolved.from) : false,
       data: e.data ?? "",
       from: resolved?.from ?? null,
-      inPropHost: activeEl2 !== null && activeKey === null,
+      inPropHost: activeEl !== null && activeKey === null,
       inputType: e.inputType,
       to: resolved?.to ?? null
     });
@@ -6627,10 +7754,10 @@ function startEditableRoot(container, deps) {
     let el = e.target instanceof Element ? e.target : null;
     while (el && el !== container) {
       if (el.dataset?.jxBoundProp) {
-        if (el !== activeEl2) {
+        if (el !== activeEl) {
           deactivate();
           if (deps.onPropActivate(el)) {
-            activeEl2 = el;
+            activeEl = el;
             activeKey = null;
           }
         }
@@ -6891,8 +8018,8 @@ function prepareForEditMode(node) {
             propsOut[pk] = templateToEditDisplay(pv);
           }
         } else if (pv && typeof pv === "object" && pv.$ref) {
-          const ref2 = pv.$ref;
-          const label = ref2.startsWith("#/state/") ? ref2.slice(8) : ref2;
+          const ref = pv.$ref;
+          const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
           propsOut[pk] = `{${label}}`;
         } else {
           propsOut[pk] = pv;
@@ -6943,8 +8070,8 @@ function prepareForEditMode(node) {
           const isUrlAttr = ak === "href" || ak === "action";
           processed[ak] = isUrlAttr ? "" : templateToEditDisplay(av);
         } else if (av && typeof av === "object" && av.$ref) {
-          const ref2 = av.$ref;
-          const label = ref2.startsWith("#/state/") ? ref2.slice(8) : ref2;
+          const ref = av.$ref;
+          const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
           processed[ak] = `{${label}}`;
         } else {
           processed[ak] = av;
@@ -6955,7 +8082,9 @@ function prepareForEditMode(node) {
       if (v && typeof v === "object") {
         const s = {};
         for (const [sk, sv] of Object.entries(v)) {
-          s[sk] = typeof sv === "string" && sv.includes("${") ? "" : sv;
+          if (typeof sv !== "string" || !sv.includes("${")) {
+            s[sk] = sv;
+          }
         }
         out.style = s;
       } else {
@@ -6971,8 +8100,8 @@ function prepareForEditMode(node) {
         out[k] = isUrlAttr ? "" : templateToEditDisplay(v);
       }
     } else if (v && typeof v === "object" && v.$ref) {
-      const ref2 = v.$ref;
-      const label = ref2.startsWith("#/state/") ? ref2.slice(8) : ref2;
+      const ref = v.$ref;
+      const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
       const isMediaSrc = (k === "src" || k === "poster") && mediaTags.has(obj.tagName || "");
       if (isMediaSrc) {
         needsMediaPlaceholder = true;
@@ -7700,8 +8829,8 @@ function renderSubtreeIframe(shadowDoc, docPath, ctx) {
   if (node === undefined) {
     throw new Error(`iframe-patch-node-not-found:${docPath.join("/")}`);
   }
-  const def2 = typeof node === "string" ? node : prepareForEditMode(stripEventHandlers(node));
-  const { result: rendered, stop } = runScoped(() => renderNode(def2, ctx.defs, {
+  const def = typeof node === "string" ? node : prepareForEditMode(stripEventHandlers(node));
+  const { result: rendered, stop } = runScoped(() => renderNode(def, ctx.defs, {
     _path: docPathToRenderPath(docPath, ctx),
     onNodeCreated: makeStamper(ctx.mapperCtx)
   }));
@@ -7717,11 +8846,7 @@ function disposeSubtree(el) {
     if (!(t instanceof HTMLElement)) {
       continue;
     }
-    const tag = elementStyleTags.get(t);
-    if (tag) {
-      tag.remove();
-      elementStyleTags.delete(t);
-    }
+    releaseElementStyles(t);
     const stop = elScope.get(t);
     if (stop) {
       stop();
@@ -7869,9 +8994,9 @@ function syncPlaceholderClass(el, node) {
     el.classList.add(placeholder);
   }
 }
-function insertAt(parentEl, node, ref2) {
-  if (ref2) {
-    ref2.before(node);
+function insertAt(parentEl, node, ref) {
+  if (ref) {
+    ref.before(node);
   } else {
     parentEl.append(node);
   }
@@ -7945,7 +9070,10 @@ function editModeStyle(style) {
   }
   const out = {};
   for (const [k, v] of Object.entries(style)) {
-    out[k] = typeof v === "string" && v.includes("${") ? "" : v;
+    if (typeof v === "string" && v.includes("${")) {
+      continue;
+    }
+    out[k] = v;
   }
   return out;
 }
@@ -7958,8 +9086,8 @@ function textDisplayValue(node) {
     return v.includes("${") ? templateToEditDisplay(v) : v;
   }
   if (typeof v === "object" && v.$ref) {
-    const ref2 = String(v.$ref);
-    const label = ref2.startsWith("#/state/") ? ref2.slice(8) : ref2;
+    const ref = String(v.$ref);
+    const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
     return `{${label}}`;
   }
   return String(v);
@@ -8094,6 +9222,32 @@ function serializeDataScope(defs) {
   return out;
 }
 
+// ../ui/src/loaders.ts
+var KIT_LOADERS = {
+  "jx-ui:/behaviors/color-area.ts": () => (__preload("v17df7b8"), import("./chunks/color-area-v17df7b8.js")),
+  "jx-ui:/behaviors/color-field.ts": () => (__preload("anwybnkn"), import("./chunks/color-field-anwybnkn.js")),
+  "jx-ui:/behaviors/color-slider.ts": () => (__preload("44ez96fc"), import("./chunks/color-slider-44ez96fc.js")),
+  "jx-ui:/behaviors/combobox.ts": () => (__preload("5e7jev23"), import("./chunks/combobox-5e7jev23.js")),
+  "jx-ui:/behaviors/dialog.ts": () => (__preload("s890b918"), import("./chunks/dialog-s890b918.js")),
+  "jx-ui:/behaviors/listbox.ts": () => (__preload("6v2ac08j"), import("./chunks/listbox-6v2ac08j.js")),
+  "jx-ui:/behaviors/menu.ts": () => (__preload("q99sy9rf"), import("./chunks/menu-q99sy9rf.js")),
+  "jx-ui:/behaviors/number-field.ts": () => (__preload("5cndyft8"), import("./chunks/number-field-5cndyft8.js")),
+  "jx-ui:/behaviors/action-group.ts": () => (__preload("sp6tna8v"), import("./chunks/action-group-sp6tna8v.js")),
+  "jx-ui:/behaviors/popover.ts": () => (__preload("47z3ytva"), import("./chunks/popover-47z3ytva.js")),
+  "jx-ui:/behaviors/select.ts": () => (__preload("2r16ez41"), import("./chunks/select-2r16ez41.js")),
+  "jx-ui:/behaviors/split.ts": () => (__preload("g7nm1rgb"), import("./chunks/split-g7nm1rgb.js")),
+  "jx-ui:/behaviors/swatch-group.ts": () => (__preload("t0n6h2rn"), import("./chunks/swatch-group-t0n6h2rn.js")),
+  "jx-ui:/behaviors/tabs.ts": () => (__preload("wbp1cdws"), import("./chunks/tabs-wbp1cdws.js")),
+  "jx-ui:/behaviors/toolbar.ts": () => (__preload("xbh5bhtr"), import("./chunks/toolbar-xbh5bhtr.js")),
+  "jx-ui:/behaviors/tree.ts": () => (__preload("a73p0pqm"), import("./chunks/tree-a73p0pqm.js")),
+  "jx-ui:/behaviors/tooltip.ts": () => (__preload("eptb614w"), import("./chunks/tooltip-eptb614w.js")),
+  "jx-ui:/behaviors/textfield.ts": () => (__preload("abk6qyee"), import("./chunks/textfield-abk6qyee.js")),
+  "jx-ui:/behaviors/toast.ts": () => (__preload("780pvfbv"), import("./chunks/toast-780pvfbv.js")),
+  "jx-ui:/behaviors/toast-host.ts": () => (__preload("3sqv46sn"), import("./chunks/toast-host-3sqv46sn.js")),
+  "jx-ui:/color.ts": () => (__preload("xgg3kfw7"), import("./chunks/color-xgg3kfw7.js")),
+  "jx-ui:/icons.ts": () => (__preload("yy10wk9r"), import("./chunks/icons-yy10wk9r.js"))
+};
+
 // src/services/bundle-base.ts
 var base;
 function setBundleBase(entryUrl) {
@@ -8102,6 +9256,9 @@ function setBundleBase(entryUrl) {
 
 // src/canvas/iframe-entry.ts
 setBundleBase(import.meta.url);
+for (const [specifier, load] of Object.entries(KIT_LOADERS)) {
+  preloadModule(specifier, load);
+}
 function previewAt(cursor, src, shadowDoc, doc) {
   const targetEl = resolveDropTarget(cursor.x, cursor.y, doc);
   if (!targetEl) {
@@ -8147,8 +9304,8 @@ function layoutHitFor(target) {
 }
 var IN_PLACE_KEYS = new Set(["style", "textContent"]);
 function patchDisturbsActiveEdit(forwardOps) {
-  const activePath2 = getActivePath();
-  if (!activePath2) {
+  const activePath = getActivePath();
+  if (!activePath) {
     return false;
   }
   for (const op of forwardOps) {
@@ -8160,14 +9317,14 @@ function patchDisturbsActiveEdit(forwardOps) {
       affected = op.path;
     } else if (op.op === "move-child") {
       affected = op.fromParentPath;
-      if (isAncestor(affected, activePath2) || isAncestor(op.toParentPath, activePath2)) {
+      if (isAncestor(affected, activePath) || isAncestor(op.toParentPath, activePath)) {
         return true;
       }
       continue;
     } else {
       affected = op.parentPath;
     }
-    if (isAncestor(affected, activePath2)) {
+    if (isAncestor(affected, activePath)) {
       return true;
     }
   }
@@ -8184,6 +9341,8 @@ function startCanvasIframe(opts) {
   let shadowDoc = null;
   let renderedGen = -1;
   let currentMode = "design";
+  let popoverOpen = null;
+  let dialogOpen = null;
   let forwardTable = NO_TABLE;
   let renderCtx = null;
   let dragSrc = null;
@@ -8264,8 +9423,18 @@ function startCanvasIframe(opts) {
   const stopImageRetry = installCanvasImageRetry(container);
   const MAX_CANVAS_HEIGHT = 30000;
   let lastPostedHeight = -1;
+  function openPopoverBottom() {
+    const panels = container.querySelectorAll("[data-jx-popover][data-jx-popover-open], dialog[data-jx-dialog-open]");
+    const root = rectOf(container);
+    let bottom = 0;
+    for (const panel of panels) {
+      bottom = Math.max(bottom, rectOf(panel).bottom - root.top);
+    }
+    return bottom;
+  }
   function postContentHeight() {
-    const measured = Math.min(container.scrollHeight, MAX_CANVAS_HEIGHT);
+    const content = Math.max(container.scrollHeight, openPopoverBottom());
+    const measured = Math.min(content, MAX_CANVAS_HEIGHT);
     if (measured > 0 && Math.abs(measured - lastPostedHeight) >= 1) {
       lastPostedHeight = measured;
       const root = container.firstElementChild;
@@ -8313,6 +9482,7 @@ function startCanvasIframe(opts) {
     const quiet = sample.fonts && sample.animations === 0 && sample.images === 0;
     quietFrames = quiet ? changed ? 1 : quietFrames + 1 : 0;
     if (quietFrames >= IDLE_QUIET_FRAMES) {
+      postContentHeight();
       return;
     }
     if (Date.now() >= idleDeadline) {
@@ -8436,11 +9606,8 @@ function startCanvasIframe(opts) {
   container.ownerDocument.addEventListener("drop", onNativeDrop, true);
   const off = channel.onMessage((msg) => {
     if (msg.kind === "measure") {
-      channel.post({
-        hits: measureHits(msg.paths, container.ownerDocument),
-        kind: "geometry",
-        reqId: msg.reqId
-      });
+      const { hidden, hits } = measureHits(msg.paths, container.ownerDocument);
+      channel.post({ hidden, hits, kind: "geometry", reqId: msg.reqId });
       return;
     }
     if (msg.kind === "evalExpr") {
@@ -8449,13 +9616,13 @@ function startCanvasIframe(opts) {
       return;
     }
     if (msg.kind === "patch") {
-      const { gen: gen2 } = msg;
-      if (gen2 < renderedGen) {
-        channel.post({ gen: gen2, kind: "patchError", message: "patch-behind-render" });
+      const { gen } = msg;
+      if (gen < renderedGen) {
+        channel.post({ gen, kind: "patchError", message: "patch-behind-render" });
         return;
       }
-      if (gen2 > renderedGen || !shadowDoc || !renderCtx) {
-        channel.post({ gen: gen2, kind: "patchError", message: "patch-ahead-of-render" });
+      if (gen > renderedGen || !shadowDoc || !renderCtx) {
+        channel.post({ gen, kind: "patchError", message: "patch-ahead-of-render" });
         return;
       }
       const echoed = new Set((msg.echoPaths ?? []).map((p) => serializeJxPath(p)));
@@ -8467,14 +9634,16 @@ function startCanvasIframe(opts) {
       }
       try {
         applyIframePatch(shadowDoc, msg.forwardOps, container, renderCtx, msg.echoPaths);
+        applyCanvasPopoverOpen(container, popoverOpen);
+        applyCanvasDialogOpen(container, dialogOpen);
         if (caret) {
           restoreDocSelection(container, caret);
         }
-        channel.post({ gen: gen2, kind: "patchComplete" });
+        channel.post({ gen, kind: "patchComplete" });
         armIdleWatch();
       } catch (error) {
         channel.post({
-          gen: gen2,
+          gen,
           kind: "patchError",
           message: String(error?.message ?? error)
         });
@@ -8534,6 +9703,29 @@ function startCanvasIframe(opts) {
       applyPreviewColorScheme(container.ownerDocument, msg.scheme);
       return;
     }
+    if (msg.kind === "setPopoverOpen") {
+      if (currentMode === "preview") {
+        return;
+      }
+      popoverOpen = msg.path === null ? null : serializeJxPath(msg.path);
+      applyCanvasPopoverOpen(container, popoverOpen);
+      applyCanvasDialogOpen(container, dialogOpen);
+      postContentHeight();
+      return;
+    }
+    if (msg.kind === "setDialogOpen") {
+      if (currentMode === "preview") {
+        return;
+      }
+      dialogOpen = msg.path === null ? null : serializeJxPath(msg.path);
+      applyCanvasDialogOpen(container, dialogOpen);
+      postContentHeight();
+      return;
+    }
+    if (msg.kind === "redefineElement") {
+      redefineElement(msg.doc, msg.base);
+      return;
+    }
     if (msg.kind === "setLocale") {
       const root = container.ownerDocument.documentElement;
       if (msg.locale === null) {
@@ -8566,6 +9758,7 @@ function startCanvasIframe(opts) {
         stopDataScopeWatch?.();
         stopDataScopeWatch = null;
         handle?.dispose();
+        resetDocumentStyles(container.ownerDocument);
         handle = await renderResolvedDocument({
           assets: msg.assets ?? null,
           container,
@@ -8578,11 +9771,18 @@ function startCanvasIframe(opts) {
             pageContentOffset: mapperCtx.pageContentOffset,
             pageContentPrefix: mapperCtx.pageContentPrefix
           },
+          diffMarks: msg.diffMarks ?? null,
           mode: msg.mode,
+          popoverOpen: msg.popoverOpen ? serializeJxPath(msg.popoverOpen) : null,
+          dialogOpen: msg.dialogOpen ? serializeJxPath(msg.dialogOpen) : null,
           siteStyle: msg.siteStyle,
           ...msg.allowAutoRequests ? { allowAutoRequests: true } : {}
         });
         if (gen === latestGen) {
+          popoverOpen = msg.popoverOpen ? serializeJxPath(msg.popoverOpen) : null;
+          dialogOpen = msg.dialogOpen ? serializeJxPath(msg.dialogOpen) : null;
+          applyCanvasPopoverOpen(container, popoverOpen);
+          applyCanvasDialogOpen(container, dialogOpen);
           shadowDoc = rawDoc;
           renderCtx = handle.ctx;
           renderedGen = gen;
@@ -8665,5 +9865,5 @@ export {
   startCanvasIframe
 };
 
-//# debugId=BF2F5E4A39B13F1864756E2164756E21
+//# debugId=2FA5492A7FC7235764756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map