@jxsuite/studio 4.0.0 → 5.0.0

package/dist/chunks/{studio-8swrjbny.js → studio-3hxkd92t.js}

@@ -1,46 +1,42 @@
 import {
-  parseMediaEntries,
-  schemeOfQuery
-} from "./studio-pdfjntbk.js";
-import {
-  mediaDisplayName,
-  mountStylebookCanvas,
-  panToStylebookTag,
-  serializeJxPath,
-  tabOfPane
-} from "./studio-kjjsjak4.js";
+  projectState,
+  updateSession
+} from "./studio-6ewqv390.js";
 import {
-  getEffectiveMedia,
-  getEffectiveStyle,
-  shell
-} from "./studio-hbtp0eh1.js";
+  isKeyframesAtRule
+} from "./studio-5jy81t3s.js";
 import {
-  activeTab,
-  isSpliceablePath,
-  varDisplayName
-} from "./studio-2zkz8evn.js";
+  registerSurface,
+  mountSurface
+} from "./studio-erdatzvp.js";
 import {
-  classMap
-} from "./studio-m3hwn7y1.js";
+  reactive
+} from "./studio-p1dw8wfw.js";
 import {
-  live,
-  ref,
-  repeat
-} from "./studio-4rzyrtjz.js";
+  isSpliceablePath,
+  varDisplayName,
+  activeTab2
+} from "./studio-az3zd49t.js";
 import {
-  html,
-  render
-} from "./studio-kryvsw6j.js";
+  getEffectiveMedia,
+  getEffectiveStyle,
+  shell
+} from "./studio-25hkdrkw.js";
 import {
-  componentRegistry
-} from "./studio-bgxt93ga.js";
+  componentRegistry2
+} from "./studio-d055c37e.js";
 import {
-  projectState,
-  updateSession
-} from "./studio-p4ngc046.js";
+  tabOfPane,
+  mediaDisplayName,
+  serializeJxPath,
+  schemeOfQuery,
+  parseMediaEntries,
+  mountStylebookCanvas2,
+  panToStylebookTag2
+} from "./studio-rkstz940.js";
 import {
-  __require
-} from "./studio-a0tswy0w.js";
+  __preload
+} from "./studio-5te5tqng.js";
 // data/stylebook-meta.json
 var stylebook_meta_default = {
   $sections: [
@@ -246,6 +242,160 @@ registerBlockType( name, settings );`
     other: { label: "Other", prefix: "--", placeholder: "value" }
   }
 };
+// src/surfaces/stylebook-chrome.json
+var stylebook_chrome_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioStylebookChrome",
+  $description: "The bar across the top of the Project Styles canvas: the filter that narrows the specimen catalogue, and the toggle that reduces it to the elements this file has already styled. Both are shell state rather than document state — the adapter owns which — and the two names come in as values, because the surface is called Project Styles and the canvas view it draws is the wire word `stylebook`; nothing a reader sees here may be spelled from that. **The bar IS the kit's toolbar now.** It used to write `role=\"toolbar\"` and its own `aria-label` on a `<div>`, which is a role with none of the behaviour under it: two controls, two tab stops, and no arrow key between them. `jx-action-group` is not the element for it — that one roves `jx-action-button` and this bar's first control is a `jx-textfield` — so `jx-toolbar` is, and the field keeps its own arrows while its caret still has text to walk (ui.md §5.5).",
+  tagName: "jx-toolbar",
+  attributes: {
+    part: "chrome"
+  },
+  $props: {
+    label: {
+      $ref: "#/state/title"
+    }
+  },
+  style: {
+    $description: 'What `.sb-chrome` said in `styles/overlays.css`, plus the six inline declarations the template carried beside it, plus `.tb-toggle` — all three go dead with this conversion, and none of them is shared with another surface. Three repairs on the way. The bar is one element rather than a positioned box wrapping a `role="toolbar"` row that declared the same flex layout again. The flex layout is not declared here EITHER any more: `display: flex`, `align-items: center`, the `--jx-space-2` gap, the sans face and the foreground colour are all `jx-toolbar`\'s own, so what is left below is only what a positioned BAND is. And `.tb-toggle` read `var(--spectrum-font-size-50, 11px)`, which the kit spells `--jx-text-sm` at the same value; the rest of its drawing is a `jx-action-button` reaching in through `part="control"`, because what it has to look like is a small bordered chip and every fill and control height the kit draws would otherwise have to be taken back off.',
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    zIndex: "15",
+    flexShrink: "0",
+    padding: "var(--jx-space-2) var(--jx-space-3)",
+    background: "var(--bg-panel)",
+    borderBottom: "1px solid var(--border)",
+    '& [part="filter"]': {
+      flex: "1",
+      maxWidth: "200px"
+    },
+    '& [part="customized"] > [part="control"]': {
+      $description: "Bordered, unfilled and dimmed until it is on, which is what says it is a filter rather than an action: the catalogue it narrows is the thing the reader is looking at, so the control has to be quieter than its subject.",
+      padding: "3px var(--jx-space-3)",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--radius)",
+      background: "transparent",
+      color: "var(--fg-dim)",
+      fontSize: "var(--jx-text-sm)",
+      ":hover": {
+        background: "var(--hover-bg)"
+      }
+    },
+    '& [part="customized"][data-selected] > [part="control"]': {
+      $description: "`data-selected` and not `selected`: the kit reflects the pressed state as a data attribute (`jx-action-button.json`), and the property this document binds never reaches the attribute of the same name.",
+      borderColor: "var(--accent)",
+      background: "var(--accent-15)",
+      color: "var(--accent)"
+    }
+  },
+  children: [
+    {
+      tagName: "jx-textfield",
+      attributes: {
+        part: "filter"
+      },
+      $props: {
+        size: "sm",
+        type: "search",
+        clearable: true,
+        label: {
+          $ref: "#/state/filterLabel"
+        },
+        placeholder: "Filter…",
+        value: {
+          $ref: "#/state/filter"
+        }
+      },
+      oninput: {
+        $prototype: "Function",
+        body: [
+          {
+            operator: "call",
+            target: {
+              $ref: "#/state/setFilter"
+            },
+            value: [
+              {
+                $ref: "event#/target/value"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      tagName: "jx-action-button",
+      $description: "`onchange` and not `onclick`: a `toggles` button owns its own pressed state and says so with `change` (`jx-action-button.json`), and an `onclick` written here would replace the element's own click handler on the same property — the toggle would stop flipping and stop announcing `aria-pressed`.",
+      attributes: {
+        part: "customized"
+      },
+      $props: {
+        size: "sm",
+        toggles: true,
+        selected: {
+          $ref: "#/state/customizedOnly"
+        },
+        label: {
+          $ref: "#/state/customizedLabel"
+        },
+        hint: {
+          $ref: "#/state/customizedHint"
+        }
+      },
+      onchange: {
+        $prototype: "Function",
+        body: [
+          {
+            operator: "call",
+            target: {
+              $ref: "#/state/toggleCustomized"
+            },
+            value: []
+          }
+        ]
+      },
+      children: [
+        {
+          tagName: "span",
+          textContent: "${state.customizedLabel}"
+        }
+      ]
+    }
+  ]
+};
+
+// src/surfaces/stylebook-chrome.ts
+registerSurface("stylebook-chrome", stylebook_chrome_default);
+function createStylebookChromeSurface(view, actions) {
+  const host = document.createElement("div");
+  host.style.display = "contents";
+  const scope = reactive({ ...view, ...actions });
+  let handle = null;
+  let mounting = false;
+  function mount() {
+    mounting = true;
+    mountSurface("stylebook-chrome", scope, host).then((mounted) => {
+      mounting = false;
+      handle = mounted;
+    });
+  }
+  mount();
+  return {
+    host,
+    update(next) {
+      Object.assign(scope, next);
+      if (mounting || handle !== null && host.contains(handle.root)) {
+        return;
+      }
+      handle?.dispose();
+      handle = null;
+      host.textContent = "";
+      mount();
+    }
+  };
+}
 
 // src/panels/stylebook-doc.ts
 function isTagPath(key) {
@@ -255,49 +405,15 @@ function isPlainObject(v) {
   return v !== null && typeof v === "object" && !Array.isArray(v);
 }
 var SPECIMEN_SCOPE = "& .element-card-preview";
-function mergeRules(base, add) {
-  const out = { ...base };
-  for (const [k, v] of Object.entries(add)) {
-    out[k] = isPlainObject(v) && isPlainObject(out[k]) ? mergeRules(out[k], v) : v;
-  }
-  return out;
-}
-function stripAtKeys(rule) {
-  const out = {};
-  for (const [k, v] of Object.entries(rule)) {
-    if (isPlainObject(v) && k.startsWith("@")) {
-      continue;
-    }
-    out[k] = isPlainObject(v) ? stripAtKeys(v) : v;
-  }
-  return out;
-}
 function transposeStylebookStyle(effectiveStyle) {
   const style = effectiveStyle;
   const out = {};
-  const mediaOut = {};
-  const processTagRule = (rule, tagPath) => {
+  const withoutBaseWidth = (rule) => {
     const cleaned = {};
     for (const [k, v] of Object.entries(rule)) {
-      if (!isPlainObject(v)) {
+      if (k !== "@--") {
         cleaned[k] = v;
-        continue;
-      }
-      if (k.startsWith("@")) {
-        if (k === "@--") {
-          continue;
-        }
-        mediaOut[k] ??= {};
-        const bucket = mediaOut[k];
-        const sel = `${SPECIMEN_SCOPE} ${tagPath}`;
-        bucket[sel] = mergeRules(bucket[sel], stripAtKeys(v));
-        continue;
       }
-      if (isTagPath(k)) {
-        cleaned[k] = processTagRule(v, `${tagPath} ${k}`);
-        continue;
-      }
-      cleaned[k] = v;
     }
     return cleaned;
   };
@@ -306,31 +422,31 @@ function transposeStylebookStyle(effectiveStyle) {
       out[k] = v;
       continue;
     }
+    if (k === "@--") {
+      continue;
+    }
+    if (isKeyframesAtRule(k)) {
+      out[k] = v;
+      continue;
+    }
     if (k.startsWith("@")) {
-      if (k === "@--") {
-        continue;
-      }
-      mediaOut[k] ??= {};
-      const bucket = mediaOut[k];
+      const bucket = {};
       for (const [mk, mv] of Object.entries(v)) {
         if (isPlainObject(mv) && isTagPath(mk)) {
-          const sel = `${SPECIMEN_SCOPE} ${mk}`;
-          bucket[sel] = mergeRules(bucket[sel], mv);
+          bucket[`${SPECIMEN_SCOPE} ${mk}`] = withoutBaseWidth(mv);
         } else {
           bucket[mk] = mv;
         }
       }
+      out[k] = bucket;
       continue;
     }
     if (isTagPath(k)) {
-      out[`${SPECIMEN_SCOPE} ${k}`] = processTagRule(v, k);
+      out[`${SPECIMEN_SCOPE} ${k}`] = withoutBaseWidth(v);
       continue;
     }
     out[k] = v;
   }
-  for (const [mk, mv] of Object.entries(mediaOut)) {
-    out[mk] = isPlainObject(out[mk]) ? mergeRules(out[mk], mv) : mv;
-  }
   return out;
 }
 function resolveNestedStyle(style, tagPath) {
@@ -580,8 +696,8 @@ function readTokenOverride(style, context, token) {
 }
 function writeTokenOverride(style, context, token, value) {
   if (value) {
-    const block2 = style[context.key] ??= {};
-    block2[token] = value;
+    const block = style[context.key] ??= {};
+    block[token] = value;
     return;
   }
   const block = overrideBlock(style, context);
@@ -599,7 +715,33 @@ function addableContexts(style, contexts, token, alreadyShown = []) {
 }
 
 // src/panels/stylebook-panel.ts
-function renderStylebookMode(surface, ctx) {
+var chromeBars = new WeakMap;
+function chromeBar(surface) {
+  const view = {
+    customizedHint: "Show only the elements this file has already styled",
+    customizedLabel: "Customized",
+    customizedOnly: shell.stylebook.customizedOnly,
+    filter: shell.stylebook.filter,
+    filterLabel: `Filter the ${PROJECT_STYLES_TITLE} catalogue`,
+    title: PROJECT_STYLES_TITLE
+  };
+  const standing = chromeBars.get(surface);
+  if (standing) {
+    standing.update(view);
+    return standing.host;
+  }
+  const created = createStylebookChromeSurface(view, {
+    setFilter: (value) => {
+      shell.stylebook.filter = value;
+    },
+    toggleCustomized: () => {
+      shell.stylebook.customizedOnly = !shell.stylebook.customizedOnly;
+    }
+  });
+  chromeBars.set(surface, created);
+  return created.host;
+}
+async function renderStylebookMode(surface, ctx) {
   const canvasWrap = surface.wrap;
   const tab = tabOfPane(surface.paneId);
   const filter = shell.stylebook.filter.toLowerCase();
@@ -607,44 +749,7 @@ function renderStylebookMode(surface, ctx) {
   const effectiveMedia = getEffectiveMedia(tab?.doc.document?.$media);
   const { sizeBreakpoints, baseWidth } = parseMediaEntries(effectiveMedia);
   const hasMedia = sizeBreakpoints.length > 0;
-  const onFilterInput = (e) => {
-    shell.stylebook.filter = e.target.value;
-  };
-  const onCustomizedToggle = () => {
-    shell.stylebook.customizedOnly = !shell.stylebook.customizedOnly;
-  };
-  const chromeBarTpl = html`
-    <div
-      class="sb-chrome"
-      style="position:absolute;top:0;left:0;right:0;z-index:15;background:var(--bg-panel);border-bottom:1px solid var(--border)"
-    >
-      <div
-        style="display:flex;align-items:center;padding:4px 8px;gap:4px"
-        role="toolbar"
-        aria-label=${PROJECT_STYLES_TITLE}
-      >
-        <input
-          class="field-input"
-          style="flex:1;max-width:200px"
-          placeholder="Filter…"
-          aria-label="Filter the ${PROJECT_STYLES_TITLE} catalogue"
-          .value=${live(shell.stylebook.filter)}
-          @input=${onFilterInput}
-        />
-        <button
-          class=${classMap({
-    active: shell.stylebook.customizedOnly,
-    "tb-toggle": true
-  })}
-          aria-pressed=${String(shell.stylebook.customizedOnly)}
-          title="Show only the elements this file has already styled"
-          @click=${onCustomizedToggle}
-        >
-          Customized
-        </button>
-      </div>
-    </div>
-  `;
+  const chromeBarNode = chromeBar(surface);
   canvasWrap.style.overflow = "hidden";
   const allPanelDefs = [];
   if (hasMedia) {
@@ -665,31 +770,32 @@ function renderStylebookMode(surface, ctx) {
   if (!hasMedia) {
     const hasBaseWidth = effectiveMedia && effectiveMedia["--"];
     const label = hasBaseWidth ? `${mediaDisplayName("--")} (${baseWidth}px)` : null;
-    const entry = ctx.canvasPanelTemplate(hasBaseWidth ? "base" : null, label, !hasBaseWidth, hasBaseWidth ? baseWidth : undefined);
-    panelEntries = [{ panel: entry.panel, tpl: entry.tpl }];
+    panelEntries = [
+      ctx.canvasPanelEntry(hasBaseWidth ? "base" : null, label, !hasBaseWidth, hasBaseWidth ? baseWidth : undefined)
+    ];
   } else {
-    panelEntries = allPanelDefs.map((def) => {
-      const label = `${def.displayName} (${def.width}px)`;
-      const { tpl, panel } = ctx.canvasPanelTemplate(def.name, label, false, def.width);
-      return { panel, tpl };
-    });
+    panelEntries = allPanelDefs.map((def) => ctx.canvasPanelEntry(def.name, `${def.displayName} (${def.width}px)`, false, def.width));
+  }
+  const stage = await ctx.drawStage(surface, {
+    columnHeader: "hidden",
+    frame: "boards",
+    framePart: "panzoom",
+    frameVars: "--boards-inset:40px",
+    handles: "hidden",
+    hug: false,
+    innerPart: "boards",
+    lead: "chrome",
+    panels: panelEntries.map((entry) => entry.item)
+  }, panelEntries);
+  if (!stage) {
+    return;
+  }
+  const chromeHost = ctx.stageHost(surface, "chrome-host");
+  if (chromeHost && chromeHost.firstChild !== chromeBarNode) {
+    chromeHost.replaceChildren(chromeBarNode);
   }
-  render(html`
-      ${chromeBarTpl}
-      <div
-        class="panzoom-wrap"
-        style="transform-origin:0 0;padding-top:40px"
-        ${ref((el) => {
-    if (el) {
-      surface.panzoomWrap = el;
-    }
-  })}
-      >
-        ${repeat(panelEntries, (e) => e.panel.mediaName, (e) => e.tpl)}
-      </div>
-    `, canvasWrap);
   const generated = buildStylebookDoc({
-    components: componentRegistry,
+    components: componentRegistry2,
     customizedOnly: Boolean(customizedOnly),
     effectiveMedia: effectiveMedia ?? {},
     effectiveStyle: getEffectiveStyle(tab?.doc.document?.style),
@@ -700,7 +806,7 @@ function renderStylebookMode(surface, ctx) {
   const { panels } = surface;
   for (const { panel } of panelEntries) {
     panels.push(panel);
-    mountStylebookCanvas(surface.renderGeneration, generated, panel.canvas, panel._width);
+    mountStylebookCanvas2(surface.renderGeneration, generated, panel.canvas, panel._width);
   }
   if (hasMedia) {
     ctx.updateActivePanelHeaders(surface);
@@ -710,7 +816,7 @@ function renderStylebookMode(surface, ctx) {
 }
 function selectStylebookTag(tag, media, { panCanvas = false } = {}) {
   shell.stylebook.selection = tag;
-  updateSession(activeTab.value, {
+  updateSession(activeTab2.value, {
     selection: [[]],
     ui: {
       activeSelector: tag,
@@ -719,7 +825,7 @@ function selectStylebookTag(tag, media, { panCanvas = false } = {}) {
     }
   });
   if (tag && panCanvas) {
-    panToStylebookTag(tag);
+    panToStylebookTag2(tag);
   }
 }
 
@@ -756,6 +862,8 @@ function noopCommandDeps() {
 var documentOpen = (ctx) => ctx.document.open;
 var hasSelection = (ctx) => ctx.selection.count > 0 && ctx.editor.kind === "canvas";
 var structurallyEditable = (ctx) => !ctx.selection.isRoot && ctx.selection.paths.every((path) => isSpliceablePath(path));
+var SPLICEABLE_SELECTION = "an element selected on the canvas that has a sibling position: not the document root, a " + "repeater's template or a switch case";
+var describePaths = (paths) => paths.map((path) => `[${path.join(", ")}]`).join(" and ");
 function defaultCommands(deps) {
   const commands = [
     {
@@ -763,7 +871,7 @@ function defaultCommands(deps) {
       title: "Save",
       category: "File",
       level: "document",
-      icon: "save",
+      icon: "floppy-disk",
       keybinding: "mod+s",
       menus: ["commandbar/primary", "statusbar/document", "palette"],
       group: "1_file",
@@ -789,7 +897,7 @@ function defaultCommands(deps) {
       title: "Open in Browser",
       category: "View",
       level: "document",
-      icon: "browser",
+      icon: "arrow-square-out",
       keybinding: "mod+shift+o",
       menus: ["commandbar/primary", "statusbar/document", "palette"],
       group: "2_output",
@@ -814,7 +922,7 @@ function defaultCommands(deps) {
       title: "Undo",
       category: "Edit",
       level: "document",
-      icon: "undo",
+      icon: "arrow-u-up-left",
       keybinding: "mod+z",
       menus: ["commandbar/primary", "palette"],
       group: "1_history",
@@ -828,7 +936,7 @@ function defaultCommands(deps) {
       title: "Redo",
       category: "Edit",
       level: "document",
-      icon: "redo",
+      icon: "arrow-u-up-right",
       keybinding: ["mod+shift+z", "mod+y"],
       menus: ["commandbar/primary", "palette"],
       group: "1_history",
@@ -849,10 +957,14 @@ function defaultCommands(deps) {
       undo: "document",
       when: hasSelection,
       enablement: structurallyEditable,
-      requires: "an element that has a sibling position",
+      requires: SPLICEABLE_SELECTION,
       aiTool: {
         name: "duplicate_node",
-        description: "Duplicate the currently selected element, inserting the copy after it."
+        description: "Duplicate elements in the document, inserting each copy after its original, as one " + "undoable step. The copies become the selection.",
+        report: ({ after }) => {
+          const n = after.selection.paths.length;
+          return `Duplicated ${n} element${n === 1 ? "" : "s"}; the ${n === 1 ? "copy is" : "copies are"} selected at ${describePaths(after.selection.paths)}.`;
+        }
       },
       run: () => deps.duplicateSelection()
     },
@@ -868,12 +980,8 @@ function defaultCommands(deps) {
       when: hasSelection,
       enablement: (ctx) => structurallyEditable(ctx) && !ctx.selection.isRepeater,
       requires: "an element with a sibling position that is not already a repeater",
-      aiTool: {
-        name: "repeat_node",
-        description: "Turn the selected element into a repeater template, rendering it once per item of a " + "data collection the author picks in the dialog this opens."
-      },
       run: () => {
-        import("./convert-to-repeater-dhw1nrz9.js").then(({ convertToRepeater }) => convertToRepeater());
+        (__preload("d0cgnb6d"), import("./convert-to-repeater-d0cgnb6d.js")).then(({ convertToRepeater }) => convertToRepeater());
       }
     },
     {
@@ -889,10 +997,14 @@ function defaultCommands(deps) {
       undo: "document",
       when: hasSelection,
       enablement: structurallyEditable,
-      requires: "an element selection that is not the document root",
+      requires: SPLICEABLE_SELECTION,
       aiTool: {
         name: "delete_node",
-        description: "Delete the currently selected element from the document."
+        description: "Delete elements from the document as one undoable step.",
+        report: ({ before, after }) => {
+          const n = before.selection.paths.length;
+          return `Deleted ${n} element${n === 1 ? "" : "s"} at ${describePaths(before.selection.paths)} in one undo step; the selection is now ${after.selection.count === 0 ? "empty" : "elsewhere"}.`;
+        }
       },
       run: () => deps.deleteSelection()
     },
@@ -1075,7 +1187,7 @@ function inspectorFocusCommands(deps) {
   });
 }
 
-export { transposeStylebookStyle, PROJECT_STYLES_TITLE, PROJECT_STYLES_VIEW, tokenLabel, groupTokens, listTokenContexts, readTokenOverride, writeTokenOverride, addableContexts, stylebook_meta_default, renderStylebookMode, selectStylebookTag, INSPECTOR_TABS, noopCommandDeps, defaultCommands };
+export { transposeStylebookStyle, PROJECT_STYLES_TITLE, PROJECT_STYLES_VIEW, TOKEN_GROUPS, tokenLabel, groupTokens, listTokenContexts, readTokenOverride, writeTokenOverride, addableContexts, stylebook_meta_default, renderStylebookMode, selectStylebookTag, INSPECTOR_TABS, noopCommandDeps, defaultCommands };
 
-//# debugId=1C28C0702015039E64756E2164756E21
-//# sourceMappingURL=studio-8swrjbny.js.map
+//# debugId=10489CF10762040B64756E2164756E21
+//# sourceMappingURL=studio-3hxkd92t.js.map