@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/split-view/types.js

@@ -0,0 +1,426 @@
+function tableContent(tableId) {
+  return { kind: "table", tableId };
+}
+function paneTableId(node) {
+  return node.content.kind === "table" ? node.content.tableId : null;
+}
+const SPLIT_LAYOUT_VERSION = 3;
+const PANE_MIN_WIDTH_PX = 420;
+const PANE_MIN_HEIGHT_PX = 220;
+function makePaneId() {
+  return `p${Math.random().toString(36).slice(2, 9)}`;
+}
+function evenSizes(count) {
+  if (count <= 0) return [];
+  return Array.from({ length: count }, () => 1 / count);
+}
+function normalize(sizes) {
+  const total = sizes.reduce((sum, size) => sum + size, 0);
+  if (total <= 0) return evenSizes(sizes.length);
+  return sizes.map((size) => size / total);
+}
+function normalizeIfNeeded(sizes) {
+  const total = sizes.reduce((sum, size) => sum + size, 0);
+  return Math.abs(total - 1) > 1e-9 ? normalize(sizes) : sizes;
+}
+function isChrome(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function readContent(node) {
+  const content = node.content;
+  if (content && typeof content === "object") {
+    if (content.kind === "table" && typeof content.tableId === "string" && content.tableId) {
+      return { kind: "table", tableId: content.tableId };
+    }
+    if (content.kind === "widget" && typeof content.widgetId === "string" && content.widgetId && typeof content.loaderKey === "string" && content.loaderKey) {
+      const ref = {
+        kind: "widget",
+        widgetId: content.widgetId,
+        loaderKey: content.loaderKey
+      };
+      return "settings" in content ? { ...ref, settings: content.settings } : ref;
+    }
+    return null;
+  }
+  if (typeof node.tableId === "string" && node.tableId) return { kind: "table", tableId: node.tableId };
+  return null;
+}
+function readNode(value) {
+  if (!value || typeof value !== "object") return null;
+  const node = value;
+  if (node.kind === "empty") {
+    return { kind: "empty", id: typeof node.id === "string" && node.id ? node.id : makePaneId() };
+  }
+  if (node.kind === "pane") {
+    const content = readContent(node);
+    if (!content) return null;
+    const pane = { kind: "pane", id: typeof node.id === "string" && node.id ? node.id : makePaneId(), content };
+    return isChrome(node.chrome) ? { ...pane, chrome: node.chrome } : pane;
+  }
+  if (node.kind === "split") {
+    const rawChildren = Array.isArray(node.children) ? node.children : [];
+    const rawSizes = Array.isArray(node.sizes) ? node.sizes : [];
+    const children = [];
+    const sizes = [];
+    rawChildren.forEach((child, index) => {
+      const parsed = readNode(child);
+      if (!parsed) return;
+      children.push(parsed);
+      const size = rawSizes[index];
+      sizes.push(typeof size === "number" && size > 0 ? size : 1 / rawChildren.length);
+    });
+    if (children.length === 0) return null;
+    if (children.length === 1) return children[0];
+    return {
+      kind: "split",
+      direction: node.direction === "column" ? "column" : "row",
+      sizes: normalizeIfNeeded(sizes),
+      children
+    };
+  }
+  return null;
+}
+function normalizeLayout(input, fallbackTableId) {
+  const single = () => ({
+    root: { kind: "pane", id: makePaneId(), content: tableContent(fallbackTableId) },
+    version: SPLIT_LAYOUT_VERSION
+  });
+  if (!input || typeof input !== "object") return single();
+  const doc = input;
+  const version = typeof doc.version === "number" ? doc.version : null;
+  if (version !== null && version > SPLIT_LAYOUT_VERSION) return single();
+  const carry = (layout) => {
+    const next = { ...layout, version: SPLIT_LAYOUT_VERSION };
+    if (doc.sharedCriteria !== void 0) next.sharedCriteria = doc.sharedCriteria;
+    if (typeof doc.sharedFiltersEnabled === "boolean") next.sharedFiltersEnabled = doc.sharedFiltersEnabled;
+    return next;
+  };
+  if (version === null || version >= 2) {
+    const root = readNode(doc.root);
+    if (root) return carry({ root });
+  }
+  if (Array.isArray(doc.panes) && doc.panes.length > 0) {
+    const children = doc.panes.map((pane) => readNode({ ...pane, kind: "pane" })).filter((node) => node !== null);
+    if (children.length === 1) return carry({ root: children[0] });
+    if (children.length > 1) {
+      return carry({
+        root: {
+          kind: "split",
+          direction: doc.direction === "column" ? "column" : "row",
+          sizes: Array.isArray(doc.sizes) && doc.sizes.length === children.length ? normalizeIfNeeded(doc.sizes) : evenSizes(children.length),
+          children
+        }
+      });
+    }
+  }
+  return single();
+}
+function listPanes(node) {
+  if (node.kind === "pane") return [node];
+  if (node.kind === "empty") return [];
+  return node.children.flatMap(listPanes);
+}
+function listSlots(node) {
+  if (node.kind === "split") return node.children.flatMap(listSlots);
+  return [node];
+}
+function countPanes(node) {
+  return listPanes(node).length;
+}
+function countSlots(node) {
+  return listSlots(node).length;
+}
+function getNode(root, path) {
+  let current = root;
+  for (const index of path) {
+    if (current.kind !== "split") return null;
+    const next = current.children[index];
+    if (!next) return null;
+    current = next;
+  }
+  return current;
+}
+function replaceNode(root, path, next) {
+  if (path.length === 0) return next;
+  if (root.kind !== "split") return root;
+  const [head, ...rest] = path;
+  const children = [...root.children];
+  if (!children[head]) return root;
+  children[head] = replaceNode(children[head], rest, next);
+  return { ...root, children };
+}
+function findSlotPath(root, slotId, path = []) {
+  if (root.kind !== "split") return root.id === slotId ? path : null;
+  for (let index = 0; index < root.children.length; index++) {
+    const found = findSlotPath(root.children[index], slotId, [...path, index]);
+    if (found) return found;
+  }
+  return null;
+}
+function fillSlot(layout, slotId, content) {
+  const path = findSlotPath(layout.root, slotId);
+  if (!path) return layout;
+  const node = getNode(layout.root, path);
+  if (!node || node.kind !== "empty") return layout;
+  const pane = { kind: "pane", id: node.id, content };
+  return { ...layout, root: replaceNode(layout.root, path, pane) };
+}
+function splitPane(layout, targetSlotId, content, direction, before = false) {
+  const path = findSlotPath(layout.root, targetSlotId);
+  if (!path) return layout;
+  const target = getNode(layout.root, path);
+  if (target?.kind === "empty") return fillSlot(layout, targetSlotId, content);
+  const newPane = { kind: "pane", id: makePaneId(), content };
+  if (path.length === 0) {
+    return {
+      ...layout,
+      root: {
+        kind: "split",
+        direction,
+        sizes: [0.5, 0.5],
+        children: before ? [newPane, layout.root] : [layout.root, newPane]
+      }
+    };
+  }
+  const parentPath = path.slice(0, -1);
+  const indexInParent = path[path.length - 1];
+  const parent = getNode(layout.root, parentPath);
+  if (!parent || parent.kind !== "split") return layout;
+  if (parent.direction === direction) {
+    const children = [...parent.children];
+    const sizes = [...parent.sizes];
+    const share = sizes[indexInParent] ?? 1 / children.length;
+    sizes[indexInParent] = share / 2;
+    const at = before ? indexInParent : indexInParent + 1;
+    children.splice(at, 0, newPane);
+    sizes.splice(at, 0, share / 2);
+    return {
+      ...layout,
+      root: replaceNode(layout.root, parentPath, { ...parent, children, sizes: normalize(sizes) })
+    };
+  }
+  const wrapped = {
+    kind: "split",
+    direction,
+    sizes: [0.5, 0.5],
+    children: before ? [newPane, parent.children[indexInParent]] : [parent.children[indexInParent], newPane]
+  };
+  return { ...layout, root: replaceNode(layout.root, parentPath.concat(indexInParent), wrapped) };
+}
+function removePane(layout, slotId) {
+  const path = findSlotPath(layout.root, slotId);
+  if (!path) return layout;
+  if (path.length === 0) {
+    if (layout.root.kind !== "pane") return layout;
+    return { ...layout, root: { kind: "empty", id: layout.root.id } };
+  }
+  const parentPath = path.slice(0, -1);
+  const indexInParent = path[path.length - 1];
+  const parent = getNode(layout.root, parentPath);
+  if (!parent || parent.kind !== "split") return layout;
+  const children = parent.children.filter((_, index) => index !== indexInParent);
+  const sizes = [...parent.sizes];
+  const [freed] = sizes.splice(indexInParent, 1);
+  const neighbour = Math.min(indexInParent, sizes.length - 1);
+  if (sizes[neighbour] !== void 0) sizes[neighbour] += freed ?? 0;
+  const next = children.length === 0 ? { kind: "empty", id: makePaneId() } : children.length === 1 ? children[0] : { ...parent, children, sizes: normalize(sizes) };
+  return { ...layout, root: replaceNode(layout.root, parentPath, next) };
+}
+function resizeAt(layout, splitPath, index, deltaFraction) {
+  const node = getNode(layout.root, splitPath);
+  if (!node || node.kind !== "split") return layout;
+  const sizes = [...node.sizes];
+  if (index < 0 || index >= sizes.length - 1) return layout;
+  const next = sizes[index] + deltaFraction;
+  const nextSibling = sizes[index + 1] - deltaFraction;
+  if (next <= 0.05 || nextSibling <= 0.05) return layout;
+  sizes[index] = next;
+  sizes[index + 1] = nextSibling;
+  return {
+    ...layout,
+    root: replaceNode(layout.root, splitPath, { ...node, sizes: normalize(sizes) })
+  };
+}
+function setPaneChrome(layout, paneId, patch) {
+  const path = findSlotPath(layout.root, paneId);
+  if (!path) return layout;
+  const node = getNode(layout.root, path);
+  if (!node || node.kind !== "pane") return layout;
+  const next = { ...node, chrome: { ...node.chrome, ...patch } };
+  return { ...layout, root: replaceNode(layout.root, path, next) };
+}
+function setPaneContentSettings(layout, paneId, settings) {
+  const path = findSlotPath(layout.root, paneId);
+  if (!path) return layout;
+  const node = getNode(layout.root, path);
+  if (!node || node.kind !== "pane" || node.content.kind !== "widget") return layout;
+  const next = { ...node, content: { ...node.content, settings } };
+  return { ...layout, root: replaceNode(layout.root, path, next) };
+}
+function setAllPaneChrome(node, chrome) {
+  if (node.kind === "pane") return { ...node, chrome: { ...node.chrome, ...chrome } };
+  if (node.kind === "empty") return node;
+  return { ...node, children: node.children.map((child) => setAllPaneChrome(child, chrome)) };
+}
+function evenAll(node) {
+  if (node.kind !== "split") return node;
+  return { ...node, sizes: evenSizes(node.children.length), children: node.children.map(evenAll) };
+}
+function emptySlot() {
+  return { kind: "empty", id: makePaneId() };
+}
+function splitOf(direction, children) {
+  return { kind: "split", direction, sizes: evenSizes(children.length), children };
+}
+const GRID_TEMPLATES = {
+  "2x1": {
+    id: "2x1",
+    label: "Two columns",
+    hint: "Side by side",
+    slots: 2,
+    build: () => splitOf("row", [emptySlot(), emptySlot()])
+  },
+  "1x2": {
+    id: "1x2",
+    label: "Two rows",
+    hint: "Stacked",
+    slots: 2,
+    build: () => splitOf("column", [emptySlot(), emptySlot()])
+  },
+  "2x2": {
+    id: "2x2",
+    label: "Four cells",
+    hint: "Two by two",
+    slots: 4,
+    build: () => splitOf("column", [
+      splitOf("row", [emptySlot(), emptySlot()]),
+      splitOf("row", [emptySlot(), emptySlot()])
+    ])
+  },
+  "3-up": {
+    id: "3-up",
+    label: "Three columns",
+    hint: "All in one row",
+    slots: 3,
+    build: () => splitOf("row", [emptySlot(), emptySlot(), emptySlot()])
+  },
+  "two-top-one-below": {
+    id: "two-top-one-below",
+    label: "Two on top, one below",
+    hint: "Pair above, full width beneath",
+    slots: 3,
+    build: () => splitOf("column", [splitOf("row", [emptySlot(), emptySlot()]), emptySlot()])
+  },
+  "1+2": {
+    id: "1+2",
+    label: "One left, two right",
+    hint: "Full height beside a stacked pair",
+    slots: 3,
+    build: () => splitOf("row", [emptySlot(), splitOf("column", [emptySlot(), emptySlot()])])
+  }
+};
+const GRID_TEMPLATE_LIST = Object.values(GRID_TEMPLATES);
+function applyGridTemplate(layout, templateId) {
+  const template = GRID_TEMPLATES[templateId];
+  if (!template) return layout;
+  const existing = listPanes(layout.root);
+  let next = 0;
+  const fill = (node) => {
+    if (node.kind === "split") return { ...node, children: node.children.map(fill) };
+    const pane = existing[next];
+    next += 1;
+    return pane ? { ...pane } : node;
+  };
+  return { ...layout, root: fill(template.build()) };
+}
+function applyPreset(layout, preset) {
+  const panes = listPanes(layout.root);
+  if (panes.length === 0) return layout;
+  if (panes.length === 1) return { ...layout, root: panes[0] };
+  const row = (children) => ({
+    kind: "split",
+    direction: "row",
+    sizes: evenSizes(children.length),
+    children
+  });
+  switch (preset) {
+    case "columns":
+      return { ...layout, root: row(panes) };
+    case "rows":
+      return {
+        ...layout,
+        root: { kind: "split", direction: "column", sizes: evenSizes(panes.length), children: panes }
+      };
+    case "two-top-one-below": {
+      if (panes.length < 3) return { ...layout, root: row(panes) };
+      const top = row(panes.slice(0, 2));
+      const below = panes.slice(2);
+      const bottom = below.length === 1 ? below[0] : row(below);
+      return {
+        ...layout,
+        root: { kind: "split", direction: "column", sizes: [0.5, 0.5], children: [top, bottom] }
+      };
+    }
+    case "one-top-two-below": {
+      if (panes.length < 3) return { ...layout, root: row(panes) };
+      return {
+        ...layout,
+        root: {
+          kind: "split",
+          direction: "column",
+          sizes: [0.5, 0.5],
+          children: [panes[0], row(panes.slice(1))]
+        }
+      };
+    }
+    case "grid": {
+      const pairs = [];
+      for (let index = 0; index < panes.length; index += 2) {
+        const pair = panes.slice(index, index + 2);
+        pairs.push(pair.length === 1 ? pair[0] : row(pair));
+      }
+      return {
+        ...layout,
+        root: { kind: "split", direction: "column", sizes: evenSizes(pairs.length), children: pairs }
+      };
+    }
+    default:
+      return layout;
+  }
+}
+const ARRANGE_PRESETS = [
+  { id: "columns", label: "Side by side", hint: "All in one row", minPanes: 2 },
+  { id: "rows", label: "Stacked", hint: "All in one column", minPanes: 2 },
+  { id: "two-top-one-below", label: "Two on top, one below", hint: "Pair above, full width beneath", minPanes: 3 },
+  { id: "one-top-two-below", label: "One on top, two below", hint: "Full width above, pair beneath", minPanes: 3 },
+  { id: "grid", label: "Grid", hint: "Two per row", minPanes: 4 }
+];
+export {
+  ARRANGE_PRESETS,
+  GRID_TEMPLATES,
+  GRID_TEMPLATE_LIST,
+  PANE_MIN_HEIGHT_PX,
+  PANE_MIN_WIDTH_PX,
+  SPLIT_LAYOUT_VERSION,
+  applyGridTemplate,
+  applyPreset,
+  countPanes,
+  countSlots,
+  evenAll,
+  evenSizes,
+  fillSlot,
+  getNode,
+  listPanes,
+  listSlots,
+  makePaneId,
+  normalizeLayout,
+  paneTableId,
+  removePane,
+  resizeAt,
+  setAllPaneChrome,
+  setPaneChrome,
+  setPaneContentSettings,
+  splitPane,
+  tableContent
+};
+//# sourceMappingURL=types.js.map

package/dist/backend/dynamic-table/split-view/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/split-view/types.ts"],
+  "sourcesContent": ["// Split view \u2014 a composable workspace: a tree of SLOTS, each holding a table,\n// a widget, or nothing yet.\n// Specs: .ai/specs/2026-08-04-dynamic-table-split-view.md (the tree)\n//        .ai/specs/2026-08-17-split-view-workspace-composition.md (slots + templates)\n\n/** Arrangement axis for one split node. 'row' = side by side, 'column' = stacked. */\nexport type SplitDirection = 'row' | 'column'\n\n/**\n * Which chrome rows a pane shows. All default ON.\n *\n * Chrome is the scarce resource in a split: a pane used to spend ~150px on a\n * pane header, a toolbar repeating the same title, a views row and pagination\n * before a single data row \u2014 multiplied by pane count. These let a user spend\n * that budget where they want it.\n */\nexport type PaneChrome = {\n  /** The whole top strip: title, search and the action buttons. */\n  toolbar?: boolean\n  search?: boolean\n  /**\n   * The whole second bar \u2014 saved-view tabs AND pagination together.\n   *\n   * These were separate toggles. Splitting them was a mistake: they share one\n   * row, so hiding either alone reclaimed nothing, and the entire point of\n   * these switches is vertical space. One toggle, one row, one row's worth of\n   * space back.\n   */\n  viewsBar?: boolean\n}\n\n/**\n * WHAT a pane holds, as opposed to WHERE it sits.\n *\n * Split out of `PaneNode` (which carried a bare `tableId`) so a pane can hold a\n * dashboard widget without a second node kind and without a second breaking\n * change: adding a variant to this union is additive, and every layout\n * algorithm below is written against the union rather than against `tableId`.\n *\n * `loaderKey` is stored alongside `widgetId` because the widget catalogue is\n * fetched at runtime \u2014 a saved layout must be resolvable without re-deriving\n * it. Both ids are OPAQUE strings: no FK, no cross-module relation, and ACL is\n * re-checked at render rather than trusted from storage.\n */\nexport type PaneContentRef =\n  | { kind: 'table'; tableId: string }\n  | { kind: 'widget'; widgetId: string; loaderKey: string; settings?: unknown }\n\n/** Convenience constructor \u2014 the overwhelmingly common case. */\nexport function tableContent(tableId: string): PaneContentRef {\n  return { kind: 'table', tableId }\n}\n\n/** The table id a pane shows, or `null` when it holds something else. */\nexport function paneTableId(node: PaneNode): string | null {\n  return node.content.kind === 'table' ? node.content.tableId : null\n}\n\nexport type PaneNode = {\n  kind: 'pane'\n  /** Absent = everything shown. */\n  chrome?: PaneChrome\n  /** Stable per-slot id; also seeds `storageScope`, so two panes of the same\n   *  table keep independent perspectives and column widths. Preserved across\n   *  every migration \u2014 losing it silently discards the user's column widths. */\n  id: string\n  content: PaneContentRef\n}\n\n/**\n * A slot with nothing in it yet.\n *\n * Grid templates are the reason this exists: \"give me a 2\u00D72 and let me decide\n * the contents afterwards\" is unrepresentable when a pane requires content at\n * creation. The alternative \u2014 prompting N times the moment a template is\n * picked \u2014 makes the first run modal and forbids \"leave that one empty\".\n */\nexport type EmptyNode = { kind: 'empty'; id: string }\n\nexport type SplitNode = {\n  kind: 'split'\n  direction: SplitDirection\n  /** Fractions summing to 1, one per child. */\n  sizes: number[]\n  children: LayoutNode[]\n}\n\nexport type LayoutNode = PaneNode | EmptyNode | SplitNode\n\n/** A pane or an empty slot \u2014 anything that occupies one cell of the layout. */\nexport type SlotNode = PaneNode | EmptyNode\n\n/**\n * A TREE, not a flat list.\n *\n * v1 was flat \u2014 one axis, N panes \u2014 and could not express the arrangement users\n * asked for first: two tables side by side with a third full-width beneath.\n * That is a row nested inside a column, and no arrangement of flags on a flat\n * list produces it. The tree is the smallest model that does, and it subsumes\n * the flat cases (one split node with N children IS the old layout).\n *\n * Versions:\n *   1 \u2014 flat `{ panes, sizes, direction }`\n *   2 \u2014 tree of `{ kind:'pane', tableId }` / `{ kind:'split' }`\n *   3 \u2014 tree of `{ kind:'pane', content }` / `{ kind:'empty' }` / `{ kind:'split' }`\n *\n * v1 and v2 documents are migrated on read by `normalizeLayout`, preserving\n * pane ids, so every layout saved before this still opens with its stored\n * column widths intact.\n */\nexport type SplitLayout = {\n  root: LayoutNode\n  version?: number\n  /**\n   * Workspace-level shared search + rules, and the toggle that arms them.\n   *\n   * Deliberately OPAQUE here. The closed criterion vocabulary and the\n   * per-table mapping are a later phase's business (`sharedCriteria.ts`); this\n   * layer only has to carry them through a write/read cycle without dropping\n   * them, which is exactly what an opaque field guarantees.\n   */\n  sharedCriteria?: unknown\n  sharedFiltersEnabled?: boolean\n}\n\nexport const SPLIT_LAYOUT_VERSION = 3\n\n/** The shape v1 persisted. Kept so saved layouts remain readable. */\nexport type LegacySplitLayoutV1 = {\n  panes: Array<{ id: string; tableId: string }>\n  sizes: number[]\n  direction?: SplitDirection\n}\n\n/**\n * Floor for a pane's width. Below this a grid cannot show a frozen column, one\n * data column and the row-actions gutter, so it would show nothing useful.\n * Paired with the compact toolbar's 520px container-query step.\n */\nexport const PANE_MIN_WIDTH_PX = 420\n\n/**\n * Floor for a pane's height when stacked. Smaller than the width floor because\n * the constraint differs: a short pane still shows its toolbar and a few rows,\n * whereas a narrow pane cannot show two columns at all.\n */\nexport const PANE_MIN_HEIGHT_PX = 220\n\nexport function makePaneId(): string {\n  // Not crypto.randomUUID(): a readable id makes a saved layout debuggable by\n  // eye, and this is a client-side key, never a security token.\n  return `p${Math.random().toString(36).slice(2, 9)}`\n}\n\nexport function evenSizes(count: number): number[] {\n  if (count <= 0) return []\n  return Array.from({ length: count }, () => 1 / count)\n}\n\nfunction normalize(sizes: number[]): number[] {\n  const total = sizes.reduce((sum, size) => sum + size, 0)\n  if (total <= 0) return evenSizes(sizes.length)\n  return sizes.map((size) => size / total)\n}\n\n/**\n * Re-normalise ONLY when the shares no longer add up \u2014 a child was dropped, or\n * the document was hand-written. Normalising unconditionally rewrites a user's\n * divider positions by a float epsilon on every single read.\n */\nfunction normalizeIfNeeded(sizes: number[]): number[] {\n  const total = sizes.reduce((sum, size) => sum + size, 0)\n  return Math.abs(total - 1) > 1e-9 ? normalize(sizes) : sizes\n}\n\n// \u2500\u2500 Reading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nfunction isChrome(value: unknown): value is PaneChrome {\n  return !!value && typeof value === 'object' && !Array.isArray(value)\n}\n\n/**\n * Lift whatever a stored pane carried into a v3 content ref.\n *\n * v2 wrote `tableId` on the pane itself; v3 writes `content`. Both are read\n * here \u2014 the v2 branch is the entire reason a four-pane arrangement saved last\n * week still opens today.\n */\nfunction readContent(node: Record<string, unknown>): PaneContentRef | null {\n  const content = node.content as Record<string, unknown> | undefined\n  if (content && typeof content === 'object') {\n    if (content.kind === 'table' && typeof content.tableId === 'string' && content.tableId) {\n      return { kind: 'table', tableId: content.tableId }\n    }\n    if (\n      content.kind === 'widget' &&\n      typeof content.widgetId === 'string' &&\n      content.widgetId &&\n      typeof content.loaderKey === 'string' &&\n      content.loaderKey\n    ) {\n      const ref: PaneContentRef = {\n        kind: 'widget',\n        widgetId: content.widgetId,\n        loaderKey: content.loaderKey,\n      }\n      return 'settings' in content ? { ...ref, settings: content.settings } : ref\n    }\n    return null\n  }\n  // v2 and v1: the table id sat directly on the pane.\n  if (typeof node.tableId === 'string' && node.tableId) return { kind: 'table', tableId: node.tableId }\n  return null\n}\n\n/** Parse one stored node into v3, or `null` when it carries nothing usable. */\nfunction readNode(value: unknown): LayoutNode | null {\n  if (!value || typeof value !== 'object') return null\n  const node = value as Record<string, unknown>\n\n  if (node.kind === 'empty') {\n    return { kind: 'empty', id: typeof node.id === 'string' && node.id ? node.id : makePaneId() }\n  }\n\n  if (node.kind === 'pane') {\n    const content = readContent(node)\n    if (!content) return null\n    // The pane id seeds `storageScope`. Minting a fresh one here would hand\n    // every reload a new key and silently discard the user's column widths \u2014\n    // this exact bug has already shipped once.\n    const pane: PaneNode = { kind: 'pane', id: typeof node.id === 'string' && node.id ? node.id : makePaneId(), content }\n    return isChrome(node.chrome) ? { ...pane, chrome: node.chrome as PaneChrome } : pane\n  }\n\n  if (node.kind === 'split') {\n    const rawChildren = Array.isArray(node.children) ? node.children : []\n    const rawSizes = Array.isArray(node.sizes) ? (node.sizes as unknown[]) : []\n    const children: LayoutNode[] = []\n    const sizes: number[] = []\n    rawChildren.forEach((child, index) => {\n      const parsed = readNode(child)\n      if (!parsed) return\n      children.push(parsed)\n      const size = rawSizes[index]\n      sizes.push(typeof size === 'number' && size > 0 ? size : 1 / rawChildren.length)\n    })\n    if (children.length === 0) return null\n    // A split with one surviving child is not a split any more; keeping it\n    // would accumulate junk nodes across add/remove cycles.\n    if (children.length === 1) return children[0]\n    return {\n      kind: 'split',\n      direction: node.direction === 'column' ? 'column' : 'row',\n      sizes: normalizeIfNeeded(sizes),\n      children,\n    }\n  }\n\n  return null\n}\n\n/**\n * Accepts a v3 tree, a v2 tree, a v1 flat document, or junk; always yields a\n * usable tree.\n *\n * The stored `version` is CONSULTED, with shape-sniffing as the fallback. It\n * used to be written, stored and echoed in DTOs but never read \u2014 the entity's\n * own comment claimed \"an unknown version is ignored on read\", which was not\n * what happened. A document from a future version is now treated as unreadable\n * (single default pane) rather than half-parsed.\n */\nexport function normalizeLayout(input: unknown, fallbackTableId: string): SplitLayout {\n  const single = (): SplitLayout => ({\n    root: { kind: 'pane', id: makePaneId(), content: tableContent(fallbackTableId) },\n    version: SPLIT_LAYOUT_VERSION,\n  })\n  if (!input || typeof input !== 'object') return single()\n\n  const doc = input as Partial<SplitLayout> & Partial<LegacySplitLayoutV1>\n  const version = typeof doc.version === 'number' ? doc.version : null\n  if (version !== null && version > SPLIT_LAYOUT_VERSION) return single()\n\n  const carry = (layout: SplitLayout): SplitLayout => {\n    const next: SplitLayout = { ...layout, version: SPLIT_LAYOUT_VERSION }\n    if (doc.sharedCriteria !== undefined) next.sharedCriteria = doc.sharedCriteria\n    if (typeof doc.sharedFiltersEnabled === 'boolean') next.sharedFiltersEnabled = doc.sharedFiltersEnabled\n    return next\n  }\n\n  // v2 / v3 \u2014 a tree. Sniffed as the fallback when `version` is absent, which\n  // every document written before the version was read will be.\n  if (version === null || version >= 2) {\n    const root = readNode(doc.root)\n    if (root) return carry({ root })\n  }\n\n  // v1 \u2014 a flat pane list.\n  if (Array.isArray(doc.panes) && doc.panes.length > 0) {\n    const children: LayoutNode[] = doc.panes\n      .map((pane) => readNode({ ...pane, kind: 'pane' }))\n      .filter((node): node is LayoutNode => node !== null)\n    if (children.length === 1) return carry({ root: children[0] })\n    if (children.length > 1) {\n      return carry({\n        root: {\n          kind: 'split',\n          direction: doc.direction === 'column' ? 'column' : 'row',\n          sizes:\n            Array.isArray(doc.sizes) && doc.sizes.length === children.length\n              ? normalizeIfNeeded(doc.sizes)\n              : evenSizes(children.length),\n          children,\n        },\n      })\n    }\n  }\n  return single()\n}\n\n/**\n * Every PANE in document order. Empty slots are deliberately excluded: every\n * existing caller wants \"the tables on screen\", and quietly handing them holes\n * would put an id with no content into `openTableIds`, the primary-pane\n * calculation and the arrange presets.\n */\nexport function listPanes(node: LayoutNode): PaneNode[] {\n  if (node.kind === 'pane') return [node]\n  if (node.kind === 'empty') return []\n  return node.children.flatMap(listPanes)\n}\n\n/** Every slot \u2014 panes AND empty ones \u2014 in document order. */\nexport function listSlots(node: LayoutNode): SlotNode[] {\n  if (node.kind === 'split') return node.children.flatMap(listSlots)\n  return [node]\n}\n\nexport function countPanes(node: LayoutNode): number {\n  return listPanes(node).length\n}\n\n/** How many cells the layout has, filled or not. */\nexport function countSlots(node: LayoutNode): number {\n  return listSlots(node).length\n}\n\n// \u2500\u2500 Addressing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n//\n// A node is addressed by its PATH from the root \u2014 the child index at each\n// level, so [0,1] is \"second child of the root's first child\". Paths stay valid\n// for the duration of a render, which is all a click or a splitter drag needs,\n// and they avoid minting ids for interior nodes.\n\nexport type NodePath = number[]\n\nexport function getNode(root: LayoutNode, path: NodePath): LayoutNode | null {\n  let current: LayoutNode = root\n  for (const index of path) {\n    if (current.kind !== 'split') return null\n    const next = current.children[index]\n    if (!next) return null\n    current = next\n  }\n  return current\n}\n\nfunction replaceNode(root: LayoutNode, path: NodePath, next: LayoutNode): LayoutNode {\n  if (path.length === 0) return next\n  if (root.kind !== 'split') return root\n  const [head, ...rest] = path\n  const children = [...root.children]\n  if (!children[head]) return root\n  children[head] = replaceNode(children[head], rest, next)\n  return { ...root, children }\n}\n\n/** Path to a pane OR an empty slot \u2014 both are addressed by the same id space. */\nfunction findSlotPath(root: LayoutNode, slotId: string, path: NodePath = []): NodePath | null {\n  if (root.kind !== 'split') return root.id === slotId ? path : null\n  for (let index = 0; index < root.children.length; index++) {\n    const found = findSlotPath(root.children[index], slotId, [...path, index])\n    if (found) return found\n  }\n  return null\n}\n\n// \u2500\u2500 Mutation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/** Fill an EMPTY slot in place \u2014 same id, same share, siblings untouched. */\nexport function fillSlot(layout: SplitLayout, slotId: string, content: PaneContentRef): SplitLayout {\n  const path = findSlotPath(layout.root, slotId)\n  if (!path) return layout\n  const node = getNode(layout.root, path)\n  if (!node || node.kind !== 'empty') return layout\n  // The id survives the fill: it is this slot's `storageScope`, so a template\n  // slot keeps its column widths if it is emptied and refilled.\n  const pane: PaneNode = { kind: 'pane', id: node.id, content }\n  return { ...layout, root: replaceNode(layout.root, path, pane) }\n}\n\n/**\n * Split `targetSlotId` along `direction`, inserting a pane for `content` after it.\n *\n * The new pane takes half of the TARGET's space, so the rest of the layout does\n * not move \u2014 splitting the pane you are looking at should not resize everything\n * else. When the target's parent already runs along `direction` the pane is\n * inserted as a sibling, rather than nesting a redundant split node.\n *\n * An EMPTY target is FILLED rather than split. Nesting a split inside a hole\n * the user asked to fill would turn one 2\u00D72 cell into two half-cells and answer\n * a question nobody asked.\n */\nexport function splitPane(\n  layout: SplitLayout,\n  targetSlotId: string,\n  content: PaneContentRef,\n  direction: SplitDirection,\n  /** Insert on the leading side \u2014 left of a row, above a column. */\n  before = false,\n): SplitLayout {\n  const path = findSlotPath(layout.root, targetSlotId)\n  if (!path) return layout\n\n  const target = getNode(layout.root, path)\n  if (target?.kind === 'empty') return fillSlot(layout, targetSlotId, content)\n\n  const newPane: PaneNode = { kind: 'pane', id: makePaneId(), content }\n\n  if (path.length === 0) {\n    return {\n      ...layout,\n      root: {\n        kind: 'split',\n        direction,\n        sizes: [0.5, 0.5],\n        children: before ? [newPane, layout.root] : [layout.root, newPane],\n      },\n    }\n  }\n\n  const parentPath = path.slice(0, -1)\n  const indexInParent = path[path.length - 1]\n  const parent = getNode(layout.root, parentPath)\n  if (!parent || parent.kind !== 'split') return layout\n\n  if (parent.direction === direction) {\n    const children = [...parent.children]\n    const sizes = [...parent.sizes]\n    const share = sizes[indexInParent] ?? 1 / children.length\n    sizes[indexInParent] = share / 2\n    const at = before ? indexInParent : indexInParent + 1\n    children.splice(at, 0, newPane)\n    sizes.splice(at, 0, share / 2)\n    return {\n      ...layout,\n      root: replaceNode(layout.root, parentPath, { ...parent, children, sizes: normalize(sizes) }),\n    }\n  }\n\n  // Different axis \u2014 wrap the target in a nested split. THIS is what makes\n  // \"two side by side, one full-width below\" expressible at all.\n  const wrapped: SplitNode = {\n    kind: 'split',\n    direction,\n    sizes: [0.5, 0.5],\n    children: before ? [newPane, parent.children[indexInParent]] : [parent.children[indexInParent], newPane],\n  }\n  return { ...layout, root: replaceNode(layout.root, parentPath.concat(indexInParent), wrapped) }\n}\n\n/**\n * Remove a slot; its share goes to a sibling, and a split left with one child\n * collapses into that child.\n *\n * Removing the LAST pane leaves an empty slot rather than refusing: with\n * templates in play \"close this table but keep the cell\" is a real intent, and\n * an empty slot is recoverable from the UI whereas a childless split is not\n * representable at all.\n */\nexport function removePane(layout: SplitLayout, slotId: string): SplitLayout {\n  const path = findSlotPath(layout.root, slotId)\n  if (!path) return layout\n\n  if (path.length === 0) {\n    // The root slot. A pane becomes an empty slot; an already-empty root has\n    // nothing to remove (the tree must always have a node).\n    if (layout.root.kind !== 'pane') return layout\n    return { ...layout, root: { kind: 'empty', id: layout.root.id } }\n  }\n\n  const parentPath = path.slice(0, -1)\n  const indexInParent = path[path.length - 1]\n  const parent = getNode(layout.root, parentPath)\n  if (!parent || parent.kind !== 'split') return layout\n\n  const children = parent.children.filter((_, index) => index !== indexInParent)\n  const sizes = [...parent.sizes]\n  const [freed] = sizes.splice(indexInParent, 1)\n  const neighbour = Math.min(indexInParent, sizes.length - 1)\n  if (sizes[neighbour] !== undefined) sizes[neighbour] += freed ?? 0\n\n  // A split with one child is meaningless \u2014 collapse into that child, empty or\n  // not, or the tree accumulates junk nodes with every add/remove cycle.\n  const next: LayoutNode =\n    children.length === 0\n      ? { kind: 'empty', id: makePaneId() }\n      : children.length === 1\n        ? children[0]\n        : { ...parent, children, sizes: normalize(sizes) }\n  return { ...layout, root: replaceNode(layout.root, parentPath, next) }\n}\n\n/** Resize the boundary between children `index` and `index + 1` of one split node. */\nexport function resizeAt(\n  layout: SplitLayout,\n  splitPath: NodePath,\n  index: number,\n  deltaFraction: number,\n): SplitLayout {\n  const node = getNode(layout.root, splitPath)\n  if (!node || node.kind !== 'split') return layout\n  const sizes = [...node.sizes]\n  if (index < 0 || index >= sizes.length - 1) return layout\n  const next = sizes[index] + deltaFraction\n  const nextSibling = sizes[index + 1] - deltaFraction\n  // Guard both sides so a fast drag cannot invert a pane into a negative share.\n  // Empty slots clamp exactly like filled ones: a hole you cannot see is a hole\n  // you cannot drop anything into.\n  if (next <= 0.05 || nextSibling <= 0.05) return layout\n  sizes[index] = next\n  sizes[index + 1] = nextSibling\n  return {\n    ...layout,\n    root: replaceNode(layout.root, splitPath, { ...node, sizes: normalize(sizes) }),\n  }\n}\n\n/** Toggle one chrome row on a single pane. */\nexport function setPaneChrome(\n  layout: SplitLayout,\n  paneId: string,\n  patch: Partial<PaneChrome>,\n): SplitLayout {\n  const path = findSlotPath(layout.root, paneId)\n  if (!path) return layout\n  const node = getNode(layout.root, path)\n  if (!node || node.kind !== 'pane') return layout\n  const next: PaneNode = { ...node, chrome: { ...node.chrome, ...patch } }\n  return { ...layout, root: replaceNode(layout.root, path, next) }\n}\n\n/**\n * Store a widget pane's settings on its SLOT.\n *\n * The host owns the layout tree and its persistence, so a widget's settings\n * ride on the slot rather than being written by the pane itself \u2014 two writers\n * to one document would race, and the working layout is saved by a single\n * `setLayout` funnel precisely to avoid that.\n *\n * Keyed on the slot, not the widget id, so the same widget in two panes keeps\n * two independent configurations.\n *\n * A no-op on table panes: a table's per-instance state already lives under its\n * `storageScope`, and silently growing a `settings` bag on it would create a\n * second, competing place for the same thing.\n */\nexport function setPaneContentSettings(\n  layout: SplitLayout,\n  paneId: string,\n  settings: unknown,\n): SplitLayout {\n  const path = findSlotPath(layout.root, paneId)\n  if (!path) return layout\n  const node = getNode(layout.root, path)\n  if (!node || node.kind !== 'pane' || node.content.kind !== 'widget') return layout\n  const next: PaneNode = { ...node, content: { ...node.content, settings } }\n  return { ...layout, root: replaceNode(layout.root, path, next) }\n}\n\n/** Turn every chrome row off across the whole layout \u2014 the \"maximum rows\" shortcut. */\nexport function setAllPaneChrome(node: LayoutNode, chrome: PaneChrome): LayoutNode {\n  if (node.kind === 'pane') return { ...node, chrome: { ...node.chrome, ...chrome } }\n  if (node.kind === 'empty') return node\n  return { ...node, children: node.children.map((child) => setAllPaneChrome(child, chrome)) }\n}\n\n/** Reset every split in the tree to equal shares. */\nexport function evenAll(node: LayoutNode): LayoutNode {\n  if (node.kind !== 'split') return node\n  return { ...node, sizes: evenSizes(node.children.length), children: node.children.map(evenAll) }\n}\n\n// \u2500\u2500 Grid templates \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n//\n// Templates CREATE slots; the arrange presets below RE-SHAPE panes that already\n// exist. Two concepts, one menu, two labelled sections \u2014 the distinction is\n// \"how many cells\" versus \"where the cells go\".\n\nexport type GridTemplateId = '2x1' | '1x2' | '2x2' | '3-up' | 'two-top-one-below' | '1+2'\n\nfunction emptySlot(): EmptyNode {\n  return { kind: 'empty', id: makePaneId() }\n}\n\nfunction splitOf(direction: SplitDirection, children: LayoutNode[]): SplitNode {\n  return { kind: 'split', direction, sizes: evenSizes(children.length), children }\n}\n\nexport type GridTemplate = {\n  id: GridTemplateId\n  label: string\n  hint: string\n  /** How many cells the template creates. */\n  slots: number\n  /** Fresh ids on every call \u2014 two instantiations must not share storage scopes. */\n  build: () => LayoutNode\n}\n\nexport const GRID_TEMPLATES: Record<GridTemplateId, GridTemplate> = {\n  '2x1': {\n    id: '2x1',\n    label: 'Two columns',\n    hint: 'Side by side',\n    slots: 2,\n    build: () => splitOf('row', [emptySlot(), emptySlot()]),\n  },\n  '1x2': {\n    id: '1x2',\n    label: 'Two rows',\n    hint: 'Stacked',\n    slots: 2,\n    build: () => splitOf('column', [emptySlot(), emptySlot()]),\n  },\n  '2x2': {\n    id: '2x2',\n    label: 'Four cells',\n    hint: 'Two by two',\n    slots: 4,\n    build: () =>\n      splitOf('column', [\n        splitOf('row', [emptySlot(), emptySlot()]),\n        splitOf('row', [emptySlot(), emptySlot()]),\n      ]),\n  },\n  '3-up': {\n    id: '3-up',\n    label: 'Three columns',\n    hint: 'All in one row',\n    slots: 3,\n    build: () => splitOf('row', [emptySlot(), emptySlot(), emptySlot()]),\n  },\n  'two-top-one-below': {\n    id: 'two-top-one-below',\n    label: 'Two on top, one below',\n    hint: 'Pair above, full width beneath',\n    slots: 3,\n    build: () => splitOf('column', [splitOf('row', [emptySlot(), emptySlot()]), emptySlot()]),\n  },\n  '1+2': {\n    id: '1+2',\n    label: 'One left, two right',\n    hint: 'Full height beside a stacked pair',\n    slots: 3,\n    build: () => splitOf('row', [emptySlot(), splitOf('column', [emptySlot(), emptySlot()])]),\n  },\n}\n\nexport const GRID_TEMPLATE_LIST: GridTemplate[] = Object.values(GRID_TEMPLATES)\n\n/**\n * Adopt a template's SHAPE, keeping what is already on screen.\n *\n * The existing panes are poured into the template's slots in document order and\n * the remainder stay empty. Discarding them instead would mean picking \"2\u00D72\"\n * from a page that is showing your table closes your table \u2014 the layout-first,\n * fill-after flow only works if choosing a shape is non-destructive.\n *\n * Panes beyond the template's slot count are dropped: the user asked for that\n * many cells.\n */\nexport function applyGridTemplate(layout: SplitLayout, templateId: GridTemplateId): SplitLayout {\n  const template = GRID_TEMPLATES[templateId]\n  if (!template) return layout\n  const existing = listPanes(layout.root)\n  let next = 0\n  const fill = (node: LayoutNode): LayoutNode => {\n    if (node.kind === 'split') return { ...node, children: node.children.map(fill) }\n    const pane = existing[next]\n    next += 1\n    return pane ? { ...pane } : node\n  }\n  return { ...layout, root: fill(template.build()) }\n}\n\n// \u2500\u2500 Presets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport type PresetId = 'columns' | 'rows' | 'two-top-one-below' | 'one-top-two-below' | 'grid'\n\n/**\n * Re-arrange the EXISTING panes into a named shape, preserving their order.\n *\n * Empty slots are dropped: a preset is a statement about the tables you have\n * open, and carrying holes through it would produce shapes (\"two on top, one\n * below\" where one of the three is a hole) the user did not ask for.\n */\nexport function applyPreset(layout: SplitLayout, preset: PresetId): SplitLayout {\n  const panes = listPanes(layout.root)\n  if (panes.length === 0) return layout\n  if (panes.length === 1) return { ...layout, root: panes[0] }\n\n  const row = (children: LayoutNode[]): SplitNode => ({\n    kind: 'split',\n    direction: 'row',\n    sizes: evenSizes(children.length),\n    children,\n  })\n\n  switch (preset) {\n    case 'columns':\n      return { ...layout, root: row(panes) }\n    case 'rows':\n      return {\n        ...layout,\n        root: { kind: 'split', direction: 'column', sizes: evenSizes(panes.length), children: panes },\n      }\n    case 'two-top-one-below': {\n      // Two side by side, the rest full-width beneath \u2014 the arrangement the flat\n      // model could not express.\n      if (panes.length < 3) return { ...layout, root: row(panes) }\n      const top = row(panes.slice(0, 2))\n      const below = panes.slice(2)\n      const bottom: LayoutNode = below.length === 1 ? below[0] : row(below)\n      return {\n        ...layout,\n        root: { kind: 'split', direction: 'column', sizes: [0.5, 0.5], children: [top, bottom] },\n      }\n    }\n    case 'one-top-two-below': {\n      if (panes.length < 3) return { ...layout, root: row(panes) }\n      return {\n        ...layout,\n        root: {\n          kind: 'split',\n          direction: 'column',\n          sizes: [0.5, 0.5],\n          children: [panes[0], row(panes.slice(1))],\n        },\n      }\n    }\n    case 'grid': {\n      const pairs: LayoutNode[] = []\n      for (let index = 0; index < panes.length; index += 2) {\n        const pair = panes.slice(index, index + 2)\n        pairs.push(pair.length === 1 ? pair[0] : row(pair))\n      }\n      return {\n        ...layout,\n        root: { kind: 'split', direction: 'column', sizes: evenSizes(pairs.length), children: pairs },\n      }\n    }\n    default:\n      return layout\n  }\n}\n\nexport const ARRANGE_PRESETS: Array<{\n  id: PresetId\n  label: string\n  hint: string\n  /** Minimum panes for the shape to differ from a plain row. */\n  minPanes: number\n}> = [\n  { id: 'columns', label: 'Side by side', hint: 'All in one row', minPanes: 2 },\n  { id: 'rows', label: 'Stacked', hint: 'All in one column', minPanes: 2 },\n  { id: 'two-top-one-below', label: 'Two on top, one below', hint: 'Pair above, full width beneath', minPanes: 3 },\n  { id: 'one-top-two-below', label: 'One on top, two below', hint: 'Full width above, pair beneath', minPanes: 3 },\n  { id: 'grid', label: 'Grid', hint: 'Two per row', minPanes: 4 },\n]\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/dynamic-table/split-view/useSplitViewLayouts.js

@@ -0,0 +1,79 @@
+"use client";
+import * as React from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { apiCall } from "../../utils/apiCall.js";
+import { flash } from "../../FlashMessages.js";
+import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
+import { SPLIT_LAYOUT_VERSION, normalizeLayout } from "./types.js";
+const BASE = "/api/split_views/split-views";
+function useSplitViewLayouts(anchorTableId) {
+  const queryClient = useQueryClient();
+  const scopeVersion = useOrganizationScopeVersion();
+  const queryKey = React.useMemo(
+    () => ["split-view-layouts", anchorTableId, scopeVersion],
+    [anchorTableId, scopeVersion]
+  );
+  const { data, isFetched } = useQuery({
+    queryKey,
+    queryFn: async () => {
+      const res = await apiCall(
+        `${BASE}?anchorTableId=${encodeURIComponent(anchorTableId)}`
+      );
+      return res.ok && res.result ? res.result : { layouts: [], defaultLayoutId: null };
+    }
+  });
+  const invalidate = React.useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey });
+  }, [queryClient, queryKey]);
+  const save = React.useCallback(
+    async (name, layout) => {
+      const res = await apiCall(BASE, {
+        method: "POST",
+        body: JSON.stringify({
+          name,
+          layout,
+          layoutVersion: SPLIT_LAYOUT_VERSION,
+          anchorTableId
+        })
+      });
+      if (!res.ok) {
+        flash("Could not save this layout", "error");
+        return null;
+      }
+      flash("Layout saved", "success");
+      invalidate();
+      return res.result?.layout ?? null;
+    },
+    [anchorTableId, invalidate]
+  );
+  const remove = React.useCallback(
+    async (id) => {
+      const res = await apiCall(`${BASE}/${id}`, { method: "DELETE" });
+      if (!res.ok) {
+        flash("Could not delete this layout", "error");
+        return false;
+      }
+      flash("Layout deleted", "success");
+      invalidate();
+      return true;
+    },
+    [invalidate]
+  );
+  return {
+    // v1 (flat) documents are MIGRATED rather than dropped: `normalizeLayout`
+    // wraps their panes in a single split node, so a layout saved before the
+    // tree existed still opens and behaves identically.
+    layouts: (data?.layouts ?? []).map((saved) => ({
+      ...saved,
+      layout: normalizeLayout(saved.layout, anchorTableId)
+    })),
+    defaultLayoutId: data?.defaultLayoutId ?? null,
+    isFetched,
+    save,
+    remove
+  };
+}
+export {
+  useSplitViewLayouts
+};
+//# sourceMappingURL=useSplitViewLayouts.js.map

package/dist/backend/dynamic-table/split-view/useSplitViewLayouts.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/split-view/useSplitViewLayouts.ts"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useQuery, useQueryClient } from '@tanstack/react-query'\nimport { apiCall } from '../../utils/apiCall'\nimport { flash } from '../../FlashMessages'\nimport { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'\nimport { SPLIT_LAYOUT_VERSION, normalizeLayout, type SplitLayout } from './types'\n\n// Module routes are namespaced by module id, so this is /api/<module>/<route>.\nconst BASE = '/api/split_views/split-views'\n\nexport type SavedSplitLayout = {\n  id: string\n  name: string\n  layout: SplitLayout\n  layoutVersion: number\n  anchorTableId: string | null\n  isDefault: boolean\n}\n\ntype IndexResponse = { layouts: SavedSplitLayout[]; defaultLayoutId: string | null }\n\nexport function useSplitViewLayouts(anchorTableId: string) {\n  const queryClient = useQueryClient()\n  // Layouts are per organization; switching org must not show the previous\n  // org's saved layouts.\n  const scopeVersion = useOrganizationScopeVersion()\n  const queryKey = React.useMemo(\n    () => ['split-view-layouts', anchorTableId, scopeVersion],\n    [anchorTableId, scopeVersion],\n  )\n\n  const { data, isFetched } = useQuery({\n    queryKey,\n    queryFn: async () => {\n      const res = await apiCall<IndexResponse>(\n        `${BASE}?anchorTableId=${encodeURIComponent(anchorTableId)}`,\n      )\n      return res.ok && res.result ? res.result : { layouts: [], defaultLayoutId: null }\n    },\n  })\n\n  const invalidate = React.useCallback(() => {\n    void queryClient.invalidateQueries({ queryKey })\n  }, [queryClient, queryKey])\n\n  const save = React.useCallback(\n    async (name: string, layout: SplitLayout) => {\n      const res = await apiCall<{ layout: SavedSplitLayout }>(BASE, {\n        method: 'POST',\n        body: JSON.stringify({\n          name,\n          layout,\n          layoutVersion: SPLIT_LAYOUT_VERSION,\n          anchorTableId,\n        }),\n      })\n      if (!res.ok) {\n        flash('Could not save this layout', 'error')\n        return null\n      }\n      flash('Layout saved', 'success')\n      invalidate()\n      return res.result?.layout ?? null\n    },\n    [anchorTableId, invalidate],\n  )\n\n  const remove = React.useCallback(\n    async (id: string) => {\n      const res = await apiCall<{ ok: boolean }>(`${BASE}/${id}`, { method: 'DELETE' })\n      if (!res.ok) {\n        flash('Could not delete this layout', 'error')\n        return false\n      }\n      flash('Layout deleted', 'success')\n      invalidate()\n      return true\n    },\n    [invalidate],\n  )\n\n  return {\n    // v1 (flat) documents are MIGRATED rather than dropped: `normalizeLayout`\n    // wraps their panes in a single split node, so a layout saved before the\n    // tree existed still opens and behaves identically.\n    layouts: (data?.layouts ?? []).map((saved) => ({\n      ...saved,\n      layout: normalizeLayout(saved.layout, anchorTableId),\n    })),\n    defaultLayoutId: data?.defaultLayoutId ?? null,\n    isFetched,\n    save,\n    remove,\n  }\n}\n"],
+  "mappings": ";AAEA,YAAY,WAAW;AACvB,SAAS,UAAU,sBAAsB;AACzC,SAAS,eAAe;AACxB,SAAS,aAAa;AACtB,SAAS,mCAAmC;AAC5C,SAAS,sBAAsB,uBAAyC;AAGxE,MAAM,OAAO;AAaN,SAAS,oBAAoB,eAAuB;AACzD,QAAM,cAAc,eAAe;AAGnC,QAAM,eAAe,4BAA4B;AACjD,QAAM,WAAW,MAAM;AAAA,IACrB,MAAM,CAAC,sBAAsB,eAAe,YAAY;AAAA,IACxD,CAAC,eAAe,YAAY;AAAA,EAC9B;AAEA,QAAM,EAAE,MAAM,UAAU,IAAI,SAAS;AAAA,IACnC;AAAA,IACA,SAAS,YAAY;AACnB,YAAM,MAAM,MAAM;AAAA,QAChB,GAAG,IAAI,kBAAkB,mBAAmB,aAAa,CAAC;AAAA,MAC5D;AACA,aAAO,IAAI,MAAM,IAAI,SAAS,IAAI,SAAS,EAAE,SAAS,CAAC,GAAG,iBAAiB,KAAK;AAAA,IAClF;AAAA,EACF,CAAC;AAED,QAAM,aAAa,MAAM,YAAY,MAAM;AACzC,SAAK,YAAY,kBAAkB,EAAE,SAAS,CAAC;AAAA,EACjD,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,QAAM,OAAO,MAAM;AAAA,IACjB,OAAO,MAAc,WAAwB;AAC3C,YAAM,MAAM,MAAM,QAAsC,MAAM;AAAA,QAC5D,QAAQ;AAAA,QACR,MAAM,KAAK,UAAU;AAAA,UACnB;AAAA,UACA;AAAA,UACA,eAAe;AAAA,UACf;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AACD,UAAI,CAAC,IAAI,IAAI;AACX,cAAM,8BAA8B,OAAO;AAC3C,eAAO;AAAA,MACT;AACA,YAAM,gBAAgB,SAAS;AAC/B,iBAAW;AACX,aAAO,IAAI,QAAQ,UAAU;AAAA,IAC/B;AAAA,IACA,CAAC,eAAe,UAAU;AAAA,EAC5B;AAEA,QAAM,SAAS,MAAM;AAAA,IACnB,OAAO,OAAe;AACpB,YAAM,MAAM,MAAM,QAAyB,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,QAAQ,SAAS,CAAC;AAChF,UAAI,CAAC,IAAI,IAAI;AACX,cAAM,gCAAgC,OAAO;AAC7C,eAAO;AAAA,MACT;AACA,YAAM,kBAAkB,SAAS;AACjC,iBAAW;AACX,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU,MAAM,WAAW,CAAC,GAAG,IAAI,CAAC,WAAW;AAAA,MAC7C,GAAG;AAAA,MACH,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;AAAA,IACrD,EAAE;AAAA,IACF,iBAAiB,MAAM,mBAAmB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}