@jxsuite/studio 2.0.0 → 2.1.0

package/dist/chunks/studio-zv37yrfa.js

@@ -0,0 +1,1054 @@
+import {
+  parseMediaEntries,
+  schemeOfQuery
+} from "./studio-6nmjc5qk.js";
+import {
+  live
+} from "./studio-xmvbhg31.js";
+import {
+  mediaDisplayName,
+  mountStylebookCanvas,
+  panToStylebookTag,
+  serializeJxPath,
+  tabOfPane
+} from "./studio-v96qfnww.js";
+import {
+  activeTab,
+  getEffectiveMedia,
+  getEffectiveStyle,
+  isSpliceablePath,
+  shell,
+  varDisplayName
+} from "./studio-41exgzhq.js";
+import {
+  classMap
+} from "./studio-ckwz4d3x.js";
+import {
+  ref
+} from "./studio-p471gg5n.js";
+import {
+  html,
+  render
+} from "./studio-5x5774ak.js";
+import {
+  componentRegistry
+} from "./studio-s519zc99.js";
+import {
+  projectState,
+  updateSession
+} from "./studio-cjm7fdjf.js";
+import {
+  __require
+} from "./studio-md4gps17.js";
+// data/stylebook-meta.json
+var stylebook_meta_default = {
+  $sections: [
+    {
+      label: "Headings",
+      elements: [
+        { tag: "h1", text: "Code Is Poetry" },
+        { tag: "h2", text: "Code Is Poetry" },
+        { tag: "h3", text: "Code Is Poetry" },
+        { tag: "h4", text: "Code Is Poetry" },
+        { tag: "h5", text: "Code Is Poetry" },
+        { tag: "h6", text: "Code Is Poetry" }
+      ]
+    },
+    {
+      label: "Paragraph",
+      elements: [
+        {
+          tag: "p",
+          text: "In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing."
+        }
+      ]
+    },
+    {
+      label: "List",
+      elements: [
+        {
+          tag: "ul",
+          children: [
+            { tag: "li", text: "Alice." },
+            { tag: "li", text: "The White Rabbit." },
+            { tag: "li", text: "The Cheshire Cat." },
+            { tag: "li", text: "The Mad Hatter." },
+            { tag: "li", text: "The Queen of Hearts." }
+          ]
+        },
+        {
+          tag: "ol",
+          children: [
+            { tag: "li", text: "First item" },
+            { tag: "li", text: "Second item" },
+            { tag: "li", text: "Third item" }
+          ]
+        }
+      ]
+    },
+    {
+      label: "Quote",
+      elements: [
+        {
+          tag: "blockquote",
+          children: [
+            {
+              tag: "p",
+              text: "In quoting others, we cite ourselves.",
+              style: "font-size:1.25em;font-style:italic"
+            },
+            { tag: "p", text: "— Julio Cortázar" }
+          ]
+        }
+      ]
+    },
+    {
+      label: "Code",
+      elements: [
+        {
+          tag: "pre",
+          children: [
+            {
+              tag: "code",
+              text: `// A "block" is the abstract term used
+// to describe units of markup that
+// when composed together, form the
+// content or layout of a page.
+registerBlockType( name, settings );`
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: "Inline",
+      elements: [
+        { tag: "a", text: "Visit the documentation", attributes: { href: "#" } },
+        { tag: "strong", text: "Bold text emphasis" },
+        { tag: "em", text: "Italic text emphasis" },
+        { tag: "small", text: "Fine print and legal text" },
+        { tag: "mark", text: "Highlighted text" },
+        { tag: "code", text: "const x = 42;" },
+        { tag: "abbr", text: "HTML", attributes: { title: "HyperText Markup Language" } },
+        { tag: "sub", text: "subscript" },
+        { tag: "sup", text: "superscript" }
+      ]
+    },
+    {
+      label: "Form",
+      elements: [
+        { tag: "input", attributes: { type: "text", placeholder: "Enter text…" } },
+        { tag: "button", text: "Click Me" },
+        {
+          tag: "select",
+          children: [
+            { tag: "option", text: "Option 1" },
+            { tag: "option", text: "Option 2" },
+            { tag: "option", text: "Option 3" }
+          ]
+        },
+        {
+          tag: "textarea",
+          attributes: { placeholder: "Enter longer text…", rows: "3" }
+        }
+      ]
+    },
+    {
+      label: "Table",
+      elements: [
+        {
+          tag: "table",
+          children: [
+            {
+              tag: "thead",
+              children: [
+                {
+                  tag: "tr",
+                  children: [
+                    { tag: "th", text: "Name" },
+                    { tag: "th", text: "Role" },
+                    { tag: "th", text: "Status" }
+                  ]
+                }
+              ]
+            },
+            {
+              tag: "tbody",
+              children: [
+                {
+                  tag: "tr",
+                  children: [
+                    { tag: "td", text: "Alice" },
+                    { tag: "td", text: "Developer" },
+                    { tag: "td", text: "Active" }
+                  ]
+                },
+                {
+                  tag: "tr",
+                  children: [
+                    { tag: "td", text: "Bob" },
+                    { tag: "td", text: "Designer" },
+                    { tag: "td", text: "Away" }
+                  ]
+                },
+                {
+                  tag: "tr",
+                  children: [
+                    { tag: "td", text: "Carol" },
+                    { tag: "td", text: "Manager" },
+                    { tag: "td", text: "Active" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: "Interactive",
+      elements: [
+        {
+          tag: "details",
+          attributes: { open: "" },
+          children: [
+            { tag: "summary", text: "Click to expand details" },
+            {
+              tag: "p",
+              text: "Additional detail content revealed when the disclosure widget is toggled open."
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: "Media",
+      elements: [
+        {
+          tag: "img",
+          attributes: { alt: "Placeholder image" },
+          style: "width:100%;max-width:400px;height:200px;background:#e0e0e0;display:block;border-radius:4px"
+        },
+        {
+          tag: "video",
+          attributes: { controls: "" },
+          style: "width:100%;max-width:400px;height:200px;background:#e0e0e0;display:block;border-radius:4px"
+        },
+        { tag: "audio", attributes: { controls: "" }, style: "width:100%" }
+      ]
+    }
+  ],
+  $variables: {
+    color: { label: "Color", prefix: "--color-", placeholder: "#007acc" },
+    font: { label: "Font", prefix: "--font-", placeholder: "system-ui, sans-serif" },
+    size: { label: "Size", prefix: "--size-", placeholder: "16px" },
+    other: { label: "Other", prefix: "--", placeholder: "value" }
+  }
+};
+
+// src/panels/stylebook-doc.ts
+function isTagPath(key) {
+  return !key.startsWith(":") && !key.startsWith(".") && !key.startsWith("&") && !key.startsWith("[") && !key.startsWith("@") && !key.startsWith("--");
+}
+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 cleaned = {};
+    for (const [k, v] of Object.entries(rule)) {
+      if (!isPlainObject(v)) {
+        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;
+  };
+  for (const [k, v] of Object.entries(style)) {
+    if (!isPlainObject(v)) {
+      out[k] = v;
+      continue;
+    }
+    if (k.startsWith("@")) {
+      if (k === "@--") {
+        continue;
+      }
+      mediaOut[k] ??= {};
+      const bucket = mediaOut[k];
+      for (const [mk, mv] of Object.entries(v)) {
+        if (isPlainObject(mv) && isTagPath(mk)) {
+          const sel = `${SPECIMEN_SCOPE} ${mk}`;
+          bucket[sel] = mergeRules(bucket[sel], mv);
+        } else {
+          bucket[mk] = mv;
+        }
+      }
+      continue;
+    }
+    if (isTagPath(k)) {
+      out[`${SPECIMEN_SCOPE} ${k}`] = processTagRule(v, k);
+      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) {
+  const parts = tagPath.split(" ");
+  let obj = style;
+  for (const part of parts) {
+    if (!isPlainObject(obj)) {
+      return null;
+    }
+    obj = obj[part];
+  }
+  return isPlainObject(obj) ? obj : null;
+}
+function hasTagStyle(rootStyle, tagPath) {
+  const style = rootStyle;
+  const direct = resolveNestedStyle(style, tagPath);
+  if (direct && Object.keys(direct).length > 0) {
+    return true;
+  }
+  for (const [key, val] of Object.entries(style)) {
+    if (!key.startsWith("@") || !isPlainObject(val)) {
+      continue;
+    }
+    const nested = resolveNestedStyle(val, tagPath);
+    if (nested && Object.keys(nested).length > 0) {
+      return true;
+    }
+  }
+  return false;
+}
+function buildStylebookDoc(opts) {
+  const pathToTag = new Map;
+  const tagToCardPath = new Map;
+  const filter = opts.filter.toLowerCase();
+  const registerSpecimenPaths = (entry, path, rootTag) => {
+    const compound = entry.tag === rootTag ? rootTag : `${rootTag} ${entry.tag}`;
+    pathToTag.set(serializeJxPath(path), compound);
+    const kids = entry.children ?? [];
+    for (const [i, child] of kids.entries()) {
+      registerSpecimenPaths(child, [...path, "children", i], rootTag);
+    }
+  };
+  const specimenNode = (entry) => {
+    const attributes = { ...entry.attributes };
+    if (entry.style) {
+      attributes.style = entry.style;
+    }
+    return {
+      tagName: entry.tag,
+      ...entry.text ? { textContent: entry.text } : {},
+      ...Object.keys(attributes).length > 0 ? { attributes } : {},
+      ...entry.children ? { children: entry.children.map(specimenNode) } : {}
+    };
+  };
+  const cardNode = (tag, label, specimen, cardPath, entryForPaths) => {
+    pathToTag.set(serializeJxPath(cardPath), tag);
+    pathToTag.set(serializeJxPath([...cardPath, "children", 0]), tag);
+    const specimenPath = [...cardPath, "children", 0, "children", 0];
+    if (entryForPaths) {
+      registerSpecimenPaths(entryForPaths, specimenPath, tag);
+    } else {
+      pathToTag.set(serializeJxPath(specimenPath), tag);
+    }
+    if (!tagToCardPath.has(tag)) {
+      tagToCardPath.set(tag, cardPath);
+    }
+    return {
+      attributes: { class: "element-card" },
+      children: [
+        { attributes: { class: "element-card-preview" }, children: [specimen], tagName: "div" },
+        { attributes: { class: "element-card-label" }, tagName: "div", textContent: label }
+      ],
+      tagName: "div"
+    };
+  };
+  const sections = [];
+  const sectionNode = (label, cards) => ({
+    attributes: { class: "sb-section" },
+    children: [
+      { attributes: { class: "sb-label" }, tagName: "div", textContent: label },
+      { attributes: { class: "sb-body" }, children: cards, tagName: "div" }
+    ],
+    tagName: "div"
+  });
+  const sectionBodyPath = () => ["children", sections.length, "children", 1];
+  for (const section of opts.meta.$sections) {
+    let entries = section.elements;
+    if (filter) {
+      entries = entries.filter((e) => e.tag.includes(filter) || section.label.toLowerCase().includes(filter));
+    }
+    if (opts.customizedOnly) {
+      entries = entries.filter((e) => hasTagStyle(opts.effectiveStyle, e.tag));
+    }
+    if (entries.length === 0) {
+      continue;
+    }
+    const bodyPath = sectionBodyPath();
+    const cards = entries.map((entry, ci) => cardNode(entry.tag, `<${entry.tag}>`, specimenNode(entry), [...bodyPath, "children", ci], entry));
+    sections.push(sectionNode(section.label, cards));
+  }
+  const $elements = [];
+  {
+    let comps = opts.components;
+    if (filter) {
+      comps = comps.filter((c) => c.tagName.toLowerCase().includes(filter));
+    }
+    if (opts.customizedOnly) {
+      comps = comps.filter((c) => hasTagStyle(opts.effectiveStyle, c.tagName));
+    }
+    if (comps.length > 0) {
+      const bodyPath = sectionBodyPath();
+      const cards = comps.map((comp, ci) => {
+        const cardPath = [...bodyPath, "children", ci];
+        const renderable = comp.source !== "npm" && comp.path?.endsWith(".json");
+        if (renderable) {
+          $elements.push({
+            $ref: `/${opts.projectRoot ? `${opts.projectRoot}/` : ""}${comp.path}`.replace(/^\/+/, "/")
+          });
+          const attributes = {};
+          for (const p of comp.props ?? []) {
+            if (p.default !== undefined && p.default !== "false" && p.default !== "''") {
+              attributes[p.name] = String(p.default).replaceAll(/^'|'$/g, "");
+            }
+          }
+          const specimen = {
+            tagName: comp.tagName,
+            ...Object.keys(attributes).length > 0 ? { attributes } : {}
+          };
+          return cardNode(comp.tagName, `<${comp.tagName}>`, specimen, cardPath, null);
+        }
+        const fallback = {
+          attributes: { class: "sb-fallback" },
+          tagName: "div",
+          textContent: `<${comp.tagName}>`
+        };
+        return cardNode(comp.tagName, `<${comp.tagName}>`, fallback, cardPath, null);
+      });
+      sections.push(sectionNode("Components", cards));
+    }
+  }
+  if (sections.length === 0) {
+    sections.push({
+      attributes: { class: "sb-empty" },
+      tagName: "div",
+      textContent: opts.customizedOnly ? "No customized elements" : "No matching elements"
+    });
+  }
+  const doc = {
+    ...$elements.length > 0 ? { $elements } : {},
+    $media: opts.effectiveMedia,
+    attributes: { class: "sb-root" },
+    children: sections,
+    style: transposeStylebookStyle(opts.effectiveStyle),
+    tagName: "div"
+  };
+  return { doc, pathToTag, tagToCardPath };
+}
+
+// src/style/project-styles.ts
+var PROJECT_STYLES_TITLE = "Project Styles";
+var TOKEN_GROUPS = [
+  { id: "color", prefix: "--color-", title: "Colors" },
+  { id: "font", prefix: "--font-", title: "Fonts" },
+  { id: "size", prefix: "--size-", title: "Sizes & Spacing" },
+  { id: "other", prefix: "--", title: "Other" }
+];
+function groupIdOfToken(name) {
+  if (name.startsWith("--color")) {
+    return "color";
+  }
+  if (name.startsWith("--font")) {
+    return "font";
+  }
+  if (name.startsWith("--size") || name.startsWith("--spacing") || name.startsWith("--radius")) {
+    return "size";
+  }
+  return "other";
+}
+function tokenLabel(name) {
+  const group = groupIdOfToken(name);
+  if (group === "other") {
+    return name;
+  }
+  const { prefix } = TOKEN_GROUPS.find((g) => g.id === group);
+  return varDisplayName(name, prefix);
+}
+function listTokens(style) {
+  if (!style) {
+    return [];
+  }
+  const out = [];
+  for (const [name, value] of Object.entries(style)) {
+    if (!name.startsWith("--")) {
+      continue;
+    }
+    if (typeof value !== "string" && typeof value !== "number") {
+      continue;
+    }
+    out.push({ group: groupIdOfToken(name), label: tokenLabel(name), name, value });
+  }
+  return out;
+}
+function groupTokens(style) {
+  const tokens = listTokens(style);
+  return TOKEN_GROUPS.map((group) => ({
+    group,
+    tokens: tokens.filter((t) => t.group === group.id)
+  }));
+}
+function listTokenContexts(media) {
+  if (!media) {
+    return [];
+  }
+  const { featureQueries, sizeBreakpoints } = parseMediaEntries(media);
+  const schemes = [];
+  const features = [];
+  for (const { name, query } of featureQueries) {
+    const scheme = schemeOfQuery(query);
+    if (scheme) {
+      schemes.push({
+        key: `@${name}`,
+        kind: "scheme",
+        label: scheme === "dark" ? "Dark" : "Light",
+        name,
+        scheme
+      });
+    } else {
+      features.push({ key: `@${name}`, kind: "feature", label: `@${name}`, name });
+    }
+  }
+  const sizes = sizeBreakpoints.map(({ name }) => ({
+    key: `@${name}`,
+    kind: "size",
+    label: `@${name}`,
+    name
+  }));
+  return [...schemes, ...sizes, ...features];
+}
+function overrideBlock(style, context) {
+  const block = style[context.key];
+  return block && typeof block === "object" ? block : undefined;
+}
+function readTokenOverride(style, context, token) {
+  const value = overrideBlock(style, context)?.[token];
+  return typeof value === "string" || typeof value === "number" ? value : undefined;
+}
+function writeTokenOverride(style, context, token, value) {
+  if (value) {
+    const block2 = style[context.key] ??= {};
+    block2[token] = value;
+    return;
+  }
+  const block = overrideBlock(style, context);
+  if (!block) {
+    return;
+  }
+  delete block[token];
+  if (Object.keys(block).length === 0) {
+    delete style[context.key];
+  }
+}
+function addableContexts(style, contexts, token, alreadyShown = []) {
+  const shown = new Set(alreadyShown.map((c) => c.name));
+  return contexts.filter((context) => !shown.has(context.name) && readTokenOverride(style, context, token) === undefined);
+}
+
+// src/panels/stylebook-panel.ts
+function renderStylebookMode(surface, ctx) {
+  const canvasWrap = surface.wrap;
+  const tab = tabOfPane(surface.paneId);
+  const filter = shell.stylebook.filter.toLowerCase();
+  const { customizedOnly } = shell.stylebook;
+  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>
+  `;
+  canvasWrap.style.overflow = "hidden";
+  const allPanelDefs = [];
+  if (hasMedia) {
+    allPanelDefs.push({
+      displayName: mediaDisplayName("--"),
+      name: "base",
+      width: baseWidth
+    });
+    for (const bp of sizeBreakpoints) {
+      allPanelDefs.push({
+        displayName: mediaDisplayName(bp.name),
+        name: bp.name,
+        width: bp.width
+      });
+    }
+  }
+  let panelEntries;
+  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 }];
+  } 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 };
+    });
+  }
+  render(html`
+      ${chromeBarTpl}
+      <div
+        class="panzoom-wrap"
+        style="transform-origin:0 0;padding-top:40px"
+        ${ref((el) => {
+    if (el) {
+      surface.panzoomWrap = el;
+    }
+  })}
+      >
+        ${panelEntries.map((e) => e.tpl)}
+      </div>
+    `, canvasWrap);
+  const generated = buildStylebookDoc({
+    components: componentRegistry,
+    customizedOnly: Boolean(customizedOnly),
+    effectiveMedia: effectiveMedia ?? {},
+    effectiveStyle: getEffectiveStyle(tab?.doc.document?.style),
+    filter,
+    meta: stylebook_meta_default,
+    projectRoot: projectState?.projectRoot ?? null
+  });
+  const { panels } = surface;
+  for (const { panel } of panelEntries) {
+    panels.push(panel);
+    mountStylebookCanvas(surface.renderGeneration, generated, panel.canvas, panel._width);
+  }
+  if (hasMedia) {
+    ctx.updateActivePanelHeaders(surface);
+  }
+  ctx.applyTransform(surface);
+  ctx.observeCenterUntilStable(surface);
+}
+function selectStylebookTag(tag, media, { panCanvas = false } = {}) {
+  shell.stylebook.selection = tag;
+  updateSession(activeTab.value, {
+    selection: [[]],
+    ui: {
+      activeSelector: tag,
+      rightTab: "style",
+      ...media !== undefined ? { activeMedia: media } : {}
+    }
+  });
+  if (tag && panCanvas) {
+    panToStylebookTag(tag);
+  }
+}
+
+// src/commands/defaults.ts
+var RAIL_CHORD_LIMIT = 8;
+var INSPECTOR_TABS = [
+  { id: "properties", title: "Content" },
+  { id: "style", title: "Style" },
+  { id: "events", title: "Logic" },
+  { id: "assistant", title: "Assistant" }
+];
+function noopCommandDeps() {
+  return {
+    saveDocument: () => {},
+    undo: () => {},
+    redo: () => {},
+    openInBrowser: () => {},
+    closeDocument: () => {},
+    duplicateSelection: () => {},
+    deleteSelection: () => {},
+    selectParent: () => {},
+    toggleDock: () => {},
+    toggleZen: () => {},
+    openPalette: () => {},
+    openProject: () => {},
+    panelRoster: [],
+    focusPanel: () => {},
+    focusInspectorTab: () => {},
+    cycleRegion: () => {}
+  };
+}
+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));
+function defaultCommands(deps) {
+  const commands = [
+    {
+      id: "file.save",
+      title: "Save",
+      category: "File",
+      level: "document",
+      icon: "save",
+      keybinding: "mod+s",
+      menus: ["commandbar/primary", "statusbar/document", "palette"],
+      group: "1_file",
+      undo: "none",
+      when: documentOpen,
+      requires: "an open document",
+      run: () => deps.saveDocument()
+    },
+    {
+      id: "document.close",
+      title: "Close Document",
+      category: "Document",
+      level: "document",
+      keybinding: "mod+w",
+      menus: ["context/tab", "palette"],
+      group: "1_file",
+      when: documentOpen,
+      requires: "an open document",
+      run: () => deps.closeDocument()
+    },
+    {
+      id: "view.openInBrowser",
+      title: "Open in Browser",
+      category: "View",
+      level: "document",
+      icon: "browser",
+      keybinding: "mod+shift+o",
+      menus: ["commandbar/primary", "statusbar/document", "palette"],
+      group: "2_output",
+      when: (ctx) => ctx.project.isSite,
+      enablement: documentOpen,
+      requires: "a built page to open",
+      run: () => deps.openInBrowser()
+    },
+    {
+      id: "edit.undo",
+      title: "Undo",
+      category: "Edit",
+      level: "document",
+      icon: "undo",
+      keybinding: "mod+z",
+      menus: ["commandbar/primary", "palette"],
+      group: "1_history",
+      when: documentOpen,
+      enablement: (ctx) => ctx.document.canUndo,
+      requires: "a change to undo",
+      run: () => deps.undo()
+    },
+    {
+      id: "edit.redo",
+      title: "Redo",
+      category: "Edit",
+      level: "document",
+      icon: "redo",
+      keybinding: ["mod+shift+z", "mod+y"],
+      menus: ["commandbar/primary", "palette"],
+      group: "1_history",
+      when: documentOpen,
+      enablement: (ctx) => ctx.document.canRedo,
+      requires: "a change to redo",
+      run: () => deps.redo()
+    },
+    {
+      id: "selection.duplicate",
+      title: "Duplicate",
+      category: "Selection",
+      level: "selection",
+      keyScope: "canvas",
+      keybinding: "mod+d",
+      menus: ["blockbar", "context/element", "context/layer", "outline/row", "palette"],
+      group: "3_structure",
+      undo: "document",
+      when: hasSelection,
+      enablement: structurallyEditable,
+      requires: "an element that has a sibling position",
+      aiTool: {
+        name: "duplicate_node",
+        description: "Duplicate the currently selected element, inserting the copy after it."
+      },
+      run: () => deps.duplicateSelection()
+    },
+    {
+      id: "selection.repeat",
+      title: "Repeat...",
+      category: "Selection",
+      level: "selection",
+      keyScope: "canvas",
+      menus: ["context/element", "palette"],
+      group: "3_structure",
+      undo: "document",
+      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-t8kxre5s.js").then(({ convertToRepeater }) => convertToRepeater());
+      }
+    },
+    {
+      id: "selection.delete",
+      title: "Delete",
+      category: "Selection",
+      level: "selection",
+      keyScope: "canvas",
+      keybinding: ["delete", "backspace"],
+      menus: ["blockbar", "context/element", "context/layer", "outline/row", "palette"],
+      group: "9_danger",
+      destructive: true,
+      undo: "document",
+      when: hasSelection,
+      enablement: structurallyEditable,
+      requires: "an element selection that is not the document root",
+      aiTool: {
+        name: "delete_node",
+        description: "Delete the currently selected element from the document."
+      },
+      run: () => deps.deleteSelection()
+    },
+    {
+      id: "selection.selectParent",
+      title: "Select Parent",
+      category: "Selection",
+      level: "selection",
+      keyScope: "canvas",
+      keybinding: ["escape", "arrowleft"],
+      menus: ["palette"],
+      group: "2_navigate",
+      when: hasSelection,
+      requires: "an element selection",
+      run: () => deps.selectParent()
+    },
+    {
+      id: "view.toggleNavigator",
+      title: "Toggle Navigator Dock",
+      category: "View",
+      level: "application",
+      keybinding: "mod+b",
+      menus: ["commandbar/overflow", "palette"],
+      group: "4_docks",
+      run: () => deps.toggleDock("navigator")
+    },
+    {
+      id: "view.toggleInspector",
+      title: "Toggle Inspector Dock",
+      category: "View",
+      level: "application",
+      keybinding: "mod+alt+b",
+      menus: ["commandbar/overflow", "palette"],
+      group: "4_docks",
+      run: () => deps.toggleDock("inspector")
+    },
+    {
+      id: "view.zen",
+      title: "Zen Mode",
+      category: "View",
+      level: "application",
+      keybinding: "mod+.",
+      menus: ["commandbar/overflow", "palette"],
+      group: "4_docks",
+      run: () => deps.toggleZen()
+    },
+    {
+      id: "palette.open",
+      title: "Open Command Center",
+      category: "View",
+      level: "application",
+      keybinding: "mod+k",
+      menus: ["palette"],
+      group: "5_palette",
+      run: () => deps.openPalette("picker")
+    },
+    {
+      id: "palette.openFiles",
+      title: "Go to File…",
+      category: "File",
+      level: "application",
+      keybinding: "mod+p",
+      menus: ["palette"],
+      group: "5_palette",
+      run: () => deps.openPalette("files")
+    },
+    {
+      id: "palette.openCommands",
+      title: "Run Command…",
+      category: "View",
+      level: "application",
+      keybinding: "mod+shift+p",
+      menus: ["palette"],
+      group: "5_palette",
+      run: () => deps.openPalette("commands")
+    },
+    {
+      id: "palette.openNodes",
+      title: "Go to Symbol in Document…",
+      category: "Selection",
+      level: "document",
+      menus: ["palette"],
+      group: "5_palette",
+      when: documentOpen,
+      requires: "an open document",
+      run: () => deps.openPalette("nodes")
+    },
+    {
+      id: "project.open",
+      title: "Open Project…",
+      category: "Project",
+      level: "project",
+      keybinding: "mod+o",
+      menus: ["commandbar/overflow", "statusbar/project", "palette"],
+      group: "1_file",
+      run: () => deps.openProject()
+    },
+    {
+      id: "project.openRecent",
+      title: "Open Recent…",
+      category: "Project",
+      level: "project",
+      menus: ["commandbar/overflow", "statusbar/project", "palette"],
+      group: "1_file",
+      run: () => deps.openPalette("projects")
+    },
+    ...panelFocusCommands(deps),
+    ...inspectorFocusCommands(deps),
+    {
+      id: "view.cycleRegion",
+      title: "Focus Next Region",
+      category: "View",
+      level: "application",
+      keybinding: "f6",
+      menus: ["palette"],
+      group: "4_docks",
+      run: () => deps.cycleRegion(1)
+    },
+    {
+      id: "view.cycleRegionBack",
+      title: "Focus Previous Region",
+      category: "View",
+      level: "application",
+      keybinding: "shift+f6",
+      menus: ["palette"],
+      group: "4_docks",
+      run: () => deps.cycleRegion(-1)
+    }
+  ];
+  return commands;
+}
+function panelFocusCommands(deps) {
+  let chordsSpent = 0;
+  return deps.panelRoster.map((panel) => {
+    const command = {
+      id: `panel.focus.${panel.id}`,
+      title: `Show ${panel.title}`,
+      category: "View",
+      level: "application",
+      menus: ["palette"],
+      group: "4_docks",
+      requires: "an open project",
+      when: (ctx) => ctx.project.open && (panel.when?.(ctx) ?? true),
+      run: () => deps.focusPanel(panel.id)
+    };
+    if (panel.rail !== false && chordsSpent < RAIL_CHORD_LIMIT) {
+      chordsSpent += 1;
+      command.keybinding = `mod+${chordsSpent}`;
+    }
+    return command;
+  });
+}
+function inspectorFocusCommands(deps) {
+  return INSPECTOR_TABS.map((tab, index) => {
+    const command = {
+      id: `inspector.focus.${tab.id}`,
+      title: `Show ${tab.title}`,
+      category: "View",
+      level: "document",
+      keybinding: `mod+shift+${index + 1}`,
+      menus: ["palette"],
+      group: "4_docks",
+      requires: "an open document",
+      when: (ctx) => ctx.document.open,
+      run: () => deps.focusInspectorTab(tab.id)
+    };
+    return command;
+  });
+}
+
+export { transposeStylebookStyle, tokenLabel, groupTokens, listTokenContexts, readTokenOverride, writeTokenOverride, addableContexts, stylebook_meta_default, renderStylebookMode, selectStylebookTag, INSPECTOR_TABS, noopCommandDeps, defaultCommands };
+
+//# debugId=B0A56BD62EB8ABB664756E2164756E21
+//# sourceMappingURL=studio-zv37yrfa.js.map