@jxsuite/studio 3.0.0 → 4.0.0

package/dist/iframe-entry.js

@@ -2688,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) {
@@ -3084,16 +3110,33 @@ 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(() => write(resolveRef(v.$ref, state)));
     } else if (isTemplateString(v)) {
-      effect(() => write(evaluateTemplate(v, state)));
+      effect(() => write(evaluateAttrTemplate(v, state)));
     } else {
       write(v);
     }
@@ -4128,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("; ");
@@ -4252,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;
@@ -4278,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;
@@ -7397,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"];
@@ -7683,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");
@@ -7738,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);
@@ -7753,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) {
@@ -7769,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) {
@@ -7837,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") {
@@ -8580,5 +8664,5 @@ export {
   startCanvasIframe
 };
 
-//# debugId=39CA18389F1F06A664756E2164756E21
+//# debugId=1D7D4718E26F550F64756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map