@jxsuite/studio 2.4.3 → 4.0.0

package/dist/iframe-entry.js

@@ -2084,6 +2084,188 @@ function evaluateOperand(operand, state, event, iterCtx) {
   return resolveOperand(operand, state, event, iterCtx);
 }
 
+// ../schema/src/asset-paths.ts
+function normalizeDir(value) {
+  const forward = value.replaceAll("\\", "/");
+  return forward.length > 1 && forward.endsWith("/") ? forward.slice(0, -1) : forward;
+}
+function normalizeAssetPrefix(prefix) {
+  const forward = normalizeDir(prefix);
+  return forward.startsWith("/") ? forward : `/${forward}`;
+}
+function bySpecificity(mounts, key) {
+  return [...mounts].toSorted((a, b) => b[key].length - a[key].length);
+}
+function isUnder(path, dir) {
+  return path === dir || path.startsWith(`${dir}/`);
+}
+function assetUrlFor(mounts, absolutePath) {
+  const path = normalizeDir(absolutePath);
+  for (const mount of bySpecificity(mounts, "dir")) {
+    const dir = normalizeDir(mount.dir);
+    if (!isUnder(path, dir) || path === dir) {
+      continue;
+    }
+    const rest = path.slice(dir.length + 1);
+    const encoded = rest.split("/").map((segment) => encodeURIComponent(segment)).join("/");
+    return `${normalizeAssetPrefix(mount.urlPrefix)}/${encoded}`;
+  }
+  return null;
+}
+function resolveAssetUrl(mounts, url) {
+  const pathname = url.split("#")[0].split("?")[0];
+  if (!pathname.startsWith("/")) {
+    return null;
+  }
+  let decoded;
+  try {
+    decoded = decodeURIComponent(pathname);
+  } catch {
+    return null;
+  }
+  if (/%2e|%2f/i.test(decoded)) {
+    return null;
+  }
+  for (const mount of bySpecificity(mounts, "urlPrefix")) {
+    const prefix = normalizeAssetPrefix(mount.urlPrefix);
+    if (!decoded.startsWith(`${prefix}/`)) {
+      continue;
+    }
+    const rest = decoded.slice(prefix.length + 1);
+    const segments = rest.split("/");
+    if (segments.some((s) => s === "" || s === "." || s === "..")) {
+      return null;
+    }
+    return `${normalizeDir(mount.dir)}/${segments.join("/")}`;
+  }
+  return null;
+}
+var URL_TERMINATOR = String.raw`"'\s<>()\\`;
+var PUBLIC_DIR = "public";
+function splitRefSuffix(value) {
+  const cut = value.search(/[#?]/);
+  return cut === -1 ? { path: value, suffix: "" } : { path: value.slice(0, cut), suffix: value.slice(cut) };
+}
+function isNonRelativeRef(value) {
+  return value === "" || value.startsWith("/") || value.startsWith("#") || value.includes("${") || /^[a-z][\w+.-]*:/i.test(value);
+}
+function normalizeProjectPath(path) {
+  return path.replaceAll("\\", "/").replace(/^\.\//, "").replace(/^\/+/, "").replace(/\/+$/, "");
+}
+function joinProjectPath(dir, ref2) {
+  const base = dir === "" || dir === "." ? [] : normalizeProjectPath(dir).split("/");
+  const out = base.filter((segment) => segment !== "" && segment !== ".");
+  for (const segment of ref2.replaceAll("\\", "/").split("/")) {
+    if (segment === "" || segment === ".") {
+      continue;
+    }
+    if (segment === "..") {
+      if (out.length === 0) {
+        return null;
+      }
+      out.pop();
+      continue;
+    }
+    out.push(segment);
+  }
+  return out.join("/");
+}
+function projectPathsForSiteUrl(url, mounts, lanes) {
+  const { path } = splitRefSuffix(url);
+  if (!path.startsWith("/")) {
+    return [];
+  }
+  let decoded;
+  try {
+    decoded = decodeURIComponent(path);
+  } catch {
+    return [];
+  }
+  if (/%2e|%2f/i.test(decoded)) {
+    return [];
+  }
+  const rest = decoded.replace(/^\/+/, "");
+  if (rest === "" || rest.split("/").some((segment) => segment === "." || segment === "..")) {
+    return [];
+  }
+  const out = [];
+  for (const lane of lanes) {
+    if (lane === "mounts") {
+      const mounted = resolveAssetUrl(mounts, path);
+      if (mounted !== null && !mounted.startsWith("/") && !/^[A-Za-z]:/.test(mounted)) {
+        out.push(normalizeProjectPath(mounted));
+      }
+      continue;
+    }
+    out.push(lane === "root" ? rest : `${PUBLIC_DIR}/${rest}`);
+  }
+  return [...new Set(out)];
+}
+function projectPathForRef(value, documentDir, mounts, lanes) {
+  const { path } = splitRefSuffix(value);
+  if (path === "") {
+    return null;
+  }
+  if (isNonRelativeRef(value)) {
+    return path.startsWith("/") ? projectPathsForSiteUrl(path, mounts, lanes)[0] ?? null : null;
+  }
+  if (path.endsWith("/")) {
+    return null;
+  }
+  let decoded;
+  try {
+    decoded = decodeURIComponent(path);
+  } catch {
+    return null;
+  }
+  const joined = joinProjectPath(documentDir, decoded);
+  if (joined === null || joined === "" || joined === normalizeProjectPath(documentDir)) {
+    return null;
+  }
+  return joined;
+}
+function encodeProjectPath(path) {
+  return path.split("/").map((segment) => encodeURIComponent(segment)).join("/");
+}
+function parseSrcset(value) {
+  const out = [];
+  let i = 0;
+  while (i < value.length) {
+    while (i < value.length && (/\s/.test(value[i]) || value[i] === ",")) {
+      i += 1;
+    }
+    if (i >= value.length) {
+      break;
+    }
+    const start = i;
+    while (i < value.length && !/\s/.test(value[i])) {
+      i += 1;
+    }
+    let url = value.slice(start, i);
+    if (url.endsWith(",")) {
+      out.push({ descriptor: "", url: url.replace(/,+$/, "") });
+      continue;
+    }
+    while (i < value.length && /\s/.test(value[i])) {
+      i += 1;
+    }
+    const descStart = i;
+    while (i < value.length && value[i] !== ",") {
+      i += 1;
+    }
+    const descriptor = value.slice(descStart, i).trim();
+    i += 1;
+    url = url.replace(/,+$/, "");
+    if (url !== "") {
+      out.push({ descriptor, url });
+    }
+  }
+  return out;
+}
+function formatSrcset(candidates) {
+  return candidates.map(({ url, descriptor }) => descriptor ? `${url} ${descriptor}` : url).join(", ");
+}
+
 // ../runtime/src/statements.ts
 function statementKind(statement) {
   if ("operator" in statement) {
@@ -2287,6 +2469,52 @@ function canvasAttrName(el, key) {
   }
   return key;
 }
+var _canvasAssetResolver = null;
+function setCanvasAssetResolver(fn) {
+  _canvasAssetResolver = fn;
+}
+var ASSET_KEYS = new Set(["src", "poster", "data"]);
+var SRCSET_KEYS = new Set(["srcset", "imagesrcset"]);
+var HREF_ASSET_TAGS = new Set(["LINK"]);
+function isAssetKey(tagName, key) {
+  return ASSET_KEYS.has(key) || key === "href" && HREF_ASSET_TAGS.has(tagName);
+}
+function canvasAssetValue(tagName, key, value) {
+  if (!_canvasAssetResolver || value === "") {
+    return value;
+  }
+  const name = key.toLowerCase();
+  if (SRCSET_KEYS.has(name)) {
+    const candidates = parseSrcset(value);
+    let changed = false;
+    const next = candidates.map((candidate) => {
+      const resolved = _canvasAssetResolver?.(candidate.url, name) ?? null;
+      if (resolved === null || resolved === candidate.url) {
+        return candidate;
+      }
+      changed = true;
+      return { descriptor: candidate.descriptor, url: resolved };
+    });
+    return changed ? formatSrcset(next) : value;
+  }
+  if (!isAssetKey(tagName, name)) {
+    return value;
+  }
+  return _canvasAssetResolver(value, name) ?? value;
+}
+var CSS_URL_RE = /\burl\(\s*(?<q>["']?)(?<u>[^"')]*)\k<q>\s*\)/g;
+function canvasStyleUrls(value) {
+  if (!_canvasAssetResolver || !value.includes("url(")) {
+    return value;
+  }
+  return value.replaceAll(CSS_URL_RE, (whole, quote, url) => {
+    const resolved = url === "" ? null : _canvasAssetResolver?.(url, "url()") ?? null;
+    return resolved === null ? whole : `url(${quote}${resolved}${quote})`;
+  });
+}
+function canvasStyleValue(value) {
+  return transposeCanvasUnits(canvasStyleUrls(value));
+}
 var _stampPropBindings = false;
 function setStampPropBindings(on) {
   _stampPropBindings = on;
@@ -2460,6 +2688,32 @@ function evaluateTemplate(str, state) {
   const fn = new Function("state", "$map", "item", "index", `return \`${str}\``);
   return fn(state, $map, $map?.item, $map?.index);
 }
+function isSingleExpression(str) {
+  if (!str.startsWith("${") || !str.endsWith("}")) {
+    return false;
+  }
+  let depth = 0;
+  for (let i = 1;i < str.length; i += 1) {
+    const c = str[i];
+    if (c === "{") {
+      depth += 1;
+    } else if (c === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return i === str.length - 1;
+      }
+    }
+  }
+  return false;
+}
+function evaluateAttrTemplate(str, state) {
+  if (!isSingleExpression(str)) {
+    return evaluateTemplate(str, state);
+  }
+  const $map = state?.$map;
+  const fn = new Function("state", "$map", "item", "index", `return (${str.slice(2, -1)})`);
+  return fn(state, $map, $map?.item, $map?.index);
+}
 var _moduleCache = new Map;
 async function resolveFunction(def2, state, key, base) {
   if (def2.body && def2.$src) {
@@ -2563,6 +2817,17 @@ var RESERVED_KEYS = new Set([
   "observedAttributes"
 ]);
 var warnedRefChildren = new Set;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
+function elementNamespace(tagName, inherited) {
+  if (tagName === "svg") {
+    return SVG_NS;
+  }
+  if (tagName === "math") {
+    return MATHML_NS;
+  }
+  return inherited ?? null;
+}
 function renderNode(def2, state, options) {
   const path = options?._path ?? [];
   if (typeof def2 === "string" || typeof def2 === "number" || typeof def2 === "boolean") {
@@ -2605,7 +2870,9 @@ function renderNode(def2, state, options) {
   if (def2.$switch) {
     return renderSwitch(def2, localState, options);
   }
-  const el = document.createElement(tagName);
+  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);
   }
@@ -2614,12 +2881,12 @@ function renderNode(def2, state, options) {
   applyAttributes(el, def2.attributes ?? {}, localState);
   const kids = def2.children;
   if (isMappedArray(kids)) {
-    const arrOpts = options ? { ...options, _path: [...path, "children"] } : undefined;
+    const arrOpts = options || childNs ? { ...options, _ns: childNs, _path: [...path, "children"] } : undefined;
     renderMappedArrayInto(el, kids, localState, arrOpts);
   } else if (Array.isArray(kids)) {
     for (let i = 0;i < kids.length; i++) {
       const child = kids[i];
-      const childOpts = options ? { ...options, _path: [...path, "children", i] } : undefined;
+      const childOpts = options || childNs ? { ...options, _ns: childNs, _path: [...path, "children", i] } : undefined;
       if (isMappedArray(child)) {
         renderMappedArrayInto(el, child, localState, childOpts);
       } else {
@@ -2678,6 +2945,15 @@ function bindProperty(el, key, val, state) {
   if (boundProp) {
     el.dataset.jxBoundProp = boundProp;
   }
+  const asAsset = (resolved) => typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+  const write = (resolved) => {
+    const node = el;
+    if (key === "className" && !(node instanceof HTMLElement)) {
+      node.setAttribute("class", resolved == null ? "" : String(resolved));
+      return;
+    }
+    target[key] = resolved;
+  };
   if (isRefObj(val)) {
     const refVal = val;
     if (key === "id") {
@@ -2685,17 +2961,17 @@ function bindProperty(el, key, val, state) {
       return;
     }
     effect(() => {
-      target[key] = resolveRef(refVal.$ref, state);
+      write(asAsset(resolveRef(refVal.$ref, state)));
     });
     return;
   }
   if (isTemplateString(val)) {
     effect(() => {
-      target[key] = evaluateTemplate(val, state);
+      write(asAsset(evaluateTemplate(val, state)));
     });
     return;
   }
-  target[key] = val;
+  write(asAsset(val));
 }
 function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
   const nested = {};
@@ -2730,19 +3006,19 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
     if (prop.startsWith("--")) {
       if (isTemplateString(val)) {
         effect(() => {
-          el.style.setProperty(prop, transposeCanvasUnits(evaluateTemplate(val, state)));
+          el.style.setProperty(prop, canvasStyleValue(evaluateTemplate(val, state)));
         });
       } else {
-        el.style.setProperty(prop, transposeCanvasUnits(scalar));
+        el.style.setProperty(prop, canvasStyleValue(scalar));
       }
     } else if (isTemplateString(val)) {
       effect(() => {
-        el.style[prop] = transposeCanvasUnits(evaluateTemplate(val, state));
+        el.style[prop] = canvasStyleValue(evaluateTemplate(val, state));
       });
     } else if (mediaOverriddenProps.has(prop)) {
       baseDecls[prop] = scalar;
     } else {
-      el.style[prop] = transposeCanvasUnits(scalar);
+      el.style[prop] = canvasStyleValue(scalar);
     }
   }
   const hasNested = Object.keys(nested).length > 0;
@@ -2801,7 +3077,7 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
     if (key === "@--") {
       continue;
     }
-    const query = key.startsWith("@--") ? mediaQueries[key.slice(1)] ?? key.slice(1) : key.startsWith("@(") ? key.slice(1) : null;
+    const query = resolveAtQuery(key, mediaQueries);
     const atRule = query === null ? key : `@media ${query}`;
     const scope = `[data-jx="${uid}"]`;
     const scheme = query === null ? null : pureSchemeOf(query);
@@ -2834,15 +3110,35 @@ function reapplyStyle(el, styleDef, mediaQueries = {}, state = {}) {
   delete el.dataset.jx;
   applyStyle(el, styleDef ?? {}, mediaQueries, state);
 }
+var ENUMERATED_ATTRS = new Set(["contenteditable", "draggable", "spellcheck"]);
+function booleanAttrValue(name, value) {
+  const lower = name.toLowerCase();
+  if (lower.startsWith("aria-") || ENUMERATED_ATTRS.has(lower)) {
+    return String(value);
+  }
+  return value ? "" : null;
+}
 function applyAttributes(el, attrs, state) {
   for (const [k, v] of Object.entries(attrs)) {
     const attr = canvasAttrName(el, k);
+    const write = (resolved) => {
+      if (typeof resolved === "boolean") {
+        const text = booleanAttrValue(attr, resolved);
+        if (text === null) {
+          el.removeAttribute(attr);
+        } else {
+          el.setAttribute(attr, text);
+        }
+        return;
+      }
+      el.setAttribute(attr, canvasAssetValue(el.tagName, k, String(resolved ?? "")));
+    };
     if (isRefObj(v)) {
-      effect(() => el.setAttribute(attr, String(resolveRef(v.$ref, state) ?? "")));
+      effect(() => write(resolveRef(v.$ref, state)));
     } else if (isTemplateString(v)) {
-      effect(() => el.setAttribute(attr, String(evaluateTemplate(v, state))));
+      effect(() => write(evaluateAttrTemplate(v, state)));
     } else {
-      el.setAttribute(attr, String(v));
+      write(v);
     }
   }
 }
@@ -3515,7 +3811,18 @@ function camelToKebab(s) {
   return s.replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 }
 function toCSSText(rules) {
-  return Object.entries(rules).filter(([k, v]) => !isNestedSelector(k) && (v === null || typeof v !== "object")).map(([p, v]) => `${camelToKebab(p)}: ${transposeCanvasUnits(String(v))}`).join("; ");
+  return Object.entries(rules).filter(([k, v]) => !isNestedSelector(k) && (v === null || typeof v !== "object")).map(([p, v]) => `${camelToKebab(p)}: ${canvasStyleValue(String(v))}`).join("; ");
+}
+var MEDIA_TYPES = new Set(["all", "print", "screen", "speech"]);
+function resolveAtQuery(atKey, mediaQueries) {
+  if (atKey.startsWith("@--")) {
+    return mediaQueries[atKey.slice(1)] ?? atKey.slice(1);
+  }
+  if (atKey.startsWith("@(")) {
+    const inner = atKey.slice(2, -1).trim();
+    return MEDIA_TYPES.has(inner.toLowerCase()) ? inner : atKey.slice(1);
+  }
+  return null;
 }
 var COLOR_SCHEME_ATTR = "data-color-scheme";
 function pureSchemeOf(query) {
@@ -3666,6 +3973,9 @@ async function defineElement(source, baseUrl) {
       }
       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));
@@ -3712,19 +4022,21 @@ function renderCustomElementWithProps(def2, state, options, path) {
     if (refusePrivateProp(key, "$props")) {
       continue;
     }
+    const write = (resolved) => {
+      el[key] = typeof resolved === "string" ? canvasAssetValue(el.tagName, key, resolved) : resolved;
+    };
     if (isRefObj(val)) {
       const refVal = val;
-      const resolved = resolveRef(refVal.$ref, state);
-      el[key] = resolved;
+      write(resolveRef(refVal.$ref, state));
       effect(() => {
-        el[key] = resolveRef(refVal.$ref, state);
+        write(resolveRef(refVal.$ref, state));
       });
     } else if (isTemplateString(val)) {
       effect(() => {
-        el[key] = evaluateTemplate(val, state);
+        write(evaluateTemplate(val, state));
       });
     } else {
-      el[key] = val;
+      write(val);
     }
   }
   applyStyle(el, def2.style ?? {}, state["$media"] ?? {}, state);
@@ -3769,6 +4081,47 @@ function distributeSlots(host, slottedChildren) {
   }
 }
 
+// src/canvas/asset-resolve.ts
+function resolveAssetRef(value, ctx) {
+  if (!ctx || value === "") {
+    return null;
+  }
+  if (ctx.space === "repo") {
+    if (!ctx.fileBaseUrl) {
+      return null;
+    }
+    const path = projectPathForRef(value, ctx.documentDir, ctx.mounts, ctx.lanes);
+    if (path === null) {
+      return null;
+    }
+    const { suffix } = splitRefSuffix(value);
+    return `${ctx.fileBaseUrl}${encodeProjectPath(path)}${suffix}`;
+  }
+  const [mount] = ctx.mounts;
+  return mount ? mountedRefFor(value, ctx.documentDir, mount) : null;
+}
+function mountedRefFor(value, entryDir, mount) {
+  if (isNonRelativeRef(value)) {
+    return null;
+  }
+  const { path: bare, suffix } = splitRefSuffix(value);
+  let decoded;
+  try {
+    decoded = decodeURIComponent(bare);
+  } catch {
+    return null;
+  }
+  const target = joinProjectPath(entryDir, decoded);
+  if (target === null) {
+    return null;
+  }
+  const url = assetUrlFor([mount], target);
+  if (!url) {
+    return null;
+  }
+  return `${url}${suffix}`;
+}
+
 // src/canvas/path-mapping.ts
 function wrapsPageContent(path, prefix) {
   if (!prefix) {
@@ -3818,7 +4171,7 @@ function parseJxPath(serialized) {
   return JSON.parse(serialized);
 }
 
-// src/canvas/site-style-css.ts
+// ../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("; ");
@@ -3853,7 +4206,7 @@ function buildSiteStyleCSS(siteStyle, mediaQueries, transpose) {
     rules.push(`body { ${bodyCSS} }`);
   }
   for (const [atKey, block] of condBlocks) {
-    const query = atKey.startsWith("@--") ? mediaQueries[atKey.slice(1)] ?? atKey.slice(1) : atKey.startsWith("@(") ? atKey.slice(1) : null;
+    const query = resolveAtQuery(atKey, mediaQueries);
     if (query === null) {
       continue;
     }
@@ -3942,7 +4295,7 @@ var EDIT_PLACEHOLDER_CSS = `
   font-size: 0;
   overflow: hidden;
 }
-.empty-text-placeholder:not([contenteditable])::after {
+.empty-text-placeholder:is(:empty, :has(> br:only-child)):not([data-jx-active-block]):not([contenteditable])::after {
   content: "Click here to add text...";
   color: color-mix(in srgb, #808080 40%, transparent);
   font-style: italic;
@@ -3968,7 +4321,7 @@ var EDIT_PLACEHOLDER_CSS = `
   pointer-events: none;
   white-space: nowrap;
 }
-[data-jx-active-block]:empty::after {
+[data-jx-active-block]:is(:empty, :has(> br:only-child))::after {
   content: "Type / for commands";
   color: color-mix(in srgb, #808080 40%, transparent);
   font-style: italic;
@@ -4157,7 +4510,7 @@ function applySiteStyle(siteStyle, mediaQueries = {}) {
     existing?.remove();
     return;
   }
-  const css = buildSiteStyleCSS(siteStyle, mediaQueries, transposeCanvasUnits);
+  const css = buildSiteStyleCSS(siteStyle, mediaQueries, canvasStyleValue);
   if (existing) {
     existing.textContent = css;
     return;
@@ -4174,7 +4527,7 @@ function applyPreviewColorScheme(doc, scheme) {
     delete doc.documentElement.dataset.colorScheme;
   }
 }
-function injectHead(doc) {
+function injectHead(doc, assets = null) {
   const head = doc.$head;
   if (!Array.isArray(head)) {
     return;
@@ -4190,9 +4543,14 @@ function injectHead(doc) {
     const attrs = { ...entry.attributes };
     for (const key of ["href", "src"]) {
       const val = attrs[key];
-      if (typeof val === "string" && !val.startsWith("/") && !val.startsWith(".") && !val.startsWith("http")) {
+      if (typeof val !== "string" || val === "") {
+        continue;
+      }
+      if (!val.startsWith("/") && !val.startsWith(".") && !val.startsWith("http")) {
         attrs[key] = `/node_modules/${val}`;
+        continue;
       }
+      attrs[key] = resolveAssetRef(val, assets) ?? val;
     }
     const sel = `${tag}${attrs.href ? `[href="${String(attrs.href)}"]` : ""}${attrs.src ? `[src="${String(attrs.src)}"]` : ""}`;
     if (sel !== tag && document.head.querySelector(sel)) {
@@ -4269,13 +4627,15 @@ function installCanvasImageRetry(root, maxAttempts = 3) {
   return () => root.removeEventListener("error", onError, true);
 }
 async function renderResolvedDocument(opts) {
+  const assets = opts.assets ?? null;
+  setCanvasAssetResolver(assets ? (value) => resolveAssetRef(value, assets) : null);
   setSkipServerFunctions(opts.mode !== "preview");
   setSkipAutoRequests(opts.mode !== "preview" && !opts.allowAutoRequests);
   setCanvasViewportTranspose(true);
   setCanvasDelinkAnchors(opts.mode !== "preview");
   setStampPropBindings(opts.mode === "design" || opts.mode === "edit");
   applySiteStyle(opts.siteStyle, opts.doc.$media ?? {});
-  injectHead(opts.doc);
+  injectHead(opts.doc, assets);
   syncEditModeCss(opts.container.ownerDocument, opts.mode);
   syncPreviewShell(opts.container.ownerDocument, opts.mode);
   syncStylebookCss(opts.container.ownerDocument, opts.mode);
@@ -7080,6 +7440,42 @@ function startIframeSlashBridge(channel, doc) {
 
 // src/commands/levels.ts
 var KEY_SCOPES = ["global", "canvas", "caret", "grid", "code", "dock", "palette"];
+var PLACEMENT_MATRIX = {
+  "commandbar/primary": {
+    admits: ["application", "document"],
+    note: "document only for Save / Undo / Redo / Open in Browser, by frequency; ≤5 total"
+  },
+  "commandbar/overflow": {
+    admits: ["application", "project", "document"],
+    note: "never selection — the Command Bar is not a selection surface"
+  },
+  "statusbar/project": { admits: ["project"], note: "the status bar's left field" },
+  "statusbar/document": { admits: ["document"], note: "the status bar's centre field" },
+  "statusbar/selection": { admits: ["selection"], note: "the status bar's right field" },
+  "context/element": { admits: ["selection"], note: "the canvas element menu acts on a selection" },
+  "context/file": { admits: ["project"], note: "a file row addresses the project's file set" },
+  "context/layer": { admits: ["selection"], note: "an outline row IS a selection" },
+  "context/tab": { admits: ["document"], note: "a tab addresses one document" },
+  "context/pane": { admits: ["document"], note: "a pane hosts one document" },
+  blockbar: { admits: ["selection"], note: "the floating bar owns selection-scoped verbs" },
+  "blockbar/format": {
+    admits: ["selection"],
+    note: "the bar's inline-format cluster — a range inside the selection is still the selection"
+  },
+  "outline/row": { admits: ["selection"], note: "row actions act on the row's node" },
+  "settings/menu": {
+    admits: ["application", "project"],
+    note: "the rail foot's gear menu — the settings family. It is a MENU, not a pinned slot, so it " + "may host two levels for the reason commandbar/overflow does: a menu prints each row's own " + "name, chord and gate, and draws a divider where the level changes. The rail's PINNED " + "groups stay single-level, in PANEL_PLACEMENT_MATRIX"
+  },
+  palette: {
+    admits: ["application", "project", "document", "selection"],
+    note: "the level-agnostic surface; it groups rows by level"
+  },
+  never: {
+    admits: ["application", "project", "document", "selection"],
+    note: "keyboard- and API-only; no rendered surface to be misplaced in"
+  }
+};
 
 // src/commands/keymap.ts
 var MODIFIER_ORDER = ["mod", "ctrl", "alt", "shift"];
@@ -7366,11 +7762,18 @@ function applyIframePatch(shadowDoc, forwardOps, container, ctx, echoPaths) {
   const echoed = new Set(echoPaths.map((p) => serializeJxPath(p)));
   for (const op of forwardOps) {
     if (op.op === "set-key" && echoed.has(serializeJxPath(op.path))) {
+      syncEchoedPlaceholder(shadowDoc, op.path, container);
       continue;
     }
     applyOpToDom(shadowDoc, op, container, ctx);
   }
 }
+function syncEchoedPlaceholder(doc, path, container) {
+  const el = findElement(container, path);
+  if (el) {
+    syncPlaceholderClass(el, getNodeAtPath(doc, path));
+  }
+}
 function requireCtx(ctx) {
   if (!ctx) {
     throw new Error("iframe-patch-no-render-ctx");
@@ -7421,7 +7824,7 @@ function insertChild(doc, parentPath, index, container, ctx) {
   const newEl = renderSubtreeIframe(doc, [...parentPath, "children", index], ctx);
   remapChildPaths(container, parentPath, index, 1);
   insertAt(parentEl, newEl, domChildReference(parentEl, parentNode, index));
-  syncContainerPlaceholder(parentEl, parentNode);
+  syncPlaceholderClass(parentEl, parentNode);
 }
 function replaceSubtree(doc, docPath, container, ctx) {
   const oldEl = requireElement(container, docPath);
@@ -7436,7 +7839,7 @@ function removeChild(doc, parentPath, index, container) {
   el.remove();
   remapChildPaths(container, parentPath, index + 1, -1);
   if (parentEl) {
-    syncContainerPlaceholder(parentEl, getNodeAtPath(doc, parentPath));
+    syncPlaceholderClass(parentEl, getNodeAtPath(doc, parentPath));
   }
 }
 function moveChild(doc, fromParentPath, fromIndex, toParentPath, toIndex, container) {
@@ -7452,17 +7855,17 @@ function moveChild(doc, fromParentPath, fromIndex, toParentPath, toIndex, contai
   const toParentNode = getNodeAtPath(doc, toPrefix);
   insertAt(toParentEl, el, domChildReference(toParentEl, toParentNode, toIndex));
   if (fromParentEl) {
-    syncContainerPlaceholder(fromParentEl, getNodeAtPath(doc, elementPath(fromParentEl) ?? fromParentPath));
+    syncPlaceholderClass(fromParentEl, getNodeAtPath(doc, elementPath(fromParentEl) ?? fromParentPath));
   }
-  syncContainerPlaceholder(toParentEl, toParentNode);
+  syncPlaceholderClass(toParentEl, toParentNode);
 }
-function syncContainerPlaceholder(parentEl, parentNode) {
+function syncPlaceholderClass(el, node) {
   for (const cls of EMPTY_PLACEHOLDER_CLASSES) {
-    parentEl.classList.remove(cls);
+    el.classList.remove(cls);
   }
-  const placeholder = parentNode ? computeEmptyPlaceholderClass(parentNode) : null;
+  const placeholder = node ? computeEmptyPlaceholderClass(node) : null;
   if (placeholder) {
-    parentEl.classList.add(placeholder);
+    el.classList.add(placeholder);
   }
 }
 function insertAt(parentEl, node, ref2) {
@@ -7520,22 +7923,20 @@ function patchText(doc, path, container) {
   const el = requireElement(container, path);
   const node = getNodeAtPath(doc, path);
   el.textContent = textDisplayValue(node);
-  for (const cls of EMPTY_PLACEHOLDER_CLASSES) {
-    el.classList.remove(cls);
-  }
-  const placeholder = node ? computeEmptyPlaceholderClass(node) : null;
-  if (placeholder) {
-    el.classList.add(placeholder);
-  }
+  syncPlaceholderClass(el, node);
 }
 function requireElement(container, path) {
+  const el = findElement(container, path);
+  if (!el) {
+    throw new Error(`iframe-patch-element-not-found:${serializeJxPath(path)}`);
+  }
+  return el;
+}
+function findElement(container, path) {
   const serialized = serializeJxPath(path);
   const esc = serialized.replaceAll("\\", String.raw`\\`).replaceAll("'", String.raw`\'`);
   const el = container.querySelector(`[data-jx-path='${esc}']`);
-  if (!(el instanceof HTMLElement)) {
-    throw new Error(`iframe-patch-element-not-found:${serialized}`);
-  }
-  return el;
+  return el instanceof HTMLElement ? el : null;
 }
 function editModeStyle(style) {
   if (!style || typeof style !== "object") {
@@ -8165,6 +8566,7 @@ function startCanvasIframe(opts) {
         stopDataScopeWatch = null;
         handle?.dispose();
         handle = await renderResolvedDocument({
+          assets: msg.assets ?? null,
           container,
           doc: msg.doc,
           docBase: msg.docBase,
@@ -8262,5 +8664,5 @@ export {
   startCanvasIframe
 };
 
-//# debugId=2229405F4A023FB664756E2164756E21
+//# debugId=1D7D4718E26F550F64756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map