@jxsuite/studio 4.0.0 → 5.0.0

package/dist/chunks/studio-rpyah2ew.js

@@ -0,0 +1,2805 @@
+import {
+  getPlatform2,
+  hasPlatform2
+} from "./studio-6nzaktvy.js";
+import {
+  displayTagName
+} from "./studio-7r42c6ca.js";
+import {
+  errorMessage2
+} from "./studio-yxa81f45.js";
+import {
+  loadUsages2,
+  usageWarning2
+} from "./studio-81390n6f.js";
+import {
+  effectScope,
+  onScopeDispose,
+  effect,
+  reactive,
+  toRaw,
+  now,
+  problems2,
+  notify2,
+  clearProblems2,
+  problemFindings2,
+  problemCount2
+} from "./studio-p1dw8wfw.js";
+import {
+  loadFormats2,
+  formatByName2,
+  noFormatError2,
+  formatForPath2,
+  defaultContentFormat2,
+  formatParse2,
+  formatSerialize2,
+  splitFormatDocument2
+} from "./studio-79y5sz51.js";
+import {
+  getNodeAtPath2,
+  childList,
+  pathsEqual,
+  nodeLabel,
+  projectState,
+  statusbarEl
+} from "./studio-6ewqv390.js";
+import {
+  EDITOR_KIND_LABELS,
+  primarySelection,
+  transactDoc,
+  setHistoryDelegate,
+  mutateUpdateStyle,
+  mutateUpdateAttribute,
+  mutateUpdateNestedStyle,
+  mutateUpdateNestedStylePath,
+  collabState,
+  isMediaFormat,
+  collabReadOnly,
+  collabSave,
+  PRIMARY_PANE2,
+  workspace2,
+  activeTab2
+} from "./studio-az3zd49t.js";
+import {
+  isMediaFile
+} from "./studio-vz68yn9e.js";
+import {
+  POPOVER_DEFAULT_MODE,
+  findPopoverDefects,
+  popoverDisplayRepair,
+  POPOVER_TAGS,
+  INVOKER_TAGS,
+  activeRegistry
+} from "./studio-5jy81t3s.js";
+import {
+  paneRegion,
+  registerSurface,
+  mountSurface,
+  showConfirmDialog2
+} from "./studio-erdatzvp.js";
+import {
+  openMenu2
+} from "./studio-3gxv60tn.js";
+import {
+  parseJsonDocument,
+  serializeJson,
+  shell
+} from "./studio-25hkdrkw.js";
+import {
+  deployStatusItem
+} from "./studio-tb3ev01j.js";
+import {
+  tabOfPane,
+  derivationOfPane,
+  findDialogDefects,
+  flushCanvasEdits2
+} from "./studio-rkstz940.js";
+import {
+  isRecentLocal2
+} from "./studio-8jn5yhyn.js";
+import {
+  showProgressModal,
+  loadMediaUsages
+} from "./studio-cpvb2ed1.js";
+import {
+  validateComponentSlots
+} from "./studio-q0a3yk4n.js";
+// src/surfaces/jump-bar.json
+var jump_bar_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioJumpBar",
+  $description: "⑥ The jump bar: one pane's address, outermost step first, every step a command the adapter has already resolved against the registry. A step is a button when its command can run and a readout when it cannot — an address with a hole in it is a lie about containment, so a step never disappears. A step with more than one place to go carries the chevron that opens its siblings; one alternative is not a choice and draws no control. Nothing here decides what the bar says, which step is where you are, or what a chevron opens.",
+  tagName: "nav",
+  attributes: {
+    part: "bar",
+    "aria-label": "Location",
+    "data-jx-region": "${state.region}",
+    hidden: "${state.empty ? '' : null}"
+  },
+  style: {
+    $description: "The `.jump-bar` rules the bar used to take from `styles/shell.css`, brought here and re-valued onto the kit's own layer. It scrolls rather than wraps — a deep selection must not push the stage down by a second line — and the overflow is taken at the START, because the leaf is the part being read. The height is the one number this file shares with its adapter: the stage's `--jump-bar-h` offset must be the box this rule draws.",
+    display: "flex",
+    alignItems: "center",
+    gap: "1px",
+    height: "24px",
+    padding: "0 var(--jx-space-3)",
+    minWidth: "0",
+    overflowX: "auto",
+    scrollbarWidth: "none",
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    fontFamily: "var(--jx-font-sans)",
+    fontSize: "var(--jx-text-xs)",
+    color: "var(--jx-fg-dim)",
+    background: "var(--jx-bg-panel)",
+    borderBottom: "1px solid var(--jx-border)",
+    "&[hidden]": {
+      display: "none"
+    },
+    "&::-webkit-scrollbar": {
+      display: "none"
+    },
+    '& [part="step"]': {
+      display: "flex",
+      alignItems: "center",
+      flexShrink: "0"
+    },
+    '& [part="separator"]': {
+      flexShrink: "0",
+      padding: "0 1px",
+      color: "var(--jx-fg-dim)",
+      opacity: "0.6"
+    },
+    '& [part="crumb"]': {
+      maxWidth: "28ch",
+      overflow: "hidden",
+      margin: "0",
+      padding: "0 var(--jx-space-2)",
+      border: "none",
+      borderRadius: "var(--jx-radius-xs)",
+      background: "transparent",
+      color: "inherit",
+      font: "inherit",
+      lineHeight: "1",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
+    },
+    '& button[part="crumb"]': {
+      cursor: "pointer",
+      ":hover:not(:disabled)": {
+        color: "var(--jx-fg)",
+        background: "var(--jx-hover-bg)"
+      },
+      ":disabled": {
+        cursor: "default",
+        opacity: "0.6"
+      },
+      ":focus-visible": {
+        outline: "var(--jx-focus-ring)",
+        outlineOffset: "-2px"
+      }
+    },
+    '& [part="crumb"][aria-current]': {
+      $description: "Where you ARE is stated by weight, not by taking the control away: the leaf still selects, which is how a stray click in the canvas is undone without leaving the bar.",
+      color: "var(--jx-fg)"
+    },
+    '& span[part="crumb"]': {
+      $description: "A step with no runnable command is a readout, not a dead button. No hover, no pointer, no promise.",
+      cursor: "default"
+    },
+    '& [part="alternatives"]': {
+      padding: "0 1px",
+      border: "none",
+      borderRadius: "var(--jx-radius-xs)",
+      background: "transparent",
+      color: "inherit",
+      font: "inherit",
+      lineHeight: "1",
+      cursor: "pointer",
+      ":hover": {
+        color: "var(--jx-fg)",
+        background: "var(--jx-hover-bg)"
+      },
+      ":focus-visible": {
+        outline: "var(--jx-focus-ring)",
+        outlineOffset: "-2px"
+      }
+    }
+  },
+  children: [
+    {
+      $prototype: "Array",
+      items: {
+        $ref: "#/state/segments"
+      },
+      key: {
+        $ref: "$map/item/key"
+      },
+      map: {
+        tagName: "span",
+        attributes: {
+          part: "step",
+          "data-jump-kind": "${$map.item.kind}"
+        },
+        children: [
+          {
+            tagName: "span",
+            attributes: {
+              part: "separator-slot",
+              role: "none"
+            },
+            style: {
+              display: "contents"
+            },
+            $switch: {
+              $ref: "$map/item/leading"
+            },
+            cases: {
+              false: {
+                tagName: "span",
+                attributes: {
+                  part: "separator",
+                  "aria-hidden": "true"
+                },
+                textContent: "›"
+              }
+            }
+          },
+          {
+            tagName: "span",
+            attributes: {
+              part: "crumb-slot",
+              role: "none"
+            },
+            style: {
+              display: "contents"
+            },
+            $switch: {
+              $ref: "$map/item/control"
+            },
+            cases: {
+              button: {
+                tagName: "button",
+                attributes: {
+                  part: "crumb",
+                  type: "button",
+                  title: "${$map.item.title}",
+                  "aria-current": "${$map.item.current ? 'true' : null}",
+                  disabled: {
+                    $ref: "$map/item/disabled"
+                  }
+                },
+                textContent: "${$map.item.label}",
+                onclick: {
+                  $prototype: "Function",
+                  body: [
+                    {
+                      operator: "call",
+                      target: {
+                        $ref: "#/state/run"
+                      },
+                      value: [
+                        {
+                          $ref: "$map/item/key"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              },
+              readout: {
+                tagName: "span",
+                attributes: {
+                  part: "crumb",
+                  title: "${$map.item.title}",
+                  "aria-current": "${$map.item.current ? 'true' : null}"
+                },
+                textContent: "${$map.item.label}"
+              }
+            }
+          },
+          {
+            tagName: "span",
+            attributes: {
+              part: "alternatives-slot",
+              role: "none"
+            },
+            style: {
+              display: "contents"
+            },
+            $switch: {
+              $ref: "$map/item/hasChoices"
+            },
+            cases: {
+              true: {
+                tagName: "button",
+                attributes: {
+                  part: "alternatives",
+                  type: "button",
+                  "aria-haspopup": "menu",
+                  "aria-label": "${$map.item.altsLabel}",
+                  title: "${$map.item.altsLabel}"
+                },
+                textContent: "⌄",
+                onclick: {
+                  $prototype: "Function",
+                  body: [
+                    {
+                      operator: "call",
+                      target: {
+                        $ref: "#/state/choose"
+                      },
+                      value: [
+                        {
+                          $ref: "$map/item/key"
+                        },
+                        {
+                          $ref: "event#/currentTarget"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  ]
+};
+
+// src/surfaces/jump-bar.ts
+registerSurface("jump-bar", jump_bar_default);
+function mountJumpBarSurface(host, region, actions) {
+  const scope = reactive({
+    ...actions,
+    empty: true,
+    region,
+    segments: []
+  });
+  host.replaceChildren();
+  let mounted = null;
+  let disposed = false;
+  mountSurface("jump-bar", scope, host).then((surface) => {
+    if (disposed) {
+      surface.dispose();
+      return;
+    }
+    mounted = surface;
+  });
+  return {
+    dispose() {
+      disposed = true;
+      mounted?.dispose();
+      mounted = null;
+      host.replaceChildren();
+    },
+    update(steps) {
+      scope.segments = [...steps];
+      scope.empty = steps.length === 0;
+    }
+  };
+}
+// src/surfaces/pane-grid.json
+var pane_grid_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioPaneGrid",
+  $description: "The pane grid (studio.md §18.1): one cell per pane, with a splitter before every cell but the first. Every box here is EMPTY by design — the four inside a cell are hosts other modules fill (`panels/tab-strip.ts` the strip, `panels/jump-bar.ts` the jump bar, `panels/pane-context.ts` the chrome layer, `canvas/canvas-render.ts` the stage), and the stage is an ISLAND in the §9.4 sense: the canvas host mounts a cross-origin `<iframe>` into it, so nothing this document draws may ever go inside it. What the document owns is the STRUCTURE and the STYLE — the cell's own two-row grid, the three row-2 children that share its lower cell, and the splitter — which is `styles/shell.css`'s `.pane*` block and `styles/canvas.css`'s `.pane-stage` rule, carried here and keyed on `part`. Two things are load-bearing and easy to undo. (1) **A row that moves reloads an iframe**, so the keyed `$map` is not an optimisation: `workspace.panes[0]` is always the primary and `MAX_PANES` is 2, the key is the pane id, and the runtime's forward-cursor pass therefore never moves a kept row — gaining or losing the side pane leaves the primary's node, and the frame inside it, untouched. (2) **The splitter must sit BETWEEN two cells and inside neither**, so each row is a `display: contents` wrapper holding its own leading splitter and its cell: the wrapper generates no box, so the splitter and the two cells are the grid items of `#pane-grid` in DOM order, and a pointer landing on the splitter is in no cell at all. Every selector below is a `>` chain from the root, because a pane's stage hosts other surface documents and a bare `[part=\"row\"]` descendant rule would reach into them.",
+  tagName: "div",
+  attributes: {
+    part: "grid",
+    role: "none"
+  },
+  style: {
+    $description: "The pane's own layout, and the splitter's. The tracks of `#pane-grid` ITSELF are not here and must not be: the track count depends on `workspace.panes.length` and the split on `shell.paneSplit`, which is written on every `pointermove` of a drag — `panels/pane-grid.ts` writes them as one inline `grid-template-columns` on the host, so a drag moves a track edge and never a node. The splitter's own paint is not here either: `jx-split` owns the hairline, the cursors and the drag state it mirrors as `data-dragging`, so this block says only where the element is placed.",
+    display: "contents",
+    '& > [part="row"]': {
+      $description: "One pane's row: its leading splitter and its cell, generating no box of their own so both are grid items of `#pane-grid`.",
+      display: "contents"
+    },
+    '& > [part="row"] > [part="splitter-slot"]': {
+      display: "contents"
+    },
+    '& > [part="row"] > [part="splitter-slot"] > jx-split': {
+      $description: "WHERE the splitter sits, and nothing about what it looks like: the hairline, the two cursors, the hover and drag colours and the focus ring are `jx-split`'s own, and the `.dragging` class this block used to name is gone with the module that wrote it — the element mirrors its own gesture as `data-dragging` and paints itself. BOTH grid axes are `auto`: a definite row position — the `2 / 4` a column handle inherits on the APP grid, or the `1 / -1` this rule used to carry — moves the item into an earlier step of CSS Grid's auto-placement, so the splitter claimed column 1 and the two cells flowed around it into the 5px track and the second half. DOM order was already right; the placement algorithm was not reading it. `width: auto` with `justify-self: stretch` is what hands the thickness back to the TRACK `panels/pane-grid.ts` writes, so the element's own 5px default cannot disagree with the column it is placed in.",
+      gridRow: "auto",
+      gridColumn: "auto",
+      justifySelf: "stretch",
+      margin: "0",
+      width: "auto",
+      zIndex: "10"
+    },
+    '& > [part="row"] > [part="pane"]': {
+      $description: 'ONE PANE, and one COLUMN, declared. Three children name `grid-row: 2` in order to share the lower cell, and auto-placement answers that by inventing an implicit column each: the jump bar, the chrome layer and the stage lined up side by side, the stage taking a third of the pane and pinning the document to the right edge. `grid-template-columns` is what makes "share the cell" mean it, and every row-2 child restates `grid-column: 1` so a future fourth one cannot re-open the same hole. No unit test can see this — happy-dom does no layout, so every rect is zero — which is why the screenshot lane is what caught it.',
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr)",
+      gridTemplateRows: "auto minmax(0, 1fr)",
+      minWidth: "0",
+      minHeight: "0"
+    },
+    '& > [part="row"] > [part="pane"] > [part="strip"]': {
+      gridRow: "1",
+      gridColumn: "1",
+      minHeight: "0",
+      minWidth: "0"
+    },
+    '& > [part="row"] > [part="pane"] > [part="strip"]:empty': {
+      $description: "A pane with nothing to say costs no band. The strip host is empty until `panels/tab-strip.ts` mounts a document into it, and empty again the moment it disposes.",
+      display: "none"
+    },
+    '& > [part="row"] > [part="pane"] > [part="jump"]': {
+      $description: "Region ⑥. Like the chrome layer below it this shares the pane's lower cell rather than owning a row, so the two bars stack OVER the stage instead of pushing it down. `align-self: start` is what keeps it the height of its own content instead of the height of the cell, so the bar never covers the stage it sits above.",
+      gridRow: "2",
+      gridColumn: "1",
+      alignSelf: "start",
+      position: "relative",
+      zIndex: "3",
+      minWidth: "0",
+      maxWidth: "100%"
+    },
+    '& > [part="row"] > [part="pane"] > [part="chrome"]': {
+      $description: 'Regions ⑦ and ⑩. The layer itself is inert and only its children take the pointer; `surfaces/pane-context.json` owns what they look like. Offset by `--jump-bar-h` for the same reason the stage is: the jump bar is stacked over this same cell, and one projection per bar is what keeps "no tab open" costing no dead band.',
+      gridRow: "2",
+      gridColumn: "1",
+      marginTop: "var(--jump-bar-h, 0px)",
+      position: "relative",
+      zIndex: "2",
+      minWidth: "0",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      pointerEvents: "none"
+    },
+    '& > [part="row"] > [part="pane"] > [part="chrome"] > *': {
+      pointerEvents: "auto"
+    },
+    '& > [part="row"] > [part="pane"] > [part="pane-stage"]': {
+      $description: "The stage: the pane's own axis (`styles/canvas.css`) over its placement in the cell (`styles/shell.css`). Offset by the SUM of the two bars stacked over this cell — `--jump-bar-h` (written by `panels/jump-bar.ts`) and `--pane-context-h` (by `panels/pane-context.ts`), both onto the CELL, which is why this reads them by cascade — so neither ever covers the document, and by zero when no tab is open, so the welcome screen does not sit under a band nothing explains. Two variables rather than one total: each bar owns its own answer, and a bar that renders nothing writes 0 without knowing the other exists.",
+      gridRow: "2",
+      gridColumn: "1",
+      marginTop: "calc(var(--jump-bar-h, 0px) + var(--pane-context-h, 0px))",
+      position: "relative",
+      overflow: "auto",
+      background: "var(--bg-panel)",
+      minWidth: "0",
+      display: "flex",
+      gap: "var(--jx-space-6)",
+      alignItems: "flex-start"
+    }
+  },
+  children: [
+    {
+      $description: "Keyed on the PANE ID, and that is the whole of §18.1 rule 1's structural half: the key is what makes the runtime MOVE a kept row rather than rebuild it, and re-parenting is not a move for an `<iframe>` — it reloads, dropping its `iframe-channel` connection, its shadow document and every `ready` panel with it. A row renders complete (its cell, its four hosts and its splitter) inside the row's own effect scope before it is inserted, so there is no frame in which a cell exists with no stage inside it.",
+      $prototype: "Array",
+      items: { $ref: "#/state/rows" },
+      key: { $ref: "$map/item/id" },
+      map: {
+        tagName: "div",
+        attributes: {
+          part: "row",
+          role: "none"
+        },
+        children: [
+          {
+            $description: "Present on every cell but the first. It is a child of the ROW rather than of either cell, so a splitter drag never reaches the cell's pane-focus listener — and it is created and destroyed with the second pane, so nothing re-inserts it while a pointer capture is live.",
+            tagName: "div",
+            attributes: {
+              part: "splitter-slot",
+              role: "none"
+            },
+            $switch: { $ref: "$map/item/split" },
+            cases: {
+              shown: {
+                $description: '`jx-split` (ui.md §5.5), which is where `role="separator"`, the tab stop, `aria-valuenow` and the whole keyboard now live. This document used to write the role on a bare div and hand the div to `ui/panel-resize.ts`, which made the pane split the one dock-sized thing in Studio a reader could not move without a mouse — an SC 2.1.1 failure with a drag handle drawn on it, and an SC 2.5.7 one besides. Every prop below is a CONSTANT except `value`: `min` and `max` are the shell\'s own supported range, and `gap` is the pixel floor the element converts against the track it measures itself, which is why nothing here has to be recomputed when the window resizes. `collapse` is the even split rather than the floor, because both sides of this splitter are real panes: the first Enter or double click is the 50/50 reset this gesture has always been, and the second one is the return trip it never had.',
+                tagName: "jx-split",
+                attributes: {
+                  part: "splitter"
+                },
+                $props: {
+                  label: "Pane split",
+                  value: { $ref: "#/state/paneSplit" },
+                  min: { $ref: "#/state/splitMin" },
+                  max: { $ref: "#/state/splitMax" },
+                  gap: { $ref: "#/state/splitGap" },
+                  collapse: { $ref: "#/state/splitDefault" }
+                },
+                oninput: {
+                  $prototype: "Function",
+                  body: [
+                    {
+                      operator: "call",
+                      target: { $ref: "#/state/move" },
+                      value: [{ $ref: "event#/target/value" }]
+                    }
+                  ]
+                },
+                onchange: {
+                  $prototype: "Function",
+                  body: [
+                    {
+                      operator: "call",
+                      target: { $ref: "#/state/settle" },
+                      value: []
+                    }
+                  ]
+                }
+              }
+            }
+          },
+          {
+            $description: 'One pane\'s cell. `pane.<id>` goes on the STAGE and `pane.<id>/tabs` on the strip, never on this element: nine shots crop `pane.primary` meaning "the canvas", and moving the id up one level would silently widen all nine to include the strip and the two bars, which no gate can tell from an intended crop.',
+            tagName: "div",
+            attributes: {
+              part: "pane",
+              "data-pane-id": "${$map.item.id}"
+            },
+            children: [
+              {
+                tagName: "div",
+                attributes: {
+                  part: "strip",
+                  "data-jx-region": "${$map.item.stripRegion}"
+                }
+              },
+              {
+                $description: "The jump bar and the context bar are HANDED this box rather than resolving a region into it. They cannot resolve one the way the strip does: nothing inside the strip re-stamps `pane.<id>/tabs`, while both bars stamp `pane.<id>/jump` and `pane.<id>/context` on markup they render INSIDE these two divs — so a region on the wrapper as well would put the same id on two nested elements, and `resolveRegion` takes the LAST match. Sixty shots crop `pane.primary/context`; a second, larger element carrying it is a silently widened crop.",
+                tagName: "div",
+                attributes: {
+                  part: "jump"
+                }
+              },
+              {
+                tagName: "div",
+                attributes: {
+                  part: "chrome"
+                }
+              },
+              {
+                $description: "Drawn EMPTY and left empty. `canvas/canvas-render.ts` is this element's render root and `canvas/iframe-host.ts` mounts the artboards' iframes into it; a node cannot have two owners of its child list.",
+                tagName: "div",
+                attributes: {
+                  part: "pane-stage",
+                  "data-jx-region": "${$map.item.region}"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+};
+
+// src/surfaces/pane-grid.ts
+registerSurface("pane-grid", pane_grid_default);
+var PANE_PART = "pane";
+var STAGE_PART = "pane-stage";
+var PANE_SELECTOR = `[part="${PANE_PART}"]`;
+var STAGE_SELECTOR = `[part="${STAGE_PART}"]`;
+var CELL_PARTS = new Map([
+  ["pane", "pane"],
+  ["strip", "strip"],
+  ["jump", "jump"],
+  ["chrome", "chrome"],
+  ["pane-stage", "stage"]
+]);
+function partOf(def) {
+  const part = typeof def === "string" ? undefined : def.attributes?.["part"];
+  return typeof part === "string" ? part : "";
+}
+function paneOf(state) {
+  const row = state?.["$map"]?.item;
+  return typeof row?.id === "string" ? row.id : "";
+}
+function mountPaneGridSurface(host, rows, split, actions) {
+  host.replaceChildren();
+  const scope = reactive({
+    move: actions.move,
+    paneSplit: split.value,
+    rows,
+    settle: actions.settle,
+    splitDefault: split.collapse,
+    splitGap: split.gap,
+    splitMax: split.max,
+    splitMin: split.min
+  });
+  let mounted = null;
+  let disposed = false;
+  const ready = mountSurface("pane-grid", scope, host, {
+    onNodeCreated: (element, _path, def, state) => {
+      const cellPart = CELL_PARTS.get(partOf(def));
+      if (cellPart) {
+        actions.cellPart(paneOf(state), cellPart, element);
+      }
+    }
+  }).then((surface) => {
+    if (disposed) {
+      surface.dispose();
+      return;
+    }
+    mounted = surface;
+  });
+  return {
+    dispose() {
+      disposed = true;
+      mounted?.dispose();
+      mounted = null;
+      host.replaceChildren();
+    },
+    ready,
+    update(next, value) {
+      scope.rows = next;
+      scope.paneSplit = value;
+    }
+  };
+}
+
+// src/panels/jump-bar.ts
+var JUMP_BAR_VAR = "--jump-bar-h";
+var JUMP_BAR_HEIGHT = 24;
+function documentLabel(path) {
+  if (!path) {
+    return "Untitled";
+  }
+  const root = projectState?.projectRoot;
+  return root && path.startsWith(`${root}/`) ? path.slice(root.length + 1) : path;
+}
+function selectionCrumbs(document2, selection) {
+  const crumbs = [];
+  for (let i = 0;i < selection.length; ) {
+    const seg = selection[i];
+    const step = seg === "map" ? 1 : 2;
+    const path = selection.slice(0, i + step);
+    const node = getNodeAtPath2(document2, path);
+    const fallbackTag = node?.tag;
+    const label = node?.$prototype === "Array" ? "Repeater" : displayTagName(node?.tagName) || (typeof fallbackTag === "string" ? fallbackTag : "") || (seg === "cases" ? String(selection[i + 1]) : `[${selection[i + 1]}]`);
+    crumbs.push({ label, path });
+    i += step;
+  }
+  return crumbs;
+}
+function crumbSiblings(document2, crumbs, index) {
+  const crumb = crumbs[index];
+  if (!crumb) {
+    return [];
+  }
+  const parentPath = index === 0 ? [] : crumbs[index - 1].path;
+  const parent = getNodeAtPath2(document2, parentPath);
+  const key = crumb.path.at(-2);
+  const own = crumb.path;
+  if (key === "cases") {
+    const cases = parent?.cases;
+    if (!cases || typeof cases !== "object") {
+      return [];
+    }
+    return Object.keys(cases).map((name) => {
+      const path = [...parentPath, "cases", name];
+      return choiceFor(document2, path, name, own);
+    });
+  }
+  if (key !== "children") {
+    return [];
+  }
+  const choices = [];
+  for (const [i, child] of childList(parent).entries()) {
+    if (typeof child === "string") {
+      continue;
+    }
+    const path = [...parentPath, "children", i];
+    choices.push(choiceFor(document2, path, nodeLabel(child), own));
+  }
+  return choices;
+}
+function choiceFor(document2, path, fallback, own) {
+  const node = getNodeAtPath2(document2, path);
+  const label = node ? nodeLabel(node) : fallback;
+  const choice = { args: { path }, command: "selection.set", label };
+  return pathsEqual(path, own) ? { ...choice, current: true } : choice;
+}
+function jumpSegments(tab, derived = null) {
+  if (!tab) {
+    return [];
+  }
+  const segments = [];
+  const project = projectState;
+  if (project) {
+    segments.push({
+      choices: [],
+      command: "project.openRecent",
+      kind: "project",
+      label: project.name,
+      title: project.projectRoot
+    });
+  }
+  segments.push({
+    choices: [],
+    command: derived ? "pane.pin" : "palette.openFiles",
+    kind: "file",
+    label: documentLabel(tab.documentPath),
+    title: tab.documentPath ?? "Not saved to disk yet"
+  });
+  const editingFunction = tab.session.ui.editingFunction;
+  const editingFormula = tab.session.ui.editingFormula;
+  if (editingFunction) {
+    segments.push(editorSegment("ƒ", editingFunction));
+    return segments;
+  }
+  if (editingFormula) {
+    segments.push(editorSegment("fx", editingFormula));
+    return segments;
+  }
+  const selection = primarySelection(tab.session.selection);
+  if (selection && selection.length > 0) {
+    const crumbs = selectionCrumbs(tab.doc.document, selection);
+    for (const [i, crumb] of crumbs.entries()) {
+      const node = getNodeAtPath2(tab.doc.document, crumb.path);
+      segments.push({
+        args: { path: crumb.path },
+        choices: crumbSiblings(tab.doc.document, crumbs, i),
+        command: "selection.set",
+        kind: "node",
+        label: i === crumbs.length - 1 && node ? nodeLabel(node) : crumb.label,
+        title: crumb.path.join(" / ")
+      });
+    }
+  }
+  return segments;
+}
+function editorSegment(sigil, def) {
+  return {
+    choices: [],
+    command: null,
+    kind: "editor",
+    label: `${sigil} ${def.defName ?? def.eventKey ?? "editor"}`
+  };
+}
+function stepKey(segment) {
+  const path = segment.args?.path;
+  return segment.kind === "node" && Array.isArray(path) ? `node:${path.join("/")}` : segment.kind;
+}
+function runnable(registry, id) {
+  return id !== null && Boolean(registry?.get(id)) && registry.isVisible(id);
+}
+function segmentTitle(registry, segment, id) {
+  const command = registry.get(id);
+  const reason = registry.disabledReason(id);
+  const chord = registry.keymap.formatBinding(id);
+  const suffix = reason ? `${command.title} — requires ${reason}` : chord ? `${command.title} (${chord})` : command.title;
+  return segment.title ? `${segment.title} · ${suffix}` : suffix;
+}
+function projectStep(registry, segment, first, last) {
+  const id = segment.command;
+  const live = runnable(registry, id);
+  return {
+    altsLabel: `Siblings of ${segment.label}`,
+    control: live ? "button" : "readout",
+    current: last,
+    disabled: live && registry.disabledReason(id) !== undefined,
+    hasChoices: registry !== null && segment.choices.length > 1,
+    key: stepKey(segment),
+    kind: segment.kind,
+    label: segment.label,
+    leading: first,
+    title: live ? segmentTitle(registry, segment, id) : segment.title ?? segment.label
+  };
+}
+var _bars = new Map;
+var _scope = null;
+var _menu = null;
+function dismissJumpMenu() {
+  const menu = _menu;
+  _menu = null;
+  menu?.close();
+}
+function openChoices(segment, anchor) {
+  const registry = activeRegistry();
+  if (!registry) {
+    return;
+  }
+  dismissJumpMenu();
+  const rows = segment.choices.map((choice, i) => ({
+    checked: choice.current === true ? "true" : "false",
+    destructive: false,
+    disabled: false,
+    dividerAbove: false,
+    id: String(i),
+    run: () => {
+      registry.run(choice.command, choice.args);
+    },
+    title: choice.label
+  }));
+  const handle = openMenu2({
+    label: `Go to a sibling of ${segment.label}`,
+    onClosed: (closed) => {
+      if (_menu === closed) {
+        _menu = null;
+      }
+    },
+    opener: anchor,
+    region: "jump-bar",
+    rows
+  });
+  _menu = handle;
+}
+function applyJumpBarOffset(height, host) {
+  const target = host?.closest(PANE_SELECTOR) ?? document.documentElement;
+  target.style.setProperty(JUMP_BAR_VAR, `${height}px`);
+}
+function projectPane(paneId) {
+  const segments = jumpSegments(tabOfPane(paneId), derivationOfPane(paneId));
+  const registry = activeRegistry();
+  return {
+    segments,
+    steps: segments.map((segment, i) => projectStep(registry, segment, i === 0, i === segments.length - 1))
+  };
+}
+function renderJumpBar(paneId) {
+  if (_bars.size === 0) {
+    return;
+  }
+  dismissJumpMenu();
+  for (const [id, bar] of _bars) {
+    if (paneId !== undefined && id !== paneId) {
+      continue;
+    }
+    const { segments, steps } = projectPane(id);
+    bar.segments = new Map(steps.map((step, i) => [step.key, segments[i]]));
+    bar.surface.update(steps);
+    applyJumpBarOffset(steps.length === 0 ? 0 : JUMP_BAR_HEIGHT, bar.host);
+  }
+}
+function attachJumpBarHost(paneId, host) {
+  const previous = _bars.get(paneId);
+  if (previous?.host === host) {
+    return;
+  }
+  if (previous) {
+    previous.surface.dispose();
+    applyJumpBarOffset(0, previous.host);
+    _bars.delete(paneId);
+  }
+  if (!host) {
+    return;
+  }
+  const bar = {
+    host,
+    segments: new Map,
+    surface: mountJumpBarSurface(host, paneRegion(paneId, "jump"), {
+      choose: (key, anchor) => {
+        const segment = _bars.get(paneId)?.segments.get(key);
+        if (segment) {
+          openChoices(segment, anchor);
+        }
+      },
+      run: (key) => {
+        const segment = _bars.get(paneId)?.segments.get(key);
+        const registry = activeRegistry();
+        if (segment?.command && registry) {
+          registry.run(segment.command, segment.args);
+        }
+      }
+    })
+  };
+  _bars.set(paneId, bar);
+  renderJumpBar(paneId);
+}
+function mountJumpBar(host) {
+  unmountJumpBar();
+  attachJumpBarHost(PRIMARY_PANE2, host);
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      activeRegistry();
+      projectState?.name;
+      for (const pane of workspace2.panes) {
+        const tab = tabOfPane(pane.id);
+        if (!tab) {
+          continue;
+        }
+        tab.doc.document;
+        tab.documentPath;
+        tab.session.selection.map((path) => path.join("/")).join("|");
+        tab.session.ui.editingFormula;
+        tab.session.ui.editingFunction;
+      }
+      renderJumpBar();
+    });
+  });
+}
+function unmountJumpBar() {
+  dismissJumpMenu();
+  _scope?.stop();
+  _scope = null;
+  for (const bar of _bars.values()) {
+    bar.surface.dispose();
+    applyJumpBarOffset(0, bar.host);
+  }
+  _bars.clear();
+  applyJumpBarOffset(0);
+}
+
+// src/panels/ai-chat/sessions-view.ts
+var MINUTE = 60000;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+function relativeTime(ts, at = now()) {
+  const delta = Math.max(0, at - ts);
+  if (delta < MINUTE) {
+    return "just now";
+  }
+  if (delta < HOUR) {
+    return `${Math.floor(delta / MINUTE)}m ago`;
+  }
+  if (delta < DAY) {
+    return `${Math.floor(delta / HOUR)}h ago`;
+  }
+  if (delta < 2 * DAY) {
+    return "yesterday";
+  }
+  if (delta < 7 * DAY) {
+    return `${Math.floor(delta / DAY)}d ago`;
+  }
+  return new Date(ts).toLocaleDateString();
+}
+function projectSession(session) {
+  const count = session.messageCount;
+  return {
+    key: session.id,
+    meta: `${relativeTime(session.updatedAt)} · ${count} ${count === 1 ? "message" : "messages"}`,
+    title: session.title
+  };
+}
+function projectSessions(sessions) {
+  return sessions.map((session) => projectSession(session));
+}
+// src/surfaces/statusbar.json
+var statusbar_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioStatusbar",
+  $description: "The status bar: ambient state in the shell's level order, PROJECT then DOCUMENT then SELECTION. The adapter hands in `fields`, each with its region and its items; an item with a command is a button that runs it through `run`, and an item without one is a readout. Nothing here decides what the bar says.",
+  tagName: "div",
+  attributes: { part: "bar" },
+  style: {
+    display: "flex",
+    alignItems: "stretch",
+    flex: "1",
+    minWidth: "0",
+    '& > [part="field"]': {
+      display: "flex",
+      alignItems: "center",
+      gap: "2px",
+      minWidth: "0",
+      padding: "0 var(--jx-space-3)"
+    },
+    '& > [part="field"]:last-child': { overflow: "hidden" },
+    '& > [part="field"] + [part="field"]': { borderLeft: "1px solid var(--jx-border)" },
+    '& [part="item"], & [part="state"]': {
+      maxWidth: "32ch",
+      overflow: "hidden",
+      margin: "0",
+      padding: "0 var(--jx-space-2)",
+      border: "none",
+      borderRadius: "var(--jx-radius-xs)",
+      background: "transparent",
+      color: "inherit",
+      font: "inherit",
+      lineHeight: "1",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
+    },
+    '& [part="item"]': {
+      cursor: "pointer",
+      ":hover:not(:disabled)": { color: "var(--jx-fg)", background: "var(--jx-hover-bg)" },
+      ":disabled": { cursor: "default", opacity: "0.6" },
+      ":focus-visible": { outline: "var(--jx-focus-ring)", outlineOffset: "-2px" }
+    },
+    '& [part="state"]': { cursor: "default" }
+  },
+  children: [
+    {
+      $prototype: "Array",
+      items: { $ref: "#/state/fields" },
+      key: { $ref: "$map/item/id" },
+      map: {
+        tagName: "div",
+        attributes: { part: "field", "data-jx-region": "${$map.item.region}" },
+        children: [
+          {
+            $prototype: "Array",
+            items: { $ref: "$map/item/items" },
+            key: { $ref: "$map/item/key" },
+            map: {
+              tagName: "span",
+              attributes: { part: "slot" },
+              style: { display: "contents" },
+              $switch: { $ref: "$map/item/kind" },
+              cases: {
+                button: {
+                  tagName: "button",
+                  attributes: {
+                    part: "item",
+                    type: "button",
+                    title: "${$map.item.title}",
+                    disabled: { $ref: "$map/item/disabled" }
+                  },
+                  textContent: "${$map.item.label}",
+                  onclick: {
+                    $prototype: "Function",
+                    body: [
+                      {
+                        operator: "call",
+                        target: { $ref: "#/state/run" },
+                        value: [{ $ref: "$map/item/key" }]
+                      }
+                    ]
+                  }
+                },
+                state: {
+                  tagName: "span",
+                  attributes: { part: "state", title: "${$map.item.title}" },
+                  textContent: "${$map.item.label}"
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  ]
+};
+
+// src/surfaces/statusbar.ts
+registerSurface("statusbar", statusbar_default);
+var _scope2 = null;
+var _savedAt = new Map;
+function noteDocumentSaved(path) {
+  if (path) {
+    _savedAt.set(path, now());
+  }
+}
+function projectItem(registry, region, item) {
+  if (item.command === null) {
+    return {
+      args: undefined,
+      command: null,
+      disabled: false,
+      key: `${region}:${item.label}`,
+      kind: "state",
+      label: item.label,
+      title: item.title ?? item.label
+    };
+  }
+  const id = item.command;
+  if (!registry?.get(id) || !registry.isVisible(id)) {
+    return null;
+  }
+  const command = registry.get(id);
+  const reason = registry.disabledReason(id);
+  const chord = registry.keymap.formatBinding(id);
+  const suffix = reason ? `${command.title} — requires ${reason}` : chord ? `${command.title} (${chord})` : command.title;
+  return {
+    args: item.args,
+    command: id,
+    disabled: reason !== undefined,
+    key: `${region}:${id}`,
+    kind: "button",
+    label: item.label,
+    title: item.title ? `${item.title} · ${suffix}` : suffix
+  };
+}
+function projectField(registry, id, items) {
+  const region = `statusbar/${id}`;
+  const live = items.map((item) => item === null ? null : projectItem(registry, region, item)).filter((item) => item !== null);
+  if (live.length === 0) {
+    return null;
+  }
+  return { id, items: live, region };
+}
+function aheadBehindLabel(ahead, behind) {
+  return `${ahead > 0 ? ` ↑${ahead}` : ""}${behind > 0 ? ` ↓${behind}` : ""}`;
+}
+function projectField_(registry) {
+  const project = projectState;
+  const { status } = shell.git;
+  const count = problemCount2();
+  const deploy = deployStatusItem();
+  const peers = activeTab2.value ? collabState(activeTab2.value).peers.length : 0;
+  return projectField(registry, "project", [
+    project ? { command: "project.openRecent", label: project.name } : { command: "project.open", label: "No project" },
+    status?.isRepo === true && status.branch ? {
+      command: "panel.focus.git",
+      label: `⑂ ${status.branch}${aheadBehindLabel(status.ahead, status.behind)}`,
+      title: `${status.files.length} changed file(s)`
+    } : null,
+    deploy ? { command: deploy.command, label: deploy.label, title: deploy.title } : null,
+    count > 0 ? {
+      args: { tab: "problems" },
+      command: "view.setBottomTab",
+      label: `⚠ ${count}`,
+      title: `${count} problem(s)`
+    } : null,
+    peers > 0 ? {
+      command: "collab.showStatus",
+      label: `${peers} peer${peers === 1 ? "" : "s"}`,
+      title: `${peers} peer${peers === 1 ? "" : "s"} in this document`
+    } : null
+  ]);
+}
+function viewLabel(kind, view) {
+  if (kind === "none") {
+    return "";
+  }
+  if (kind !== "canvas") {
+    return EDITOR_KIND_LABELS[kind];
+  }
+  return view.charAt(0).toUpperCase() + view.slice(1);
+}
+function saveItem(dirty, readOnly, savedAt) {
+  if (readOnly) {
+    return { command: null, label: "Read-only", title: "A collaborator owns this session's file" };
+  }
+  if (dirty) {
+    return { command: "file.save", label: "Unsaved changes" };
+  }
+  return savedAt === undefined ? { command: null, label: "Saved" } : { command: null, label: `Saved ${relativeTime(savedAt)}` };
+}
+function documentField(registry) {
+  const tab = activeTab2.value;
+  if (!tab) {
+    return null;
+  }
+  const ctx = registry?.context() ?? null;
+  const view = ctx ? viewLabel(ctx.editor.kind, ctx.canvas.view) : "";
+  const collab = collabState(tab);
+  const savedAt = tab.documentPath === null ? undefined : _savedAt.get(tab.documentPath);
+  return projectField(registry, "document", [
+    {
+      command: "palette.openFiles",
+      label: documentLabel(tab.documentPath),
+      title: tab.documentPath ?? "Not saved to disk yet"
+    },
+    view ? { command: null, label: view, title: "The pane's view — change it on the pane context bar" } : null,
+    saveItem(tab.doc.dirty, collab.readOnly, savedAt)
+  ]);
+}
+function selectionField(registry) {
+  const paths = activeTab2.value?.session.selection ?? [];
+  if (paths.length > 0) {
+    return paths.length > 1 ? projectField(registry, "selection", [
+      {
+        command: null,
+        label: `${paths.length} selected`,
+        title: `${paths.length} elements are selected; the jump bar names the primary`
+      }
+    ]) : null;
+  }
+  return shell.stylebook.selection ? projectField(registry, "selection", [
+    {
+      command: null,
+      label: shell.stylebook.selection.replaceAll(" ", " › "),
+      title: "The style rule being edited"
+    }
+  ]) : null;
+}
+function projectBar() {
+  const registry = activeRegistry();
+  return [projectField_(registry), documentField(registry), selectionField(registry)].filter((field) => field !== null);
+}
+var _state = null;
+var _mount = null;
+var _handle = null;
+function state() {
+  _state ??= reactive({
+    fields: [],
+    run: (key) => {
+      const item = _state?.fields.flatMap((field) => field.items).find((i) => i.key === key);
+      const registry = activeRegistry();
+      if (item?.command && registry) {
+        registry.run(item.command, item.args);
+      }
+    }
+  });
+  return _state;
+}
+function ensureMounted() {
+  if (_mount || !statusbarEl) {
+    return;
+  }
+  _mount = mountSurface("statusbar", state(), statusbarEl);
+  _mount.then((handle) => {
+    _handle = handle;
+  });
+}
+function renderStatusbar() {
+  state().fields = projectBar();
+  ensureMounted();
+}
+function mountStatusbar() {
+  unmountStatusbar();
+  _scope2 = effectScope();
+  _scope2.run(() => {
+    effect(() => {
+      activeRegistry();
+      shell.stylebook.selection;
+      shell.git.status;
+      problems2.length;
+      const tab = activeTab2.value;
+      if (tab) {
+        tab.doc.document;
+        tab.doc.dirty;
+        tab.doc.mode;
+        tab.documentPath;
+        tab.session.selection.map((path) => path.join("/")).join("|");
+        tab.session.ui.canvasMode;
+        tab.session.ui.preview;
+        collabState(tab).peers.length;
+        collabState(tab).readOnly;
+      }
+      renderStatusbar();
+    });
+  });
+}
+function unmountStatusbar() {
+  _scope2?.stop();
+  _scope2 = null;
+  const pending = _mount;
+  _mount = null;
+  if (_handle) {
+    _handle.dispose();
+    _handle = null;
+  } else if (pending) {
+    pending.then((handle) => handle.dispose());
+  }
+  _state = null;
+}
+
+// src/services/popover-report.ts
+var KIT_SCOPE = { invokerTags: INVOKER_TAGS, popoverTags: POPOVER_TAGS };
+var POPOVER_PROBLEM_SOURCE = "Popover";
+var REPAIR_COMMAND = {
+  display: "document.repairPopoverDisplay",
+  "open-display": "document.repairPopoverDisplay",
+  invoker: "document.repairPopoverInvoker",
+  mode: "document.repairPopoverMode"
+};
+function problemKey(seen, prefix, rule, path) {
+  const base = `${prefix}.${rule}.${path.join("/")}`;
+  const before = seen.get(base) ?? 0;
+  seen.set(base, before + 1);
+  return before === 0 ? base : `${base}#${before}`;
+}
+function reportPopoverProblems(doc, path) {
+  clearProblems2((record) => record.source === POPOVER_PROBLEM_SOURCE);
+  const seen = new Map;
+  const defects = findPopoverDefects(doc, KIT_SCOPE);
+  for (const defect of defects) {
+    const action = defect.fix === undefined ? undefined : REPAIR_COMMAND[defect.fix];
+    notify2(defect.severity, defect.message, {
+      detail: defect.detail,
+      key: problemKey(seen, "popover", defect.rule, defect.path),
+      source: POPOVER_PROBLEM_SOURCE,
+      tier: "problem",
+      ...action === undefined ? {} : { action, actionArgs: { path: defect.path } },
+      ...path === undefined ? {} : { path }
+    });
+  }
+  const dialogDefects = findDialogDefects(doc, KIT_SCOPE);
+  for (const defect of dialogDefects) {
+    notify2(defect.severity, defect.message, {
+      detail: defect.detail,
+      key: problemKey(seen, "dialog", defect.rule, defect.path),
+      source: POPOVER_PROBLEM_SOURCE,
+      tier: "problem",
+      ...path === undefined ? {} : { path }
+    });
+  }
+  return defects.length + dialogDefects.length;
+}
+function repairPath(id, args) {
+  const path = args?.path;
+  if (!Array.isArray(path)) {
+    throw new RangeError(`command "${id}" needs a "path" argument naming the popover`);
+  }
+  return path;
+}
+function repairTab(id) {
+  const tab = activeTab2.value;
+  if (!tab) {
+    throw new RangeError(`command "${id}" needs an open document`);
+  }
+  return tab;
+}
+function popoverCommands() {
+  return [
+    {
+      category: "Document",
+      group: "2_document",
+      id: "document.checkPopovers",
+      level: "document",
+      menus: ["palette"],
+      requires: "an open document",
+      run: () => {
+        const tab = repairTab("document.checkPopovers");
+        const filed = reportPopoverProblems(tab.doc.document, tab.documentPath ?? undefined);
+        notify2.success(filed === 0 ? "No popover problems found in this document." : `${filed} popover problem(s) filed.`, { key: "popover.run", source: POPOVER_PROBLEM_SOURCE });
+      },
+      title: "Check Popovers",
+      when: (ctx) => ctx.document.open,
+      aiTool: {
+        description: "Check the open document for popover defects an author can fix — a base-rule `display` " + "that defeats the browser's own hiding of a closed popover, `popovertarget` on an " + "element that cannot invoke, a target naming no popover, a cut exit animation — and " + "file each as a Problem. The findings come back as data.",
+        name: "check_popovers",
+        report: () => {
+          const findings = problemFindings2(POPOVER_PROBLEM_SOURCE);
+          const n = findings.length;
+          return {
+            data: findings,
+            summary: n === 0 ? "No popover problems found in this document." : `Filed ${n} popover problem${n === 1 ? "" : "s"} in Problems.`
+          };
+        }
+      }
+    },
+    {
+      args: {
+        additionalProperties: false,
+        properties: {
+          path: { items: { type: ["string", "number"] }, type: "array" }
+        },
+        required: ["path"],
+        type: "object"
+      },
+      category: "Document",
+      group: "2_document",
+      id: "document.repairPopoverDisplay",
+      level: "document",
+      menus: [],
+      requires: "a popover whose base rule sets display",
+      run: (_ctx, args) => {
+        const id = "document.repairPopoverDisplay";
+        const tab = repairTab(id);
+        const path = repairPath(id, args);
+        const node = getNodeAtPath2(tab.doc.document, path);
+        const repair = popoverDisplayRepair(node?.style);
+        if (!repair) {
+          throw new RangeError(`command "${id}": nothing to move — this popover sets no display`);
+        }
+        transactDoc(tab, (t) => {
+          for (const prop of repair.base) {
+            mutateUpdateStyle(t, path, prop, "");
+          }
+          for (const at of repair.breakpoints) {
+            mutateUpdateNestedStylePath(t, path, [at], "display", "");
+          }
+          if (repair.openDisplay !== null) {
+            mutateUpdateNestedStyle(t, path, ":popover-open", "display", repair.openDisplay);
+          }
+        });
+        notify2.success("Moved `display` into `:popover-open`.", {
+          key: "popover.repaired.display",
+          source: POPOVER_PROBLEM_SOURCE
+        });
+      },
+      title: "Move display into :popover-open",
+      when: (ctx) => ctx.document.open
+    },
+    {
+      args: {
+        additionalProperties: false,
+        properties: {
+          path: { items: { type: ["string", "number"] }, type: "array" }
+        },
+        required: ["path"],
+        type: "object"
+      },
+      category: "Document",
+      group: "2_document",
+      id: "document.repairPopoverInvoker",
+      level: "document",
+      menus: [],
+      requires: "an element carrying popovertarget that cannot invoke",
+      run: (_ctx, args) => {
+        const id = "document.repairPopoverInvoker";
+        const tab = repairTab(id);
+        const path = repairPath(id, args);
+        transactDoc(tab, (t) => {
+          mutateUpdateAttribute(t, path, "popovertarget");
+          mutateUpdateAttribute(t, path, "popovertargetaction");
+        });
+        notify2.success("Removed the attributes, which did nothing on this element.", {
+          key: "popover.repaired.invoker",
+          source: POPOVER_PROBLEM_SOURCE
+        });
+      },
+      title: "Remove the inert popover attributes",
+      when: (ctx) => ctx.document.open
+    },
+    {
+      args: {
+        additionalProperties: false,
+        properties: {
+          path: { items: { type: ["string", "number"] }, type: "array" }
+        },
+        required: ["path"],
+        type: "object"
+      },
+      category: "Document",
+      group: "2_document",
+      id: "document.repairPopoverMode",
+      level: "document",
+      menus: [],
+      requires: "a popover whose mode is not one of the three keywords",
+      run: (_ctx, args) => {
+        const id = "document.repairPopoverMode";
+        const tab = repairTab(id);
+        const path = repairPath(id, args);
+        transactDoc(tab, (t) => {
+          mutateUpdateAttribute(t, path, "popover", POPOVER_DEFAULT_MODE);
+        });
+        notify2.success(`Set \`popover\` to "${POPOVER_DEFAULT_MODE}".`, {
+          key: "popover.repaired.mode",
+          source: POPOVER_PROBLEM_SOURCE
+        });
+      },
+      title: "Set popover to auto",
+      when: (ctx) => ctx.document.open
+    }
+  ];
+}
+function registerPopoverCommands(registry) {
+  registry.registerAll(popoverCommands());
+}
+
+// src/grid/grid-source.ts
+function cellValuesEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((v, i) => v === b[i]);
+  }
+  if (a !== null && b !== null && typeof a === "object" && typeof b === "object" && !Array.isArray(a) && !Array.isArray(b)) {
+    return a.$ref === b.$ref;
+  }
+  return false;
+}
+var GRID_SCHEME = "grid://";
+function makeGridTabId(ref) {
+  switch (ref.kind) {
+    case "pages": {
+      return `${GRID_SCHEME}pages`;
+    }
+    case "library": {
+      return `${GRID_SCHEME}library`;
+    }
+    case "collection": {
+      return `${GRID_SCHEME}collection/${encodeURIComponent(ref.name)}`;
+    }
+    default: {
+      return `${GRID_SCHEME}data/${encodeURIComponent(ref.connection)}/${encodeURIComponent(ref.table)}`;
+    }
+  }
+}
+function isGridTabId(id) {
+  return id.startsWith(GRID_SCHEME);
+}
+function parseGridTabId(id) {
+  if (!isGridTabId(id)) {
+    return null;
+  }
+  const parts = id.slice(GRID_SCHEME.length).split("/");
+  if (parts[0] === "pages" && parts.length === 1) {
+    return { kind: "pages" };
+  }
+  if (parts[0] === "library" && parts.length === 1) {
+    return { kind: "library" };
+  }
+  if (parts[0] === "collection" && parts.length === 2 && parts[1]) {
+    return { kind: "collection", name: decodeURIComponent(parts[1]) };
+  }
+  if (parts[0] === "data" && parts.length === 3 && parts[1] && parts[2]) {
+    return {
+      connection: decodeURIComponent(parts[1]),
+      kind: "data",
+      table: decodeURIComponent(parts[2])
+    };
+  }
+  return null;
+}
+function gridTabLabel(id) {
+  const ref = parseGridTabId(id);
+  if (!ref) {
+    return null;
+  }
+  switch (ref.kind) {
+    case "pages": {
+      return "Pages · grid";
+    }
+    case "library": {
+      return "Library";
+    }
+    case "collection": {
+      return `${ref.name} · grid`;
+    }
+    default: {
+      return `${ref.table} @ ${ref.connection} · grid`;
+    }
+  }
+}
+
+// src/grid/edit-buffer.ts
+var _tempCounter = 0;
+function createEditBuffer(opts) {
+  const coalesceMs = opts.coalesceMs ?? 800;
+  const now = opts.now ?? (() => Date.now());
+  const state = reactive({
+    deletes: new Set,
+    errors: new Map,
+    inserts: new Map,
+    pending: new Map,
+    redoStack: [],
+    stale: new Set,
+    undoStack: []
+  });
+  let groupOps = null;
+  const setError = (rowKey, field, message) => {
+    const row = state.errors.get(rowKey);
+    if (row) {
+      row.set(field, message);
+    } else {
+      state.errors.set(rowKey, new Map([[field, message]]));
+    }
+  };
+  const clearCellError = (rowKey, field) => {
+    const row = state.errors.get(rowKey);
+    row?.delete(field);
+    if (row?.size === 0) {
+      state.errors.delete(rowKey);
+    }
+  };
+  const pushOp = (op) => {
+    state.redoStack.length = 0;
+    if (groupOps) {
+      groupOps.push(op);
+      return;
+    }
+    const last = state.undoStack.at(-1);
+    if (op.kind === "cell" && last?.kind === "cell" && last.rowKey === op.rowKey && last.field === op.field && op.at - last.at <= coalesceMs) {
+      last.after = op.after;
+      last.at = op.at;
+      return;
+    }
+    state.undoStack.push(op);
+  };
+  const writeCell = (rowKey, field, value) => {
+    const insertCells = state.inserts.get(rowKey);
+    if (insertCells) {
+      if (value === null) {
+        delete insertCells[field];
+      } else {
+        insertCells[field] = value;
+      }
+      return;
+    }
+    if (cellValuesEqual(value, opts.resolveBaseline(rowKey, field))) {
+      const row = state.pending.get(rowKey);
+      row?.delete(field);
+      if (row?.size === 0) {
+        state.pending.delete(rowKey);
+      }
+      return;
+    }
+    const row = state.pending.get(rowKey);
+    if (row) {
+      row.set(field, { value });
+    } else {
+      state.pending.set(rowKey, new Map([[field, { value }]]));
+    }
+  };
+  const effectiveValue = (rowKey, field) => {
+    const insertCells = state.inserts.get(rowKey);
+    if (insertCells) {
+      return insertCells[field] ?? null;
+    }
+    const pending = state.pending.get(rowKey)?.get(field);
+    return pending ? pending.value : opts.resolveBaseline(rowKey, field);
+  };
+  const cellError = (rowKey, field) => {
+    const row = state.errors.get(rowKey);
+    return row?.get(field) ?? row?.get("*") ?? null;
+  };
+  const applyOp = (op, direction) => {
+    switch (op.kind) {
+      case "cell": {
+        writeCell(op.rowKey, op.field, direction === "undo" ? op.before : op.after);
+        break;
+      }
+      case "insert": {
+        if (direction === "undo") {
+          state.inserts.delete(op.tempKey);
+        } else {
+          state.inserts.set(op.tempKey, { ...op.cells });
+        }
+        break;
+      }
+      case "drop-insert": {
+        if (direction === "undo") {
+          state.inserts.set(op.tempKey, { ...op.cells });
+        } else {
+          state.inserts.delete(op.tempKey);
+        }
+        break;
+      }
+      case "delete": {
+        if (direction === "undo") {
+          state.deletes.delete(op.rowKey);
+        } else {
+          state.deletes.add(op.rowKey);
+        }
+        break;
+      }
+      default: {
+        const ops = direction === "undo" ? op.ops.toReversed() : op.ops;
+        for (const child of ops) {
+          applyOp(child, direction);
+        }
+        break;
+      }
+    }
+  };
+  const beginGroup = () => {
+    if (groupOps) {
+      throw new Error("edit-buffer: groups may not nest");
+    }
+    groupOps = [];
+  };
+  const endGroup = () => {
+    const ops = groupOps;
+    groupOps = null;
+    if (!ops) {
+      return;
+    }
+    if (ops.length === 1) {
+      state.undoStack.push(ops[0]);
+    } else if (ops.length > 1) {
+      state.undoStack.push({ kind: "group", ops });
+    }
+  };
+  const pruneHistory = (dropRow) => {
+    const keep = (op) => {
+      switch (op.kind) {
+        case "cell": {
+          return dropRow(op.rowKey) ? null : op;
+        }
+        case "insert":
+        case "drop-insert": {
+          return dropRow(op.tempKey) ? null : op;
+        }
+        case "delete": {
+          return dropRow(op.rowKey) ? null : op;
+        }
+        default: {
+          const ops = op.ops.map((child) => keep(child)).filter((o) => o !== null);
+          return ops.length > 0 ? { kind: "group", ops } : null;
+        }
+      }
+    };
+    state.undoStack = state.undoStack.map(keep).filter((o) => o !== null);
+    state.redoStack = state.redoStack.map(keep).filter((o) => o !== null);
+  };
+  return {
+    applyCommitResult(result) {
+      const committedRows = new Set;
+      for (const cell of result.cells) {
+        if (cell.ok) {
+          const row = state.pending.get(cell.rowKey);
+          row?.delete(cell.field);
+          if (row?.size === 0) {
+            state.pending.delete(cell.rowKey);
+          }
+          clearCellError(cell.rowKey, cell.field);
+        } else {
+          setError(cell.rowKey, cell.field, cell.error ?? "Save failed");
+          if (cell.stale) {
+            state.stale.add(cell.rowKey);
+          }
+        }
+      }
+      for (const ins of result.inserts) {
+        if (ins.ok) {
+          state.inserts.delete(ins.tempKey);
+          state.errors.delete(ins.tempKey);
+          committedRows.add(ins.tempKey);
+        } else {
+          setError(ins.tempKey, "*", ins.error ?? "Insert failed");
+        }
+      }
+      for (const del of result.deletes) {
+        if (del.ok) {
+          state.deletes.delete(del.rowKey);
+          state.pending.delete(del.rowKey);
+          state.errors.delete(del.rowKey);
+          committedRows.add(del.rowKey);
+        } else {
+          setError(del.rowKey, "*", del.error ?? "Delete failed");
+          if (del.stale) {
+            state.stale.add(del.rowKey);
+          }
+        }
+      }
+      for (const row of committedRows) {
+        state.stale.delete(row);
+      }
+      if (committedRows.size > 0) {
+        pruneHistory((rowKey) => committedRows.has(rowKey));
+      }
+    },
+    buildBatch() {
+      const cells = [];
+      for (const [rowKey, fields] of state.pending) {
+        if (state.deletes.has(rowKey)) {
+          continue;
+        }
+        for (const [field, cell] of fields) {
+          cells.push({
+            baseline: opts.resolveBaseline(rowKey, field),
+            field,
+            rowKey,
+            value: cell.value
+          });
+        }
+      }
+      return {
+        cells,
+        deletes: [...state.deletes].map((rowKey) => ({ rowKey })),
+        inserts: [...state.inserts].map(([tempKey, insertCells]) => ({
+          cells: { ...insertCells },
+          tempKey
+        }))
+      };
+    },
+    canRedo: () => state.redoStack.length > 0,
+    canUndo: () => state.undoStack.length > 0,
+    cellError,
+    cellState(rowKey, field) {
+      if (cellError(rowKey, field) !== null) {
+        return "error";
+      }
+      if (state.stale.has(rowKey)) {
+        return "stale";
+      }
+      if (state.inserts.has(rowKey) || state.pending.get(rowKey)?.has(field)) {
+        return "dirty";
+      }
+      return "clean";
+    },
+    deleteRow(rowKey) {
+      if (state.deletes.has(rowKey)) {
+        return;
+      }
+      const insertCells = state.inserts.get(rowKey);
+      if (insertCells) {
+        const cells = { ...insertCells };
+        state.inserts.delete(rowKey);
+        state.errors.delete(rowKey);
+        state.stale.delete(rowKey);
+        pushOp({ cells, kind: "drop-insert", tempKey: rowKey });
+        return;
+      }
+      state.deletes.add(rowKey);
+      pushOp({ kind: "delete", rowKey });
+    },
+    dirtyCount() {
+      let count = state.inserts.size + state.deletes.size;
+      for (const [rowKey, fields] of state.pending) {
+        if (!state.deletes.has(rowKey)) {
+          count += fields.size;
+        }
+      }
+      return count;
+    },
+    discardRow(rowKey) {
+      state.pending.delete(rowKey);
+      state.deletes.delete(rowKey);
+      state.inserts.delete(rowKey);
+      state.errors.delete(rowKey);
+      state.stale.delete(rowKey);
+      pruneHistory((key) => key === rowKey);
+    },
+    effectiveValue,
+    beginGroup,
+    endGroup,
+    group(fn) {
+      beginGroup();
+      try {
+        fn();
+      } finally {
+        endGroup();
+      }
+    },
+    insertRow(cells = {}) {
+      _tempCounter += 1;
+      const tempKey = `__new-${_tempCounter}`;
+      state.inserts.set(tempKey, { ...cells });
+      pushOp({ cells: { ...cells }, kind: "insert", tempKey });
+      return tempKey;
+    },
+    isDirty: () => state.pending.size > 0 || state.inserts.size > 0 || state.deletes.size > 0,
+    isInsertKey: (rowKey) => state.inserts.has(rowKey),
+    markStale(rowKeys) {
+      for (const rowKey of rowKeys) {
+        state.stale.add(rowKey);
+      }
+    },
+    redo() {
+      const op = state.redoStack.pop();
+      if (!op) {
+        return false;
+      }
+      applyOp(op, "redo");
+      state.undoStack.push(op);
+      return true;
+    },
+    reset() {
+      state.pending.clear();
+      state.inserts.clear();
+      state.deletes.clear();
+      state.errors.clear();
+      state.stale.clear();
+      state.undoStack.length = 0;
+      state.redoStack.length = 0;
+    },
+    rowState(rowKey) {
+      if (state.deletes.has(rowKey)) {
+        return "pending-delete";
+      }
+      if (state.inserts.has(rowKey)) {
+        return "pending-insert";
+      }
+      if (state.stale.has(rowKey)) {
+        return "stale";
+      }
+      if (state.pending.has(rowKey) || state.errors.has(rowKey)) {
+        return "dirty";
+      }
+      return "clean";
+    },
+    setCell(rowKey, field, value) {
+      const before = effectiveValue(rowKey, field);
+      if (cellValuesEqual(before, value)) {
+        return;
+      }
+      writeCell(rowKey, field, value);
+      pushOp({ after: value, at: now(), before, field, kind: "cell", rowKey });
+    },
+    state,
+    undo() {
+      const op = state.undoStack.pop();
+      if (!op) {
+        return false;
+      }
+      applyOp(op, "undo");
+      state.redoStack.push(op);
+      return true;
+    }
+  };
+}
+
+// src/grid/schema-columns.ts
+var KIND_WIDTHS = {
+  array: 220,
+  boolean: 70,
+  date: 130,
+  enum: 140,
+  image: 180,
+  number: 110,
+  readonly: 200,
+  reference: 200,
+  string: 180,
+  text: 340
+};
+function clampWidth(maxLen) {
+  return Math.min(340, Math.max(90, Math.round(maxLen * 7.5)));
+}
+function kindForProp(prop) {
+  if (prop.$ref) {
+    return "reference";
+  }
+  if (prop.enum !== undefined && Array.isArray(prop.enum)) {
+    return "enum";
+  }
+  const format = prop.type === "array" ? undefined : prop.format;
+  if (isMediaFormat(format)) {
+    return "image";
+  }
+  if (format === "date" || format === "date-time") {
+    return "date";
+  }
+  switch (prop.type) {
+    case "number":
+    case "integer": {
+      return "number";
+    }
+    case "boolean": {
+      return "boolean";
+    }
+    case "array": {
+      return "array";
+    }
+    case "object": {
+      return "readonly";
+    }
+    default: {
+      return (prop.maxLength ?? 0) > 200 || prop.format === "markdown" ? "text" : "string";
+    }
+  }
+}
+function titleForField(field) {
+  const spaced = field.replaceAll(/([a-z0-9])([A-Z])/g, "$1 $2").replaceAll(/[_-]+/g, " ").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+function columnsFromSchema(schema, opts = {}) {
+  const props = Object.entries(schema?.properties ?? {});
+  const required = new Set(schema?.required);
+  const readonly = new Set(opts.readonlyFields);
+  const columns = props.map(([field, prop]) => {
+    const kind = readonly.has(field) ? "readonly" : kindForProp(prop);
+    const enumLen = Array.isArray(prop.enum) ? Math.max(...prop.enum.map((v) => String(v).length), 4) : 0;
+    return {
+      editable: kind !== "readonly",
+      field,
+      kind,
+      pk: field === opts.idField,
+      required: required.has(field),
+      schema: prop,
+      title: titleForField(field),
+      widthHint: kind === "enum" ? clampWidth(enumLen + 3) : KIND_WIDTHS[kind]
+    };
+  });
+  columns.sort((a, b) => {
+    const rank = (c) => c.pk ? 0 : c.required ? 1 : 2;
+    const diff = rank(a) - rank(b);
+    return diff === 0 ? 0 : diff;
+  });
+  return columns;
+}
+function inferColumnsFromRows(rows, sampleLimit = 50) {
+  const sample = rows.slice(0, sampleLimit);
+  const fields = [];
+  for (const row of sample) {
+    for (const key of Object.keys(row)) {
+      if (!fields.includes(key)) {
+        fields.push(key);
+      }
+    }
+  }
+  return fields.map((field) => {
+    const values = sample.map((row) => row[field]).filter((v) => v !== null && v !== undefined && v !== "");
+    const kind = inferKind(values);
+    const maxLen = Math.max(...values.map((v) => cellToText(v).length), field.length, 4);
+    return {
+      editable: true,
+      field,
+      kind,
+      title: titleForField(field),
+      widthHint: kind === "string" || kind === "text" ? clampWidth(maxLen) : KIND_WIDTHS[kind]
+    };
+  });
+}
+function inferKind(values) {
+  if (values.length === 0) {
+    return "string";
+  }
+  if (values.some((v) => Array.isArray(v))) {
+    return "array";
+  }
+  const texts = values.map(String);
+  if (values.every((v) => typeof v === "boolean") || texts.every((t) => /^(true|false)$/i.test(t))) {
+    return "boolean";
+  }
+  if (values.every((v) => typeof v === "number") || texts.every((t) => t.trim() !== "" && !Number.isNaN(Number(t.replaceAll(/[$€£¥,\s]/g, ""))))) {
+    return "number";
+  }
+  if (texts.every((t) => /^\d{4}-\d{2}-\d{2}([T ].*)?$/.test(t))) {
+    return "date";
+  }
+  if (texts.some((t) => t.length > 200)) {
+    return "text";
+  }
+  return "string";
+}
+function coerceCellInput(raw, col) {
+  if (raw === null || raw === undefined) {
+    return null;
+  }
+  switch (col.kind) {
+    case "number": {
+      if (typeof raw === "number") {
+        return Number.isNaN(raw) ? null : raw;
+      }
+      const cleaned = String(raw).trim().replaceAll(/[$€£¥,\s]/g, "");
+      if (cleaned === "") {
+        return null;
+      }
+      const n = Number(cleaned);
+      return Number.isNaN(n) ? null : n;
+    }
+    case "boolean": {
+      if (typeof raw === "boolean") {
+        return raw;
+      }
+      return String(raw).trim().toLowerCase() === "true";
+    }
+    case "array": {
+      if (Array.isArray(raw)) {
+        return raw.map(String);
+      }
+      const text = String(raw).trim();
+      return text === "" ? [] : text.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    case "reference": {
+      if (typeof raw === "object" && raw !== null && "$ref" in raw) {
+        const ref = raw.$ref;
+        return typeof ref === "string" && ref !== "" ? ref : null;
+      }
+      const text = String(raw).trim();
+      return text === "" ? null : text;
+    }
+    default: {
+      const text = String(raw);
+      return text === "" ? null : text;
+    }
+  }
+}
+function cellToText(value) {
+  if (value === null || value === undefined) {
+    return "";
+  }
+  if (Array.isArray(value)) {
+    return value.join(", ");
+  }
+  if (typeof value === "object") {
+    return value.$ref;
+  }
+  return String(value);
+}
+
+// src/grid/grid-controller.ts
+var ROW_KEY_FIELD = "__key";
+var _controllers = new WeakMap;
+function getGridController(tab) {
+  return tab ? _controllers.get(toRaw(tab)) ?? null : null;
+}
+function createGridController(tab, source) {
+  const state = reactive({
+    columns: [],
+    error: null,
+    grouping: null,
+    loading: false,
+    query: {},
+    rows: [],
+    saving: false,
+    total: 0
+  });
+  let rowByKey = new Map;
+  const indexRows = (rows) => {
+    rowByKey = new Map(rows.map((row) => [row.key, row]));
+  };
+  const buffer = createEditBuffer({
+    resolveBaseline: (rowKey, field) => rowByKey.get(rowKey)?.cells[field] ?? null
+  });
+  const reloadRows = async () => {
+    const result = await source.rows(state.query);
+    state.rows = result.rows;
+    state.total = result.total;
+    indexRows(result.rows);
+  };
+  const requiredViolations = (batch) => {
+    const required = state.columns.filter((c) => c.required && c.editable);
+    if (required.length === 0) {
+      return null;
+    }
+    const cells = batch.cells.filter((cell) => cell.value === null && required.some((c) => c.field === cell.field)).map((cell) => ({ error: "Required", field: cell.field, ok: false, rowKey: cell.rowKey }));
+    const inserts = batch.inserts.filter((insert) => required.some((c) => insert.cells[c.field] === null || insert.cells[c.field] === undefined)).map((insert) => {
+      const missing = required.filter((c) => insert.cells[c.field] === null || insert.cells[c.field] === undefined).map((c) => c.field).join(", ");
+      return { error: `Missing required: ${missing}`, ok: false, tempKey: insert.tempKey };
+    });
+    if (cells.length === 0 && inserts.length === 0) {
+      return null;
+    }
+    return { cells, deletes: [], inserts };
+  };
+  const isBlank = (value) => value === null || value === "" || Array.isArray(value) && value.length === 0;
+  const compareCells = (a, b, kind) => {
+    if (kind === "number") {
+      return (typeof a === "number" ? a : 0) - (typeof b === "number" ? b : 0);
+    }
+    if (kind === "boolean") {
+      return (a === true ? 1 : 0) - (b === true ? 1 : 0);
+    }
+    return cellToText(a).localeCompare(cellToText(b));
+  };
+  const orderedKeys = () => {
+    let keys = state.rows.map((row) => row.key);
+    const { dir, orderBy } = state.query;
+    if (orderBy && !source.capabilities.remoteSort) {
+      const kind = state.columns.find((column) => column.field === orderBy)?.kind;
+      const sign = dir === "desc" ? -1 : 1;
+      keys = keys.toSorted((ka, kb) => {
+        const a = buffer.effectiveValue(ka, orderBy);
+        const b = buffer.effectiveValue(kb, orderBy);
+        if (isBlank(a) !== isBlank(b)) {
+          return isBlank(a) ? 1 : -1;
+        }
+        return sign * compareCells(a, b, kind);
+      });
+    }
+    return state.grouping ? [...groupBuckets(keys).values()].flat() : keys;
+  };
+  const groupBuckets = (keys) => {
+    const buckets = new Map;
+    for (const key of keys) {
+      const value = cellToText(buffer.effectiveValue(key, state.grouping));
+      const bucket = buckets.get(value);
+      if (bucket) {
+        bucket.push(key);
+      } else {
+        buckets.set(value, [key]);
+      }
+    }
+    return buckets;
+  };
+  let viewBinding = null;
+  const syncView = () => viewBinding?.refreshData();
+  const controller = {
+    addRow(cells = {}) {
+      const tempKey = buffer.insertRow(cells);
+      syncView();
+      return tempKey;
+    },
+    bindView(view) {
+      viewBinding = view;
+    },
+    buffer,
+    deleteRows(rowKeys) {
+      if (rowKeys.length === 0) {
+        return;
+      }
+      buffer.group(() => {
+        for (const rowKey of rowKeys) {
+          buffer.deleteRow(rowKey);
+        }
+      });
+      syncView();
+    },
+    discardRow(rowKey) {
+      buffer.discardRow(rowKey);
+      syncView();
+    },
+    replaceAll(find, replace) {
+      if (find === "") {
+        return 0;
+      }
+      const textColumns = state.columns.filter((column) => column.editable && (column.kind === "string" || column.kind === "text"));
+      const rowKeys = [...state.rows.map((row) => row.key), ...buffer.state.inserts.keys()];
+      let changed = 0;
+      buffer.group(() => {
+        for (const rowKey of rowKeys) {
+          if (buffer.rowState(rowKey) === "pending-delete") {
+            continue;
+          }
+          for (const column of textColumns) {
+            const value = buffer.effectiveValue(rowKey, column.field);
+            if (typeof value === "string" && value.includes(find)) {
+              buffer.setCell(rowKey, column.field, value.replaceAll(find, replace));
+              changed += 1;
+            }
+          }
+        }
+      });
+      if (changed > 0) {
+        syncView();
+      }
+      return changed;
+    },
+    effectiveRows() {
+      const plain = (value) => Array.isArray(value) ? [...value] : value !== null && typeof value === "object" ? { $ref: value.$ref } : value;
+      const rowObject = (key) => {
+        const cells = { [ROW_KEY_FIELD]: key };
+        for (const column of state.columns) {
+          cells[column.field] = plain(buffer.effectiveValue(key, column.field));
+        }
+        return cells;
+      };
+      const rows = orderedKeys().map((key) => rowObject(key));
+      for (const [tempKey] of buffer.state.inserts) {
+        rows.push(rowObject(tempKey));
+      }
+      return rows;
+    },
+    groups() {
+      if (!state.grouping) {
+        return [];
+      }
+      return [...groupBuckets(orderedKeys())].map(([value, keys]) => ({
+        count: keys.length,
+        value
+      }));
+    },
+    async load() {
+      state.loading = true;
+      state.error = null;
+      try {
+        state.columns = await source.columns();
+        await reloadRows();
+      } catch (error) {
+        state.error = errorMessage2(error);
+      } finally {
+        state.loading = false;
+      }
+      syncView();
+    },
+    async refresh() {
+      if (buffer.isDirty()) {
+        const confirmed = await showConfirmDialog2("Refresh Grid", `Discard ${buffer.dirtyCount()} pending change(s) and reload?`, { confirmLabel: "Discard & Reload", destructive: true });
+        if (!confirmed) {
+          return;
+        }
+      }
+      buffer.reset();
+      await source.refresh?.();
+      await this.load();
+    },
+    async save() {
+      if (state.saving) {
+        return;
+      }
+      const batch = buffer.buildBatch();
+      const changeCount = batch.cells.length + batch.inserts.length + batch.deletes.length;
+      if (changeCount === 0) {
+        notify2.info("No grid changes to save.", { key: "grid.save" });
+        return;
+      }
+      const violations = requiredViolations(batch);
+      if (violations) {
+        buffer.applyCommitResult(violations);
+        notify2.warn("Required cells are empty — fix the marked rows, then save again.", {
+          key: "grid.save",
+          source: "Data",
+          tier: "problem"
+        });
+        return;
+      }
+      if (batch.deletes.length > 0) {
+        const confirmed = await showConfirmDialog2("Delete Rows", `Save will permanently delete ${batch.deletes.length} row(s). Continue?`, { confirmLabel: "Delete & Save", destructive: true });
+        if (!confirmed) {
+          return;
+        }
+      }
+      const affectedRows = new Set(batch.cells.map((c) => c.rowKey)).size + batch.inserts.length + batch.deletes.length;
+      const progress = affectedRows > 5 ? showProgressModal({ title: "Saving grid" }) : null;
+      state.saving = true;
+      try {
+        const result = await source.commit(batch);
+        const cellKey = (rowKey, field) => `${rowKey}\x00${field}`;
+        const batchCells = new Map(batch.cells.map((c) => [cellKey(c.rowKey, c.field), c]));
+        for (const outcome of result.cells) {
+          const cell = batchCells.get(cellKey(outcome.rowKey, outcome.field));
+          if (outcome.ok && cell) {
+            const row = rowByKey.get(outcome.rowKey);
+            if (row) {
+              row.cells[outcome.field] = cell.value;
+            }
+          }
+        }
+        buffer.applyCommitResult(result);
+        const structural = result.inserts.some((r) => r.ok) || result.deletes.some((r) => r.ok);
+        if (structural) {
+          await reloadRows();
+        }
+        const okCount = result.cells.filter((r) => r.ok).length + result.inserts.filter((r) => r.ok).length + result.deletes.filter((r) => r.ok).length;
+        const failed = changeCount - okCount;
+        const staleCount = result.cells.filter((r) => r.stale).length + result.deletes.filter((r) => r.stale).length;
+        if (failed === 0) {
+          notify2.success(`Saved ${okCount} change(s).`, { key: "grid.save" });
+        } else {
+          notify2.error(`Saved ${okCount} · ${failed} failed${staleCount ? ` (${staleCount} stale)` : ""} — kept pending.`, { action: "file.save", key: "grid.save", source: "Data" });
+        }
+      } catch (error) {
+        notify2.error("Could not save the grid.", {
+          action: "file.save",
+          detail: errorMessage2(error),
+          key: "grid.save",
+          source: "Data"
+        });
+      } finally {
+        state.saving = false;
+        progress?.done();
+        syncView();
+      }
+    },
+    serializeForSource() {
+      if (!source.serializeForSource) {
+        return null;
+      }
+      return source.serializeForSource(buffer.buildBatch());
+    },
+    async setQuery(query) {
+      state.query = query;
+      state.loading = true;
+      try {
+        await reloadRows();
+      } catch (error) {
+        state.error = errorMessage2(error);
+      } finally {
+        state.loading = false;
+      }
+      syncView();
+    },
+    setGrouping(field) {
+      state.grouping = field;
+      syncView();
+    },
+    async setSort(sort) {
+      const query = { ...state.query };
+      if (sort) {
+        query.orderBy = sort.field;
+        query.dir = sort.dir;
+      } else {
+        delete query.orderBy;
+        delete query.dir;
+      }
+      if (!source.capabilities.remoteSort) {
+        state.query = query;
+        syncView();
+        return;
+      }
+      await this.setQuery(query);
+    },
+    source,
+    state,
+    tab
+  };
+  tab.scope.run(() => {
+    effect(() => {
+      tab.doc.dirty = buffer.isDirty();
+    });
+    setHistoryDelegate(tab, {
+      canRedo: () => buffer.canRedo(),
+      canUndo: () => buffer.canUndo(),
+      redo: () => {
+        buffer.redo();
+        syncView();
+      },
+      undo: () => {
+        buffer.undo();
+        syncView();
+      }
+    });
+    const platform = getPlatform2();
+    if (platform.subscribeFileEvents && source.backingPaths) {
+      const unsubscribe = platform.subscribeFileEvents((events) => {
+        const backing = source.backingPaths();
+        const hitKeys = new Set;
+        for (const event of events) {
+          if (event.isDir) {
+            continue;
+          }
+          const path = event.path.replaceAll("\\", "/");
+          const rowKey = backing.get(path);
+          if (rowKey !== undefined && !isRecentLocal2(path)) {
+            hitKeys.add(rowKey);
+          }
+        }
+        if (hitKeys.size === 0) {
+          return;
+        }
+        if (buffer.isDirty()) {
+          const keys = hitKeys.has("*") ? state.rows.map((row) => row.key) : [...hitKeys];
+          buffer.markStale(keys);
+          notify2.warn("Grid rows changed on disk — marked stale; refresh to reload.", {
+            key: "grid.stale",
+            source: "Data"
+          });
+          syncView();
+        } else {
+          controller.refresh();
+        }
+      });
+      onScopeDispose(unsubscribe);
+    }
+    onScopeDispose(() => {
+      setHistoryDelegate(tab, null);
+      _controllers.delete(toRaw(tab));
+      source.dispose?.();
+    });
+  });
+  _controllers.set(toRaw(tab), controller);
+  return controller;
+}
+
+// src/files/serialize-document.ts
+async function serializeDocument(tab) {
+  const grid = getGridController(tab);
+  const gridText = grid?.serializeForSource();
+  if (gridText) {
+    return gridText;
+  }
+  await loadFormats2();
+  const sourceFormat = formatByName2(tab.doc.sourceFormat);
+  if (sourceFormat?.capabilities.serialize) {
+    const fm = tab.doc.content?.frontmatter || {};
+    const doc = tab.doc.document;
+    const fullDoc = { ...fm, ...doc, children: doc.children ?? [] };
+    return formatSerialize2(sourceFormat.name, fullDoc, { mode: "roundtrip" });
+  }
+  if (tab.doc.mode === "content") {
+    const format = defaultContentFormat2();
+    if (format) {
+      const fm = tab.doc.content?.frontmatter ?? {};
+      const hasFrontmatter = Object.keys(fm).length > 0;
+      const fullDoc = { ...fm, ...tab.doc.document };
+      return formatSerialize2(format.name, fullDoc, {
+        frontmatter: hasFrontmatter,
+        mode: "roundtrip"
+      });
+    }
+  }
+  return serializeJson(tab.doc.document, tab.doc.layout ?? null);
+}
+
+// src/preview/preview-overlay.ts
+var PUBLISH_DEBOUNCE_MS = 200;
+var PUBLISH_MAX_WAIT_MS = 500;
+var MAX_ENTRY_BYTES = 2 * 1024 * 1024;
+var published = new Map;
+var armed = false;
+var scope = null;
+var timer = null;
+var burstStartedAt = null;
+var inFlight = null;
+function dirtyTabs() {
+  const tabs = [];
+  for (const tab of workspace2.tabs.values()) {
+    if (tab.doc.dirty && tab.documentPath) {
+      tabs.push(tab);
+    }
+  }
+  return tabs;
+}
+async function publish() {
+  if (!hasPlatform2()) {
+    return;
+  }
+  const platform = getPlatform2();
+  if (!platform.setPreviewOverlay || !platform.clearPreviewOverlay) {
+    return;
+  }
+  const live = new Set;
+  for (const tab of dirtyTabs()) {
+    const path = tab.documentPath.replace(/^\.\//, "");
+    let text;
+    try {
+      text = await serializeDocument(tab);
+    } catch {
+      continue;
+    }
+    if (text.length > MAX_ENTRY_BYTES) {
+      continue;
+    }
+    live.add(path);
+    if (published.get(path) === text) {
+      continue;
+    }
+    published.set(path, text);
+    await platform.setPreviewOverlay(path, text);
+  }
+  for (const path of published.keys()) {
+    if (!live.has(path)) {
+      published.delete(path);
+      await platform.clearPreviewOverlay(path);
+    }
+  }
+}
+function schedule() {
+  if (!armed) {
+    return;
+  }
+  const now = Date.now();
+  burstStartedAt ??= now;
+  if (timer) {
+    clearTimeout(timer);
+  }
+  const waited = now - burstStartedAt;
+  const delay = Math.max(0, Math.min(PUBLISH_DEBOUNCE_MS, PUBLISH_MAX_WAIT_MS - waited));
+  timer = setTimeout(() => {
+    timer = null;
+    burstStartedAt = null;
+    inFlight = publish().finally(() => {
+      inFlight = null;
+    });
+  }, delay);
+}
+function notePreviewOverlayEdit() {
+  schedule();
+}
+function armPreviewOverlay() {
+  if (armed) {
+    return;
+  }
+  armed = true;
+  scope = effectScope();
+  scope.run(() => {
+    effect(() => {
+      for (const tab of workspace2.tabs.values()) {
+        tab.doc.dirty;
+        tab.doc.document;
+      }
+      schedule();
+    });
+  });
+}
+function disarmPreviewOverlay() {
+  armed = false;
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  burstStartedAt = null;
+  scope?.stop();
+  scope = null;
+  published.clear();
+}
+async function flushPreviewOverlay() {
+  if (!armed) {
+    return;
+  }
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+    burstStartedAt = null;
+  }
+  await inFlight;
+  await publish();
+}
+
+// ../schema/src/media-type.ts
+var RESTRICTED_NAME = /^[A-Za-z0-9][A-Za-z0-9!#$&^_.+-]{0,126}$/;
+var KNOWN_TREES = new Set(["vnd", "prs", "x"]);
+function parseMediaType(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const [essence, ...paramParts] = value.split(";");
+  const slash = (essence ?? "").indexOf("/");
+  if (slash === -1) {
+    return null;
+  }
+  const type = (essence ?? "").slice(0, slash).trim().toLowerCase();
+  const rawSubtype = (essence ?? "").slice(slash + 1).trim().toLowerCase();
+  if (!RESTRICTED_NAME.test(type) || !RESTRICTED_NAME.test(rawSubtype)) {
+    return null;
+  }
+  const plus = rawSubtype.lastIndexOf("+");
+  const suffix = plus === -1 ? null : rawSubtype.slice(plus + 1);
+  const withoutSuffix = plus === -1 ? rawSubtype : rawSubtype.slice(0, plus);
+  if (suffix === "") {
+    return null;
+  }
+  const dot = withoutSuffix.indexOf(".");
+  const facet = dot === -1 ? null : withoutSuffix.slice(0, dot);
+  const tree = facet !== null && KNOWN_TREES.has(facet) ? facet : null;
+  const subtype = tree === null ? withoutSuffix : withoutSuffix.slice(tree.length + 1);
+  if (subtype === "") {
+    return null;
+  }
+  const parameters = {};
+  for (const part of paramParts) {
+    const eq = part.indexOf("=");
+    if (eq === -1) {
+      return null;
+    }
+    const name = part.slice(0, eq).trim().toLowerCase();
+    let paramValue = part.slice(eq + 1).trim();
+    if (name === "") {
+      return null;
+    }
+    if (paramValue.startsWith('"') && paramValue.endsWith('"') && paramValue.length >= 2) {
+      paramValue = paramValue.slice(1, -1);
+    }
+    parameters[name] = paramValue;
+  }
+  return { parameters, subtype, suffix, tree, type };
+}
+function mediaTypeEssence(value) {
+  const media = parseMediaType(value);
+  if (media === null) {
+    return null;
+  }
+  const facet = media.tree === null ? "" : `${media.tree}.`;
+  const suffix = media.suffix === null ? "" : `+${media.suffix}`;
+  return `${media.type}/${facet}${media.subtype}${suffix}`;
+}
+var MARKDOWN_MEDIA_TYPE = "text/markdown; variant=GFM";
+var YAML_MEDIA_TYPE = "application/yaml";
+var MEDIA_TYPE_BY_EXTENSION = {
+  ".markdown": `${MARKDOWN_MEDIA_TYPE}; charset=utf-8`,
+  ".md": `${MARKDOWN_MEDIA_TYPE}; charset=utf-8`,
+  ".yaml": `${YAML_MEDIA_TYPE}; charset=utf-8`,
+  ".yml": `${YAML_MEDIA_TYPE}; charset=utf-8`
+};
+
+// src/files/file-ops.ts
+async function parseFormatSource(format, source) {
+  const doc = await formatParse2(format.name, source);
+  return splitFormatDocument2(format, doc);
+}
+async function parseSourceForPath2(path, source) {
+  await loadFormats2();
+  const format = formatForPath2(path);
+  if (!format || !format.capabilities.parse) {
+    throw noFormatError2(path);
+  }
+  const result = await parseFormatSource(format, source);
+  return { ...result, format };
+}
+var parseCollabSource2 = async (tab, text) => {
+  if (tab.documentPath && formatForPath2(tab.documentPath)) {
+    const parsed = await parseSourceForPath2(tab.documentPath, text);
+    return { document: parsed.document, frontmatter: parsed.frontmatter };
+  }
+  const parsed = parseJsonDocument(text);
+  tab.doc.layout = parsed.layout;
+  return { document: parsed.document };
+};
+var _onDocumentSaved = () => {};
+function setDocumentSavedListener2(listener) {
+  _onDocumentSaved = listener;
+}
+function reportSaved(tab) {
+  noteDocumentSaved(tab.documentPath);
+  const doc = tab.doc.document;
+  _onDocumentSaved(tab.documentPath, doc);
+  const warning = typeof doc.tagName === "string" && doc.tagName.includes("-") ? validateComponentSlots(doc) : null;
+  if (warning) {
+    notify2.warn(warning, {
+      key: `slots:${tab.documentPath ?? tab.id}`,
+      ...tab.documentPath === null ? {} : { path: tab.documentPath },
+      source: "Components",
+      tier: "problem"
+    });
+  }
+  reportPopoverProblems(doc, tab.documentPath ?? undefined);
+}
+function hasSerializableDocument(tab) {
+  return !isMediaFile(tab.documentPath ?? "");
+}
+async function saveFile2(tab = activeTab2.value) {
+  if (!tab) {
+    return false;
+  }
+  await flushCanvasEdits2(tab.id);
+  if (collabReadOnly(tab)) {
+    notify2.warn(`You have read access to this session — changes to ${tab.documentPath ?? "this document"} ` + `stay in your browser and cannot be saved.`, {
+      action: "file.save",
+      key: `save.readOnly:${tab.documentPath ?? tab.id}`,
+      ...tab.documentPath === null ? {} : { path: tab.documentPath },
+      source: "Collaboration"
+    });
+    return false;
+  }
+  if (!hasSerializableDocument(tab)) {
+    notify2.warn(`${tab.documentPath ?? "This file"} is a media file, so there is no document for Save to write.`, {
+      key: `save.notADocument:${tab.documentPath ?? tab.id}`,
+      ...tab.documentPath === null ? {} : { path: tab.documentPath },
+      source: "Save"
+    });
+    return false;
+  }
+  const grid = getGridController(tab);
+  if (grid) {
+    await grid.save();
+    return !tab.doc.dirty;
+  }
+  try {
+    if (await collabSave(tab)) {
+      reportSaved(tab);
+      return true;
+    }
+    const output = await serializeDocument(tab);
+    if (tab.documentPath) {
+      const platform = getPlatform2();
+      await platform.writeFile(tab.documentPath, output);
+      tab.doc.dirty = false;
+      flushPreviewOverlay();
+      reportSaved(tab);
+      return true;
+    }
+    if (tab.fileHandle && "createWritable" in tab.fileHandle) {
+      const writable = await tab.fileHandle.createWritable();
+      await writable.write(output);
+      await writable.close();
+      tab.doc.dirty = false;
+      reportSaved(tab);
+      return true;
+    }
+    notify2.warn("This document has no save target — use Export.", { key: "save.noTarget" });
+  } catch (error) {
+    if (!(error instanceof Error && error.name === "AbortError")) {
+      notify2.error(`Could not save ${tab.documentPath ?? tab.id}.`, {
+        action: "file.save",
+        detail: errorMessage2(error),
+        key: `save:${tab.documentPath ?? tab.id}`,
+        ...tab.documentPath === null ? {} : { path: tab.documentPath },
+        source: "Save"
+      });
+    }
+  }
+  return false;
+}
+function tabFormat(tab) {
+  return formatByName2(tab.doc.sourceFormat) ?? (tab.doc.mode === "content" ? defaultContentFormat2() : undefined);
+}
+async function exportFile2() {
+  const tab = activeTab2.value;
+  if (!tab) {
+    return;
+  }
+  try {
+    await loadFormats2();
+    const format = tabFormat(tab);
+    const output = await serializeDocument(tab);
+    const mimeType = format ? mediaTypeEssence(format.mediaType) ?? "text/plain" : "application/json";
+    const ext = format ? format.extensions[0] : ".json";
+    const description = format ? format.name : "Jx Component";
+    const fallbackName = format ? `content${ext}` : "component.json";
+    if ("showSaveFilePicker" in window) {
+      const suggestedName = tab.documentPath ? tab.documentPath.split("/").pop() : fallbackName;
+      const handle = await window.showSaveFilePicker({
+        suggestedName,
+        types: [{ accept: { [mimeType]: [ext] }, description }]
+      });
+      const writable = await handle.createWritable();
+      await writable.write(output);
+      await writable.close();
+      tab.doc.dirty = false;
+      reportSaved(tab);
+      notify2.success(`Exported as ${handle.name}.`);
+    } else {
+      const blob = new Blob([output], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = fallbackName;
+      a.click();
+      URL.revokeObjectURL(url);
+      tab.doc.dirty = false;
+      reportSaved(tab);
+      notify2.success(`Downloaded ${fallbackName}.`);
+    }
+  } catch (error) {
+    if (!(error instanceof Error && error.name === "AbortError")) {
+      notify2.error("Could not export the document.", {
+        detail: errorMessage2(error),
+        source: "Export"
+      });
+    }
+  }
+}
+async function usageLine(path, verb) {
+  const state = isMediaFile(path) ? await loadMediaUsages(path) : await loadUsages2({ path });
+  return usageWarning2(state, verb) ?? "";
+}
+async function confirmFileDelete2(file) {
+  const consequence = await usageLine(file.path, "delete");
+  const question = `Delete ${file.name}? This cannot be undone.`;
+  return Boolean(await showConfirmDialog2("Delete File", consequence === "" ? question : `${question} ${consequence}`, { confirmLabel: "Delete", destructive: true }));
+}
+async function renamePromptMessage2(path, verb = "rename") {
+  const consequence = await usageLine(path, verb);
+  return consequence === "" ? undefined : consequence;
+}
+
+export { cellValuesEqual, makeGridTabId, parseGridTabId, gridTabLabel, columnsFromSchema, inferColumnsFromRows, coerceCellInput, cellToText, ROW_KEY_FIELD, getGridController, createGridController, PANE_SELECTOR, STAGE_SELECTOR, mountPaneGridSurface, attachJumpBarHost, mountJumpBar, projectSessions, renderStatusbar, mountStatusbar, registerPopoverCommands, serializeDocument, notePreviewOverlayEdit, armPreviewOverlay, disarmPreviewOverlay, flushPreviewOverlay, mediaTypeEssence, parseSourceForPath2, parseCollabSource2, setDocumentSavedListener2, saveFile2, exportFile2, confirmFileDelete2, renamePromptMessage2 };
+
+//# debugId=F690D395FACA498E64756E2164756E21
+//# sourceMappingURL=studio-rpyah2ew.js.map