@jxsuite/studio 3.0.0 → 4.1.0

package/dist/iframe-entry.js

@@ -1499,6 +1499,39 @@ function computed(getterOrOptions, debugOptions, isSSR = false) {
   return cRef;
 }
 
+// ../runtime/src/css.ts
+function camelToKebab(s) {
+  return s.replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+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) {
+  const m = /^\(\s*prefers-color-scheme\s*:\s*(light|dark)\s*\)$/.exec(query.trim());
+  return m?.[1] ?? null;
+}
+function schemeSelectors(selector, scheme) {
+  if (selector === ":root" || selector === "html") {
+    return {
+      auto: `${selector}:where(:not([${COLOR_SCHEME_ATTR}]))`,
+      forced: `${selector}:where([${COLOR_SCHEME_ATTR}="${scheme}"])`
+    };
+  }
+  return {
+    auto: `:where(:root:not([${COLOR_SCHEME_ATTR}])) ${selector}`,
+    forced: `:where(:root[${COLOR_SCHEME_ATTR}="${scheme}"]) ${selector}`
+  };
+}
+
 // ../schema/src/intl.ts
 var DEFAULT_FORMAT_LOCALE = "en-US";
 var DEFAULT_TIME_ZONE = "UTC";
@@ -2372,7 +2405,6 @@ function serializeCookie(name, value, options) {
   }
   return parts.join("; ");
 }
-
 // ../runtime/src/runtime.ts
 var _resolveCache = new Map;
 async function resolve(source) {
@@ -2688,6 +2720,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 +3142,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);
     }
@@ -3764,40 +3839,9 @@ function mergeProps(def2, parentState) {
   }
   return child;
 }
-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)}: ${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) {
-  const m = /^\(\s*prefers-color-scheme\s*:\s*(light|dark)\s*\)$/.exec(query.trim());
-  return m?.[1] ?? null;
-}
-function schemeSelectors(selector, scheme) {
-  if (selector === ":root" || selector === "html") {
-    return {
-      auto: `${selector}:where(:not([${COLOR_SCHEME_ATTR}]))`,
-      forced: `${selector}:where([${COLOR_SCHEME_ATTR}="${scheme}"])`
-    };
-  }
-  return {
-    auto: `:where(:root:not([${COLOR_SCHEME_ATTR}])) ${selector}`,
-    forced: `:where(:root[${COLOR_SCHEME_ATTR}="${scheme}"]) ${selector}`
-  };
-}
 var _rootMedia = {};
 var _elementDefs = new Map;
 function setRootMedia(map) {
@@ -4128,7 +4172,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 +4296,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 +4322,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 +7441,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 +7763,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 +7825,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 +7840,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 +7856,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 +7924,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 +8665,5 @@ export {
   startCanvasIframe
 };
 
-//# debugId=39CA18389F1F06A664756E2164756E21
+//# debugId=BF2F5E4A39B13F1864756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map

package/dist/manifest.json

@@ -14,6 +14,13 @@
       "required": true,
       "why": "the canvas iframe document. Without it every canvas frame 404s at boot."
     },
+    {
+      "dir": false,
+      "kind": "asset",
+      "path": "favicon.ico",
+      "required": true,
+      "why": "the shell document's <link rel=\"icon\">. A Chromium --app window (the NixOS desktop install) has no native title-bar icon of its own and falls back to the page's favicon, so without this the window chrome shows a generic icon even though the taskbar/dock entry is already branded via the .desktop file."
+    },
     {
       "dir": false,
       "kind": "entry",