@jxsuite/studio 2.0.1 → 2.1.0

package/dist/iframe-entry.js

@@ -31,6 +31,88 @@ function postMessageChannel(opts) {
   };
 }
 
+// ../schema/src/guards.ts
+function isJsonObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isRef(value) {
+  return isJsonObject(value) && typeof value.$ref === "string";
+}
+function isFunctionDef(value) {
+  return isJsonObject(value) && value.$prototype === "Function";
+}
+function isExpressionDef(value) {
+  return isJsonObject(value) && isJsonObject(value.$expression);
+}
+function isNamedFormulaDef(value) {
+  return isExpressionDef(value) && Array.isArray(value.parameters) && value.parameters.length > 0;
+}
+function hasStructuredBody(value) {
+  return isFunctionDef(value) && Array.isArray(value.body);
+}
+function isPrototypeDef(value) {
+  return isJsonObject(value) && typeof value.$prototype === "string" && value.$prototype !== "Function";
+}
+function isServerFnDef(value) {
+  return isJsonObject(value) && value.timing === "server" && typeof value.$src === "string" && typeof value.$export === "string" && !value.$prototype;
+}
+var SCHEMA_KEYWORDS = new Set([
+  "type",
+  "enum",
+  "minimum",
+  "maximum",
+  "minLength",
+  "maxLength",
+  "pattern",
+  "format",
+  "items",
+  "properties",
+  "required",
+  "description",
+  "title",
+  "$comment"
+]);
+function isMappedArray(value) {
+  return isJsonObject(value) && value.$prototype === "Array";
+}
+function isTemplateString(value) {
+  return typeof value === "string" && value.includes("${");
+}
+function bodyReturnsValue(body) {
+  return /\breturn\b[^\S\n]*(?![;}\s]|$)/.test(body);
+}
+function isEventBinding(value) {
+  return isRef(value) || isFunctionDef(value) || isExpressionDef(value);
+}
+function paramNames(parameters) {
+  if (!parameters) {
+    return [];
+  }
+  return parameters.map((p) => typeof p === "string" ? p : p.name);
+}
+function isTagExpression(tagName) {
+  return isJsonObject(tagName) && isJsonObject(tagName.$expression);
+}
+function tagNameCandidates(tagName) {
+  if (typeof tagName === "string") {
+    return [tagName];
+  }
+  if (!isTagExpression(tagName)) {
+    return [];
+  }
+  const expression = tagName.$expression;
+  if (expression.operator === "?:") {
+    return [...new Set([expression.value, expression.initial])];
+  }
+  return [...new Set([...Object.values(expression.cases), expression.default])];
+}
+function displayTagName(tagName) {
+  return typeof tagName === "string" ? tagName : tagNameCandidates(tagName).join("|");
+}
+function isPrivateStateKey(key) {
+  return key.startsWith("#");
+}
+
 // ../../node_modules/@vue/shared/dist/shared.esm-bundler.js
 function makeMap(str) {
   const map = /* @__PURE__ */ Object.create(null);
@@ -77,7 +159,7 @@ var toHandlerKey = cacheStringFunction((str) => {
 });
 var hasChanged = (value, oldValue) => !Object.is(value, oldValue);
 var specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
-var isBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
+var isBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
 
 // ../../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
 function warn(msg, ...args) {
@@ -947,7 +1029,7 @@ class BaseReactiveHandler {
         return hasOwnProperty2;
       }
     }
-    const res = Reflect.get(target, key, isRef(target) ? target : receiver);
+    const res = Reflect.get(target, key, isRef2(target) ? target : receiver);
     if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
       return res;
     }
@@ -957,7 +1039,7 @@ class BaseReactiveHandler {
     if (isShallow2) {
       return res;
     }
-    if (isRef(res)) {
+    if (isRef2(res)) {
       const value = targetIsArray && isIntegerKey(key) ? res : res.value;
       return isReadonly2 && isObject(value) ? readonly(value) : value;
     }
@@ -981,7 +1063,7 @@ class MutableReactiveHandler extends BaseReactiveHandler {
         oldValue = toRaw(oldValue);
         value = toRaw(value);
       }
-      if (!isArrayWithIntegerKey && isRef(oldValue) && !isRef(value)) {
+      if (!isArrayWithIntegerKey && isRef2(oldValue) && !isRef2(value)) {
         if (isOldValueReadonly) {
           if (true) {
             warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target[key]);
@@ -994,7 +1076,7 @@ class MutableReactiveHandler extends BaseReactiveHandler {
       }
     }
     const hadKey = isArrayWithIntegerKey ? Number(key) < target.length : hasOwn(target, key);
-    const result = Reflect.set(target, key, value, isRef(target) ? target : receiver);
+    const result = Reflect.set(target, key, value, isRef2(target) ? target : receiver);
     if (target === toRaw(receiver) && result) {
       if (!hadKey) {
         trigger(target, "add", key, value);
@@ -1305,14 +1387,14 @@ function toRaw(observed) {
 }
 var toReactive = (value) => isObject(value) ? /* @__PURE__ */ reactive(value) : value;
 var toReadonly = (value) => isObject(value) ? /* @__PURE__ */ readonly(value) : value;
-function isRef(r) {
+function isRef2(r) {
   return r ? r["__v_isRef"] === true : false;
 }
 function ref(value) {
   return createRef(value, false);
 }
 function createRef(rawValue, shallow) {
-  if (/* @__PURE__ */ isRef(rawValue)) {
+  if (/* @__PURE__ */ isRef2(rawValue)) {
     return rawValue;
   }
   return new RefImpl(rawValue, shallow);
@@ -1417,6 +1499,80 @@ function computed(getterOrOptions, debugOptions, isSSR = false) {
   return cRef;
 }
 
+// ../schema/src/intl.ts
+var DEFAULT_FORMAT_LOCALE = "en-US";
+var DEFAULT_TIME_ZONE = "UTC";
+var INTL_HELPERS = [
+  {
+    api: "Intl.NumberFormat",
+    params: ["value", "locale", "options"],
+    path: "Intl/formatNumber",
+    summary: "Format a number for a locale — grouping, decimals, currency, percent, units."
+  },
+  {
+    api: "Intl.DateTimeFormat",
+    params: ["value", "locale", "options"],
+    path: "Intl/formatDate",
+    summary: "Format a date or timestamp for a locale. Pass `timeZone` in options."
+  },
+  {
+    api: "Intl.RelativeTimeFormat",
+    params: ["value", "unit", "locale", "options"],
+    path: "Intl/formatRelativeTime",
+    summary: 'Format a relative time — `-3, "day"` becomes "3 days ago".'
+  },
+  {
+    api: "Intl.ListFormat",
+    params: ["values", "locale", "options"],
+    path: "Intl/formatList",
+    summary: 'Join a list the way a locale does — "a, b, and c", not a hand-written comma join.'
+  },
+  {
+    api: "Intl.PluralRules",
+    params: ["value", "locale", "options"],
+    path: "Intl/plural",
+    summary: 'Which plural category a number falls in ("one", "few", "other") — many languages have ' + "more than two, so a ternary on `n === 1` is wrong outside English."
+  },
+  {
+    api: "Intl.Collator",
+    params: ["a", "b", "locale", "options"],
+    path: "Intl/compare",
+    summary: "Compare two strings for sorting. `<` and `sort()` order by UTF-16 code unit, which puts " + '"Zebra" before "apple" and sorts every accented word into the wrong place.'
+  },
+  {
+    api: "Intl.DisplayNames",
+    params: ["code", "type", "locale", "options"],
+    path: "Intl/displayName",
+    summary: 'The name of a language, region, script or currency in a locale — "de" as "German" or ' + '"Deutsch", from CLDR rather than a hand-kept table.'
+  },
+  {
+    api: "Intl.Segmenter",
+    params: ["value", "granularity", "locale"],
+    path: "Intl/segment",
+    summary: "Split text into graphemes, words or sentences (UAX #29). `[...str]` splits code points, " + "so it cuts an emoji with a skin-tone modifier in half."
+  }
+];
+var INTL_HELPER_PATHS = INTL_HELPERS.map((helper) => helper.path);
+var INTL_LOCALE_PARAM = Object.fromEntries(INTL_HELPERS.map((helper) => [helper.path, helper.params.indexOf("locale")]));
+
+// ../runtime/src/pointer.ts
+function unescapeToken(token) {
+  return token.replaceAll("~1", "/").replaceAll("~0", "~");
+}
+function refSegments(path) {
+  if (path === "") {
+    return [];
+  }
+  return path.split("/").map((token) => unescapeToken(token));
+}
+function readPath(root, path) {
+  let current = root;
+  for (const key of refSegments(path)) {
+    current = current?.[key];
+  }
+  return current;
+}
+
 // ../runtime/src/expression.ts
 function scopeMap(state) {
   const map = state.$map;
@@ -1537,15 +1693,42 @@ var BLESSED_GLOBALS = new Set([
   "Array/of",
   "String/fromCharCode",
   "String/fromCodePoint",
-  "Intl/formatNumber",
-  "Intl/formatDate",
-  "Intl/formatRelativeTime"
+  ...INTL_HELPER_PATHS
 ]);
 var BLESSED_HELPERS = {
-  "Intl/formatDate": (value, locale, options) => new Intl.DateTimeFormat(locale, options).format(new Date(value)),
-  "Intl/formatNumber": (value, locale, options) => new Intl.NumberFormat(locale, options).format(value),
-  "Intl/formatRelativeTime": (value, unit, locale, options) => new Intl.RelativeTimeFormat(locale, options).format(value, unit)
+  "Intl/compare": (a, b, locale, options) => new Intl.Collator(locale ?? DEFAULT_FORMAT_LOCALE, options).compare(a, b),
+  "Intl/displayName": (code, type, locale, options) => new Intl.DisplayNames(locale ?? DEFAULT_FORMAT_LOCALE, {
+    ...options,
+    type: type ?? "language"
+  }).of(code),
+  "Intl/formatDate": (value, locale, options) => new Intl.DateTimeFormat(locale ?? DEFAULT_FORMAT_LOCALE, {
+    timeZone: DEFAULT_TIME_ZONE,
+    ...options
+  }).format(new Date(value)),
+  "Intl/formatList": (values, locale, options) => new Intl.ListFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(values),
+  "Intl/formatNumber": (value, locale, options) => new Intl.NumberFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(value),
+  "Intl/formatRelativeTime": (value, unit, locale, options) => new Intl.RelativeTimeFormat(locale ?? DEFAULT_FORMAT_LOCALE, options).format(value, unit),
+  "Intl/plural": (value, locale, options) => new Intl.PluralRules(locale ?? DEFAULT_FORMAT_LOCALE, options).select(value),
+  "Intl/segment": (value, granularity, locale) => [
+    ...new Intl.Segmenter(locale ?? DEFAULT_FORMAT_LOCALE, {
+      granularity: granularity ?? "grapheme"
+    }).segment(value)
+  ].map((part) => part.segment)
 };
+function withPageLocale(path, args, state) {
+  const index = INTL_LOCALE_PARAM[path];
+  if (index === undefined || index < 0 || args[index] != null) {
+    return args;
+  }
+  const page = state.$page;
+  const locale = page?.locale;
+  if (typeof locale !== "string" || locale === "") {
+    return args;
+  }
+  const filled = [...args];
+  filled[index] = locale;
+  return filled;
+}
 function isBlessedGlobal(ref2) {
   return ref2.startsWith("window#/") && BLESSED_GLOBALS.has(ref2.slice("window#/".length));
 }
@@ -1617,15 +1800,10 @@ function resolveExprRef(ref2, state, event, iterCtx) {
     return parts.length > 2 ? getPath(base, parts.slice(2).join("/")) : base;
   }
   if (ref2.startsWith("#/state/")) {
-    const sub = ref2.slice("#/state/".length);
-    const slash = sub.indexOf("/");
-    if (slash === -1) {
-      return state[sub];
-    }
-    return getPath(state[sub.slice(0, slash)], sub.slice(slash + 1));
+    return readPath(state, ref2.slice("#/state/".length));
   }
   if (ref2.startsWith("parent#/")) {
-    return state[ref2.slice("parent#/".length)];
+    return readPath(state, ref2.slice("parent#/".length));
   }
   if (ref2.startsWith("window#/")) {
     return getPath(globalThis.window, ref2.slice("window#/".length));
@@ -1633,7 +1811,7 @@ function resolveExprRef(ref2, state, event, iterCtx) {
   if (ref2.startsWith("document#/")) {
     return getPath(globalThis.document, ref2.slice("document#/".length));
   }
-  return state[ref2] ?? null;
+  return readPath(state, ref2) ?? null;
 }
 function resolveWritableRef(ref2, state, _event, iterCtx) {
   if (ref2.startsWith("$map/")) {
@@ -1665,7 +1843,7 @@ function resolveWritableRef(ref2, state, _event, iterCtx) {
     if (slash === -1) {
       return { key: sub, obj: state };
     }
-    const parts = sub.split("/");
+    const parts = refSegments(sub);
     const lastKey = parts.pop();
     let obj = state;
     for (const p of parts) {
@@ -1711,7 +1889,7 @@ function evaluateNode(node, state, event, iterCtx, trace) {
       const globalPath = calleeRef.slice("window#/".length);
       const helper = BLESSED_HELPERS[globalPath];
       if (helper) {
-        return helper(...argValues);
+        return helper(...withPageLocale(globalPath, argValues, state));
       }
       const fn = getPath(globalThis.window, globalPath);
       const lastSlash = globalPath.lastIndexOf("/");
@@ -1900,76 +2078,12 @@ function evaluateNode(node, state, event, iterCtx, trace) {
   return;
 }
 function getPath(obj, path) {
-  let current = obj;
-  for (const k of path.split(/[./]/)) {
-    current = current?.[k];
-  }
-  return current;
+  return readPath(obj, path);
 }
 function evaluateOperand(operand, state, event, iterCtx) {
   return resolveOperand(operand, state, event, iterCtx);
 }
 
-// ../schema/src/guards.ts
-function isJsonObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function isRef2(value) {
-  return isJsonObject(value) && typeof value.$ref === "string";
-}
-function isFunctionDef(value) {
-  return isJsonObject(value) && value.$prototype === "Function";
-}
-function isExpressionDef(value) {
-  return isJsonObject(value) && isJsonObject(value.$expression);
-}
-function isNamedFormulaDef(value) {
-  return isExpressionDef(value) && Array.isArray(value.parameters) && value.parameters.length > 0;
-}
-function hasStructuredBody(value) {
-  return isFunctionDef(value) && Array.isArray(value.body);
-}
-function isPrototypeDef(value) {
-  return isJsonObject(value) && typeof value.$prototype === "string" && value.$prototype !== "Function";
-}
-function isServerFnDef(value) {
-  return isJsonObject(value) && value.timing === "server" && typeof value.$src === "string" && typeof value.$export === "string" && !value.$prototype;
-}
-var SCHEMA_KEYWORDS = new Set([
-  "type",
-  "enum",
-  "minimum",
-  "maximum",
-  "minLength",
-  "maxLength",
-  "pattern",
-  "format",
-  "items",
-  "properties",
-  "required",
-  "description",
-  "title",
-  "$comment"
-]);
-function isMappedArray(value) {
-  return isJsonObject(value) && value.$prototype === "Array";
-}
-function isTemplateString(value) {
-  return typeof value === "string" && value.includes("${");
-}
-function bodyReturnsValue(body) {
-  return /\breturn\b[^\S\n]*(?![;}\s]|$)/.test(body);
-}
-function isEventBinding(value) {
-  return isRef2(value) || isFunctionDef(value) || isExpressionDef(value);
-}
-function paramNames(parameters) {
-  if (!parameters) {
-    return [];
-  }
-  return parameters.map((p) => typeof p === "string" ? p : p.name);
-}
-
 // ../runtime/src/statements.ts
 function statementKind(statement) {
   if ("operator" in statement) {
@@ -2038,6 +2152,45 @@ async function runStatements(statements, state, event, opts = {}) {
   }
 }
 
+// ../runtime/src/cookie.ts
+var HOST_PREFIX = "__Host-";
+var SECURE_PREFIX = "__Secure-";
+function readCookie(header, name) {
+  for (const pair of header.split(";")) {
+    const eq = pair.indexOf("=");
+    if (eq === -1) {
+      continue;
+    }
+    if (pair.slice(0, eq).trim() === name) {
+      return pair.slice(eq + 1);
+    }
+  }
+  return null;
+}
+function serializeCookie(name, value, options) {
+  const hostPrefixed = name.startsWith(HOST_PREFIX);
+  const parts = [`${name}=${encodeURIComponent(JSON.stringify(value))}`];
+  if (options.maxAge !== undefined) {
+    parts.push(`Max-Age=${options.maxAge}`);
+  }
+  const path = hostPrefixed ? "/" : options.path;
+  if (path) {
+    parts.push(`Path=${path}`);
+  }
+  if (options.domain && !hostPrefixed) {
+    parts.push(`Domain=${options.domain}`);
+  }
+  const { sameSite } = options;
+  const secure = options.secure === true || hostPrefixed || name.startsWith(SECURE_PREFIX) || sameSite?.toLowerCase() === "none";
+  if (secure) {
+    parts.push("Secure");
+  }
+  if (sameSite) {
+    parts.push(`SameSite=${sameSite}`);
+  }
+  return parts.join("; ");
+}
+
 // ../runtime/src/runtime.ts
 var _resolveCache = new Map;
 async function resolve(source) {
@@ -2153,7 +2306,7 @@ function boundPropKey(key, val, state) {
     return null;
   }
   const stored = toRaw(state)[sub];
-  if (isRef(stored) || typeof stored === "function") {
+  if (isRef2(stored) || typeof stored === "function") {
     return null;
   }
   if (typeof stored === "object" && stored !== null) {
@@ -2433,7 +2586,7 @@ function renderNode(def2, state, options) {
       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 = def2.tagName ?? "div";
+  const tagName = resolveTagName(def2.tagName, localState);
   const isCustomEl = tagName.includes("-") && customElements.get(tagName);
   if (def2.$props && isCustomEl) {
     return renderCustomElementWithProps(def2, localState, options, path);
@@ -2733,9 +2886,23 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     });
   });
 }
+function resolveTagName(tagName, scope) {
+  if (typeof tagName === "string") {
+    return tagName;
+  }
+  if (!isTagExpression(tagName)) {
+    return "div";
+  }
+  const expression = tagName.$expression;
+  if (expression.operator === "?:") {
+    return evaluateOperand(expression.target, scope, null) ? expression.value : expression.initial;
+  }
+  const key = evaluateOperand(expression.target, scope, null);
+  return expression.cases[String(key)] ?? expression.default;
+}
 function renderSwitch(def2, state, options) {
   const path = options?._path ?? [];
-  const container = document.createElement(def2.tagName ?? "div");
+  const container = document.createElement(resolveTagName(def2.tagName, state));
   if (options?.onNodeCreated) {
     options.onNodeCreated(container, path, def2, state);
   }
@@ -2744,7 +2911,7 @@ function renderSwitch(def2, state, options) {
   applyAttributes(container, def2.attributes ?? {}, state);
   let generation = 0;
   effect(() => {
-    container.innerHTML = "";
+    container.replaceChildren();
     if (!isRefObj(def2.$switch)) {
       return;
     }
@@ -2754,7 +2921,8 @@ function renderSwitch(def2, state, options) {
       return;
     }
     if (isRefObj(caseDef)) {
-      const gen = generation += 1;
+      generation += 1;
+      const gen = generation;
       const { href } = new URL(caseDef.$ref, location.href);
       resolve(href).then(async (doc) => {
         if (gen !== generation) {
@@ -2764,7 +2932,7 @@ function renderSwitch(def2, state, options) {
         if (gen !== generation) {
           return;
         }
-        container.innerHTML = "";
+        container.replaceChildren();
         const childOpts2 = options ? { ...options, _path: [...path, "cases", key] } : undefined;
         container.append(renderNode(doc, childScope, childOpts2));
       }).catch((error) => console.error("Jx $switch: failed to load external case", caseDef.$ref, error));
@@ -2865,36 +3033,19 @@ async function resolvePrototype(def2, state, key, base) {
     case "Cookie": {
       const name = def2.name ?? key;
       const read = () => {
-        const m = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
-        if (!m) {
+        const raw = readCookie(document.cookie, name);
+        if (raw === null) {
           return null;
         }
         try {
-          return JSON.parse(decodeURIComponent(m[1]));
+          return JSON.parse(decodeURIComponent(raw));
         } catch {
-          return m[1];
+          return raw;
         }
       };
       const cookieState = ref(read() ?? def2.default ?? null);
       effect(() => {
-        const v = cookieState.value;
-        let s = `${name}=${encodeURIComponent(JSON.stringify(v))}`;
-        if (def2.maxAge !== undefined) {
-          s += `; Max-Age=${def2.maxAge}`;
-        }
-        if (def2.path) {
-          s += `; Path=${def2.path}`;
-        }
-        if (def2.domain) {
-          s += `; Domain=${def2.domain}`;
-        }
-        if (def2.secure) {
-          s += `; Secure`;
-        }
-        if (def2.sameSite) {
-          s += `; SameSite=${def2.sameSite}`;
-        }
-        document.cookie = s;
+        document.cookie = serializeCookie(name, cookieState.value, def2);
       });
       return cookieState;
     }
@@ -3302,15 +3453,10 @@ function resolveRef(refPath, state) {
     return parts.length > 2 ? getPath2(base, parts.slice(2).join("/")) : base;
   }
   if (refPath.startsWith("#/state/")) {
-    const sub = refPath.slice("#/state/".length);
-    const slash = sub.indexOf("/");
-    if (slash === -1) {
-      return state[sub];
-    }
-    return getPath2(state[sub.slice(0, slash)], sub.slice(slash + 1));
+    return readPath(state, refPath.slice("#/state/".length));
   }
   if (refPath.startsWith("parent#/")) {
-    return state[refPath.slice("parent#/".length)];
+    return readPath(state, refPath.slice("parent#/".length));
   }
   if (refPath.startsWith("window#/")) {
     return getPath2(globalThis.window, refPath.slice("window#/".length));
@@ -3318,24 +3464,35 @@ function resolveRef(refPath, state) {
   if (refPath.startsWith("document#/")) {
     return getPath2(globalThis.document, refPath.slice("document#/".length));
   }
-  return state[refPath] ?? null;
+  return readPath(state, refPath) ?? null;
 }
 function isRefObj(v) {
-  return isRef2(v);
+  return isRef(v);
 }
 function isNestedSelector(k) {
   return k.startsWith(":") || k.startsWith(".") || k.startsWith("&") || k.startsWith("[");
 }
 function getPath2(obj, path) {
-  let current = obj;
-  for (const k of path.split(/[./]/)) {
-    current = current?.[k];
+  return readPath(obj, path);
+}
+var _privatePropWarned = new Set;
+function refusePrivateProp(key, where) {
+  if (!isPrivateStateKey(key)) {
+    return false;
   }
-  return current;
+  const seen = where === undefined ? key : `${where}:${key}`;
+  if (!_privatePropWarned.has(seen)) {
+    _privatePropWarned.add(seen);
+    console.warn(`Jx: "${key}" is private state (spec.md §5.6) and cannot be set through $props` + `${where === undefined ? "" : ` (${where})`}. The write was ignored; rename the entry without the leading # to make it part of the component's interface.`);
+  }
+  return true;
 }
 function mergeProps(def2, parentState) {
   const child = Object.create(parentState);
   for (const [k, v] of Object.entries(def2.$props ?? {})) {
+    if (refusePrivateProp(k, "$props")) {
+      continue;
+    }
     child[k] = isRefObj(v) ? resolveRef(v.$ref, parentState) : v;
   }
   return child;
@@ -3443,6 +3600,9 @@ async function defineElement(source, baseUrl) {
         try {
           const props = JSON.parse(propsAttr);
           for (const [key, val] of Object.entries(props)) {
+            if (refusePrivateProp(key, "data-jx-props")) {
+              continue;
+            }
             if (key in (def2.state ?? {})) {
               state[key] = val;
             }
@@ -3453,17 +3613,27 @@ async function defineElement(source, baseUrl) {
       const propAttrNames = this.getAttributeNames().filter((name) => name.startsWith("props.") && name.length > "props.".length);
       for (const name of propAttrNames) {
         const key = name.slice("props.".length);
+        if (refusePrivateProp(key, "props.* attribute")) {
+          this.removeAttribute(name);
+          continue;
+        }
         if (key in (def2.state ?? {})) {
           state[key] = this.getAttribute(name);
           this.removeAttribute(name);
         }
       }
       for (const key of Object.keys(def2.state ?? {})) {
+        if (isPrivateStateKey(key)) {
+          continue;
+        }
         if (key in this && this[key] !== undefined) {
           state[key] = this[key];
         }
       }
       for (const key of Object.keys(def2.state ?? {})) {
+        if (isPrivateStateKey(key)) {
+          continue;
+        }
         if (!(key in HTMLElement.prototype)) {
           Object.defineProperty(this, key, {
             configurable: true,
@@ -3476,7 +3646,7 @@ async function defineElement(source, baseUrl) {
       }
       this._state = state;
       const slottedChildren = [...this.childNodes];
-      this.innerHTML = "";
+      this.replaceChildren();
       if (!this.style.display) {
         this.style.display = "block";
       }
@@ -3520,11 +3690,14 @@ async function defineElement(source, baseUrl) {
   customElements.define(tagName, ElementClass);
 }
 function renderCustomElementWithProps(def2, state, options, path) {
-  const el = document.createElement(def2.tagName ?? "div");
+  const el = document.createElement(resolveTagName(def2.tagName, state));
   if (options?.onNodeCreated) {
     options.onNodeCreated(el, path ?? [], def2, state);
   }
   for (const [key, val] of Object.entries(def2.$props ?? {})) {
+    if (refusePrivateProp(key, "$props")) {
+      continue;
+    }
     if (isRefObj(val)) {
       const refVal = val;
       const resolved = resolveRef(refVal.$ref, state);
@@ -3574,7 +3747,7 @@ function distributeSlots(host, slottedChildren) {
     const name = slot.getAttribute("name");
     const matches = name ? named.get(name) ?? [] : unnamed;
     if (matches.length > 0) {
-      slot.innerHTML = "";
+      slot.replaceChildren();
       for (const child of matches) {
         slot.append(child);
       }
@@ -3583,9 +3756,22 @@ function distributeSlots(host, slottedChildren) {
 }
 
 // src/canvas/path-mapping.ts
+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) {
-  if (ctx.layoutWrapped && typeof def2 === "object" && def2?.$__layout) {
-    return { kind: "layout" };
+  const marker = ctx.layoutWrapped && typeof def2 === "object" ? def2?.$__layout : undefined;
+  if (marker) {
+    const origin = typeof marker === "object" ? marker : {};
+    return {
+      chrome: path.length > 0 && !wrapsPageContent(path, ctx.pageContentPrefix),
+      kind: "layout",
+      layoutFile: typeof origin.file === "string" ? origin.file : "",
+      layoutPath: Array.isArray(origin.path) ? origin.path : []
+    };
   }
   let mappedPath = path;
   if (ctx.layoutWrapped && ctx.pageContentPrefix) {
@@ -3787,6 +3973,36 @@ var EDIT_PLACEHOLDER_CSS = `
   font-size: 13px;
   pointer-events: none;
 }
+[data-jx-layout-region] {
+  position: relative;
+  opacity: 0.5;
+  transition: opacity 120ms ease;
+}
+[data-jx-layout-region]:hover {
+  opacity: 0.85;
+  outline: 1px dashed color-mix(in srgb, #808080 55%, transparent);
+  outline-offset: -1px;
+}
+[data-jx-layout-region] [data-jx-layout-region] {
+  opacity: 1;
+}
+[data-jx-layout-region]::before {
+  content: "LAYOUT \\00B7 " attr(data-jx-layout-file);
+  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;
+}
+[data-jx-layout-region] [data-jx-layout-region]::before {
+  content: none;
+}
 `;
 function syncEditModeCss(doc, mode) {
   const existing = doc.head.querySelector(`#${EDIT_PLACEHOLDER_STYLE_ID}`);
@@ -3802,6 +4018,9 @@ function syncEditModeCss(doc, mode) {
   style.textContent = EDIT_PLACEHOLDER_CSS;
   doc.head.append(style);
 }
+function syncPreviewShell(doc, mode) {
+  doc.documentElement.toggleAttribute("data-jx-preview", mode === "preview");
+}
 function isEditableMode(mode) {
   return mode === "design" || mode === "edit";
 }
@@ -3989,7 +4208,16 @@ function makeStamper(ctx) {
     }
     const classified = classifyRenderNode(path, def2, ctx);
     if (classified.kind === "layout") {
-      created.dataset.jxLayout = "";
+      created.dataset.jxLayoutPath = serializeJxPath(classified.layoutPath);
+      if (classified.layoutFile) {
+        created.dataset.jxLayoutFile = classified.layoutFile;
+      }
+      if (classified.chrome) {
+        created.dataset.jxLayoutRegion = "";
+        if (isEditableMode(ctx.canvasMode)) {
+          created.contentEditable = "false";
+        }
+      }
       return;
     }
     created.dataset.jxPath = serializeJxPath(classified.path);
@@ -4028,6 +4256,7 @@ async function renderResolvedDocument(opts) {
   applySiteStyle(opts.siteStyle, opts.doc.$media ?? {});
   injectHead(opts.doc);
   syncEditModeCss(opts.container.ownerDocument, opts.mode);
+  syncPreviewShell(opts.container.ownerDocument, opts.mode);
   syncStylebookCss(opts.container.ownerDocument, opts.mode);
   setRootMedia(opts.doc.$media ?? {});
   await registerElements2(opts.doc, opts.docBase);
@@ -4201,15 +4430,13 @@ var elements_meta_default = {
           tag: "strong",
           label: "Bold",
           icon: "sp-icon-text-bold",
-          command: "bold",
-          shortcut: "Cmd+B"
+          command: "bold"
         },
         {
           tag: "em",
           label: "Italic",
           icon: "sp-icon-text-italic",
-          command: "italic",
-          shortcut: "Cmd+I"
+          command: "italic"
         },
         {
           tag: "u",
@@ -4247,15 +4474,13 @@ var elements_meta_default = {
           tag: "strong",
           label: "Bold",
           icon: "sp-icon-text-bold",
-          command: "bold",
-          shortcut: "Cmd+B"
+          command: "bold"
         },
         {
           tag: "em",
           label: "Italic",
           icon: "sp-icon-text-italic",
-          command: "italic",
-          shortcut: "Cmd+I"
+          command: "italic"
         },
         { tag: "code", label: "Code", icon: "sp-icon-code", command: "code" },
         { tag: "a", label: "Link", icon: "sp-icon-link", command: "link" }
@@ -4482,15 +4707,13 @@ var elements_meta_default = {
           tag: "strong",
           label: "Bold",
           icon: "sp-icon-text-bold",
-          command: "bold",
-          shortcut: "Cmd+B"
+          command: "bold"
         },
         {
           tag: "em",
           label: "Italic",
           icon: "sp-icon-text-italic",
-          command: "italic",
-          shortcut: "Cmd+I"
+          command: "italic"
         },
         { tag: "code", label: "Code", icon: "sp-icon-code", command: "code" }
       ]
@@ -5033,6 +5256,9 @@ function getActiveElement() {
 function getActivePath() {
   return activePath;
 }
+function isSlashActive() {
+  return slash.isOpen();
+}
 function handleKeydown(e) {
   if (_plainMode) {
     if (e.key === "Escape") {
@@ -5053,46 +5279,11 @@ function handleKeydown(e) {
     if ((e.ctrlKey || e.metaKey) && ["b", "i", "u", "`"].includes(e.key)) {
       e.preventDefault();
     }
-    return;
-  }
-  if (e.key === "/" && !e.ctrlKey && !e.metaKey) {
-    const sel = window.getSelection();
-    if (sel && sel.rangeCount > 0) {
-      const range = sel.getRangeAt(0);
-      const textBefore = getTextBeforeCursor(range);
-      if (textBefore === "" || textBefore.endsWith(" ") || textBefore.endsWith(`
-`)) {
-        requestAnimationFrame(() => openSlashMenu());
-        return;
-      }
-    }
-  }
-  if (e.ctrlKey || e.metaKey) {
-    switch (e.key) {
-      case "b": {
-        e.preventDefault();
-        toggleInlineFormat("strong", activeEl);
-        break;
-      }
-      case "i": {
-        e.preventDefault();
-        toggleInlineFormat("em", activeEl);
-        break;
-      }
-      case "`": {
-        e.preventDefault();
-        toggleInlineFormat("code", activeEl);
-        break;
-      }
-      default: {
-        break;
-      }
-    }
   }
 }
 function handleInput() {
   if (slash.isOpen()) {
-    updateSlashMenu();
+    refreshSlashMenu();
   }
 }
 function handlePaste(e) {
@@ -5271,7 +5462,8 @@ function getTextBeforeCursor(range) {
   return preRange.toString();
 }
 var _slashFilterStart = 0;
-function openSlashMenu() {
+var _slashAnchored = true;
+function openSlashMenu(opts) {
   if (!activeEl || !insertFn || !activePath) {
     return;
   }
@@ -5280,11 +5472,29 @@ function openSlashMenu() {
     return;
   }
   const range = sel.getRangeAt(0);
+  _slashAnchored = opts?.anchored !== false;
   _slashFilterStart = getTextBeforeCursor(range).length;
-  slash.show(activeEl, "", { onSelect: handleSlashSelect });
+  slash.show(activeEl, "", {
+    onSelect: handleSlashSelect,
+    ..._slashAnchored ? {} : { showFilter: true }
+  });
 }
-function updateSlashMenu() {
-  if (!activeEl) {
+function handleSlashTrigger(e) {
+  if (e.key !== "/" || e.ctrlKey || e.metaKey || !activeEl) {
+    return;
+  }
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) {
+    return;
+  }
+  const textBefore = getTextBeforeCursor(sel.getRangeAt(0));
+  if (textBefore === "" || textBefore.endsWith(" ") || textBefore.endsWith(`
+`)) {
+    requestAnimationFrame(() => openSlashMenu());
+  }
+}
+function refreshSlashMenu() {
+  if (!activeEl || !_slashAnchored) {
     return;
   }
   const sel = window.getSelection();
@@ -5306,7 +5516,7 @@ function handleSlashSelect(cmd) {
   if (!activeEl || !insertFn || !activePath) {
     return;
   }
-  const sel = window.getSelection();
+  const sel = _slashAnchored ? window.getSelection() : null;
   if (sel && sel.rangeCount) {
     const range = sel.getRangeAt(0);
     const fullText = getTextBeforeCursor(range);
@@ -5387,22 +5597,36 @@ function startInteraction(channel, doc = document, deps) {
   let lastHoverKey = null;
   let lastZonesKey = null;
   let lastGen = deps?.getGen?.() ?? 0;
+  const isPreview = () => deps?.getMode?.() === "preview";
+  const onPointerDown = () => {
+    channel.post({ kind: "paneFocus" });
+  };
   const onClick = (e) => {
-    if (deps?.getMode?.() === "preview" && e.target instanceof Element) {
-      const anchor = e.target.closest("a[href]");
-      const href = anchor?.getAttribute("href");
-      if (href && !href.startsWith("#")) {
-        e.preventDefault();
-        channel.post({ href, kind: "previewNavigate" });
-        return;
+    if (isPreview()) {
+      if (e.target instanceof Element) {
+        const anchor = e.target.closest("a[href]");
+        const href = anchor?.getAttribute("href");
+        if (href && !href.startsWith("#")) {
+          e.preventDefault();
+          channel.post({ href, kind: "previewNavigate" });
+        }
       }
+      return;
     }
     const hit = nearestHit(e.target);
     if (hit) {
-      channel.post({ hit, kind: "hit" });
+      const mouse = e;
+      channel.post({
+        additive: mouse.ctrlKey === true || mouse.metaKey === true,
+        hit,
+        kind: "hit"
+      });
     }
   };
   const reportHover = (el) => {
+    if (isPreview()) {
+      return;
+    }
     const key = el?.dataset.jxPath ?? null;
     if (key === lastHoverKey) {
       return;
@@ -5418,7 +5642,7 @@ function startInteraction(channel, doc = document, deps) {
     }
   };
   const reportInsertZones = (target, cursor) => {
-    if (!deps || deps.getMode?.() === "stylebook") {
+    if (!deps || deps.getMode?.() === "stylebook" || isPreview()) {
       return;
     }
     syncZoneGen();
@@ -5460,26 +5684,33 @@ function startInteraction(channel, doc = document, deps) {
       return;
     }
     reportHover(null);
-    if (deps && lastZonesKey !== "none") {
+    if (deps && !isPreview() && lastZonesKey !== "none") {
       lastZonesKey = "none";
       channel.post({ kind: "insertZones", zones: null });
     }
   };
   const onContextMenu = (e) => {
     const me = e;
+    if (isPreview()) {
+      return;
+    }
     const active = isEditing() ? getActiveElement() : null;
     if (active && e.target instanceof Node && active.contains(e.target)) {
       return;
     }
-    e.preventDefault();
     const hit = nearestHit(e.target);
+    if (!hit) {
+      return;
+    }
+    e.preventDefault();
     channel.post({
       kind: "contextMenu",
-      path: hit ? hit.path : null,
+      path: hit.path,
       x: me.clientX,
       y: me.clientY
     });
   };
+  doc.addEventListener("pointerdown", onPointerDown, true);
   doc.addEventListener("click", onClick, true);
   doc.addEventListener("pointermove", onMove, true);
   doc.addEventListener("pointerleave", onLeave, true);
@@ -5489,6 +5720,7 @@ function startInteraction(channel, doc = document, deps) {
       cancelRaf(movePending);
       movePending = 0;
     }
+    doc.removeEventListener("pointerdown", onPointerDown, true);
     doc.removeEventListener("click", onClick, true);
     doc.removeEventListener("pointermove", onMove, true);
     doc.removeEventListener("pointerleave", onLeave, true);
@@ -5549,7 +5781,7 @@ function computeDropInstruction(targetEl, cursorY, shadowDoc, src) {
     return null;
   }
   const node = getNodeAtPath(shadowDoc, targetPath);
-  const tag = (node?.tagName || "div").toLowerCase();
+  const tag = (displayTagName(node?.tagName) || "div").toLowerCase();
   const hasElementChildren = Array.isArray(node?.children) && node.children.some((c) => c != null && typeof c === "object");
   const isLeaf = VOID_TAGS.has(tag) || !hasElementChildren;
   const rect = rectFor2(targetEl);
@@ -6181,10 +6413,10 @@ function computeEmptyPlaceholderClass(node) {
   if (Array.isArray(node.children) && node.children.length > 0) {
     return null;
   }
-  if (textTags.has(node.tagName)) {
+  if (textTags.has(displayTagName(node.tagName))) {
     return "empty-text-placeholder";
   }
-  if (containerTags.has(node.tagName)) {
+  if (containerTags.has(displayTagName(node.tagName))) {
     return "empty-container-placeholder";
   }
   return null;
@@ -6620,6 +6852,14 @@ function startIframeInlineEdit(channel, container, opts) {
     onSelectionChange: () => onSelectionChange(),
     onSplit: () => splitActiveBlock()
   });
+  const onSlashKey = (e) => handleSlashTrigger(e);
+  const onSlashInput = () => {
+    if (isSlashActive()) {
+      refreshSlashMenu();
+    }
+  };
+  container.addEventListener("keydown", onSlashKey);
+  container.addEventListener("input", onSlashInput);
   doc.addEventListener("mouseup", onMouseUp, true);
   doc.addEventListener("keyup", onKeyUp, true);
   doc.addEventListener("blur", onBlurCapture, true);
@@ -6628,6 +6868,10 @@ function startIframeInlineEdit(channel, container, opts) {
       applyFormatIntent(msg.intent);
       return;
     }
+    if (msg.kind === "openSlash") {
+      openSlashMenu({ anchored: false });
+      return;
+    }
     if (msg.kind === "flushEdits") {
       root.flush();
       channel.post({ kind: "flushComplete", reqId: msg.reqId });
@@ -6651,6 +6895,8 @@ function startIframeInlineEdit(channel, container, opts) {
     }
   });
   return () => {
+    container.removeEventListener("keydown", onSlashKey);
+    container.removeEventListener("input", onSlashInput);
     doc.removeEventListener("mouseup", onMouseUp, true);
     doc.removeEventListener("keyup", onKeyUp, true);
     doc.removeEventListener("blur", onBlurCapture, true);
@@ -6691,7 +6937,8 @@ function startIframeSlashBridge(channel, doc) {
       channel.post({
         filter,
         kind: "slashShow",
-        rect: { height: r.height, width: r.width, x: r.left, y: r.top }
+        rect: { height: r.height, width: r.width, x: r.left, y: r.top },
+        ...cbs.showFilter === true ? { showFilter: true } : {}
       });
     }
   };
@@ -6735,33 +6982,90 @@ function startIframeSlashBridge(channel, doc) {
   };
 }
 
+// src/commands/levels.ts
+var KEY_SCOPES = ["global", "canvas", "caret", "grid", "code", "dock", "palette"];
+
+// src/commands/keymap.ts
+var MODIFIER_ORDER = ["mod", "ctrl", "alt", "shift"];
+var MODIFIER_ALIASES = {
+  mod: "mod",
+  cmd: "mod",
+  command: "mod",
+  meta: "mod",
+  super: "mod",
+  ctrl: "ctrl",
+  control: "ctrl",
+  alt: "alt",
+  opt: "alt",
+  option: "alt",
+  shift: "shift"
+};
+var KEY_ALIASES = {
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright",
+  esc: "escape",
+  space: " ",
+  spacebar: " ",
+  del: "delete",
+  plus: "=",
+  return: "enter"
+};
+function serializeChord(parsed) {
+  const parts = MODIFIER_ORDER.filter((modifier) => parsed[modifier]);
+  return [...parts, parsed.key].join("+");
+}
+function digitFromCode(code) {
+  const match = /^Digit(\d)$/.exec(code ?? "");
+  return match?.[1];
+}
+function chordFromEvent(event, mac) {
+  const key = digitFromCode(event.code) ?? event.key.toLowerCase();
+  if (MODIFIER_ALIASES[key]) {
+    return "";
+  }
+  const parsed = {
+    mod: mac ? event.metaKey : event.ctrlKey,
+    ctrl: mac ? event.ctrlKey : false,
+    alt: event.altKey,
+    shift: event.shiftKey,
+    key: KEY_ALIASES[key] ?? key
+  };
+  return serializeChord(parsed);
+}
+var DISPATCHABLE_SCOPES = [
+  "global",
+  ...KEY_SCOPES.filter((scope) => scope !== "global" && scope !== "palette")
+];
+
 // src/canvas/iframe-keys.ts
-var BARE_FORWARD_KEYS = new Set([
-  "Delete",
-  "Backspace",
-  "Escape",
-  "Enter",
-  "ArrowUp",
-  "ArrowDown",
-  "ArrowLeft",
-  "ArrowRight"
-]);
-var EDITOR_OWNED_CHORDS = new Set(["b", "i", "u", "`"]);
-function isEditableTarget(el) {
+var CARET_STACK = ["caret", "global"];
+var CANVAS_STACK = ["canvas", "global"];
+var GLOBAL_STACK = ["global"];
+var NO_TABLE = { chords: [], mac: false };
+function isPageTextEntry(el) {
   if (!(el instanceof HTMLElement)) {
     return false;
   }
-  if (el.isContentEditable) {
-    return true;
-  }
   return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT";
 }
-function shouldForwardKey(e) {
-  const editable = isEditableTarget(e.target);
-  if (e.ctrlKey || e.metaKey) {
-    return !(editable && EDITOR_OWNED_CHORDS.has(e.key.toLowerCase()));
+function frameScopeStack(sessionLive, mode) {
+  if (sessionLive) {
+    return CARET_STACK;
+  }
+  return mode === "preview" ? GLOBAL_STACK : CANVAS_STACK;
+}
+function shouldForwardKey(e, table = NO_TABLE, sessionLive = false, mode = "design") {
+  if (isPageTextEntry(e.target)) {
+    return false;
+  }
+  const chord = chordFromEvent(e, table.mac);
+  if (!chord) {
+    return false;
   }
-  return !editable && BARE_FORWARD_KEYS.has(e.key);
+  const stack = frameScopeStack(sessionLive, mode);
+  return table.chords.some((entry) => entry.chord === chord && stack.includes(entry.scope));
 }
 function serializeKey(e) {
   return {
@@ -6773,9 +7077,9 @@ function serializeKey(e) {
     shiftKey: e.shiftKey
   };
 }
-function startKeyForwarding(channel, doc = document) {
+function startKeyForwarding(channel, doc = document, isSessionLive = () => false, getTable = () => NO_TABLE, getMode = () => "design") {
   const onKey = (e) => {
-    if (!shouldForwardKey(e)) {
+    if (!shouldForwardKey(e, getTable(), isSessionLive(), getMode())) {
       return;
     }
     e.preventDefault();
@@ -7314,7 +7618,26 @@ function fileDropHitFor(targetEl, shadowDoc) {
   return {
     path,
     rect: rectFor2(targetEl),
-    tagName: (node?.tagName ?? targetEl.tagName).toLowerCase()
+    tagName: (displayTagName(node?.tagName) || targetEl.tagName).toLowerCase()
+  };
+}
+function layoutHitFor(target) {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  if (target.closest("[data-jx-path]")) {
+    return null;
+  }
+  const el = target.closest("[data-jx-layout-region]");
+  if (!(el instanceof HTMLElement)) {
+    return null;
+  }
+  return {
+    className: typeof el.className === "string" ? el.className : "",
+    layoutFile: el.dataset.jxLayoutFile ?? "",
+    layoutPath: parseJxPath(el.dataset.jxLayoutPath ?? "[]"),
+    rect: rectFor2(el),
+    tagName: el.tagName.toLowerCase()
   };
 }
 var IN_PLACE_KEYS = new Set(["style", "textContent"]);
@@ -7345,6 +7668,9 @@ function patchDisturbsActiveEdit(forwardOps) {
   }
   return false;
 }
+var IDLE_QUIET_FRAMES = 2;
+var IDLE_WATCH_MAX_MS = 5000;
+var IMAGE_RETRY_WINDOW_MS = 500;
 function startCanvasIframe(opts) {
   const { channel, container } = opts;
   let handle = null;
@@ -7353,6 +7679,7 @@ function startCanvasIframe(opts) {
   let shadowDoc = null;
   let renderedGen = -1;
   let currentMode = "design";
+  let forwardTable = NO_TABLE;
   let renderCtx = null;
   let dragSrc = null;
   let dragGen = -1;
@@ -7413,7 +7740,17 @@ function startCanvasIframe(opts) {
     getMode: () => currentMode,
     getShadowDoc: () => shadowDoc
   });
-  const stopKeyForwarding = startKeyForwarding(channel, container.ownerDocument);
+  const onLayoutClick = (e) => {
+    if (currentMode !== "design" && currentMode !== "edit") {
+      return;
+    }
+    const hit = layoutHitFor(e.target);
+    if (hit) {
+      channel.post({ hit, kind: "layoutHit" });
+    }
+  };
+  container.ownerDocument.addEventListener("click", onLayoutClick, true);
+  const stopKeyForwarding = startKeyForwarding(channel, container.ownerDocument, isEditing, () => forwardTable, () => currentMode);
   const stopInlineEdit = startIframeInlineEdit(channel, container, {
     getMode: () => currentMode,
     getShadowDoc: () => shadowDoc
@@ -7429,12 +7766,84 @@ function startCanvasIframe(opts) {
       const root = container.firstElementChild;
       const fragment = root instanceof HTMLElement && root.dataset.jxDefinitionRoot !== undefined;
       channel.post({ fragment, height: measured, kind: "contentHeight" });
+      armIdleWatch();
     }
   }
   const ResizeObs = win?.ResizeObserver;
   const heightObserver = ResizeObs ? new ResizeObs(() => postContentHeight()) : null;
+  const frameDoc = container.ownerDocument;
+  let idleFrame = 0;
+  let quietFrames = 0;
+  let idleDeadline = 0;
+  let lastIdleKey = "";
+  const retryingImages = new Map;
+  function pendingImageRetries() {
+    const now = Date.now();
+    for (const [img, deadline] of retryingImages) {
+      if (deadline <= now) {
+        retryingImages.delete(img);
+      }
+    }
+    return retryingImages.size;
+  }
+  function sampleIdle() {
+    const running = typeof frameDoc.getAnimations === "function" ? frameDoc.getAnimations().filter((a) => a.playState === "running").length : 0;
+    return {
+      animations: running,
+      fonts: frameDoc.fonts ? frameDoc.fonts.status === "loaded" : true,
+      gen: renderedGen,
+      images: pendingImageRetries(),
+      kind: "idle"
+    };
+  }
+  function idleTick() {
+    idleFrame = 0;
+    const sample = sampleIdle();
+    const key = `${sample.gen}|${sample.fonts}|${sample.animations}|${sample.images}`;
+    const changed = key !== lastIdleKey;
+    if (changed) {
+      lastIdleKey = key;
+      channel.post(sample);
+    }
+    const quiet = sample.fonts && sample.animations === 0 && sample.images === 0;
+    quietFrames = quiet ? changed ? 1 : quietFrames + 1 : 0;
+    if (quietFrames >= IDLE_QUIET_FRAMES) {
+      return;
+    }
+    if (Date.now() >= idleDeadline) {
+      return;
+    }
+    idleFrame = win ? win.requestAnimationFrame(idleTick) : 0;
+  }
+  function armIdleWatch() {
+    quietFrames = 0;
+    idleDeadline = Date.now() + IDLE_WATCH_MAX_MS;
+    if (!idleFrame && win) {
+      idleFrame = win.requestAnimationFrame(idleTick);
+    }
+  }
+  const onImageError = (event) => {
+    if (event.target instanceof HTMLImageElement) {
+      retryingImages.set(event.target, Date.now() + IMAGE_RETRY_WINDOW_MS);
+      armIdleWatch();
+    }
+  };
+  const onImageLoad = (event) => {
+    if (event.target instanceof HTMLImageElement && retryingImages.delete(event.target)) {
+      armIdleWatch();
+    }
+  };
+  container.addEventListener("error", onImageError, true);
+  container.addEventListener("load", onImageLoad, true);
+  armIdleWatch();
   heightObserver?.observe(container);
   const onWheel = (e) => {
+    if (currentMode === "preview") {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+      }
+      return;
+    }
     e.preventDefault();
     channel.post({
       ctrlKey: e.ctrlKey,
@@ -7537,6 +7946,7 @@ function startCanvasIframe(opts) {
     if (msg.kind === "patch") {
       const { gen: gen2 } = msg;
       if (gen2 < renderedGen) {
+        channel.post({ gen: gen2, kind: "patchError", message: "patch-behind-render" });
         return;
       }
       if (gen2 > renderedGen || !shadowDoc || !renderCtx) {
@@ -7556,6 +7966,7 @@ function startCanvasIframe(opts) {
           restoreDocSelection(container, caret);
         }
         channel.post({ gen: gen2, kind: "patchComplete" });
+        armIdleWatch();
       } catch (error) {
         channel.post({
           gen: gen2,
@@ -7610,10 +8021,25 @@ function startCanvasIframe(opts) {
       stopAutoScroll();
       return;
     }
+    if (msg.kind === "keymap") {
+      forwardTable = { chords: msg.chords, mac: msg.mac };
+      return;
+    }
     if (msg.kind === "setColorScheme") {
       applyPreviewColorScheme(container.ownerDocument, msg.scheme);
       return;
     }
+    if (msg.kind === "setLocale") {
+      const root = container.ownerDocument.documentElement;
+      if (msg.locale === null) {
+        root.removeAttribute("lang");
+        root.removeAttribute("dir");
+      } else {
+        root.setAttribute("lang", msg.locale);
+        root.setAttribute("dir", msg.dir);
+      }
+      return;
+    }
     if (msg.kind === "siteStyleUpdate") {
       applySiteStyle(msg.siteStyle, msg.media);
       return;
@@ -7656,6 +8082,7 @@ function startCanvasIframe(opts) {
           renderedGen = gen;
           currentMode = msg.mode;
           channel.post({ gen, kind: "renderComplete" });
+          armIdleWatch();
           const defs = handle.ctx.defs;
           stopDataScopeWatch = observeScope(() => {
             try {
@@ -7681,8 +8108,15 @@ function startCanvasIframe(opts) {
     stopInlineEdit();
     stopSlashBridge();
     stopImageRetry();
+    if (idleFrame && win) {
+      win.cancelAnimationFrame(idleFrame);
+    }
+    idleFrame = 0;
+    container.removeEventListener("error", onImageError, true);
+    container.removeEventListener("load", onImageLoad, true);
     stopAutoScroll();
     heightObserver?.disconnect();
+    container.ownerDocument.removeEventListener("click", onLayoutClick, true);
     container.ownerDocument.removeEventListener("wheel", onWheel);
     container.ownerDocument.removeEventListener("dragenter", onNativeDragOver, true);
     container.ownerDocument.removeEventListener("dragleave", onNativeDragLeave, true);
@@ -7716,10 +8150,14 @@ if (typeof window !== "undefined" && window.parent !== window) {
 export {
   startCanvasIframe,
   patchDisturbsActiveEdit,
+  layoutHitFor,
   isExternalFileDrag,
   fileDropHitFor,
-  bootCanvasIframe
+  bootCanvasIframe,
+  IMAGE_RETRY_WINDOW_MS,
+  IDLE_WATCH_MAX_MS,
+  IDLE_QUIET_FRAMES
 };
 
-//# debugId=E7C63A3556D495B364756E2164756E21
+//# debugId=3844B899CF37A35C64756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map