@freighttech/ui 0.13.18

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

@@ -0,0 +1,863 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { Columns2, Rows2, X, ExternalLink, Save, ChevronDown, Trash2, LayoutGrid, Grid2x2, PanelLeft, PanelRight, PanelTop, PanelBottom, Check, SlidersHorizontal } from "lucide-react";
+import { useTableById, useTableRegistry } from "../registry/TableRegistryContext.js";
+import { useToolbarOverflowClose, ToolbarOverflowCloseProvider } from "../components/ToolbarOverflow.js";
+import { computeAnchoredPosition } from "../utils/anchoredPosition.js";
+import { ContentPicker } from "./ContentPicker.js";
+import { WidgetPane } from "./WidgetPane.js";
+import { EmptySlot } from "./EmptySlot.js";
+import { WorkspaceFilterBar } from "./WorkspaceFilterBar.js";
+import {
+  mapCriteriaForTable,
+  mapCriteriaForWidget
+} from "./sharedCriteria.js";
+import { useSplitViewLayouts } from "./useSplitViewLayouts.js";
+import { readStoredLayout, writeStoredLayout } from "./layoutPersistence.js";
+import {
+  ARRANGE_PRESETS,
+  GRID_TEMPLATE_LIST,
+  PANE_MIN_HEIGHT_PX,
+  PANE_MIN_WIDTH_PX,
+  SPLIT_LAYOUT_VERSION,
+  applyGridTemplate,
+  applyPreset,
+  countPanes,
+  countSlots,
+  evenAll,
+  fillSlot,
+  listPanes,
+  listSlots,
+  makePaneId,
+  removePane,
+  resizeAt,
+  setPaneChrome,
+  setPaneContentSettings,
+  splitPane,
+  tableContent
+} from "./types.js";
+const M3_MENU_ROW = "flex h-7 w-full items-center gap-2 rounded-m3-xs px-1.5 text-left text-body-regular-xs text-[var(--m3-on-surface)] transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard hover:bg-[var(--m3-state-layer-hover)] active:bg-[var(--m3-state-layer-pressed)]";
+const M3_MENU_ROW_ON = `${M3_MENU_ROW} bg-[var(--m3-secondary-container)] text-[var(--m3-on-secondary-container)]`;
+const M3_MENU_CAPTION = "text-label-semibold-2xs uppercase text-[var(--m3-on-surface-variant)]";
+const M3_MENU_PANEL = "fixed z-[1000] overflow-y-auto rounded-m3-md border border-[var(--m3-outline-variant)] bg-[var(--m3-surface-container)] py-1 shadow-m3-2";
+function PaneBody({
+  content,
+  paneId,
+  isPrimary,
+  multiview,
+  overflowExtras,
+  chrome,
+  onWidgetSettingsChange,
+  sharedFilters,
+  sharedSearch
+}) {
+  if (content.kind === "widget") {
+    return /* @__PURE__ */ jsx(
+      WidgetPane,
+      {
+        content,
+        slotId: paneId,
+        onSettingsChange: onWidgetSettingsChange,
+        overflowExtras,
+        hideToolbar: chrome?.toolbar === false
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TablePaneBody,
+    {
+      tableId: content.tableId,
+      paneId,
+      isPrimary,
+      multiview,
+      overflowExtras,
+      chrome,
+      sharedFilters,
+      sharedSearch
+    }
+  );
+}
+function TablePaneBody({
+  tableId,
+  paneId,
+  isPrimary,
+  multiview,
+  overflowExtras,
+  chrome,
+  sharedFilters,
+  sharedSearch
+}) {
+  const { definition, status } = useTableById(tableId);
+  if (status === "unknown") {
+    return /* @__PURE__ */ jsx(PaneMessage, { "data-pane-status": "unknown", children: "This table is no longer available." });
+  }
+  if (status === "denied") {
+    return /* @__PURE__ */ jsxs(PaneMessage, { "data-pane-status": "denied", children: [
+      "You don\u2019t have access to ",
+      definition?.metadata.title ?? "this table",
+      "."
+    ] });
+  }
+  if (status === "loading" && !isPrimary) {
+    return /* @__PURE__ */ jsx(PaneMessage, { "data-pane-status": "loading", children: "Checking access\u2026" });
+  }
+  if (!definition) return null;
+  const Table = definition.Table;
+  const storageScope = isPrimary ? "" : `pane:${paneId}:`;
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      storageScope,
+      embedded: true,
+      ownsPageNavigation: isPrimary,
+      multiview,
+      overflowExtras,
+      hideToolbar: chrome?.toolbar === false,
+      hideSearch: chrome?.search === false || sharedSearch !== void 0,
+      hideViews: chrome?.viewsBar === false,
+      hidePagination: chrome?.viewsBar === false,
+      sharedFilters,
+      sharedSearch
+    }
+  );
+}
+function PaneMessage({ children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6 text-center text-body-regular-sm text-[var(--m3-on-surface-variant)]", ...rest, children });
+}
+function PaneMenuRows({
+  href,
+  chrome,
+  canClose,
+  extras,
+  onSplit,
+  onToggleChrome,
+  onClose
+}) {
+  const closeMenu = useToolbarOverflowClose();
+  const shows = [
+    { key: "toolbar", label: "Toolbar" },
+    { key: "search", label: "Search" },
+    { key: "viewsBar", label: "Views bar" }
+  ];
+  const ADD_TABLE = [
+    { dir: "row", before: true, label: "Left", Icon: PanelLeft, attr: "data-pane-split-left" },
+    { dir: "row", before: false, label: "Right", Icon: PanelRight, attr: "data-pane-split-right" },
+    { dir: "column", before: true, label: "Above", Icon: PanelTop, attr: "data-pane-split-up" },
+    { dir: "column", before: false, label: "Below", Icon: PanelBottom, attr: "data-pane-split-down" }
+  ];
+  const row = M3_MENU_ROW;
+  const gutter = "flex w-4 shrink-0 justify-center";
+  return /* @__PURE__ */ jsxs("div", { "data-pane-menu-rows": "", children: [
+    /* @__PURE__ */ jsx("div", { className: `px-2 pb-1 pt-1 ${M3_MENU_CAPTION}`, children: "Add table" }),
+    /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: /* @__PURE__ */ jsx("div", { className: "flex overflow-hidden rounded-m3-full border border-[var(--m3-outline)]", children: ADD_TABLE.map((item, index) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        title: item.label,
+        "aria-label": `Add table ${item.label.toLowerCase()}`,
+        onClick: (event) => {
+          onSplit(item.dir, item.before, event.currentTarget.getBoundingClientRect());
+          closeMenu();
+        },
+        className: `flex flex-1 flex-col items-center gap-0.5 py-1.5 text-[var(--m3-on-surface-variant)] transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard hover:bg-[var(--m3-state-layer-hover)] hover:text-[var(--m3-on-surface)] active:bg-[var(--m3-state-layer-pressed)] ${index > 0 ? "border-l border-[var(--m3-outline)]" : ""}`,
+        ...{ [item.attr]: "" },
+        children: [
+          /* @__PURE__ */ jsx(item.Icon, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx("span", { className: "text-label-semibold-2xs", children: item.label })
+        ]
+      },
+      item.label
+    )) }) }),
+    /* @__PURE__ */ jsx("div", { className: `px-2 pb-0.5 ${M3_MENU_CAPTION}`, children: "Show" }),
+    /* @__PURE__ */ jsx("div", { className: "px-1", children: shows.map((item) => {
+      const on = chrome?.[item.key] !== false;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: (event) => {
+            event.stopPropagation();
+            onToggleChrome({ [item.key]: !on });
+          },
+          className: on ? M3_MENU_ROW_ON : M3_MENU_ROW,
+          "data-pane-chrome": item.key,
+          "data-pane-chrome-on": on ? "true" : "false",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: gutter, children: on && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) }),
+            /* @__PURE__ */ jsx("span", { className: on ? "" : "text-[var(--m3-on-surface-variant)]", children: item.label })
+          ]
+        },
+        item.key
+      );
+    }) }),
+    extras && /* @__PURE__ */ jsx("div", { className: "mt-1 border-t border-[var(--m3-outline-variant)] px-1 pt-1", children: extras }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 border-t border-[var(--m3-outline-variant)] px-1 pt-1", children: [
+      href && /* @__PURE__ */ jsxs("a", { href, className: row, "data-pane-open-full": "", onClick: closeMenu, children: [
+        /* @__PURE__ */ jsx("span", { className: gutter, children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5 text-[var(--m3-on-surface-variant)]" }) }),
+        "Open full page"
+      ] }),
+      canClose && /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => {
+        onClose();
+        closeMenu();
+      }, className: row, "data-pane-close": "", children: [
+        /* @__PURE__ */ jsx("span", { className: gutter, children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-[var(--m3-on-surface-variant)]" }) }),
+        "Close pane"
+      ] })
+    ] })
+  ] });
+}
+function PaneRestoreMenu({ children }) {
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const [placement, setPlacement] = React.useState({ top: 0, left: 0, maxHeight: 720 });
+  const reposition = React.useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const next = computeAnchoredPosition(
+      trigger.getBoundingClientRect(),
+      { width: window.innerWidth, height: window.innerHeight },
+      // Clamped to what fits — see ToolbarOverflow's MENU_MAX_HEIGHT note.
+      { width: 216, preferredHeight: 720, align: "end", minHeight: 180 }
+    );
+    setPlacement({ top: next.top, left: next.left, maxHeight: next.maxHeight });
+  }, []);
+  React.useLayoutEffect(() => {
+    if (open) reposition();
+  }, [open, reposition]);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDown = (event) => {
+      const target = event.target;
+      if (!panelRef.current?.contains(target) && !triggerRef.current?.contains(target)) setOpen(false);
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    const onScroll = () => reposition();
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [open, reposition]);
+  const close = React.useCallback(() => setOpen(false), []);
+  return /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-1.5 z-30", "data-pane-restore": "", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        "aria-label": "Pane options",
+        "aria-expanded": open,
+        className: "flex h-6 w-6 cursor-pointer items-center justify-center rounded-m3-full border border-[var(--m3-outline-variant)] bg-[var(--m3-surface-container-high)] text-[var(--m3-on-surface-variant)] shadow-m3-1 transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard hover:bg-[var(--m3-surface-container-highest)] hover:text-[var(--m3-on-surface)]",
+        "data-pane-restore-btn": "",
+        children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    open && typeof document !== "undefined" && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: panelRef,
+          className: M3_MENU_PANEL,
+          style: { top: placement.top, left: placement.left, width: 216, maxHeight: placement.maxHeight },
+          "data-pane-restore-menu": "",
+          children: /* @__PURE__ */ jsx(ToolbarOverflowCloseProvider, { value: close, children })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function SharedFilterToggle({
+  enabled,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      role: "menuitemcheckbox",
+      "aria-checked": enabled,
+      title: enabled ? "Each pane goes back to its own search and filters" : "Drive every pane from one search and filter bar",
+      className: enabled ? M3_MENU_ROW_ON : M3_MENU_ROW,
+      "data-split-shared-filters": enabled ? "on" : "off",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex w-4 shrink-0 justify-center", children: enabled ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3.5 w-3.5 text-[var(--m3-on-surface-variant)]" }) }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Shared search & filters" })
+      ]
+    }
+  );
+}
+function ArrangeMenu({
+  layout,
+  onApply
+}) {
+  const [open, setOpen] = React.useState(false);
+  const closeMenu = useToolbarOverflowClose();
+  const paneCount = countPanes(layout.root);
+  const pick = (preset) => {
+    onApply(applyPreset(layout, preset));
+    setOpen(false);
+    closeMenu();
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-split-arrange-section": "", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        title: "Arrange panes",
+        "aria-expanded": open,
+        className: M3_MENU_ROW,
+        "data-split-arrange": "",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex w-4 shrink-0 justify-center", children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-3.5 w-3.5 text-[var(--m3-on-surface-variant)]" }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Arrange" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 text-[var(--m3-on-surface-variant)] transition-transform duration-[var(--m3-duration-short2)] ease-m3-standard ${open ? "rotate-180" : ""}` })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "mb-1 ml-1.5 border-l border-[var(--m3-outline-variant)] pl-1.5", "data-split-arrange-menu": "", children: [
+      ARRANGE_PRESETS.map((preset) => {
+        const enabled = paneCount >= preset.minPanes;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: !enabled,
+            onClick: () => pick(preset.id),
+            className: `flex w-full items-start gap-2 rounded-m3-sm px-2 py-1.5 text-left transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard ${enabled ? "hover:bg-[var(--m3-state-layer-hover)] active:bg-[var(--m3-state-layer-pressed)]" : "cursor-not-allowed text-[var(--m3-on-surface-variant)] opacity-[var(--m3-disabled-content-opacity)]"}`,
+            "data-split-arrange-preset": preset.id,
+            title: enabled ? preset.hint : `Needs at least ${preset.minPanes} tables`,
+            children: [
+              preset.id === "rows" ? /* @__PURE__ */ jsx(Rows2, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--m3-on-surface-variant)]" }) : preset.id === "columns" ? /* @__PURE__ */ jsx(Columns2, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--m3-on-surface-variant)]" }) : /* @__PURE__ */ jsx(LayoutGrid, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--m3-on-surface-variant)]" }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "block text-body-regular-xs", children: preset.label }),
+                /* @__PURE__ */ jsx("span", { className: "block text-body-regular-xs text-[var(--m3-on-surface-variant)]", children: preset.hint })
+              ] })
+            ]
+          },
+          preset.id
+        );
+      }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onApply({ ...layout, root: evenAll(layout.root) });
+            setOpen(false);
+            closeMenu();
+          },
+          className: "w-full rounded-m3-sm px-2 py-1.5 text-left text-body-regular-xs transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard hover:bg-[var(--m3-state-layer-hover)] active:bg-[var(--m3-state-layer-pressed)]",
+          "data-split-arrange-even": "",
+          children: "Reset sizes"
+        }
+      )
+    ] })
+  ] });
+}
+function TemplatePreview({ node, selected }) {
+  if (node.kind !== "split") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex-1 rounded-m3-xs ${selected ? "bg-[color-mix(in_srgb,var(--m3-on-secondary-container)_60%,transparent)]" : "bg-[var(--m3-outline)]"}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: `flex flex-1 gap-[2px] ${node.direction === "row" ? "flex-row" : "flex-col"}`, children: node.children.map((child, index) => /* @__PURE__ */ jsx(TemplatePreview, { node: child, selected }, index)) });
+}
+function shapeSignature(node) {
+  if (node.kind !== "split") return "p";
+  return `${node.direction === "row" ? "r" : "c"}(${node.children.map(shapeSignature).join(",")})`;
+}
+function TemplatesMenu({
+  layout,
+  onApply
+}) {
+  const [open, setOpen] = React.useState(false);
+  const closeMenu = useToolbarOverflowClose();
+  const currentShape = shapeSignature(layout.root);
+  const pick = (id) => {
+    onApply(applyGridTemplate(layout, id));
+    setOpen(false);
+    closeMenu();
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-split-templates-section": "", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        title: "Choose a grid",
+        "aria-expanded": open,
+        className: M3_MENU_ROW,
+        "data-split-templates": "",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex w-4 shrink-0 justify-center", children: /* @__PURE__ */ jsx(Grid2x2, { className: "h-3.5 w-3.5 text-[var(--m3-on-surface-variant)]" }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Grid template" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 text-[var(--m3-on-surface-variant)] transition-transform duration-[var(--m3-duration-short2)] ease-m3-standard ${open ? "rotate-180" : ""}` })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "mb-1 ml-1.5 grid grid-cols-3 gap-1 border-l border-[var(--m3-outline-variant)] py-1 pl-1.5", "data-split-templates-menu": "", children: GRID_TEMPLATE_LIST.map((template) => {
+      const shape = template.build();
+      const isCurrent = shapeSignature(shape) === currentShape;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => pick(template.id),
+          title: `${template.label} \u2014 ${template.hint}`,
+          "aria-label": template.label,
+          "aria-pressed": isCurrent,
+          className: `flex flex-col items-center gap-1 rounded-m3-sm p-1 transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard ${isCurrent ? "bg-[var(--m3-secondary-container)] text-[var(--m3-on-secondary-container)]" : "text-[var(--m3-on-surface-variant)] hover:bg-[var(--m3-state-layer-hover)] active:bg-[var(--m3-state-layer-pressed)]"}`,
+          "data-split-template": template.id,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex h-8 w-full gap-[2px] rounded-m3-xs border border-[var(--m3-outline-variant)] p-[2px]", children: /* @__PURE__ */ jsx(TemplatePreview, { node: shape, selected: isCurrent }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-body-regular-xs", children: template.slots })
+          ]
+        },
+        template.id
+      );
+    }) })
+  ] });
+}
+function LayoutsMenu({
+  anchorTableId,
+  layout,
+  onApply
+}) {
+  const { layouts, save, remove } = useSplitViewLayouts(anchorTableId);
+  const [open, setOpen] = React.useState(false);
+  const [name, setName] = React.useState("");
+  const closeMenu = useToolbarOverflowClose();
+  const commit = async () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    await save(trimmed, layout);
+    setName("");
+    setOpen(false);
+    closeMenu();
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-split-layouts-section": "", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        className: M3_MENU_ROW,
+        "data-split-layouts": "",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex w-4 shrink-0 justify-center", children: /* @__PURE__ */ jsx(Save, { className: "h-3.5 w-3.5 text-[var(--m3-on-surface-variant)]" }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Layouts" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 text-[var(--m3-on-surface-variant)] transition-transform duration-[var(--m3-duration-short2)] ease-m3-standard ${open ? "rotate-180" : ""}` })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "mb-1 ml-1.5 border-l border-[var(--m3-outline-variant)] pl-1.5", "data-split-layouts-menu": "", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pb-1", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                void commit();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                setOpen(false);
+              }
+            },
+            placeholder: "Save current as\u2026",
+            className: "min-w-0 flex-1 rounded-m3-xs border border-[var(--m3-outline)] bg-[var(--m3-surface-container-lowest)] px-1.5 py-1 text-body-regular-xs text-[var(--m3-on-surface)] transition-[color,background-color,border-color,box-shadow] duration-[var(--m3-duration-short2)] ease-m3-standard placeholder:text-[var(--m3-on-surface-variant)] focus-visible:border-[var(--m3-focus-ring-color)] focus-visible:shadow-[var(--m3-focus-halo)] focus-visible:outline-none",
+            "data-split-layout-name": ""
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => void commit(),
+            className: "shrink-0 rounded-m3-full px-2 py-1 text-body-regular-xs text-[var(--m3-on-surface)] transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard hover:bg-[var(--m3-state-layer-hover)] active:bg-[var(--m3-state-layer-pressed)]",
+            "data-split-layout-save": "",
+            children: "Save"
+          }
+        )
+      ] }),
+      layouts.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2 py-3 text-center text-body-regular-xs text-[var(--m3-on-surface-variant)]", "data-split-layouts-empty": "", children: "No saved layouts yet." }),
+      layouts.map((saved) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onApply(saved.layout);
+              setOpen(false);
+              closeMenu();
+            },
+            className: "flex-1 truncate rounded-m3-xs px-2 py-1 text-left text-body-regular-xs text-[var(--m3-on-surface)] transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard hover:bg-[var(--m3-state-layer-hover)] active:bg-[var(--m3-state-layer-pressed)]",
+            "data-split-layout-open": saved.name,
+            children: saved.name
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => void remove(saved.id),
+            "aria-label": `Delete ${saved.name}`,
+            className: "rounded-m3-full p-1 text-[var(--m3-on-surface-variant)] transition-colors duration-[var(--m3-duration-short2)] ease-m3-standard hover:bg-[var(--m3-state-layer-error-hover)] hover:text-[var(--m3-error)]",
+            "data-split-layout-delete": saved.name,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+          }
+        )
+      ] }, saved.id))
+    ] })
+  ] });
+}
+function useFilledHeight(enabled) {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(null);
+  React.useLayoutEffect(() => {
+    if (!enabled) {
+      setHeight(null);
+      return;
+    }
+    const element = ref.current;
+    if (!element) return;
+    let scrollPane = element.parentElement;
+    while (scrollPane && scrollPane !== document.body) {
+      const overflowY = getComputedStyle(scrollPane).overflowY;
+      if (overflowY === "auto" || overflowY === "scroll") break;
+      scrollPane = scrollPane.parentElement;
+    }
+    const measure = () => {
+      const rect = element.getBoundingClientRect();
+      const bottom = scrollPane && scrollPane !== document.body ? Math.min(
+        window.innerHeight,
+        Math.round(scrollPane.getBoundingClientRect().top) + scrollPane.clientHeight
+      ) : window.innerHeight;
+      setHeight(Math.max(Math.floor(bottom - rect.top), 320));
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    const observer = new ResizeObserver(measure);
+    if (scrollPane && scrollPane !== document.body) observer.observe(scrollPane);
+    return () => {
+      window.removeEventListener("resize", measure);
+      observer.disconnect();
+    };
+  }, [enabled]);
+  return { ref, height };
+}
+const EMPTY_CRITERIA = Object.freeze({
+  rules: Object.freeze([])
+});
+function SplitViewHost({ tableId }) {
+  const registry = useTableRegistry();
+  const [layout, setLayout] = React.useState(() => {
+    const known = new Set(registry.tables.map((table) => table.metadata.id));
+    const stored = readStoredLayout(
+      tableId,
+      (content) => content.kind === "table" ? known.has(content.tableId) : true
+    );
+    return stored ?? {
+      root: { kind: "pane", id: makePaneId(), content: tableContent(tableId) },
+      version: SPLIT_LAYOUT_VERSION
+    };
+  });
+  React.useEffect(() => {
+    let frame = requestAnimationFrame(() => {
+      frame = null;
+      writeStoredLayout(tableId, layout);
+    });
+    return () => {
+      if (frame === null) return;
+      cancelAnimationFrame(frame);
+      writeStoredLayout(tableId, layout);
+    };
+  }, [tableId, layout]);
+  const [pending, setPending] = React.useState(null);
+  const containerRef = React.useRef(null);
+  const fill = useFilledHeight(true);
+  const sharedEnabled = layout.sharedFiltersEnabled ?? false;
+  const criteria = React.useMemo(() => {
+    const stored = layout.sharedCriteria;
+    if (!stored || typeof stored !== "object") return EMPTY_CRITERIA;
+    const candidate = stored;
+    return Array.isArray(candidate.rules) ? stored : EMPTY_CRITERIA;
+  }, [layout.sharedCriteria]);
+  const setSharedEnabled = React.useCallback(
+    (next) => {
+      setLayout((current) => {
+        const was = current.sharedFiltersEnabled ?? false;
+        const value = typeof next === "function" ? next(was) : next;
+        return value === was ? current : { ...current, sharedFiltersEnabled: value };
+      });
+    },
+    []
+  );
+  const setCriteria = React.useCallback((next) => {
+    setLayout(
+      (current) => current.sharedCriteria === next ? current : { ...current, sharedCriteria: next }
+    );
+  }, []);
+  const liveCriteria = sharedEnabled ? criteria : null;
+  const hrefFor = React.useCallback(
+    (id) => registry.tables.find((table) => table.metadata.id === id)?.metadata.href,
+    [registry.tables]
+  );
+  const panes = React.useMemo(() => listPanes(layout.root), [layout]);
+  const slotCount = React.useMemo(() => countSlots(layout.root), [layout]);
+  const isSplit = slotCount > 1;
+  const primaryPaneId = React.useMemo(() => {
+    const own = panes.find(
+      (pane) => pane.content.kind === "table" && pane.content.tableId === tableId
+    );
+    return (own ?? panes[0])?.id;
+  }, [panes, tableId]);
+  const perPane = React.useMemo(() => {
+    const filters = /* @__PURE__ */ new Map();
+    const unmapped = [];
+    for (const pane of panes) {
+      const isTable = pane.content.kind === "table";
+      const definition = isTable ? registry.tables.find((t) => t.metadata.id === pane.content.tableId) : void 0;
+      const result = isTable ? mapCriteriaForTable(liveCriteria, definition?.metadata) : mapCriteriaForWidget(liveCriteria, pane.content.widgetId);
+      filters.set(pane.id, result.filters);
+      if (result.unmapped.length > 0) {
+        unmapped.push({
+          paneId: pane.id,
+          title: definition?.metadata.title ?? "This pane",
+          unmapped: result.unmapped
+        });
+      }
+    }
+    return { filters, unmapped };
+  }, [panes, registry.tables, liveCriteria]);
+  const sharedSearch = liveCriteria ? liveCriteria.search ?? "" : void 0;
+  const handlePick = React.useCallback(
+    // Takes a full `PaneContentRef` rather than a table id, because the picker
+    // now offers widgets too and only it knows which kind was chosen.
+    (content) => {
+      if (!pending) return;
+      setLayout(
+        (current) => pending.mode === "fill" ? fillSlot(current, pending.slotId, content) : splitPane(current, pending.slotId, content, pending.direction, pending.before)
+      );
+      setPending(null);
+    },
+    [pending]
+  );
+  const handleClose = React.useCallback((paneId) => {
+    setLayout((current) => removePane(current, paneId));
+  }, []);
+  const startDrag = React.useCallback(
+    (splitPath, index, start, axis, element) => {
+      const container = element.parentElement;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      const extent = axis === "row" ? rect.width : rect.height;
+      if (extent <= 0) return;
+      let last = start;
+      const onMove = (event) => {
+        const position = axis === "row" ? event.clientX : event.clientY;
+        const delta = position - last;
+        if (delta === 0) return;
+        last = position;
+        setLayout((current) => resizeAt(current, splitPath, index, delta / extent));
+      };
+      const onUp = () => {
+        document.removeEventListener("mousemove", onMove, true);
+        document.removeEventListener("mouseup", onUp, true);
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+      };
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = axis === "row" ? "col-resize" : "row-resize";
+      document.addEventListener("mousemove", onMove, true);
+      document.addEventListener("mouseup", onUp, true);
+    },
+    []
+  );
+  const renderNode = (node, path) => {
+    if (node.kind === "empty") {
+      return /* @__PURE__ */ jsx(
+        EmptySlot,
+        {
+          slotId: node.id,
+          canRemove: slotCount > 1,
+          onAdd: (anchor) => setPending({ mode: "fill", slotId: node.id, anchor }),
+          onRemove: () => handleClose(node.id)
+        }
+      );
+    }
+    if (node.kind === "pane") {
+      const isPrimary = node.id === primaryPaneId;
+      const definitionHref = node.content.kind === "table" ? hrefFor(node.content.tableId) : void 0;
+      const paneRows = /* @__PURE__ */ jsx(
+        PaneMenuRows,
+        {
+          href: definitionHref,
+          chrome: node.chrome,
+          canClose: isSplit,
+          extras: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(TemplatesMenu, { layout, onApply: setLayout }),
+            /* @__PURE__ */ jsx(ArrangeMenu, { layout, onApply: setLayout }),
+            /* @__PURE__ */ jsx(
+              SharedFilterToggle,
+              {
+                enabled: sharedEnabled,
+                onToggle: () => setSharedEnabled((on) => !on)
+              }
+            ),
+            /* @__PURE__ */ jsx(LayoutsMenu, { anchorTableId: tableId, layout, onApply: setLayout })
+          ] }),
+          onSplit: (direction, before, anchor) => setPending({ mode: "split", slotId: node.id, direction, before, anchor }),
+          onToggleChrome: (patch) => setLayout((current) => setPaneChrome(current, node.id, patch)),
+          onClose: () => handleClose(node.id)
+        }
+      );
+      const toolbarHidden = node.chrome?.toolbar === false;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden${isSplit ? " rounded-m3-lg border border-[var(--m3-outline-variant)] bg-[var(--m3-surface-container-lowest)]" : ""}`,
+          "data-pane-id": node.id,
+          "data-pane-table": node.content.kind === "table" ? node.content.tableId : void 0,
+          "data-pane-widget": node.content.kind === "widget" ? node.content.widgetId : void 0,
+          "data-pane-toolbar": toolbarHidden ? "hidden" : void 0,
+          children: [
+            toolbarHidden && /* @__PURE__ */ jsx(PaneRestoreMenu, { children: paneRows }),
+            /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx(
+              PaneBody,
+              {
+                content: node.content,
+                paneId: node.id,
+                isPrimary,
+                multiview: isSplit,
+                overflowExtras: paneRows,
+                chrome: node.chrome,
+                onWidgetSettingsChange: (next) => setLayout((current) => setPaneContentSettings(current, node.id, next)),
+                sharedFilters: perPane.filters.get(node.id),
+                sharedSearch
+              }
+            ) })
+          ]
+        }
+      );
+    }
+    const isRow = node.direction === "row";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex min-h-0 min-w-0 flex-1 ${isRow ? "flex-row" : "flex-col"}`,
+        "data-split-node": path.join("-") || "root",
+        "data-split-direction": node.direction,
+        children: node.children.map((child, index) => /* @__PURE__ */ jsxs(
+          React.Fragment,
+          {
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex min-h-0 min-w-0 flex-col",
+                  style: {
+                    flexGrow: node.sizes[index] ?? 1,
+                    flexShrink: 1,
+                    flexBasis: 0,
+                    minWidth: isRow ? PANE_MIN_WIDTH_PX : void 0,
+                    minHeight: !isRow ? PANE_MIN_HEIGHT_PX : void 0
+                  },
+                  children: renderNode(child, [...path, index])
+                }
+              ),
+              index < node.children.length - 1 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "separator",
+                  "aria-orientation": isRow ? "vertical" : "horizontal",
+                  title: "Drag to resize",
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    startDrag(path, index, isRow ? event.clientX : event.clientY, node.direction, event.currentTarget);
+                  },
+                  onDoubleClick: () => setLayout((current) => ({ ...current, root: evenAll(current.root) })),
+                  className: `relative z-10 shrink-0 bg-transparent before:absolute before:rounded-m3-full before:bg-transparent before:transition-colors before:duration-[var(--m3-duration-short2)] before:ease-m3-standard before:content-[''] hover:before:bg-[var(--m3-accent)] after:absolute after:content-[''] ${isRow ? "w-1 cursor-col-resize before:inset-y-0 before:left-1/2 before:w-0.5 before:-translate-x-1/2 after:inset-y-0 after:-left-0.5 after:-right-0.5" : "h-1 cursor-row-resize before:inset-x-0 before:top-1/2 before:h-0.5 before:-translate-y-1/2 after:inset-x-0 after:-top-0.5 after:-bottom-0.5"}`,
+                  "data-split-divider": `${path.join("-") || "root"}:${index}`
+                }
+              )
+            ]
+          },
+          child.kind === "split" ? `s:${listSlots(child)[0]?.id ?? index}` : child.id
+        ))
+      },
+      `split-${path.join("-")}`
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: fill.ref,
+      className: "flex h-full min-h-0 flex-col bg-[var(--m3-surface)]",
+      style: fill.height ? { height: fill.height } : void 0,
+      "data-split-view": isSplit ? "true" : "false",
+      "data-shared-filters": sharedEnabled ? "on" : "off",
+      children: [
+        sharedEnabled && /* @__PURE__ */ jsx(
+          WorkspaceFilterBar,
+          {
+            criteria,
+            onChange: setCriteria,
+            unmappedByPane: perPane.unmapped,
+            onToggleOff: () => setSharedEnabled(false)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            className: `flex min-h-0 flex-1${isSplit ? " px-2" : ""}`,
+            style: isSplit ? { overflow: "auto" } : void 0,
+            "data-split-root": "",
+            children: renderNode(layout.root, [])
+          }
+        ),
+        pending && /* @__PURE__ */ jsx(
+          ContentPicker,
+          {
+            anchorRect: pending.anchor,
+            openContent: panes.map((pane) => pane.content),
+            onPick: handlePick,
+            onClose: () => setPending(null)
+          }
+        )
+      ]
+    }
+  );
+}
+var SplitViewHost_default = SplitViewHost;
+export {
+  M3_MENU_CAPTION,
+  M3_MENU_PANEL,
+  M3_MENU_ROW,
+  M3_MENU_ROW_ON,
+  SplitViewHost,
+  SplitViewHost_default as default
+};
+//# sourceMappingURL=SplitViewHost.js.map