@ai-matrx/design-system 0.18.9 → 0.18.10

package/dist/data-table/index.cjs

@@ -37,6 +37,7 @@ __export(data_table_exports, {
   MatrxDataTable: () => MatrxDataTable,
   MatrxDataTableProvider: () => MatrxDataTableProvider,
   MatrxUuidCell: () => MatrxUuidCell,
+  SavedViewsControl: () => SavedViewsControl,
   TableTitleRow: () => TableTitleRow,
   buildRowAgentInput: () => buildRowAgentInput,
   buildViewAgentInput: () => buildViewAgentInput,
@@ -44,6 +45,7 @@ __export(data_table_exports, {
   collectSelectOptions: () => collectSelectOptions,
   downloadTableAsXlsx: () => downloadTableAsXlsx,
   filterKindLabel: () => filterKindLabel,
+  parseTableViewSnapshot: () => parseTableViewSnapshot,
   resolveFilterKind: () => resolveFilterKind,
   rowsToCsvFromColumns: () => rowsToCsvFromColumns,
   rowsToMarkdownTable: () => rowsToMarkdownTable,
@@ -797,7 +799,7 @@ var SelectContent = React6.forwardRef(
       {
         ref,
         className: cn(
-          "relative z-[10001] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          "relative z-[10001] max-h-96 min-w-[8rem] max-w-[calc(100vw-2rem)] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
           animated && MOTION_POPPER,
           // The resting gap from the trigger. It is the `translate` property
           // (POPPER_OFFSET), never Tailwind translate utilities: those compose
@@ -815,7 +817,7 @@ var SelectContent = React6.forwardRef(
             SelectPrimitive.Viewport,
             {
               className: cn(
-                "p-0.5 overflow-y-auto",
+                "max-w-full overflow-y-auto p-0.5",
                 position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)]"
               ),
               children
@@ -842,15 +844,15 @@ var SelectItem = React6.forwardRef(({ className, children, description, ...props
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none rounded-sm py-1 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full min-w-0 cursor-default select-none rounded-sm py-1 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       description ? "flex-col items-start gap-0.5 py-1.5" : "items-center",
       className
     ),
     ...props,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPrimitive.ItemText, { children }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "block text-xs leading-snug text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 whitespace-normal break-words [overflow-wrap:anywhere]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPrimitive.ItemText, { children }) }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "block min-w-0 break-words text-xs leading-snug text-muted-foreground [overflow-wrap:anywhere]", children: description }) : null
     ]
   }
 ));
@@ -900,7 +902,7 @@ function TableTitleRow({
     {
       "data-matrx-table-toolbar": true,
       className: cn(
-        "flex min-w-0 shrink-0 flex-wrap items-center gap-2",
+        "flex min-w-0 shrink-0 flex-wrap items-center gap-2 border-t border-border pt-2",
         className
       ),
       children: [
@@ -1907,132 +1909,45 @@ var import_content_transfer2 = require("@ai-matrx/kit/content-transfer");
 var React13 = __toESM(require("react"), 1);
 var import_content_transfer = require("@ai-matrx/kit/content-transfer");
 
-// src/dropdown-menu.tsx
-var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+// src/popover.tsx
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
 var React12 = __toESM(require("react"), 1);
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
-var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var DropdownMenuSubTrigger = React12.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-  DropdownMenuPrimitive.SubTrigger,
-  {
-    ref,
-    "data-slot": "dropdown-menu-sub-trigger",
-    className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  DropdownMenuPrimitive.SubContent,
-  {
-    ref,
-    "data-slot": "dropdown-menu-sub-content",
-    className: cn(MENU_SURFACE_CLASS, "shadow-lg", MOTION_POPPER, className),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React12.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
-  const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    DropdownMenuPrimitive.Content,
-    {
-      ref,
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      className: cn(
-        MENU_SURFACE_CLASS,
-        "shadow-md",
-        MOTION_POPPER,
-        className
-      ),
-      ...props
-    }
-  ) });
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React12.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    "data-slot": "dropdown-menu-item",
-    className: cn(MENU_ITEM_CLASS, inset && "pl-8", className),
-    ...props
-  }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    "data-slot": "dropdown-menu-checkbox-item",
-    className: cn(MENU_INDICATOR_ITEM_CLASS, className),
-    ...props,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    ref,
-    "data-slot": "dropdown-menu-radio-item",
-    className: cn(MENU_INDICATOR_ITEM_CLASS, className),
-    ...props,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React12.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    "data-slot": "dropdown-menu-label",
-    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    "data-slot": "dropdown-menu-separator",
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var DropdownMenuShortcut = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  "span",
-  {
-    "data-slot": "dropdown-menu-shortcut",
-    className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React12.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 4,
+    container,
+    animated = true,
     ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        className: cn(
+          // Cap to the viewport space Radix measured and scroll — a popover taller
+          // than the screen must never trap the user with unreachable content.
+          // z must EQUAL the dialog layer (z-[10000]), never exceed it: with equal
+          // z, DOM portal order decides, so a dialog opened FROM a popover stacks
+          // above it, and a popover opened from a dialog still stacks above the
+          // dialog. z-[10001] buried dialogs behind fullscreen popovers.
+          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          animated && MOTION_POPPER,
+          className
+        ),
+        ...props
+      }
+    ) });
   }
 );
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/content-transfer/index.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -2055,6 +1970,53 @@ function MenuPresentation({ label, hint, icon: Icon3 }) {
     ] })
   ] });
 }
+function PaletteGlyph({ format, ai = false, file = false }) {
+  if (ai) return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 5a3 3 0 1 0-5.997.125A4 4 0 0 0 3.5 10.9a4 4 0 0 0 .556 6.588A4 4 0 0 0 12 19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.503 5.775 4 4 0 0 1-.556 6.588A4 4 0 0 1 12 19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 5v14M8 9h1M15 9h1M8 15h1M15 15h1" })
+  ] });
+  if (file) return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M6 3h8l4 4v14H6z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M14 3v5h5M9 13h6M9 17h6" })
+  ] });
+  const path2 = format === "json" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M9 4C7 4 7 7 5 7v3c2 0 2 1 2 2s0 2-2 2v3c2 0 2 3 4 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M15 4c2 0 2 3 4 3v3c-2 0-2 1-2 2s0 2 2 2v3c-2 0-2 3-4 3" })
+  ] }) : format === "compact-json" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m14 10 7-7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M20 10h-6V4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m3 21 7-7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M4 14h6v6" })
+  ] }) : format === "csv" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M4 10h16M10 4v16" })
+  ] }) : format === "tsv" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M14 2v6h6M8 13h2M14 13h2M8 17h2M14 17h2" })
+  ] }) : format === "xlsx" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M14 2v6h6M8 13h8M8 17h8M12 11v8" })
+  ] }) : format === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M14 2v6h6M10 13l-2 2 2 2M14 17l2-2-2-2" })
+  ] }) : format === "html" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M15 6h6M3 6h7M3 12h18M3 18h12" }) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M4 7V4h16v3M9 20h6M12 4v16" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "matrx-alchemy-palette-glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: path2 });
+}
+function PaletteRows({ title, items, onRun, extra, ai = false }) {
+  if (!items.length && !extra) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: "matrx-alchemy-palette-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { children: title }),
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { type: "button", className: cn("matrx-alchemy-palette-row", ai && "matrx-alchemy-palette-row-ai"), "aria-label": item.ariaLabel, onClick: () => onRun?.(item), children: [
+      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(item.icon, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteGlyph, { ai }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
+        item.copyLabel ?? item.label,
+        item.hint ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("small", { className: "matrx-alchemy-menu-hint", children: item.hint }) : null
+      ] })
+    ] }, item.id)),
+    extra
+  ] });
+}
 var LABEL = { plain: "Plain text", markdown: "Markdown", html: "Formatted", json: "JSON", "compact-json": "Compact JSON", csv: "CSV", tsv: "Google Sheets", xlsx: "Excel workbook" };
 var BUILT_INS = Object.freeze(Object.keys(LABEL).map((id) => ({ id })));
 var COPIES = ["plain", "markdown", "html", "json", "compact-json", "csv", "tsv"];
@@ -2143,7 +2105,7 @@ function ContentTransferMenu(props) {
   const identityKey = props.capabilities?.identityKey ?? inherited.identityKey;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContentTransferMenuSession, { ...props }, identityKey ?? "anonymous");
 }
-function ContentTransferMenuSession({ source, surface, label, projection, sections, preferences, table, formatSources, variants = EMPTY_VARIANTS, actions = [], capabilities: local, disabled, enabled = true, className, stopPropagation = true, hide = [], controllerRef }) {
+function ContentTransferMenuSession({ source, surface, label, projection, sections, preferences, table, formatSources, sourceFormats = true, variants = EMPTY_VARIANTS, actions = [], capabilities: local, disabled, enabled = true, className, stopPropagation = true, hide = [], controllerRef }) {
   const triggerRef = React13.useRef(null);
   const inherited = React13.useContext(CapabilityContext);
   const nearestSurface = React13.useContext(SurfaceContext);
@@ -2156,6 +2118,8 @@ function ContentTransferMenuSession({ source, surface, label, projection, sectio
   const workspaceCaptures = React13.useRef(/* @__PURE__ */ new Map());
   const externalWorkspaceKeys = React13.useRef(/* @__PURE__ */ new Set());
   const [notice, setNotice] = React13.useState(null);
+  const [paletteOpen, setPaletteOpen] = React13.useState(false);
+  const [mode, setMode] = React13.useState("copy");
   const scopes = React13.useMemo(() => table?.availableScopes ?? ["target"], [table]);
   const initialScope = table?.initialScope ?? "target";
   if (!scopes.includes(initialScope)) throw new Error("Alchemy initialScope must be included in availableScopes.");
@@ -2407,48 +2371,87 @@ function ContentTransferMenuSession({ source, surface, label, projection, sectio
   }, [captureOne, capturePrimary, fence, initialScope, preferences, providerPreferences, report]);
   if (!enabled) return null;
   const payload = menuCapture?.snapshot.payload ?? (source && "kind" in source ? source : void 0);
-  const quickVariants = (section) => variants.filter((v) => v.copyLabel && (v.section ?? "ai") === section).map((v) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuItem, { "aria-label": v.ariaLabel, onSelect: () => void transfer("markdown", false, v), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuPresentation, { ...v, label: v.copyLabel }) }, `copy:${v.id}`));
-  const visibleCopies = COPIES.filter((f) => Boolean(formatSources?.[f]) || !["csv", "tsv"].includes(f) || payload?.kind === "rows");
-  const visibleDownloads = DOWNLOADS.filter((f) => f !== "xlsx" && Boolean(formatSources?.[f]) || !["csv", "tsv", "xlsx"].includes(f) || payload?.kind === "rows");
-  const visibleAdapters = menuCapture ? adapters.filter((a) => a.supports(menuCapture.snapshot.payload)) : [];
+  const quickVariants = (section) => variants.filter((v) => v.copyLabel && (v.section ?? "ai") === section);
+  const visibleCopies = sourceFormats ? COPIES.filter((f) => Boolean(formatSources?.[f]) || !["csv", "tsv"].includes(f) || payload?.kind === "rows") : [];
+  const visibleDownloads = sourceFormats ? DOWNLOADS.filter((f) => f !== "xlsx" && Boolean(formatSources?.[f]) || !["csv", "tsv", "xlsx"].includes(f) || payload?.kind === "rows") : [];
+  const visibleAdapters = sourceFormats && menuCapture ? adapters.filter((a) => a.supports(menuCapture.snapshot.payload)) : [];
   const visibleActions = menuCapture ? registeredActions.filter((a) => a.supports(menuCapture.snapshot)) : [];
+  const downloadActions = visibleActions.filter((action) => action.placement === "download");
+  const ordinaryActions = visibleActions.filter((action) => action.placement !== "download");
+  const copyAvailable = !hide.includes("copy") && visibleCopies.length + visibleAdapters.length + quickVariants("copy").length > 0;
+  const downloadAvailable = !hide.includes("download") && visibleDownloads.length + visibleAdapters.length + downloadActions.length > 0;
+  const prepareAvailable = !hide.includes("prepare") && (quickVariants("ai").length > 0 || Boolean(primary) || Boolean(nearestWorkspaceKey) || variants.length > 0);
+  const resolvedMode = mode === "copy" && !copyAvailable ? "download" : mode === "download" && !downloadAvailable ? "copy" : mode;
+  const closePalette = () => setPaletteOpen(false);
+  const tile = (id, label2, onClick, options = {}) => {
+    const presentation = options.action;
+    const Icon3 = presentation?.icon;
+    const fallbackLabel = options.file && !/^download\b/i.test(label2) ? `Download ${label2}` : label2;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-tile", "aria-label": presentation?.ariaLabel ?? (presentation ? fallbackLabel : options.ariaLabel ?? `${resolvedMode === "copy" ? "Copy" : "Download"} ${label2}`), onClick: () => {
+      closePalette();
+      onClick();
+    }, children: [
+      Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon3, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteGlyph, { ...!options.custom ? { format: id } : {}, ...options.ai ? { ai: true } : {}, ...options.file ? { file: true } : {} }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
+        label2,
+        presentation?.hint ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("small", { className: "matrx-alchemy-menu-hint", children: presentation.hint }) : null
+      ] })
+    ] }, id);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: cn("matrx-alchemy", className), onClick: stopPropagation ? (event) => event.stopPropagation() : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenu, { onOpenChange: (open) => {
-      if (open) void preflight();
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Popover, { open: paletteOpen, onOpenChange: (open) => {
+      setPaletteOpen(open);
+      if (open) {
+        setMode("copy");
+        void preflight();
+      }
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { ref: triggerRef, type: "button", className: "matrx-alchemy-trigger", disabled, "aria-label": `Copy, transform or export ${sourceLabel}`, title: "Alchemy \u2014 copy, transform, export", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AlchemyGlyph, {}) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuContent, { align: "end", className: "matrx-alchemy-menu", children: [
-        menuStatus === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuItem, { disabled: true, children: "Inspecting content\u2026" }) : menuStatus !== "idle" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuItem, { disabled: true, children: menuStatus }) : null,
-        !hide.includes("copy") ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuLabel, { children: "Copy" }),
-          quickVariants("copy"),
-          visibleCopies.map((format) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuItem, { onSelect: () => void transfer(format, false), children: format === "plain" ? "Copy" : `Copy ${LABEL[format]}` }, format)),
-          visibleAdapters.map((adapter) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuItem, { onSelect: () => void transfer(adapter, false), children: [
-            "Copy ",
-            adapter.label
-          ] }, adapter.id))
-        ] }) : null,
-        !hide.includes("prepare") ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuSeparator, {}),
-          quickVariants("ai"),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuItem, { onSelect: () => void openWorkspace(), children: "Prepare for AI\u2026" }),
-          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuItem, { onSelect: () => void openWorkspace(nearestWorkspaceKey, { source: nearestSurface, label: nearestSurface.surfaceName }), children: "Prepare this surface\u2026" }) : null,
-          variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuItem, { onSelect: () => void openWorkspace(variantWorkspaceKeys.get(variant.id), variant), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuPresentation, { ...variant, label: `Prepare ${variant.label}\u2026` }) }, variant.id))
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { ref: triggerRef, type: "button", className: "matrx-alchemy-trigger", disabled, "aria-label": `Copy, transform or export ${sourceLabel}`, title: "Alchemy \u2014 copy, transform, export", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AlchemyGlyph, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PopoverContent, { align: "end", className: "matrx-alchemy-menu matrx-alchemy-palette", "aria-label": "Alchemy output options", onCloseAutoFocus: () => triggerRef.current?.focus(), children: [
+        copyAvailable && downloadAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-mode", "aria-label": "Output action", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "Copy mode", "aria-pressed": resolvedMode === "copy", onClick: () => setMode("copy"), children: "Copy" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "Download mode", "aria-pressed": resolvedMode === "download", onClick: () => setMode("download"), children: "Download" })
         ] }) : null,
-        !hide.includes("download") ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuLabel, { children: "Download" }),
-          visibleDownloads.map((format) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuItem, { onSelect: () => void transfer(format, true), children: [
-            "Download ",
-            LABEL[format]
-          ] }, format)),
-          visibleAdapters.map((adapter) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuItem, { onSelect: () => void transfer(adapter, true), children: [
-            "Download ",
-            adapter.label
-          ] }, `download:${adapter.id}`))
+        menuStatus === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "matrx-alchemy-palette-status", children: "Inspecting content\u2026" }) : menuStatus !== "idle" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "matrx-alchemy-error", children: menuStatus }) : null,
+        resolvedMode === "copy" && copyAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-palette-grid", children: [
+            visibleCopies.map((format) => tile(format, { plain: "Text", markdown: "Markdown", html: "Formatted", json: "JSON", "compact-json": "Compact", csv: "CSV", tsv: "Sheets" }[format], () => void transfer(format, false), { ariaLabel: `Copy ${LABEL[format]}` })),
+            visibleAdapters.map((adapter) => tile(adapter.id, adapter.label, () => void transfer(adapter, false), { custom: true }))
+          ] }),
+          quickVariants("copy").length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Quick copy", items: quickVariants("copy"), onRun: (variant) => {
+            closePalette();
+            void transfer("markdown", false, variant);
+          } }) : null
         ] }) : null,
-        visibleActions.length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuSeparator, {}) : null,
-        visibleActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuItem, { "aria-label": action.ariaLabel, onSelect: () => void runAction(action), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuPresentation, { ...action, label: action.label }) }, action.id))
+        resolvedMode === "download" && downloadAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-alchemy-palette-grid", children: [
+          visibleDownloads.map((format) => tile(format, { plain: "Text", markdown: "Markdown", html: "Formatted", json: "JSON", "compact-json": "Compact", csv: "CSV", tsv: "Sheets", xlsx: "Excel" }[format], () => void transfer(format, true), { ariaLabel: `Download ${LABEL[format]}` })),
+          visibleAdapters.map((adapter) => tile(adapter.id, adapter.label, () => void transfer(adapter, true), { custom: true })),
+          downloadActions.map((action) => tile(action.id, action.label, () => void runAction(action), { custom: true, action, file: true }))
+        ] }) }) : null,
+        prepareAvailable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Prepare", ai: true, items: quickVariants("ai"), onRun: (variant) => {
+          closePalette();
+          void transfer("markdown", false, variant);
+        }, extra: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
+          closePalette();
+          void openWorkspace();
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteGlyph, { ai: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Prepare for AI\u2026" })
+        ] }) }) : null,
+        prepareAvailable && (nearestWorkspaceKey || variants.length) ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Context", items: [], extra: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
+            closePalette();
+            void openWorkspace(nearestWorkspaceKey, { source: nearestSurface, label: nearestSurface.surfaceName });
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Prepare this surface\u2026" }) }) : null,
+          variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": variant.ariaLabel, onClick: () => {
+            closePalette();
+            void openWorkspace(variantWorkspaceKeys.get(variant.id), variant);
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuPresentation, { ...variant, label: `Prepare ${variant.label}\u2026` }) }, variant.id))
+        ] }) }) : null,
+        ordinaryActions.length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaletteRows, { title: "Actions", items: [], extra: ordinaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": action.ariaLabel, onClick: () => {
+          closePalette();
+          void runAction(action);
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuPresentation, { ...action, label: action.label }) }, action.id)) }) : null
       ] })
     ] }),
     notice ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-alchemy-notice", role: "status", children: notice }) : null,
@@ -3093,6 +3096,7 @@ function MatrxCopyMenuSession(props) {
         label: item.label,
         supports: () => true,
         ...item.build && !item.onSelect ? {
+          placement: "download",
           source: make(
             `export:${item.id}`,
             async () => {
@@ -3173,10 +3177,11 @@ function MatrxCopyMenuSession(props) {
         label: props.label,
         variants,
         actions,
+        sourceFormats: Boolean(source),
         hide: [
           ...!copyVisible || !source ? ["copy"] : [],
           ...!aiVisible || !source ? ["prepare"] : [],
-          ...!exportVisible || !source ? ["download"] : []
+          ...!exportVisible ? ["download"] : []
         ],
         formatSources: {
           ...human ? { plain: human, markdown: humanMarkdown, html: humanMarkdown } : {},
@@ -4236,52 +4241,12 @@ var import_url_state3 = require("@ai-matrx/kit/url-state");
 var import_react7 = require("react");
 var import_core = require("@dnd-kit/core");
 
-// src/popover.tsx
-var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var React15 = __toESM(require("react"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React15.forwardRef(
-  ({
-    className,
-    align = "center",
-    sideOffset = 4,
-    container,
-    animated = true,
-    ...props
-  }, ref) => {
-    const portalContainer = usePortalContainer(container);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      PopoverPrimitive.Content,
-      {
-        ref,
-        align,
-        sideOffset,
-        className: cn(
-          // Cap to the viewport space Radix measured and scroll — a popover taller
-          // than the screen must never trap the user with unreachable content.
-          // z must EQUAL the dialog layer (z-[10000]), never exceed it: with equal
-          // z, DOM portal order decides, so a dialog opened FROM a popover stacks
-          // above it, and a popover opened from a dialog still stacks above the
-          // dialog. z-[10001] buried dialogs behind fullscreen popovers.
-          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-          animated && MOTION_POPPER,
-          className
-        ),
-        ...props
-      }
-    ) });
-  }
-);
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
 // src/command.tsx
 var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_cmdk = require("cmdk");
-var React16 = __toESM(require("react"), 1);
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Command = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var React15 = __toESM(require("react"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Command = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   import_cmdk.Command,
   {
     ref,
@@ -4296,12 +4261,12 @@ Command.displayName = import_cmdk.Command.displayName;
 var DIALOG_DESKTOP_CLASSES2 = `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
 var DIALOG_MOBILE_SHEET_CLASSES2 = "fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE2 = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
-var CommandDialogContent = React16.forwardRef(({ className, children, container, ...props }, ref) => {
+var CommandDialogContent = React15.forwardRef(({ className, children, container, ...props }, ref) => {
   const isMobile = useIsMobile();
   const isModal = useRadixDialogModal();
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogPrimitive2.Portal, { container: portalContainer, children: [
-    isModal ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogPrimitive2.Portal, { container: portalContainer, children: [
+    isModal ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       DialogPrimitive2.Overlay,
       {
         className: cn(
@@ -4310,7 +4275,7 @@ var CommandDialogContent = React16.forwardRef(({ className, children, container,
         )
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       DialogPrimitive2.Content,
       {
         ref,
@@ -4326,9 +4291,9 @@ var CommandDialogContent = React16.forwardRef(({ className, children, container,
         ...props,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogPrimitive2.Close, { className: "absolute right-2 top-4 flex h-10 w-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(XIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogPrimitive2.Close, { className: "absolute right-2 top-4 flex h-10 w-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(XIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -4336,9 +4301,9 @@ var CommandDialogContent = React16.forwardRef(({ className, children, container,
   ] });
 });
 CommandDialogContent.displayName = "CommandDialogContent";
-var CommandInput = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var CommandInput = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_cmdk.Command.Input,
     {
       ref,
@@ -4351,7 +4316,7 @@ var CommandInput = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var CommandList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   import_cmdk.Command.List,
   {
     ref,
@@ -4360,7 +4325,7 @@ var CommandList = React16.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React16.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var CommandEmpty = React15.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   import_cmdk.Command.Empty,
   {
     ref,
@@ -4369,7 +4334,7 @@ var CommandEmpty = React16.forwardRef((props, ref) => /* @__PURE__ */ (0, import
   }
 ));
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var CommandGroup = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   import_cmdk.Command.Group,
   {
     ref,
@@ -4381,7 +4346,7 @@ var CommandGroup = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var CommandSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   import_cmdk.Command.Separator,
   {
     ref,
@@ -4390,7 +4355,7 @@ var CommandSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var CommandItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   import_cmdk.Command.Item,
   {
     ref,
@@ -4406,7 +4371,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "span",
     {
       className: cn(
@@ -4420,10 +4385,10 @@ var CommandShortcut = ({
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/data-table/ColumnHeaderCell.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var HeaderButton = (0, import_react7.forwardRef)(({ dragDescription, "aria-describedby": tooltipDescription, ...props }, ref) => {
   const descriptions = [tooltipDescription, dragDescription].filter((value) => Boolean(value)).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "button",
     {
       ref,
@@ -4503,7 +4468,7 @@ function ColumnHeaderCell({
     else onFilterChange(next);
   };
   const menuLabel = labelText ? `Sort or filter ${labelText}` : "Sort or filter column";
-  const menuContent = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const menuContent = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     PopoverContent,
     {
       align: "start",
@@ -4520,9 +4485,9 @@ function ColumnHeaderCell({
         input.focus();
       },
       children: [
-        sortable ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-0.5 pb-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        sortable ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-0.5 pb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               Button,
               {
                 variant: isSorted && sortDirection === "asc" ? "secondary" : "ghost",
@@ -4530,12 +4495,12 @@ function ColumnHeaderCell({
                 className: "h-8 justify-start gap-2 px-2 text-xs font-normal",
                 onClick: onSortAsc,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowUp, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArrowUp, { className: "h-3.5 w-3.5" }),
                   "Sort ascending"
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               Button,
               {
                 variant: isSorted && sortDirection === "desc" ? "secondary" : "ghost",
@@ -4543,12 +4508,12 @@ function ColumnHeaderCell({
                 className: "h-8 justify-start gap-2 px-2 text-xs font-normal",
                 onClick: onSortDesc,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowDown, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArrowDown, { className: "h-3.5 w-3.5" }),
                   "Sort descending"
                 ]
               }
             ),
-            isSorted ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            isSorted ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               Button,
               {
                 variant: "ghost",
@@ -4556,15 +4521,15 @@ function ColumnHeaderCell({
                 className: "h-8 justify-start gap-2 px-2 text-xs font-normal text-muted-foreground",
                 onClick: onClearSort,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ListX, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ListX, { className: "h-3.5 w-3.5" }),
                   "Clear sort"
                 ]
               }
             ) : null
           ] }),
-          filterKind ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-2 h-px bg-border" }) : null
+          filterKind ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-2 h-px bg-border" }) : null
         ] }) : null,
-        filterKind ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        filterKind ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           FilterBody,
           {
             kind: filterKind,
@@ -4579,10 +4544,10 @@ function ColumnHeaderCell({
             allowNullModes
           }
         ) : null,
-        filterKind && visibleFilter && allowNegation ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Match mode" }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-md border p-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        filterKind && visibleFilter && allowNegation ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Match mode" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-md border p-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 type: "button",
@@ -4595,7 +4560,7 @@ function ColumnHeaderCell({
                 children: "Include"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 type: "button",
@@ -4610,11 +4575,11 @@ function ColumnHeaderCell({
             )
           ] })
         ] }) : null,
-        filterKind && deferredFilter ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
-          filterFooterHint ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-2 text-xs text-muted-foreground", children: filterFooterHint }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-end gap-2", children: [
-            filterShowCancel ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", variant: "ghost", size: "sm", onClick: cancelFilter, children: "Cancel" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", size: "sm", onClick: applyFilter, children: filterApplyLabel ?? "Apply" })
+        filterKind && deferredFilter ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
+          filterFooterHint ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-2 text-xs text-muted-foreground", children: filterFooterHint }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-end gap-2", children: [
+            filterShowCancel ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { type: "button", variant: "ghost", size: "sm", onClick: cancelFilter, children: "Cancel" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { type: "button", size: "sm", onClick: applyFilter, children: filterApplyLabel ?? "Apply" })
           ] })
         ] }) : null
       ]
@@ -4623,10 +4588,10 @@ function ColumnHeaderCell({
   if (compact) {
     if (!sortable && !filterKind) {
       if (!reorderEnabled) {
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("flex items-center justify-center", className), children: label });
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("flex items-center justify-center", className), children: label });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           HeaderButton,
           {
             type: "button",
@@ -4638,14 +4603,14 @@ function ColumnHeaderCell({
             children: label
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(TooltipContent, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(TooltipContent, { children: [
           "Drag to reorder ",
           reorderLabel,
           "."
         ] })
       ] }) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         className: cn(
@@ -4653,9 +4618,9 @@ function ColumnHeaderCell({
           align === "right" ? "justify-end" : "justify-center",
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               HeaderButton,
               {
                 type: "button",
@@ -4671,8 +4636,8 @@ function ColumnHeaderCell({
                 ),
                 children: [
                   label,
-                  isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowUp, { className: "absolute -top-1 right-0 h-2 w-2 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowDown, { className: "absolute -top-1 right-0 h-2 w-2 text-primary" }) : null,
-                  filterActive ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArrowUp, { className: "absolute -top-1 right-0 h-2 w-2 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArrowDown, { className: "absolute -top-1 right-0 h-2 w-2 text-primary" }) : null,
+                  filterActive ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     "span",
                     {
                       "aria-hidden": true,
@@ -4682,14 +4647,14 @@ function ColumnHeaderCell({
                 ]
               }
             ) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipContent, { children: menuLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipContent, { children: menuLabel })
           ] }),
           menuContent
         ] })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       className: cn(
@@ -4699,8 +4664,8 @@ function ColumnHeaderCell({
         className
       ),
       children: [
-        sortable ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        sortable ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             HeaderButton,
             {
               type: "button",
@@ -4712,14 +4677,14 @@ function ColumnHeaderCell({
                 isSorted ? "text-foreground" : "text-muted-foreground hover:text-foreground"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "truncate", children: label }),
-                isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowUp, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowDown, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowUpDown, { className: "h-3 w-3 shrink-0 opacity-40" })
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "truncate", children: label }),
+                isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArrowUp, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArrowDown, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArrowUpDown, { className: "h-3 w-3 shrink-0 opacity-40" })
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipContent, { children: reorderEnabled ? `Drag to reorder ${reorderLabel}.` : labelText ?? "Sort column" })
-        ] }) : reorderEnabled ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipContent, { children: reorderEnabled ? `Drag to reorder ${reorderLabel}.` : labelText ?? "Sort column" })
+        ] }) : reorderEnabled ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             HeaderButton,
             {
               type: "button",
@@ -4731,16 +4696,16 @@ function ColumnHeaderCell({
               children: label
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(TooltipContent, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(TooltipContent, { children: [
             "Drag to reorder ",
             reorderLabel,
             "."
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
-        filterKind ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "inline-flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Tooltip, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
+        filterKind ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "inline-flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "button",
                 {
                   type: "button",
@@ -4750,7 +4715,7 @@ function ColumnHeaderCell({
                     "rounded p-0.5 transition-colors",
                     filterActive ? "text-primary hover:text-primary/80" : "text-muted-foreground/40 hover:text-muted-foreground"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     ListFilter,
                     {
                       className: cn("h-3 w-3", filterActive && "fill-primary/20")
@@ -4758,12 +4723,12 @@ function ColumnHeaderCell({
                   )
                 }
               ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipContent, { children: menuLabel })
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipContent, { children: menuLabel })
             ] }),
             menuContent
           ] }),
-          filterActive ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          filterActive ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 type: "button",
@@ -4773,10 +4738,10 @@ function ColumnHeaderCell({
                   onFilterChange(void 0);
                 },
                 className: "rounded p-0.5 text-primary hover:bg-muted hover:text-foreground",
-                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(X, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(X, { className: "h-3 w-3" })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipContent, { children: labelText ? `Clear ${labelText} filter` : "Clear this filter" })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipContent, { children: labelText ? `Clear ${labelText} filter` : "Clear this filter" })
           ] }) : null
         ] }) : null
       ]
@@ -4801,14 +4766,14 @@ function FilterBody({
         onChange({ kind: "text", value: "", mode: next });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "space-y-1.5 px-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Filter" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex gap-1", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-1.5 px-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Filter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex gap-1", children: [
         ["contains", "Contains"],
         ["empty", "(empty)"],
         ["not_empty", "(not empty)"],
         ...allowNullModes ? [["null", "(null)"], ["not_null", "(not null)"]] : []
-      ].map(([m, label]) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      ].map(([m, label]) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "button",
         {
           type: "button",
@@ -4822,8 +4787,8 @@ function FilterBody({
         },
         m
       )) }),
-      mode === "contains" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      mode === "contains" && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Input,
           {
             "data-matrx-filter-autofocus": true,
@@ -4836,14 +4801,14 @@ function FilterBody({
             style: { fontSize: "16px" }
           }
         ),
-        text ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        text ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "button",
           {
             type: "button",
             "aria-label": "Clear filter text",
             className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
             onClick: () => onChange(void 0),
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(X, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(X, { className: "h-3.5 w-3.5" })
           }
         ) : null
       ] })
@@ -4851,7 +4816,7 @@ function FilterBody({
   }
   if (kind === "select") {
     const selected = value?.kind === "select" ? value.values ?? (value.value && value.value !== "__all__" ? [value.value] : []) : [];
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       SearchableSelectFilter,
       {
         selected,
@@ -4863,9 +4828,9 @@ function FilterBody({
   }
   if (kind === "boolean") {
     const current = value?.kind === "boolean" ? value.value : "__all__";
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "space-y-1.5 px-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Filter" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-1.5 px-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Filter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         Select,
         {
           value: current === "__all__" ? "__all__" : current ? "true" : "false",
@@ -4874,18 +4839,18 @@ function FilterBody({
             else onChange({ kind: "boolean", value: v === "true" });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectValue, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(SelectContent, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectItem, { value: "__all__", children: "All" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectItem, { value: "true", children: "Yes" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectItem, { value: "false", children: "No" })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(SelectContent, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectItem, { value: "__all__", children: "All" }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectItem, { value: "true", children: "Yes" }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectItem, { value: "false", children: "No" })
             ] })
           ]
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NumberFilterBody, { value, onChange });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NumberFilterBody, { value, onChange });
 }
 function SearchableSelectFilter({
   selected,
@@ -4913,13 +4878,13 @@ function SearchableSelectFilter({
       next.length === 0 ? void 0 : { kind: "select", value: next[0] ?? "", values: next }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "space-y-1 px-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between px-1 pb-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-1 px-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between px-1 pb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: [
         "Filter",
         selected.length > 1 ? ` (any of ${selected.length})` : ""
       ] }),
-      selected.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      selected.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "button",
         {
           type: "button",
@@ -4929,8 +4894,8 @@ function SearchableSelectFilter({
         }
       ) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Command, { className: "rounded-md border border-border", shouldFilter: false, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Command, { className: "rounded-md border border-border", shouldFilter: false, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         CommandInput,
         {
           "data-matrx-filter-autofocus": true,
@@ -4940,10 +4905,10 @@ function SearchableSelectFilter({
           className: "h-8 text-sm"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CommandList, { className: "max-h-48", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CommandEmpty, { className: "py-3 text-xs text-muted-foreground", children: "No matches" }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CommandGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(CommandList, { className: "max-h-48", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CommandEmpty, { className: "py-3 text-xs text-muted-foreground", children: "No matches" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(CommandGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             CommandItem,
             {
               value: "__all__",
@@ -4954,7 +4919,7 @@ function SearchableSelectFilter({
           ),
           filtered.map((o) => {
             const active = selected.includes(o.value);
-            return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               CommandItem,
               {
                 value: o.value,
@@ -4964,7 +4929,7 @@ function SearchableSelectFilter({
                   active && "bg-accent text-accent-foreground"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     "span",
                     {
                       className: cn(
@@ -4972,7 +4937,7 @@ function SearchableSelectFilter({
                         single ? "rounded-full" : "rounded-sm",
                         active ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground/40"
                       ),
-                      children: active && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Check, { className: "h-2.5 w-2.5" })
+                      children: active && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Check, { className: "h-2.5 w-2.5" })
                     }
                   ),
                   o.label
@@ -5003,10 +4968,10 @@ function NumberFilterBody({
     }
     onChange({ kind: "number", min: nextMin, max: nextMax });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "space-y-1.5 px-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Range" }),
-      (min !== void 0 || max !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-1.5 px-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Range" }),
+      (min !== void 0 || max !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "button",
         {
           type: "button",
@@ -5020,8 +4985,8 @@ function NumberFilterBody({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Input,
         {
           "data-matrx-filter-autofocus": true,
@@ -5036,8 +5001,8 @@ function NumberFilterBody({
           style: { fontSize: "16px" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-muted-foreground", children: "\u2013" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xs text-muted-foreground", children: "\u2013" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Input,
         {
           value: maxText,
@@ -5060,10 +5025,23 @@ function parseOptionalNumber(raw) {
   return Number.isFinite(n) ? n : void 0;
 }
 
+// src/data-table/column-drag-preview.ts
+function projectColumnDragOrder(orderedIds, preview2) {
+  const order = [...orderedIds];
+  if (!preview2?.targetId || preview2.draggedId === preview2.targetId) return order;
+  const draggedIndex = order.indexOf(preview2.draggedId);
+  const targetIndex = order.indexOf(preview2.targetId);
+  if (draggedIndex < 0 || targetIndex < 0) return order;
+  order.splice(draggedIndex, 1);
+  const insertion = order.indexOf(preview2.targetId) + (preview2.after ? 1 : 0);
+  order.splice(insertion, 0, preview2.draggedId);
+  return order;
+}
+
 // src/data-table/ColumnManager.tsx
 var import_react8 = require("react");
 var import_core2 = require("@dnd-kit/core");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function ColumnManager({
   open,
   onOpenChange,
@@ -5137,18 +5115,18 @@ function ColumnManager({
       if (target) moveTo(dragged, String(target));
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogContent, { className: "max-w-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogTitle, { children: "Columns" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogDescription, { children: "Choose the columns to show and set their order." })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogTitle, { children: "Columns" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogDescription, { children: "Choose the columns to show and set their order." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-h-[55dvh] divide-y overflow-y-auto rounded-md border", children: draftOrder.map((id, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "max-h-[55dvh] divide-y overflow-y-auto rounded-md border", children: draftOrder.map((id, index) => {
       const column = byId.get(id);
       if (!column) return null;
       const label = typeof column.header === "string" ? column.header : id;
       const hideable = column.hideable !== false;
       const visible = !draftHidden.has(id);
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         ColumnManagerDropTarget,
         {
           id,
@@ -5158,8 +5136,8 @@ function ColumnManager({
             dropTarget === id && draggedColumnId !== id && "border-t-2 border-primary"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColumnManagerDragHandle, { id, label }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColumnManagerDragHandle, { id, label }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               Checkbox,
               {
                 checked: visible,
@@ -5176,8 +5154,8 @@ function ColumnManager({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               Button,
               {
                 type: "button",
@@ -5187,10 +5165,10 @@ function ColumnManager({
                 "aria-label": `Move ${label} earlier`,
                 disabled: index === 0,
                 onClick: () => move(id, -1),
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ArrowUp, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowUp, { className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               Button,
               {
                 type: "button",
@@ -5200,7 +5178,7 @@ function ColumnManager({
                 "aria-label": `Move ${label} later`,
                 disabled: index === draftOrder.length - 1,
                 onClick: () => move(id, 1),
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ArrowDown, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowDown, { className: "h-4 w-4" })
               }
             )
           ]
@@ -5208,9 +5186,9 @@ function ColumnManager({
         id
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DialogFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         Button,
         {
           type: "button",
@@ -5233,14 +5211,14 @@ function ColumnManagerDropTarget({
     id: `matrx-column-manager:${id}`,
     data: { matrxDragKind: "column-manager", columnId: id }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: setNodeRef, "data-matrx-column-manager-drop-target": id, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: setNodeRef, "data-matrx-column-manager-drop-target": id, className, children });
 }
 function ColumnManagerDragHandle({ id, label }) {
   const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
     id: `matrx-column-manager:${id}`,
     data: { matrxDragKind: "column-manager", columnId: id }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "button",
     {
       ref: setNodeRef,
@@ -5250,14 +5228,65 @@ function ColumnManagerDragHandle({ id, label }) {
       title: `Drag to reorder ${label}`,
       ...attributes,
       ...listeners,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GripVertical, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(GripVertical, { className: "h-4 w-4" })
     }
   );
 }
 
+// src/data-table/saved-view-snapshot.ts
+var import_zod2 = require("zod");
+var filterSchema = import_zod2.z.union([
+  import_zod2.z.object({ kind: import_zod2.z.literal("text"), value: import_zod2.z.string(), mode: import_zod2.z.enum(["contains", "empty", "not_empty", "null", "not_null"]).optional(), negated: import_zod2.z.boolean().optional() }),
+  import_zod2.z.object({ kind: import_zod2.z.literal("select"), value: import_zod2.z.string(), values: import_zod2.z.array(import_zod2.z.string()).optional(), negated: import_zod2.z.boolean().optional() }),
+  import_zod2.z.object({ kind: import_zod2.z.literal("boolean"), value: import_zod2.z.boolean(), negated: import_zod2.z.boolean().optional() }),
+  import_zod2.z.object({ kind: import_zod2.z.literal("number"), min: import_zod2.z.number().optional(), max: import_zod2.z.number().optional(), negated: import_zod2.z.boolean().optional() })
+]);
+var layeredRuleSchema = import_zod2.z.object({ id: import_zod2.z.string().min(1), field: import_zod2.z.string().min(1), operator: import_zod2.z.enum(LAYERED_FILTER_OPERATORS), value: import_zod2.z.string(), valueTo: import_zod2.z.string().optional() });
+var snapshotSchema = import_zod2.z.object({
+  __kind: import_zod2.z.literal("matrx-table-view"),
+  version: import_zod2.z.literal(1),
+  query: import_zod2.z.object({ pageSize: import_zod2.z.number().int().positive(), search: import_zod2.z.string(), searchMatchMode: import_zod2.z.enum(["contains", "whole_words"]).optional(), anyOf: import_zod2.z.string(), layeredFilters: import_zod2.z.array(layeredRuleSchema).optional(), columnFilters: import_zod2.z.record(import_zod2.z.string(), filterSchema.optional()), sort: import_zod2.z.object({ id: import_zod2.z.string().min(1), direction: import_zod2.z.enum(["asc", "desc"]) }).nullable() }),
+  columns: import_zod2.z.object({
+    order: import_zod2.z.array(import_zod2.z.string().min(1)).refine((order) => new Set(order).size === order.length, {
+      message: "Column order must not contain duplicate IDs"
+    }),
+    hidden: import_zod2.z.array(import_zod2.z.string().min(1))
+  })
+});
+function normalizeFilters(raw) {
+  const filters = {};
+  for (const [id, value] of Object.entries(raw)) {
+    if (value === void 0) continue;
+    if (value.kind === "text") filters[id] = { kind: "text", value: value.value, ...value.mode === void 0 ? {} : { mode: value.mode }, ...value.negated === void 0 ? {} : { negated: value.negated } };
+    else if (value.kind === "select") filters[id] = { kind: "select", value: value.value, ...value.values === void 0 ? {} : { values: value.values }, ...value.negated === void 0 ? {} : { negated: value.negated } };
+    else if (value.kind === "boolean") filters[id] = { kind: "boolean", value: value.value, ...value.negated === void 0 ? {} : { negated: value.negated } };
+    else filters[id] = { kind: "number", ...value.min === void 0 ? {} : { min: value.min }, ...value.max === void 0 ? {} : { max: value.max }, ...value.negated === void 0 ? {} : { negated: value.negated } };
+  }
+  return filters;
+}
+function parseTableViewSnapshot(raw) {
+  const parsed = snapshotSchema.safeParse(raw);
+  if (!parsed.success) return null;
+  const { query, columns } = parsed.data;
+  return {
+    __kind: "matrx-table-view",
+    version: 1,
+    query: {
+      pageSize: query.pageSize,
+      search: query.search,
+      ...query.searchMatchMode === void 0 ? {} : { searchMatchMode: query.searchMatchMode },
+      anyOf: query.anyOf,
+      ...query.layeredFilters === void 0 ? {} : { layeredFilters: query.layeredFilters },
+      columnFilters: normalizeFilters(query.columnFilters),
+      sort: query.sort
+    },
+    columns: { order: columns.order, hidden: columns.hidden }
+  };
+}
+
 // src/data-table/MatrxUuidCell.tsx
 var import_react9 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var SHORT_LEN = 8;
 function shortUuid(id, len = SHORT_LEN) {
   return id.slice(0, len);
@@ -5307,7 +5336,7 @@ function MatrxUuidCell({
     []
   );
   if (!value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-muted-foreground/40", children: "\u2014" });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground/40", children: "\u2014" });
   }
   const doors = token ? resolveEntityDoors?.(token, value, href) ?? null : null;
   const resolvedHref = doors?.href ?? href ?? null;
@@ -5350,13 +5379,13 @@ function MatrxUuidCell({
   };
   const idNode = (() => {
     if (forbidden) {
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-muted-foreground/70 tabular-nums", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "min-w-0 truncate", children: display }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ShieldOff, { className: "h-3 w-3 shrink-0 opacity-60", "aria-hidden": true })
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-muted-foreground/70 tabular-nums", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "min-w-0 truncate", children: display }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ShieldOff, { className: "h-3 w-3 shrink-0 opacity-60", "aria-hidden": true })
       ] });
     }
     if (onOpen) {
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "button",
         {
           type: "button",
@@ -5365,14 +5394,14 @@ function MatrxUuidCell({
           disabled: opening,
           className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-sky-600 hover:underline dark:text-sky-400 disabled:opacity-60",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "min-w-0 truncate tabular-nums", children: display }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PanelRight, { className: "h-3 w-3 shrink-0 opacity-50" })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "min-w-0 truncate tabular-nums", children: display }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PanelRight, { className: "h-3 w-3 shrink-0 opacity-50" })
           ]
         }
       );
     }
     if (resolvedHref) {
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "a",
         {
           href: resolvedHref,
@@ -5382,15 +5411,15 @@ function MatrxUuidCell({
           onClick: stop,
           className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-sky-600 hover:underline dark:text-sky-400",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "min-w-0 truncate tabular-nums", children: display }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50" })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "min-w-0 truncate tabular-nums", children: display }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50" })
           ]
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "min-w-0 truncate font-mono text-xs text-muted-foreground tabular-nums select-all", children: display });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "min-w-0 truncate font-mono text-xs text-muted-foreground tabular-nums select-all", children: display });
   })();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "span",
     {
       "data-matrx-cell-control": true,
@@ -5400,12 +5429,12 @@ function MatrxUuidCell({
       ),
       onClick: stop,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "inline-flex min-w-0 max-w-full items-center", children: idNode }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContent, { side: "top", className: "max-w-sm break-all font-mono", children: forbidden ? `No access \xB7 ${tip}` : tip })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "inline-flex min-w-0 max-w-full items-center", children: idNode }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipContent, { side: "top", className: "max-w-sm break-all font-mono", children: forbidden ? `No access \xB7 ${tip}` : tip })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "button",
             {
               type: "button",
@@ -5415,13 +5444,13 @@ function MatrxUuidCell({
                 "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus:outline-none",
                 copied && "text-primary"
               ),
-              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Copy, { className: "h-3 w-3" })
+              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Copy, { className: "h-3 w-3" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContent, { side: "top", children: copied ? "Copied" : `Copy ${label ?? "id"}: ${value}` })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipContent, { side: "top", children: copied ? "Copied" : `Copy ${label ?? "id"}: ${value}` })
         ] }),
-        canPeek ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        canPeek ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "button",
             {
               type: "button",
@@ -5431,16 +5460,16 @@ function MatrxUuidCell({
               },
               "aria-label": `Quick look at ${label ?? "record"}`,
               className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus:outline-none",
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Lightbulb, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Lightbulb, { className: "h-3 w-3" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TooltipContent, { side: "top", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(TooltipContent, { side: "top", children: [
             "Quick look at ",
             label ?? "record"
           ] })
         ] }) : null,
-        onOpen && resolvedHref && !forbidden ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        onOpen && resolvedHref && !forbidden ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "a",
             {
               href: resolvedHref,
@@ -5449,10 +5478,10 @@ function MatrxUuidCell({
               onClick: stop,
               "aria-label": `Open ${label ?? "record"} in a new tab`,
               className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus:outline-none",
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ExternalLink, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ExternalLink, { className: "h-3 w-3" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TooltipContent, { side: "top", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(TooltipContent, { side: "top", children: [
             "Open ",
             label ?? "record",
             " in a new tab"
@@ -5460,7 +5489,7 @@ function MatrxUuidCell({
         ] }) : null,
         trailing,
         notice,
-        canPeek && peekOpen && ResourcePeek ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        canPeek && peekOpen && ResourcePeek ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           ResourcePeek,
           {
             kind: doors?.peekKind ?? token ?? "record",
@@ -5483,7 +5512,7 @@ function tokenFromColumnName(name) {
 }
 
 // src/data-table/DataRowInspector.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var noFieldToken = () => null;
 function formatValue(value) {
   if (value == null) return "\u2014";
@@ -5512,7 +5541,7 @@ function DataRowInspector({
   tokenForField = noFieldToken
 }) {
   const entries = isPlainObject(row) ? Object.entries(row) : [["value", row]];
-  const fieldButtons = (key, value) => fieldCopy ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute right-1 top-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover/field:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const fieldButtons = (key, value) => fieldCopy ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute right-1 top-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover/field:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     CopyButtons,
     {
       size: "xs",
@@ -5527,21 +5556,21 @@ function DataRowInspector({
       })
     }
   ) }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       className: cn("flex h-full min-h-0 flex-col overflow-hidden", className),
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "shrink-0 border-b border-border px-3 py-2 text-sm font-medium", children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dl", { className: "space-y-2", children: entries.map(([key, value]) => {
+        title ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "shrink-0 border-b border-border px-3 py-2 text-sm font-medium", children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dl", { className: "space-y-2", children: entries.map(([key, value]) => {
           if (isUuidValue(value)) {
-            return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               "div",
               {
                 className: "group/field relative grid grid-cols-[minmax(7rem,9rem)_1fr] gap-2 rounded-md border border-border/60 bg-muted/20 px-2.5 py-2",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dt", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: key }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dd", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dt", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: key }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dd", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     MatrxUuidCell,
                     {
                       value,
@@ -5556,13 +5585,13 @@ function DataRowInspector({
           }
           const formatted = formatValue(value);
           const multiline = formatted.includes("\n") || formatted.length > 80;
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             "div",
             {
               className: "group/field relative grid grid-cols-[minmax(7rem,9rem)_1fr] gap-2 rounded-md border border-border/60 bg-muted/20 py-2 pl-2.5 pr-12",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dt", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: key }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dt", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: key }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "dd",
                   {
                     className: cn(
@@ -5585,7 +5614,7 @@ function DataRowInspector({
 
 // src/data-table/DataRowWindow.tsx
 var import_react10 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function DataRowWindow({
   isOpen,
   onClose,
@@ -5611,9 +5640,9 @@ function DataRowWindow({
     setTab(defaultTab ?? (hasEdit ? "edit" : "view"));
   }, [isOpen, windowId, hasEdit, defaultTab]);
   if (!isOpen) return null;
-  const viewBody = viewContent ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DataRowInspector, { row });
-  const body = children ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden", children: hasTabs ? tab === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: editContent }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: viewBody }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: viewBody }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const viewBody = viewContent ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DataRowInspector, { row });
+  const body = children ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden", children: hasTabs ? tab === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: editContent }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: viewBody }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: viewBody }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     WindowPanel,
     {
       id: windowId,
@@ -5627,26 +5656,26 @@ function DataRowWindow({
       bodyClassName: "flex min-h-0 flex-1 flex-col overflow-hidden p-0",
       sidebarDefaultSize: 140,
       sidebarMinSize: 110,
-      sidebar: hasTabs ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      sidebar: hasTabs ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "nav",
         {
           "aria-label": "Row window tabs",
           className: "flex h-full flex-col gap-0.5 overflow-y-auto p-1.5",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               TabButton,
               {
                 active: tab === "view",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Eye, { className: "h-4 w-4 shrink-0" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Eye, { className: "h-4 w-4 shrink-0" }),
                 label: "View",
                 onClick: () => setTab("view")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               TabButton,
               {
                 active: tab === "edit",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Pencil, { className: "h-4 w-4 shrink-0" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Pencil, { className: "h-4 w-4 shrink-0" }),
                 label: "Edit",
                 onClick: () => setTab("edit")
               }
@@ -5664,7 +5693,7 @@ function TabButton({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "button",
     {
       type: "button",
@@ -5677,14 +5706,14 @@ function TabButton({
       ),
       children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "min-w-0 flex-1 truncate", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "min-w-0 flex-1 truncate", children: label })
       ]
     }
   );
 }
 
 // src/data-table/DirtySavePill.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function DirtySavePill({
   changeCount,
   saving,
@@ -5693,20 +5722,20 @@ function DirtySavePill({
   className
 }) {
   if (changeCount <= 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       className: cn(
         "pointer-events-none fixed inset-x-0 bottom-6 z-50 flex justify-center pb-safe",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "pointer-events-auto flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 shadow-lg elevation-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "px-1 text-xs font-medium text-muted-foreground", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "pointer-events-auto flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 shadow-lg elevation-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "px-1 text-xs font-medium text-muted-foreground", children: [
           changeCount,
           " unsaved change",
           changeCount === 1 ? "" : "s"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           Button,
           {
             type: "button",
@@ -5716,12 +5745,12 @@ function DirtySavePill({
             disabled: saving,
             onClick: onCancel,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(X, { className: "h-3.5 w-3.5" }),
               "Cancel"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           Button,
           {
             type: "button",
@@ -5730,7 +5759,7 @@ function DirtySavePill({
             disabled: saving,
             onClick: onSave,
             children: [
-              saving ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Save, { className: "h-3.5 w-3.5" }),
+              saving ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Save, { className: "h-3.5 w-3.5" }),
               "Save"
             ]
           }
@@ -5742,7 +5771,7 @@ function DirtySavePill({
 
 // src/data-table/EditableTableCell.tsx
 var import_react11 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function CellEditShell({
   href,
   display,
@@ -5751,8 +5780,8 @@ function CellEditShell({
   editButton
 }) {
   const { Link: HostLink } = useMatrxDataTableHost();
-  const Link = HostLink ?? ((props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("a", { ...props }));
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  const Link = HostLink ?? ((props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { ...props }));
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "span",
     {
       className: cn(
@@ -5764,7 +5793,7 @@ function CellEditShell({
         className
       ),
       children: [
-        href ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        href ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Link,
           {
             href,
@@ -5772,13 +5801,13 @@ function CellEditShell({
             className: "min-w-0 flex-1 overflow-hidden truncate rounded outline-none  focus-visible:ring-2 focus-visible:ring-ring",
             children: display
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "block min-w-0 flex-1 overflow-hidden", children: display }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "block min-w-0 flex-1 overflow-hidden", children: display }),
         editButton
       ]
     }
   );
 }
-var CELL_PENCIL_CLASS = "shrink-0 rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-muted/60 focus-visible:opacity-100 group-hover/cell-link:opacity-100";
+var CELL_PENCIL_CLASS = "shrink-0 rounded p-0.5 text-muted-foreground opacity-100 transition-opacity hover:bg-muted/60 focus-visible:opacity-100 lg:opacity-0 group-hover/cell-link:opacity-100";
 function EditableTableCell({
   value,
   editType,
@@ -5793,7 +5822,7 @@ function EditableTableCell({
   const [open, setOpen] = (0, import_react11.useState)(false);
   const usePencil = Boolean(href) || editTrigger === "pencil";
   if (editType === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       InlineStringEditor,
       {
         value: stringifyCellValue(value),
@@ -5806,30 +5835,30 @@ function EditableTableCell({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-    usePencil ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    usePencil ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       CellEditShell,
       {
         ...href === void 0 ? {} : { href },
         display,
         ...dirty === void 0 ? {} : { dirty },
         ...className === void 0 ? {} : { className },
-        editButton: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        editButton: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "button",
             {
               type: "button",
               "aria-label": "Edit",
               onClick: (e) => e.stopPropagation(),
               className: CELL_PENCIL_CLASS,
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Pencil, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Pencil, { className: "h-3 w-3" })
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipContent, { children: "Edit" })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipContent, { children: "Edit" })
         ] })
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "button",
         {
           type: "button",
@@ -5840,20 +5869,20 @@ function EditableTableCell({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "min-w-0 flex-1 overflow-hidden", children: display }),
-            editType === "select" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground/70 transition-colors group-hover/cell-select:text-foreground" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "min-w-0 flex-1 overflow-hidden", children: display }),
+            editType === "select" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground/70 transition-colors group-hover/cell-select:text-foreground" }) : null
           ]
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipContent, { children: "Edit value" })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipContent, { children: "Edit value" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       PopoverContent,
       {
         align: "start",
         className: "w-56 p-2",
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           TypedEditor,
           {
             editType,
@@ -5883,15 +5912,15 @@ function InlineStringEditor({
   const [draft, setDraft] = (0, import_react11.useState)(value);
   if (!editing) {
     if (usePencil) {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         CellEditShell,
         {
           ...href === void 0 ? {} : { href },
           display,
           ...dirty === void 0 ? {} : { dirty },
           ...className === void 0 ? {} : { className },
-          editButton: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          editButton: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "button",
               {
                 type: "button",
@@ -5902,16 +5931,16 @@ function InlineStringEditor({
                   setEditing(true);
                 },
                 className: CELL_PENCIL_CLASS,
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Pencil, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Pencil, { className: "h-3 w-3" })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipContent, { children: "Edit" })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipContent, { children: "Edit" })
           ] })
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           type: "button",
@@ -5928,10 +5957,10 @@ function InlineStringEditor({
           children: display
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipContent, { children: "Click to edit" })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipContent, { children: "Click to edit" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Input,
     {
       autoFocus: true,
@@ -5967,9 +5996,9 @@ function TypedEditor({
 }) {
   if (editType === "boolean") {
     const checked = Boolean(value);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xs font-medium", children: "Value" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-medium", children: "Value" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Checkbox,
         {
           checked,
@@ -5979,7 +6008,7 @@ function TypedEditor({
     ] });
   }
   if (editType === "number") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       NumberEditor,
       {
         value: typeof value === "number" ? value : Number(value) || 0,
@@ -5989,7 +6018,7 @@ function TypedEditor({
     );
   }
   if (editType === "tags") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       TagsEditor,
       {
         value: Array.isArray(value) ? value.map(String) : [],
@@ -6000,19 +6029,19 @@ function TypedEditor({
     );
   }
   if (editType === "select") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       Select,
       {
         value: stringifyCellValue(value),
         onValueChange: (v) => onCommit(v),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectValue, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectContent, { children: editOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectItem, { value: o.value, children: o.label }, o.value)) })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectValue, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectContent, { children: editOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectItem, { value: o.value, children: o.label }, o.value)) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Input,
     {
       type: "date",
@@ -6042,11 +6071,11 @@ function TagsEditor({
   const matches = suggestions.filter(
     (s) => !tags.includes(s.value) && s.value !== "__none__" && (!draft || s.label.toLowerCase().includes(draft.trim().toLowerCase()))
   ).slice(0, 6);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-2", onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      tags.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xs text-muted-foreground", children: "No tags" }),
-      tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "space-y-2", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      tags.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs text-muted-foreground", children: "No tags" }),
+      tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "button",
           {
             type: "button",
@@ -6055,17 +6084,17 @@ function TagsEditor({
             className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-[11px] hover:border-destructive hover:text-destructive",
             children: [
               tag,
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(X, { className: "h-2.5 w-2.5" })
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-2.5 w-2.5" })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(TooltipContent, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(TooltipContent, { children: [
           "Remove ",
           tag
         ] })
       ] }, tag))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Input,
       {
         autoFocus: true,
@@ -6086,7 +6115,7 @@ function TagsEditor({
         className: "h-8 text-xs"
       }
     ),
-    matches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-wrap gap-1", children: matches.map((s) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    matches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-wrap gap-1", children: matches.map((s) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "button",
       {
         type: "button",
@@ -6099,8 +6128,8 @@ function TagsEditor({
       },
       s.value
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex justify-end gap-1 pt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex justify-end gap-1 pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Button,
         {
           size: "sm",
@@ -6108,17 +6137,17 @@ function TagsEditor({
           className: "h-7 px-2",
           "aria-label": "Cancel edit",
           onClick: onCancel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(X, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-3.5 w-3.5" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Button,
         {
           size: "sm",
           className: "h-7 px-2",
           "aria-label": "Apply tags",
           onClick: () => onCommit(tags),
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Check, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Check, { className: "h-3.5 w-3.5" })
         }
       )
     ] })
@@ -6130,8 +6159,8 @@ function NumberEditor({
   onCancel
 }) {
   const [draft, setDraft] = (0, import_react11.useState)(String(value));
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Input,
       {
         autoFocus: true,
@@ -6148,8 +6177,8 @@ function NumberEditor({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex justify-end gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex justify-end gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Button,
         {
           type: "button",
@@ -6158,10 +6187,10 @@ function NumberEditor({
           className: "h-7",
           "aria-label": "Cancel edit",
           onClick: onCancel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(X, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-3.5 w-3.5" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Button,
         {
           type: "button",
@@ -6172,7 +6201,7 @@ function NumberEditor({
             const n = Number(draft);
             if (Number.isFinite(n)) onCommit(n);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Check, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Check, { className: "h-3.5 w-3.5" })
         }
       )
     ] })
@@ -6180,24 +6209,24 @@ function NumberEditor({
 }
 
 // src/data-table/ToolbarFacets.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function ToolbarFacets({ facets }) {
   if (facets.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: facets.map((facet) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: facets.map((facet) => {
     if (facet.type === "custom") {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: facet.render() }, facet.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: facet.render() }, facet.id);
     }
     const defaultValue = facet.defaultValue ?? facet.options[0]?.value ?? "";
     const isNonDefault = facet.value !== defaultValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
         className: "flex flex-wrap items-center gap-1.5 max-sm:grid max-sm:w-full max-sm:grid-cols-3",
         children: [
-          facet.label ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mr-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: facet.label }) : null,
+          facet.label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mr-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: facet.label }) : null,
           facet.options.map((opt) => {
             const active = facet.value === opt.value;
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
               Button,
               {
                 type: "button",
@@ -6211,8 +6240,8 @@ function ToolbarFacets({ facets }) {
                 children: [
                   opt.icon,
                   opt.label,
-                  active && isNonDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  active && isNonDefault ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "span",
                       {
                         role: "button",
@@ -6230,10 +6259,10 @@ function ToolbarFacets({ facets }) {
                             facet.onChange(defaultValue);
                           }
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(X, { className: "h-3 w-3" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(X, { className: "h-3 w-3" })
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipContent, { side: "top", children: "Clear this filter" })
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipContent, { side: "top", children: "Clear this filter" })
                   ] }) }) : null
                 ]
               },
@@ -6257,7 +6286,7 @@ function resetToolbarFacets(facets) {
 
 // src/data-table/LayeredFilterBuilder.tsx
 var import_react12 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function moveRule(rules, from, to) {
   if (from === to || to < 0 || to >= rules.length) return [...rules];
   const next = [...rules];
@@ -6303,8 +6332,8 @@ function LayeredFilterBuilder({
   const reorder = (from, to) => {
     onChange(moveRule(rules, from, to));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       Popover,
       {
         open,
@@ -6316,7 +6345,7 @@ function LayeredFilterBuilder({
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             Button,
             {
               type: "button",
@@ -6325,25 +6354,25 @@ function LayeredFilterBuilder({
               className: "h-8 gap-1.5 px-2 text-xs",
               "aria-label": label,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hidden sm:inline", children: rules.length > 0 ? `${rules.length} layers` : "Advanced" }),
-                rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sm:hidden", children: rules.length }) : null
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hidden sm:inline", children: rules.length > 0 ? `${rules.length} layers` : "Advanced" }),
+                rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sm:hidden", children: rules.length }) : null
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             PopoverContent,
             {
               align: "start",
               sideOffset: 6,
               className: "w-[min(46rem,calc(100vw-1rem))] p-0",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-start justify-between gap-3 border-b border-border px-3 py-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-semibold text-foreground", children: "Narrow these results" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xs text-muted-foreground", children: "Every layer must match. Drag layers to put them in the order that makes sense to you." })
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-start justify-between gap-3 border-b border-border px-3 py-2.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-semibold text-foreground", children: "Narrow these results" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs text-muted-foreground", children: "Every layer must match. Drag layers to put them in the order that makes sense to you." })
                   ] }),
-                  rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  rules.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     Button,
                     {
                       type: "button",
@@ -6355,10 +6384,10 @@ function LayeredFilterBuilder({
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "max-h-[min(28rem,65dvh)] space-y-1.5 overflow-y-auto p-2.5 scrollbar-thin", children: rules.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "rounded-md border border-dashed border-border px-3 py-5 text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Start with one simple layer" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: "For example: Keyword contains ITAD, then Keyword doesn't have the word \u201Cwhat\u201D." })
-                ] }) : rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "max-h-[min(28rem,65dvh)] space-y-1.5 overflow-y-auto p-2.5 scrollbar-thin", children: rules.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "rounded-md border border-dashed border-border px-3 py-5 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Start with one simple layer" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: "For example: Keyword contains ITAD, then Keyword doesn't have the word \u201Cwhat\u201D." })
+                ] }) : rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   LayeredRuleRow,
                   {
                     index,
@@ -6378,9 +6407,9 @@ function LayeredFilterBuilder({
                   },
                   rule.id
                 )) }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-border px-3 py-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "The regular search still works and is applied before these layers." }),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-border px-3 py-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "The regular search still works and is applied before these layers." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                     Button,
                     {
                       type: "button",
@@ -6390,7 +6419,7 @@ function LayeredFilterBuilder({
                       disabled: rules.length >= maxRules,
                       onClick: addRule,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Plus, { className: "h-3.5 w-3.5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Plus, { className: "h-3.5 w-3.5" }),
                         " Add layer"
                       ]
                     }
@@ -6402,7 +6431,7 @@ function LayeredFilterBuilder({
         ]
       }
     ),
-    rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "span",
       {
         className: cn(
@@ -6410,7 +6439,7 @@ function LayeredFilterBuilder({
           isCompleteLayeredFilterRule(rule) ? "border-border bg-muted/50 text-foreground" : "border-dashed border-warning/50 bg-warning/10 text-warning"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             "button",
             {
               type: "button",
@@ -6418,19 +6447,19 @@ function LayeredFilterBuilder({
               onClick: () => setOpen(true),
               title: isCompleteLayeredFilterRule(rule) ? layeredFilterRuleSummary(rule, fields) : `Layer ${index + 1} needs a value`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mr-1 text-muted-foreground", children: index + 1 }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mr-1 text-muted-foreground", children: index + 1 }),
                 isCompleteLayeredFilterRule(rule) ? layeredFilterRuleSummary(rule, fields) : "Choose a value"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "button",
             {
               type: "button",
               className: "shrink-0 rounded-full p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
               "aria-label": `Remove filter layer ${index + 1}`,
               onClick: () => removeRule(index),
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(X, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(X, { className: "h-3 w-3" })
             }
           )
         ]
@@ -6460,7 +6489,7 @@ function LayeredRuleRow({
     event.preventDefault();
     onKeyboardMove(event.key === "ArrowUp" ? -1 : 1);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: cn(
@@ -6473,7 +6502,7 @@ function LayeredRuleRow({
         onDrop(index);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "button",
           {
             type: "button",
@@ -6487,10 +6516,10 @@ function LayeredRuleRow({
             },
             onDragEnd,
             onKeyDown: handleMoveKey,
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           Select,
           {
             value: field.id,
@@ -6508,16 +6537,16 @@ function LayeredRuleRow({
               });
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 SelectTrigger,
                 {
                   size: "sm",
                   className: "h-7 w-full text-xs max-sm:col-span-1",
                   "aria-label": `Filter layer ${index + 1} field`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectValue, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectValue, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectContent, { children: fields.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectContent, { children: fields.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 SelectItem,
                 {
                   value: candidate.id,
@@ -6529,7 +6558,7 @@ function LayeredRuleRow({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           Select,
           {
             value: rule.operator,
@@ -6541,35 +6570,35 @@ function LayeredRuleRow({
               });
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 SelectTrigger,
                 {
                   size: "sm",
                   className: "h-7 w-full text-xs max-sm:col-start-2",
                   "aria-label": `Filter layer ${index + 1} operator`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectValue, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectValue, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectContent, { children: operators.map((operator) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectItem, { value: operator, className: "text-xs", children: LAYERED_FILTER_OPERATOR_LABELS[operator] }, operator)) })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectContent, { children: operators.map((operator) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectItem, { value: operator, className: "text-xs", children: LAYERED_FILTER_OPERATOR_LABELS[operator] }, operator)) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "min-w-0 max-sm:col-span-3 max-sm:col-start-1", children: !needsValue ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex h-7 items-center px-2 text-xs text-muted-foreground", children: "No value needed" }) : field.kind === "select" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "min-w-0 max-sm:col-span-3 max-sm:col-start-1", children: !needsValue ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "flex h-7 items-center px-2 text-xs text-muted-foreground", children: "No value needed" }) : field.kind === "select" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           Select,
           {
             value: rule.value,
             onValueChange: (value) => onChange({ value }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 SelectTrigger,
                 {
                   size: "sm",
                   className: "h-7 w-full text-xs",
                   "aria-label": `Filter layer ${index + 1} value`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectValue, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectValue, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectContent, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectContent, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 SelectItem,
                 {
                   value: option.value,
@@ -6580,8 +6609,8 @@ function LayeredRuleRow({
               )) })
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Input,
             {
               value: rule.value,
@@ -6592,9 +6621,9 @@ function LayeredRuleRow({
               "aria-label": `Filter layer ${index + 1} value`
             }
           ),
-          rule.operator === "between" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "and" }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          rule.operator === "between" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "and" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               Input,
               {
                 value: rule.valueTo ?? "",
@@ -6607,7 +6636,7 @@ function LayeredRuleRow({
             )
           ] }) : null
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Button,
           {
             type: "button",
@@ -6616,7 +6645,7 @@ function LayeredRuleRow({
             className: "h-7 w-7 p-0 text-muted-foreground hover:text-destructive max-sm:col-start-3 max-sm:row-start-1",
             "aria-label": `Remove filter layer ${index + 1}`,
             onClick: onRemove,
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Trash2, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Trash2, { className: "h-3.5 w-3.5" })
           }
         )
       ]
@@ -6715,7 +6744,7 @@ function safeQueryPage(requestedPage, totalItems, pageSize) {
 }
 
 // src/data-table/MatrxDataTable.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function hasSameRowReferences(previous, next) {
   return previous.length === next.length && previous.every((row, index) => row === next[index]);
 }
@@ -6726,7 +6755,7 @@ function TableRowCopyControl({
   sourceId,
   defaultColumns
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     CopyButtons,
     {
       size,
@@ -6748,8 +6777,8 @@ function isStringArray(value) {
 }
 var activeUrlTableIds = /* @__PURE__ */ new Set();
 function MatrxDataTable(props) {
-  if (!props.urlState) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MatrxDataTableCore, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MatrxDataTableWithUrlState, { ...props, urlState: props.urlState });
+  if (!props.urlState) return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MatrxDataTableCore, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MatrxDataTableWithUrlState, { ...props, urlState: props.urlState });
 }
 function MatrxDataTableWithUrlState({
   urlState,
@@ -6804,7 +6833,7 @@ function MatrxDataTableWithUrlState({
       props.selection?.onSelectedIdsChange(ids);
     }
   } : props.selection;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     MatrxDataTableCore,
     {
       ...props,
@@ -6840,8 +6869,10 @@ var COLUMN_REORDER_ACTIVATION_DISTANCE = 6;
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
+  tableId,
+  defaultViewSnapshot,
   columnState,
-  reorderableColumns = false,
+  reorderableColumns = true,
   columnManager: controlledColumnManager,
   getRowId,
   searchText,
@@ -6889,9 +6920,14 @@ function MatrxDataTableCore({
   const isLoading = appendQuery ? appendQuery.pagination.loading : suppliedLoading;
   const isFetching = appendQuery ? appendQuery.pagination.isFetchingNextPage : suppliedFetching;
   const host = useMatrxDataTableHost();
+  const SavedViews = host.SavedViews;
   const Link = host.Link ?? DefaultTableLink;
   const SidePanelSurface = host.SidePanelSurface ?? DefaultTableSidePanel;
   const { notify: toast, notice } = useTableNotice();
+  const [savedViewError, setSavedViewError] = (0, import_react13.useState)(null);
+  const [toolbarActionError, setToolbarActionError] = (0, import_react13.useState)(null);
+  const [toolbarActionPending, setToolbarActionPending] = (0, import_react13.useState)({ refresh: false, add: false });
+  const toolbarActionPendingRef = (0, import_react13.useRef)({ refresh: false, add: false });
   const CHECKBOX_TAP_AREA = "relative max-lg:before:absolute max-lg:before:left-1/2 max-lg:before:top-1/2 max-lg:before:h-11 max-lg:before:w-11 max-lg:before:-translate-x-1/2 max-lg:before:-translate-y-1/2 max-lg:before:content-['']";
   const mobileCardsClass = mobileCardsBreakpoint === "lg" ? "lg:hidden" : "sm:hidden";
   const tableWithCardsClass = mobileCardsBreakpoint === "lg" ? "max-lg:hidden" : "max-sm:hidden";
@@ -7162,11 +7198,12 @@ function MatrxDataTableCore({
   const [hiddenColumnIds, setHiddenColumnIds] = (0, import_react13.useState)(
     () => new Set(columnState?.hidden ?? columns.filter((column) => column.hidden).map(columnId))
   );
+  const knownColumnIds = (0, import_react13.useRef)(new Set(columns.map(columnId)));
   const draggedColumnId = (0, import_react13.useRef)(null);
   const columnDragActive = (0, import_react13.useRef)(false);
   const columnDragRaf = (0, import_react13.useRef)(null);
   const columnDragScrollDirection = (0, import_react13.useRef)(0);
-  const [columnDropTarget, setColumnDropTarget] = (0, import_react13.useState)(null);
+  const [columnDragPreview, setColumnDragPreview] = (0, import_react13.useState)(null);
   const stopColumnDragScroll = (0, import_react13.useCallback)(() => {
     if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
     columnDragRaf.current = null;
@@ -7219,6 +7256,7 @@ function MatrxDataTableCore({
   (0, import_react13.useEffect)(() => {
     const ids = columns.map(columnId);
     if (columnState) return;
+    const previousIds = knownColumnIds.current;
     setColumnOrder((current) => [
       ...current.filter((id) => ids.includes(id)),
       ...ids.filter((id) => !current.includes(id))
@@ -7226,17 +7264,23 @@ function MatrxDataTableCore({
     setHiddenColumnIds((current) => {
       const next = new Set([...current].filter((id) => ids.includes(id)));
       for (const column of columns) {
-        if (column.hidden) next.add(columnId(column));
+        const id = columnId(column);
+        if (column.hidden && !previousIds.has(id)) next.add(id);
       }
       return next;
     });
+    knownColumnIds.current = new Set(ids);
   }, [columns, columnState]);
+  const previewColumnOrder = (0, import_react13.useMemo)(
+    () => projectColumnDragOrder(effectiveColumnOrder, columnDragPreview),
+    [columnDragPreview, effectiveColumnOrder]
+  );
   const visibleColumns = (0, import_react13.useMemo)(() => {
     const byId = new Map(columns.map((column) => [columnId(column), column]));
-    return effectiveColumnOrder.map((id) => byId.get(id)).filter(
+    return previewColumnOrder.map((id) => byId.get(id)).filter(
       (column) => column !== void 0 && !effectiveHiddenColumnIds.has(columnId(column))
     );
-  }, [columns, effectiveColumnOrder, effectiveHiddenColumnIds]);
+  }, [columns, effectiveHiddenColumnIds, previewColumnOrder]);
   const declaredVisibleCopyColumns = (0, import_react13.useMemo)(
     () => visibleColumns.filter((column) => column.accessorFn !== void 0 || column.accessorKey !== void 0),
     [visibleColumns]
@@ -7773,7 +7817,121 @@ function MatrxDataTableCore({
       }
     } : facet
   ) : toolbar?.facets;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  const renderRecordCell = (row, col, index) => {
+    const id = getRowId(row);
+    const field = col.accessorKey ? String(col.accessorKey) : columnId(col);
+    const rowEdits = edits[id];
+    const display = renderCell(applyRowEdits(row, rowEdits), col, index);
+    const href = col.href?.(row) ?? void 0;
+    if (editEnabled && col.editable && (col.editableIf?.(row) ?? true)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        EditableTableCell,
+        {
+          value: rowEdits && field in rowEdits ? rowEdits[field] : getCellValue(row, col),
+          editType: col.editable,
+          ...col.editOptions === void 0 ? {} : { editOptions: col.editOptions },
+          display,
+          dirty: Boolean(rowEdits && field in rowEdits),
+          onCommit: (next) => commitCell(id, field, next),
+          ...href === void 0 ? {} : { href },
+          ...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger }
+        }
+      );
+    }
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Link, { href, onClick: (event) => event.stopPropagation(), className: "block w-full min-w-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring", children: display }) : display;
+  };
+  const currentViewSnapshot = (0, import_react13.useMemo)(
+    () => ({
+      __kind: "matrx-table-view",
+      version: 1,
+      query: {
+        pageSize,
+        search: searchValue,
+        ...searchMatchMode === "contains" ? {} : { searchMatchMode },
+        anyOf: anyOfValue,
+        ...layeredFilters.length ? { layeredFilters } : {},
+        columnFilters,
+        sort
+      },
+      columns: {
+        order: effectiveColumnOrder,
+        hidden: [...effectiveHiddenColumnIds]
+      }
+    }),
+    [
+      anyOfValue,
+      columnFilters,
+      effectiveColumnOrder,
+      effectiveHiddenColumnIds,
+      layeredFilters,
+      pageSize,
+      searchMatchMode,
+      searchValue,
+      sort
+    ]
+  );
+  const declaredDefaultViewSnapshot = (0, import_react13.useMemo)(
+    () => defaultViewSnapshot ?? {
+      __kind: "matrx-table-view",
+      version: 1,
+      query: {
+        pageSize: defaultPageSize,
+        search: "",
+        anyOf: "",
+        layeredFilters: [],
+        columnFilters: {},
+        sort: defaultSort
+      },
+      columns: {
+        order: columns.map(columnId),
+        hidden: columns.filter((column) => column.hidden).map(columnId)
+      }
+    },
+    [columns, defaultPageSize, defaultSort, defaultViewSnapshot]
+  );
+  const applySavedView = (0, import_react13.useCallback)(
+    (rawSnapshot) => {
+      const snapshot = parseTableViewSnapshot(rawSnapshot);
+      if (!snapshot) {
+        const message = "This saved view has an unsupported format. The current table was left unchanged.";
+        setSavedViewError(message);
+        throw new Error(message);
+      }
+      const knownColumns = new Set(columns.map(columnId));
+      const unknown = [
+        ...snapshot.columns.order,
+        ...snapshot.columns.hidden,
+        ...Object.keys(snapshot.query.columnFilters),
+        ...snapshot.query.sort ? [snapshot.query.sort.id] : [],
+        ...snapshot.query.layeredFilters?.map((rule) => rule.field) ?? []
+      ].filter((id, index, values) => !knownColumns.has(id) && values.indexOf(id) === index);
+      if (unknown.length > 0) {
+        const message = `This saved view refers to unavailable columns: ${unknown.join(", ")}. The current table was left unchanged.`;
+        setSavedViewError(message);
+        throw new Error(message);
+      }
+      setSavedViewError(null);
+      const nextQuery = { ...snapshot.query, page: 1 };
+      const nextOrder = [...snapshot.columns.order, ...columns.map(columnId).filter((id) => !snapshot.columns.order.includes(id))];
+      if (controlledQuery) {
+        controlledQuery.onStateChange(nextQuery);
+        toolbar?.onSearchChange?.(nextQuery.search);
+        toolbar?.anyOf?.onChange?.(nextQuery.anyOf);
+      } else {
+        setSearchValue(nextQuery.search);
+        setInternalSearchMatchMode(nextQuery.searchMatchMode ?? "contains");
+        setAnyOfValue(nextQuery.anyOf);
+        setInternalLayeredFilters(nextQuery.layeredFilters ?? []);
+        setInternalColumnFilters(nextQuery.columnFilters);
+        setInternalSort(nextQuery.sort);
+        setInternalPageSize(nextQuery.pageSize);
+        setInternalPage(1);
+      }
+      commitColumnState(nextOrder, new Set(snapshot.columns.hidden));
+    },
+    [columns, commitColumnState, controlledQuery, toolbar]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     import_core3.DndContext,
     {
       id: tableDndContextId,
@@ -7788,8 +7946,10 @@ function MatrxDataTableCore({
       onDragStart: (event) => {
         const kind = event.active.data.current?.matrxDragKind;
         if (kind === "column-header") {
-          draggedColumnId.current = String(event.active.data.current?.columnId);
+          const draggedId = String(event.active.data.current?.columnId);
+          draggedColumnId.current = draggedId;
           columnDragActive.current = true;
+          setColumnDragPreview({ draggedId, targetId: null, after: false });
           return;
         }
         if (kind === "column-manager") return;
@@ -7802,13 +7962,18 @@ function MatrxDataTableCore({
         const activeRect = event.active.rect.current.translated;
         const overRect = event.over?.rect;
         if (!overId || !activeRect || !overRect) {
-          setColumnDropTarget(null);
+          setColumnDragPreview(
+            (current) => current?.targetId === null ? current : current ? { ...current, targetId: null } : current
+          );
           columnDragScrollDirection.current = 0;
           stopColumnDragScroll();
           return;
         }
         const after = activeRect.left + activeRect.width / 2 >= overRect.left + overRect.width / 2;
-        setColumnDropTarget({ id: String(overId), after });
+        setColumnDragPreview((current) => {
+          if (!current) return current;
+          return current.targetId === overId && current.after === after ? current : { ...current, targetId: String(overId), after };
+        });
         const scroll = scrollRef.current;
         if (!scroll) return;
         const bounds = scroll.getBoundingClientRect();
@@ -7820,7 +7985,7 @@ function MatrxDataTableCore({
       onDragCancel: () => {
         columnDragActive.current = false;
         draggedColumnId.current = null;
-        setColumnDropTarget(null);
+        setColumnDragPreview(null);
         stopColumnDragScroll();
         setDraggedRowId(null);
       },
@@ -7838,8 +8003,15 @@ function MatrxDataTableCore({
         const overRect = event.over?.rect;
         columnDragActive.current = false;
         draggedColumnId.current = null;
-        setColumnDropTarget(null);
+        setColumnDragPreview(null);
         stopColumnDragScroll();
+        if (columnDragPreview?.draggedId === from && columnDragPreview.targetId !== null && columnDragPreview.targetId !== from) {
+          commitColumnState(
+            projectColumnDragOrder(effectiveColumnOrder, columnDragPreview),
+            effectiveHiddenColumnIds
+          );
+          return;
+        }
         if (!target || from === target || !activeRect || !overRect) return;
         const order = [...effectiveColumnOrder];
         const fromIndex = order.indexOf(from);
@@ -7852,10 +8024,11 @@ function MatrxDataTableCore({
         commitColumnState(order, effectiveHiddenColumnIds);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "div",
           {
             ref: rootRef,
+            "data-matrx-table": true,
             "data-url-state-table": urlState?.id,
             className: cn(
               // The touch-target floor deliberately SKIPS checkboxes, radios and
@@ -7870,11 +8043,22 @@ function MatrxDataTableCore({
             ),
             children: [
               notice,
-              !hideToolbar && (toolbar?.title || showSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
+              toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
+              !hideToolbar && (toolbar?.title || showSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                 TableTitleRow,
                 {
                   ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
-                  search: showSearch ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                  context: tableId && SavedViews ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                    SavedViews,
+                    {
+                      tableId,
+                      snapshot: currentViewSnapshot,
+                      defaultSnapshot: declaredDefaultViewSnapshot,
+                      onApply: applySavedView
+                    }
+                  ) : void 0,
+                  search: showSearch ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                     "div",
                     {
                       "data-matrx-table-search": true,
@@ -7883,9 +8067,9 @@ function MatrxDataTableCore({
                         toolbar?.searchMatch ? "sm:max-w-md" : "sm:max-w-xs"
                       ),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                             Input,
                             {
                               value: searchValue,
@@ -7898,22 +8082,22 @@ function MatrxDataTableCore({
                               style: { fontSize: "16px" }
                             }
                           ),
-                          searchValue ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          searchValue ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               "button",
                               {
                                 type: "button",
                                 "aria-label": "Clear search",
                                 className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
                                 onClick: () => setSearchValue(""),
-                                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(X, { className: "h-3.5 w-3.5" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(X, { className: "h-3.5 w-3.5" })
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: "Clear search" })
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: "Clear search" })
                           ] }) : null
                         ] }),
-                        toolbar?.searchMatch ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                        toolbar?.searchMatch ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                             Button,
                             {
                               type: "button",
@@ -7926,18 +8110,18 @@ function MatrxDataTableCore({
                                 searchMatchMode === "whole_words" ? "contains" : "whole_words"
                               ),
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(WholeWord, { className: "h-3.5 w-3.5" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(WholeWord, { className: "h-3.5 w-3.5" }),
                                 searchMatchMode === "whole_words" ? "Whole words" : "Contains"
                               ]
                             }
                           ) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: searchMatchMode === "whole_words" ? "Whole words \u2014 click to match text anywhere" : "Contains text \u2014 click to require whole words" })
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: searchMatchMode === "whole_words" ? "Whole words \u2014 click to match text anywhere" : "Contains text \u2014 click to require whole words" })
                         ] }) : null
                       ]
                     }
                   ) : null,
                   children: [
-                    toolbar?.layeredFilters ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    toolbar?.layeredFilters ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       LayeredFilterBuilder,
                       {
                         fields: toolbar.layeredFilters.fields,
@@ -7947,9 +8131,9 @@ function MatrxDataTableCore({
                         label: toolbar.layeredFilters.label
                       }
                     ) : null,
-                    toolbar?.anyOf ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative w-full max-w-xs", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    toolbar?.anyOf ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative w-full max-w-xs", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         Input,
                         {
                           value: anyOfValue,
@@ -7959,29 +8143,29 @@ function MatrxDataTableCore({
                           style: { fontSize: "16px" }
                         }
                       ),
-                      anyOfValue ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      anyOfValue ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           "button",
                           {
                             type: "button",
                             "aria-label": "Clear match-any search",
                             className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
                             onClick: () => setAnyOfValue(""),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(X, { className: "h-3.5 w-3.5" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(X, { className: "h-3.5 w-3.5" })
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: "Clear match-any search" })
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: "Clear match-any search" })
                       ] }) : null
                     ] }) : null,
-                    renderedFacets ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToolbarFacets, { facets: renderedFacets }) : null,
+                    renderedFacets ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToolbarFacets, { facets: renderedFacets }) : null,
                     toolbar?.leading,
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                       "div",
                       {
                         "data-matrx-table-actions": true,
                         className: "ml-auto flex min-w-0 flex-wrap items-center gap-2",
                         children: [
-                          sourceTotal !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                          sourceTotal !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                             "span",
                             {
                               "data-matrx-table-source-total": true,
@@ -7998,8 +8182,8 @@ function MatrxDataTableCore({
                               ]
                             }
                           ) : null,
-                          hasActiveFilters ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                               Button,
                               {
                                 type: "button",
@@ -8007,16 +8191,17 @@ function MatrxDataTableCore({
                                 size: "sm",
                                 className: "h-7 gap-1 px-2 text-xs text-muted-foreground",
                                 onClick: clearAllFilters,
+                                disabled: !hasActiveFilters,
                                 "aria-label": "Clear all filters",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Eraser, { className: "h-3.5 w-3.5" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "max-sm:sr-only", children: "Clear all" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Eraser, { className: "h-3.5 w-3.5" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "max-sm:sr-only", children: "Clear all" })
                                 ]
                               }
-                            ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: "Clear search and filters; keep columns and sort" })
-                          ] }) : null,
-                          showToolbarCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                            ) }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: hasActiveFilters ? "Clear search and filters; keep columns and sort" : "No search or filters to clear" })
+                          ] }),
+                          showToolbarCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                             CopyButtons,
                             {
                               size: "icon",
@@ -8056,8 +8241,8 @@ function MatrxDataTableCore({
                               }
                             }
                           ) : null,
-                          columns.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                          columns.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                               Button,
                               {
                                 type: "button",
@@ -8067,15 +8252,80 @@ function MatrxDataTableCore({
                                 className: "h-8 w-8",
                                 onClick: () => setColumnManagerOpen(true),
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SlidersHorizontal, { className: "h-4 w-4" }),
-                                  effectiveHiddenColumnIds.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "sr-only", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SlidersHorizontal, { className: "h-4 w-4" }),
+                                  effectiveHiddenColumnIds.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "sr-only", children: [
                                     effectiveHiddenColumnIds.size,
                                     " hidden"
                                   ] }) : null
                                 ]
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: "Show, hide, or reorder columns" })
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: "Show, hide, or reorder columns" })
+                          ] }) : null,
+                          toolbar?.refresh ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                              Button,
+                              {
+                                type: "button",
+                                variant: "ghost",
+                                size: "icon",
+                                className: "h-8 w-8",
+                                "aria-label": toolbar.refresh.label ?? "Refresh",
+                                disabled: isFetching || toolbarActionPending.refresh,
+                                onClick: () => {
+                                  if (toolbarActionPendingRef.current.refresh) return;
+                                  toolbarActionPendingRef.current.refresh = true;
+                                  setToolbarActionPending((current) => ({ ...current, refresh: true }));
+                                  setToolbarActionError(null);
+                                  void Promise.resolve().then(() => toolbar.refresh?.onRefresh()).catch((cause) => {
+                                    const message = cause instanceof Error ? cause.message : String(cause);
+                                    setToolbarActionError(`Refresh failed: ${message}`);
+                                    toast.error(`Refresh failed: ${message}`);
+                                  }).finally(() => {
+                                    toolbarActionPendingRef.current.refresh = false;
+                                    setToolbarActionPending((current) => ({ ...current, refresh: false }));
+                                  });
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                  Loader2,
+                                  {
+                                    className: cn(
+                                      "h-4 w-4",
+                                      (isFetching || toolbarActionPending.refresh) && "animate-spin"
+                                    )
+                                  }
+                                )
+                              }
+                            ) }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: isFetching ? "Refreshing table data" : toolbar.refresh.label ?? "Refresh" })
+                          ] }) : null,
+                          toolbar?.add ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                              Button,
+                              {
+                                type: "button",
+                                size: "icon",
+                                className: "h-8 w-8",
+                                "aria-label": "Add",
+                                disabled: toolbar.add.disabled || toolbarActionPending.add,
+                                onClick: () => {
+                                  if (toolbarActionPendingRef.current.add) return;
+                                  toolbarActionPendingRef.current.add = true;
+                                  setToolbarActionPending((current) => ({ ...current, add: true }));
+                                  setToolbarActionError(null);
+                                  void Promise.resolve().then(() => toolbar.add?.onAdd()).catch((cause) => {
+                                    const message = cause instanceof Error ? cause.message : String(cause);
+                                    setToolbarActionError(`Add failed: ${message}`);
+                                    toast.error(`Add failed: ${message}`);
+                                  }).finally(() => {
+                                    toolbarActionPendingRef.current.add = false;
+                                    setToolbarActionPending((current) => ({ ...current, add: false }));
+                                  });
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Plus, { className: "h-4 w-4" })
+                              }
+                            ) }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: toolbar.add.disabled ? toolbar.add.disabledReason ?? "Add unavailable" : "Add" })
                           ] }) : null,
                           toolbar?.actions
                         ]
@@ -8084,15 +8334,15 @@ function MatrxDataTableCore({
                   ]
                 }
               ),
-              selection && selectionCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2 py-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-xs font-medium text-foreground", children: [
+              selection && selectionCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2 py-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "text-xs font-medium text-foreground", children: [
                   selectionCount.toLocaleString(),
                   " ",
                   selectionNoun,
                   selectionCount === 1 ? "" : "s",
                   " selected"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                   Button,
                   {
                     type: "button",
@@ -8104,13 +8354,13 @@ function MatrxDataTableCore({
                       selection.onSelectedIdsChange([]);
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(X, { className: "h-3.5 w-3.5" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(X, { className: "h-3.5 w-3.5" }),
                       "Clear"
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
-                  effectiveCopy && selectedRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
+                  effectiveCopy && selectedRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     CopyButtons,
                     {
                       size: "icon",
@@ -8140,9 +8390,9 @@ function MatrxDataTableCore({
                   selection.actions?.(selectedRows, selection.selectedIds)
                 ] })
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
-                  mobileCards ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
+                  mobileCards ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                     "div",
                     {
                       ref: cardsScrollRef,
@@ -8154,33 +8404,37 @@ function MatrxDataTableCore({
                         mobileCardsClass
                       ),
                       children: [
-                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                           "div",
                           {
                             role: "status",
                             className: "h-0.5 shrink-0 overflow-hidden rounded-full bg-primary/15",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
                             ]
                           }
                         ) : null,
-                        isLoading ? Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        isLoading ? Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           Skeleton,
                           {
                             className: "h-52 w-full shrink-0 rounded-lg"
                           },
                           `mobile-card-sk-${index}`
-                        )) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex min-h-48 flex-1 items-center justify-center px-4 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex max-w-sm flex-col items-center gap-2", children: [
+                        )) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex min-h-48 flex-1 items-center justify-center px-4 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex max-w-sm flex-col items-center gap-2", children: [
                           emptyState?.icon,
-                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-sm font-medium text-foreground", children: emptyState?.title ?? "No rows" }),
-                          emptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyState.description }) : null,
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium text-foreground", children: emptyState?.title ?? "No rows" }),
+                          emptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyState.description }) : null,
                           emptyState?.action
                         ] }) }) : paginated.map((row, index) => {
                           const id = getRowId(row);
                           const displayRow = applyRowEdits(row, edits[id]);
                           const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
-                          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react13.Fragment, { children: mobileCards(displayRow, index, {
+                          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react13.Fragment, { children: mobileCards(displayRow, index, {
+                            renderCell: (columnKey) => {
+                              const column = columns.find((candidate) => columnId(candidate) === columnKey);
+                              return column ? renderRecordCell(row, column, index) : null;
+                            },
                             selected: selectedIdSet.has(id),
                             selectable,
                             onSelectedChange: (nextSelected) => {
@@ -8192,13 +8446,13 @@ function MatrxDataTableCore({
                               else next.delete(id);
                               setSelectedIds(next);
                             },
-                            actions: showRowCopy || rowActions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                            actions: showRowCopy || rowActions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                               "div",
                               {
                                 className: "inline-flex items-center gap-1",
                                 onClick: (event) => event.stopPropagation(),
                                 children: [
-                                  showRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                  showRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     TableRowCopyControl,
                                     {
                                       size: "xs",
@@ -8221,7 +8475,7 @@ function MatrxDataTableCore({
                             ) : null
                           }) }, id);
                         }),
-                        appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                        appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                           "div",
                           {
                             "data-matrx-table-append-loading-card": true,
@@ -8229,7 +8483,7 @@ function MatrxDataTableCore({
                             "aria-live": "polite",
                             className: "sticky bottom-0 z-20 flex h-16 w-full max-w-[100cqw] shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-card/95 px-3 text-sm font-medium text-foreground shadow-sm backdrop-blur-sm",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                 Loader2,
                                 {
                                   "aria-hidden": "true",
@@ -8243,7 +8497,7 @@ function MatrxDataTableCore({
                       ]
                     }
                   ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                     "div",
                     {
                       ref: scrollRef,
@@ -8257,34 +8511,34 @@ function MatrxDataTableCore({
                         tableClassName
                       ),
                       children: [
-                        hierarchy && draggedRow ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        hierarchy && draggedRow ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           HierarchyRootDropTarget,
                           {
                             label: hierarchy.rootDropLabel ?? "Drop here to move to the top level",
                             draggedLabel: hierarchy.itemLabel?.(draggedRow) ?? "Moving row"
                           }
                         ) : null,
-                        hierarchy && draggedRowId ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        hierarchy && draggedRowId ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           HierarchyDragIndicatorLayer,
                           {
                             scrollRef,
                             resolve: resolveHierarchyMove
                           }
                         ) : null,
-                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                           "div",
                           {
                             role: "status",
                             className: "sticky left-0 top-0 z-20 h-0.5 w-full overflow-hidden bg-primary/15",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
                             ]
                           }
                         ) : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("table", { className: "table w-max min-w-full max-w-none caption-bottom overflow-visible text-sm sm:w-full sm:min-w-0 sm:max-w-full", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("thead", { className: "sticky top-0 z-10 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("tr", { children: [
-                            selection ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("th", { className: "h-9 w-9 px-2 text-left align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("table", { className: "table w-max min-w-full max-w-none caption-bottom overflow-visible text-sm sm:w-full sm:min-w-0 sm:max-w-full", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("thead", { className: "sticky top-0 z-10 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("tr", { children: [
+                            selection ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { className: "h-9 w-9 px-2 text-left align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               Checkbox,
                               {
                                 className: CHECKBOX_TAP_AREA,
@@ -8300,9 +8554,11 @@ function MatrxDataTableCore({
                               const isSorted = sort?.id === id;
                               const headerLabel = col.label ?? (typeof col.header === "string" ? col.header : id);
                               const defaultSortDirection = col.defaultSortDirection ?? "asc";
-                              return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                              const isColumnDragShadow = columnDragPreview?.draggedId === id && columnDragPreview.targetId !== null;
+                              return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                 "th",
                                 {
+                                  "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
                                   "aria-sort": isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : void 0,
                                   className: cn(
                                     "h-9 text-left align-middle max-sm:whitespace-nowrap",
@@ -8322,12 +8578,12 @@ function MatrxDataTableCore({
                                     // horizontal-scroll surface.
                                     col.width !== void 0 && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
                                     col.headerClassName,
-                                    columnDropTarget?.id === id && (columnDropTarget.after ? "border-r-2 border-primary" : "border-l-2 border-primary"),
+                                    isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
                                     col.align === "center" && "text-center",
                                     col.align === "right" && "text-right"
                                   ),
                                   style: columnWidthVar(col.width),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                     ColumnHeaderCell,
                                     {
                                       label: col.header,
@@ -8368,12 +8624,12 @@ function MatrxDataTableCore({
                                 id
                               );
                             }),
-                            showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("th", { className: "h-9 w-28 px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Actions" })
+                            showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { className: "h-9 w-28 px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Actions" })
                           ] }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("tbody", { children: [
-                            isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("tr", { className: "border-b border-border/60", children: [
-                              selection ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
-                              visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("tbody", { children: [
+                            isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("tr", { className: "border-b border-border/60", children: [
+                              selection ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
+                              visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                 "td",
                                 {
                                   className: cn(
@@ -8381,20 +8637,20 @@ function MatrxDataTableCore({
                                     col.compact ? "px-1" : "px-2",
                                     col.mobileHidden && "max-sm:hidden"
                                   ),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Skeleton, { className: "h-5 w-full" })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { className: "h-5 w-full" })
                                 },
                                 columnId(col)
                               )),
-                              showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Skeleton, { className: "ml-auto h-5 w-10" }) })
-                            ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                              showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { className: "ml-auto h-5 w-10" }) })
+                            ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               "td",
                               {
                                 colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
                                 className: "px-4 py-12 text-center",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mx-auto flex max-w-sm flex-col items-center gap-2", children: [
+                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mx-auto flex max-w-sm flex-col items-center gap-2", children: [
                                   emptyState?.icon,
-                                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-sm font-medium text-foreground", children: emptyState?.title ?? "No rows" }),
-                                  emptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyState.description }) : null,
+                                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium text-foreground", children: emptyState?.title ?? "No rows" }),
+                                  emptyState?.description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyState.description }) : null,
                                   emptyState?.action
                                 ] })
                               }
@@ -8404,7 +8660,7 @@ function MatrxDataTableCore({
                               const rowEdits = edits[id];
                               const displayRow = applyRowEdits(row, rowEdits);
                               const isChecked = selectedIdSet.has(id);
-                              const rowNode = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                              const rowNode = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                                 "tr",
                                 {
                                   "data-row-id": id,
@@ -8427,12 +8683,12 @@ function MatrxDataTableCore({
                                     zebra && index % 2 === 1 && !isSelected && !isChecked && "sm:bg-muted/20"
                                   ),
                                   children: [
-                                    selection ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                    selection ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                       "td",
                                       {
                                         className: "px-2 py-1.5 align-middle lg:py-0.5",
                                         onClick: (e) => e.stopPropagation(),
-                                        children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                        children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                           Checkbox,
                                           {
                                             className: CHECKBOX_TAP_AREA,
@@ -8444,18 +8700,11 @@ function MatrxDataTableCore({
                                       }
                                     ) : null,
                                     visibleColumns.map((col, colIdx) => {
-                                      const field = col.accessorKey ? String(col.accessorKey) : columnId(col);
-                                      const display = renderCell(displayRow, col, index);
-                                      const editable = Boolean(
-                                        editEnabled && col.editable && (col.editableIf?.(row) ?? true)
-                                      );
-                                      const dirty = Boolean(
-                                        rowEdits && field in rowEdits
-                                      );
-                                      const cellHref = col.href?.(row) ?? void 0;
-                                      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                      const isColumnDragShadow = columnDragPreview?.draggedId === columnId(col) && columnDragPreview.targetId !== null;
+                                      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                         "td",
                                         {
+                                          "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
                                           className: cn(
                                             "py-1.5 align-middle lg:py-0.5",
                                             col.compact ? "px-1" : "px-2",
@@ -8465,18 +8714,19 @@ function MatrxDataTableCore({
                                             col.mobileHidden && "max-sm:hidden",
                                             col.width !== void 0 && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
                                             col.className,
+                                            isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
                                             col.align === "center" && "text-center",
                                             col.align === "right" && "text-right"
                                           ),
                                           style: columnWidthVar(col.width),
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                                             "div",
                                             {
                                               className: cn(
                                                 colIdx === 0 && hierarchy && "flex min-w-0 items-center"
                                               ),
                                               children: [
-                                                colIdx === 0 && hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                                colIdx === 0 && hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                                   HierarchyDragHandle,
                                                   {
                                                     id,
@@ -8484,32 +8734,12 @@ function MatrxDataTableCore({
                                                     disabled: !(hierarchy.canReparent?.(row) ?? true)
                                                   }
                                                 ) : null,
-                                                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                                   "div",
                                                   {
                                                     "data-matrx-cell-content": true,
                                                     className: "min-w-0 max-w-full flex-1 whitespace-normal break-words [overflow-wrap:anywhere] sm:[&_*]:min-w-0 sm:[&_*]:max-w-full sm:[&_*]:whitespace-normal sm:[&_*]:[overflow-wrap:anywhere] sm:[&_[data-matrx-cell-control]]:w-max sm:[&_[data-matrx-cell-control]]:min-w-max sm:[&_[data-matrx-cell-control]]:max-w-none sm:[&_[data-matrx-cell-control]]:whitespace-nowrap sm:[&_[data-matrx-cell-control]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]_*]:whitespace-nowrap sm:[&_[data-matrx-cell-control]_*]:[overflow-wrap:normal]",
-                                                    children: editable && col.editable ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                                                      EditableTableCell,
-                                                      {
-                                                        value: rowEdits && field in rowEdits ? rowEdits[field] : getCellValue(row, col),
-                                                        editType: col.editable,
-                                                        ...col.editOptions === void 0 ? {} : { editOptions: col.editOptions },
-                                                        display,
-                                                        dirty,
-                                                        onCommit: (next) => commitCell(id, field, next),
-                                                        ...cellHref === void 0 ? {} : { href: cellHref },
-                                                        ...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger }
-                                                      }
-                                                    ) : cellHref ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                                                      Link,
-                                                      {
-                                                        href: cellHref,
-                                                        onClick: (e) => e.stopPropagation(),
-                                                        className: "block w-full min-w-0 rounded outline-none  focus-visible:ring-2 focus-visible:ring-ring",
-                                                        children: display
-                                                      }
-                                                    ) : display
+                                                    children: renderRecordCell(row, col, index)
                                                   }
                                                 )
                                               ]
@@ -8519,13 +8749,13 @@ function MatrxDataTableCore({
                                         columnId(col)
                                       );
                                     }),
-                                    showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                                    showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                                       "div",
                                       {
                                         className: "inline-flex items-center justify-end gap-0.5",
                                         onClick: (e) => e.stopPropagation(),
                                         children: [
-                                          showRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                          showRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                             TableRowCopyControl,
                                             {
                                               size: "xs",
@@ -8543,8 +8773,8 @@ function MatrxDataTableCore({
                                             hasPendingEdits: Boolean(rowEdits),
                                             discardPendingEdits: () => discardRowEdits(id)
                                           }),
-                                          windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                          windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                               Button,
                                               {
                                                 type: "button",
@@ -8560,10 +8790,10 @@ function MatrxDataTableCore({
                                                     openWindow(row);
                                                   }
                                                 },
-                                                children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
+                                                children: opensWindowOnRowClick ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
                                               }
                                             ) }),
-                                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: opensWindowOnRowClick ? "Open in side panel" : "Open in window" })
+                                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: opensWindowOnRowClick ? "Open in side panel" : "Open in window" })
                                           ] }) : null
                                         ]
                                       }
@@ -8573,7 +8803,7 @@ function MatrxDataTableCore({
                                 id
                               );
                               const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
-                              return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                              return hierarchy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                 HierarchyDroppableRow,
                                 {
                                   id,
@@ -8581,21 +8811,21 @@ function MatrxDataTableCore({
                                   children: wrappedRow
                                 },
                                 id
-                              ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react13.Fragment, { children: wrappedRow }, id);
+                              ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react13.Fragment, { children: wrappedRow }, id);
                             }),
-                            appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                            appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               "td",
                               {
                                 colSpan: visibleColumns.length + leadingCols + (showActionsCol ? 1 : 0),
                                 className: "sticky bottom-0 z-20 h-16 border-y border-border bg-card/95 px-0 py-0 text-left shadow-sm backdrop-blur-sm",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                                   "div",
                                   {
                                     role: "status",
                                     "aria-live": "polite",
                                     className: "sticky left-0 flex h-16 w-fit max-w-[100cqw] items-center justify-center gap-2 px-3 text-sm font-medium text-foreground",
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                         Loader2,
                                         {
                                           "aria-hidden": "true",
@@ -8609,9 +8839,9 @@ function MatrxDataTableCore({
                               }
                             ) }) : null
                           ] }),
-                          footerRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("tr", { children: [
-                            selection ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "px-2 py-2" }) : null,
-                            visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          footerRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("tr", { children: [
+                            selection ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-2" }) : null,
+                            visibleColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               "td",
                               {
                                 className: cn(
@@ -8626,14 +8856,14 @@ function MatrxDataTableCore({
                               },
                               columnId(column)
                             )),
-                            showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "px-2 py-2" }) : null
+                            showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-2" }) : null
                           ] }, `footer-${index}`)) }) : null
                         ] })
                       ]
                     }
                   ),
-                  scrollHintLeft ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  scrollHintLeft ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       Button,
                       {
                         type: "button",
@@ -8643,13 +8873,13 @@ function MatrxDataTableCore({
                         "data-matrx-table-scroll-control": "left",
                         className: "absolute left-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
                         onClick: () => scrollTableHorizontally("left"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronLeft, { className: "h-5 w-5" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronLeft, { className: "h-5 w-5" })
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: "More columns to the left" })
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: "More columns to the left" })
                   ] }) : null,
-                  scrollHintRight ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  scrollHintRight ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       Button,
                       {
                         type: "button",
@@ -8659,26 +8889,26 @@ function MatrxDataTableCore({
                         "data-matrx-table-scroll-control": "right",
                         className: "absolute right-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
                         onClick: () => scrollTableHorizontally("right"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronRight, { className: "h-5 w-5" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronRight, { className: "h-5 w-5" })
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: "More columns to the right" })
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: "More columns to the right" })
                   ] }) : null
                 ] }),
-                appendQuery ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                appendQuery ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                   "div",
                   {
                     "data-matrx-table-footer": true,
                     className: "flex min-h-16 shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border px-3 py-2",
                     "aria-busy": isLoading || isFetching,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                         "div",
                         {
                           ...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
                           className: "flex w-full min-w-0 flex-none items-center gap-2 text-xs text-muted-foreground sm:w-auto sm:flex-1",
                           children: [
-                            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               Loader2,
                               {
                                 "data-matrx-table-append-loader": true,
@@ -8686,40 +8916,40 @@ function MatrxDataTableCore({
                                 className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
                               }
                             ) : null,
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "min-w-0", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "break-words font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}` }),
-                              appendQuery.pagination.sourceUntil ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "min-w-0", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "break-words font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : `${data.length.toLocaleString()} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${appendQuery.pagination.totalItems.toLocaleString()}`}` }),
+                              appendQuery.pagination.sourceUntil ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { children: [
                                 "Source fixed through",
                                 " ",
                                 new Date(appendQuery.pagination.sourceUntil).toLocaleString(),
                                 "."
                               ] }) : null,
-                              !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { children: "All source rows are loaded." }) : appendUsesLocalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { children: "Local search and filters cover loaded rows." }) : null,
-                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null
+                              !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { children: "All source rows are loaded." }) : appendUsesLocalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { children: "Local search and filters cover loaded rows." }) : null,
+                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null
                             ] })
                           ]
                         }
                       ),
-                      appendQuery.pagination.sourcePageSize ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                      appendQuery.pagination.sourcePageSize ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                         Select,
                         {
                           value: String(appendQuery.pagination.sourcePageSize.value),
                           onValueChange: (value) => appendQuery.pagination.sourcePageSize?.onChange(Number(value)),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               SelectTrigger,
                               {
                                 "aria-label": "Rows per load",
                                 className: "h-8 w-20 shrink-0 text-xs sm:w-24",
                                 disabled: isLoading || isFetching || appendQuery.pagination.loadAll?.isLoading,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectValue, {})
+                                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectValue, {})
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectContent, { children: appendQuery.pagination.sourcePageSize.options.map((size) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectItem, { value: String(size), children: size }, size)) })
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectContent, { children: appendQuery.pagination.sourcePageSize.options.map((size) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectItem, { value: String(size), children: size }, size)) })
                           ]
                         }
                       ) : null,
-                      appendQuery.pagination.loadAll?.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      appendQuery.pagination.loadAll?.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         Button,
                         {
                           type: "button",
@@ -8727,7 +8957,7 @@ function MatrxDataTableCore({
                           onClick: appendQuery.pagination.loadAll.stop,
                           children: "Stop loading"
                         }
-                      ) : scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      ) : scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         Button,
                         {
                           type: "button",
@@ -8735,8 +8965,8 @@ function MatrxDataTableCore({
                           onClick: appendQuery.pagination.retrySource ?? (appendQuery.pagination.hasNextPage ? appendQuery.pagination.loadNextPage : appendQuery.pagination.refresh),
                           children: appendQuery.pagination.retrySource ? "Retry source" : appendQuery.pagination.hasNextPage ? "Retry" : "Reload rows"
                         }
-                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           Button,
                           {
                             type: "button",
@@ -8747,7 +8977,7 @@ function MatrxDataTableCore({
                             children: "Load more"
                           }
                         ),
-                        appendQuery.pagination.loadAll ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        appendQuery.pagination.loadAll ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           Button,
                           {
                             type: "button",
@@ -8758,10 +8988,10 @@ function MatrxDataTableCore({
                             children: "Load all"
                           }
                         ) : null
-                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs text-muted-foreground", children: "All rows loaded" }) : null
+                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xs text-muted-foreground", children: "All rows loaded" }) : null
                     ]
                   }
-                ) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                ) : !hidePagination && totalItems > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   GenericTablePagination,
                   {
                     totalItems,
@@ -8781,7 +9011,7 @@ function MatrxDataTableCore({
                   }
                 ) }) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 ColumnManager,
                 {
                   open: columnManagerOpen,
@@ -8792,7 +9022,7 @@ function MatrxDataTableCore({
                   onApply: commitColumnState
                 }
               ),
-              detailEnabled && selectedRow ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              detailEnabled && selectedRow ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 SidePanelSurface,
                 {
                   title: resolveStringTitle(
@@ -8803,8 +9033,8 @@ function MatrxDataTableCore({
                   description: detail?.description?.(selectedRow),
                   onClose: () => setSelectedId(null),
                   defaultWidth: detail?.defaultWidth ?? 480,
-                  headerActions: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
-                    effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  headerActions: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       TableRowCopyControl,
                       {
                         size: "icon",
@@ -8815,8 +9045,8 @@ function MatrxDataTableCore({
                       }
                     ) : null,
                     detail?.headerActions?.(selectedRow),
-                    windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         Button,
                         {
                           type: "button",
@@ -8825,10 +9055,10 @@ function MatrxDataTableCore({
                           className: "h-7 w-7",
                           "aria-label": "Open in window",
                           onClick: () => openWindow(selectedRow),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelRight, { className: "h-3.5 w-3.5" })
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: "Open in window" })
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: "Open in window" })
                     ] }) : null
                   ] }),
                   children: detail?.render ? (
@@ -8839,7 +9069,7 @@ function MatrxDataTableCore({
                     // fixes the whole class at once — a custom body that already
                     // scrolls (`h-full` + `overflow-y-auto` root) still resolves to
                     // this container's height, so no second scrollbar appears.
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-full min-h-0 overflow-y-auto", children: detail.render(selectedRow, {
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-full min-h-0 overflow-y-auto", children: detail.render(selectedRow, {
                       closeDetail: () => setSelectedId(null),
                       openDetail: () => openDetail(selectedRow),
                       openWindow: () => openWindow(selectedRow),
@@ -8847,7 +9077,7 @@ function MatrxDataTableCore({
                       hasPendingEdits: Boolean(edits[getRowId(selectedRow)]),
                       discardPendingEdits: () => discardRowEdits(getRowId(selectedRow))
                     }) })
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     DataRowInspector,
                     {
                       row: selectedRow,
@@ -8859,7 +9089,7 @@ function MatrxDataTableCore({
                   )
                 }
               ) : null,
-              windowRow ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              windowRow ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 DataRowWindow,
                 {
                   isOpen: true,
@@ -8870,9 +9100,9 @@ function MatrxDataTableCore({
                   height: windowConfig?.height,
                   windowId: `matrx-data-row-${urlState?.id ?? "local"}-${getRowId(windowRow)}`,
                   defaultTab: windowConfig?.defaultTab,
-                  headerActions: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
-                    opensWindowOnRowClick && detailEnabled ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  headerActions: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    opensWindowOnRowClick && detailEnabled ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         Button,
                         {
                           type: "button",
@@ -8884,12 +9114,12 @@ function MatrxDataTableCore({
                             closeWindow();
                             openDetail(windowRow);
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelRightOpen, { className: "h-3.5 w-3.5" })
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { children: "Open in side panel" })
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { children: "Open in side panel" })
                     ] }) : null,
-                    effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    effectiveCopy && showRowCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       TableRowCopyControl,
                       {
                         size: "icon",
@@ -8907,7 +9137,7 @@ function MatrxDataTableCore({
                     closeWindow,
                     hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
                     discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
-                  }) ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  }) ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     DataRowInspector,
                     {
                       row: windowRow,
@@ -8943,15 +9173,15 @@ function MatrxDataTableCore({
                   })
                 }
               ) : null,
-              editEnabled ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-                foreignDrafts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              editEnabled ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                foreignDrafts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                   "div",
                   {
                     "data-matrx-foreign-drafts": true,
                     className: "fixed inset-x-3 bottom-20 z-50 flex flex-wrap items-center justify-center gap-2 rounded-lg border border-amber-500/40 bg-card px-3 py-2 text-xs shadow-lg sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 sm:flex-nowrap",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Unsaved edits from previous results" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "Unsaved edits from previous results" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         CopyButtons,
                         {
                           size: "xs",
@@ -8960,11 +9190,11 @@ function MatrxDataTableCore({
                           json: () => foreignDraftPayload
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 text-xs text-destructive", onClick: () => setConfirmForeignDraftDiscard(true), children: "Discard drafts" })
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 text-xs text-destructive", onClick: () => setConfirmForeignDraftDiscard(true), children: "Discard drafts" })
                     ]
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   ConfirmDialog,
                   {
                     open: confirmForeignDraftDiscard,
@@ -8984,7 +9214,7 @@ function MatrxDataTableCore({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   DirtySavePill,
                   {
                     changeCount,
@@ -8997,11 +9227,11 @@ function MatrxDataTableCore({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core3.DragOverlay, { children: draggedRow ? (
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core3.DragOverlay, { children: draggedRow ? (
           // w-max: the overlay inherits the ACTIVE node's size, and the active
           // node is the 16px grip handle — without it the label wraps to one
           // character per line.
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-max max-w-xs truncate rounded border border-border bg-card px-2.5 py-1.5 text-sm font-medium text-foreground shadow-md", children: hierarchy?.itemLabel?.(draggedRow) ?? "Moving row" })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-max max-w-xs truncate rounded border border-border bg-card px-2.5 py-1.5 text-sm font-medium text-foreground shadow-md", children: hierarchy?.itemLabel?.(draggedRow) ?? "Moving row" })
         ) : null })
       ]
     }
@@ -9016,7 +9246,7 @@ function HierarchyDragHandle({
     id,
     disabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "button",
     {
       ref: setNodeRef,
@@ -9028,7 +9258,7 @@ function HierarchyDragHandle({
       onClick: (event) => event.stopPropagation(),
       ...attributes,
       ...listeners,
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
     }
   );
 }
@@ -9037,7 +9267,7 @@ function HierarchyRootDropTarget({
   draggedLabel
 }) {
   const { isOver, setNodeRef } = (0, import_core3.useDroppable)({ id: "__root__" });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       ref: setNodeRef,
@@ -9047,8 +9277,8 @@ function HierarchyRootDropTarget({
         isOver && "border-solid bg-primary/20 shadow-md shadow-primary/25"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "truncate", children: draggedLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-primary/75", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "truncate", children: draggedLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-primary/75", children: label })
       ]
     }
   );
@@ -9097,7 +9327,7 @@ function HierarchyDragIndicatorLayer({
   const { preview: preview2 } = indicator;
   const indent = indicator.left + 10 + preview2.depth * 12;
   if (preview2.position === "inside") {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         "aria-hidden": "true",
@@ -9109,7 +9339,7 @@ function HierarchyDragIndicatorLayer({
           width: Math.max(0, indicator.width - 4),
           height: indicator.height
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "span",
           {
             className: "absolute top-1/2 -translate-y-1/2 whitespace-nowrap rounded bg-card/95 px-1.5 py-0.5 text-[10px] font-medium text-primary",
@@ -9124,7 +9354,7 @@ function HierarchyDragIndicatorLayer({
     );
   }
   const lineTop = preview2.position === "before" ? indicator.top - 1 : indicator.top + indicator.height - 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       "aria-hidden": "true",
@@ -9135,9 +9365,9 @@ function HierarchyDragIndicatorLayer({
         left: indent,
         width: Math.max(0, indicator.left + indicator.width - indent - 8)
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative h-0.5 rounded-full bg-primary", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border-2 border-primary bg-card" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative h-0.5 rounded-full bg-primary", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border-2 border-primary bg-card" }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "span",
           {
             className: cn(
@@ -9178,7 +9408,7 @@ function ColumnHeaderDropZone({
     disabled: !enabled,
     data: { matrxDragKind: "column-header", columnId: id }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
 }
 function columnWidthVar(width) {
   if (width === void 0) return void 0;
@@ -9194,7 +9424,7 @@ function renderCell(row, col, index) {
   if (asUuid && typeof raw === "string") {
     const forbidden = typeof col.fk?.forbidden === "function" ? col.fk.forbidden(raw, row) : Boolean(col.fk?.forbidden);
     const declaredToken = typeof col.fk?.token === "function" ? col.fk.token(row) : col.fk?.token;
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       MatrxUuidCell,
       {
         value: raw,
@@ -9206,7 +9436,7 @@ function renderCell(row, col, index) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-sm text-foreground", children: stringifyCellValue(raw) || "\u2014" });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-sm text-foreground", children: stringifyCellValue(raw) || "\u2014" });
 }
 function defaultRowTitle(row, columns) {
   for (const col of columns) {
@@ -9221,6 +9451,236 @@ function resolveStringTitle(title, fallback) {
   return fallback;
 }
 
+// src/data-table/SavedViewsControl.tsx
+var import_react14 = require("react");
+
+// src/dropdown-menu.tsx
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var React16 = __toESM(require("react"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
+var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var DropdownMenuSubTrigger = React16.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    "data-slot": "dropdown-menu-sub-trigger",
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    "data-slot": "dropdown-menu-sub-content",
+    className: cn(MENU_SURFACE_CLASS, "shadow-lg", MOTION_POPPER, className),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React16.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    DropdownMenuPrimitive.Content,
+    {
+      ref,
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        MENU_SURFACE_CLASS,
+        "shadow-md",
+        MOTION_POPPER,
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    "data-slot": "dropdown-menu-item",
+    className: cn(MENU_ITEM_CLASS, inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    "data-slot": "dropdown-menu-checkbox-item",
+    className: cn(MENU_INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    "data-slot": "dropdown-menu-radio-item",
+    className: cn(MENU_INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    "data-slot": "dropdown-menu-label",
+    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    "data-slot": "dropdown-menu-separator",
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  "span",
+  {
+    "data-slot": "dropdown-menu-shortcut",
+    className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+    ...props
+  }
+);
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/data-table/SavedViewsControl.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function SavedViewsControl({
+  views,
+  activeId = null,
+  loading = false,
+  error,
+  dirty = false,
+  onSelect,
+  onSaveNew,
+  onUpdate,
+  onReload
+}) {
+  const [saveOpen, setSaveOpen] = (0, import_react14.useState)(false);
+  const [name, setName] = (0, import_react14.useState)("");
+  const [saving, setSaving] = (0, import_react14.useState)(false);
+  const [actionError, setActionError] = (0, import_react14.useState)(null);
+  const visibleError = actionError ?? error;
+  const save = async () => {
+    const next = name.trim();
+    if (!next) return;
+    setSaving(true);
+    setActionError(null);
+    try {
+      await onSaveNew(next);
+      setName("");
+      setSaveOpen(false);
+    } catch (cause) {
+      setActionError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setSaving(false);
+    }
+  };
+  const update = async () => {
+    if (!onUpdate) return;
+    setSaving(true);
+    setActionError(null);
+    try {
+      await onUpdate();
+    } catch (cause) {
+      setActionError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setSaving(false);
+    }
+  };
+  const reload = async () => {
+    if (!onReload) return;
+    setSaving(true);
+    setActionError(null);
+    try {
+      await onReload();
+    } catch (cause) {
+      setActionError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setSaving(false);
+    }
+  };
+  const activeName = activeId ? views.find((view) => view.id === activeId)?.name : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-1", "data-matrx-table-saved-views": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 max-w-40 truncate text-xs", "aria-label": "Saved views", disabled: saving, children: loading ? "Loading views\u2026" : `${activeName ?? "Default view"}${dirty ? " \u2022" : ""}` }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { children: "Choose or save a table view" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuLabel, { children: "Views" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DropdownMenuRadioGroup, { value: activeId ?? "__default__", onValueChange: (value) => onSelect(value === "__default__" ? null : value), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuRadioItem, { value: "__default__", children: "Default view" }),
+          views.map((view) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuRadioItem, { value: view.id, children: view.name }, view.id))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuItem, { disabled: saving, onSelect: () => {
+          setActionError(null);
+          setSaveOpen(true);
+        }, children: "Save current view\u2026" }),
+        activeId && onUpdate ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuItem, { disabled: saving, onSelect: () => void update(), children: "Update current view" }) : null,
+        onReload ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuItem, { disabled: saving || loading, onSelect: () => void reload(), children: "Reload views" }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", "aria-label": "Save current view", disabled: saving, onClick: () => {
+        setActionError(null);
+        setSaveOpen(true);
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Save, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { children: "Save current view" })
+    ] }),
+    visibleError ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { role: "alert", className: "basis-full text-xs text-destructive", children: visibleError }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog, { open: saveOpen, onOpenChange: setSaveOpen, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DialogContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogTitle, { children: "Save current view" }) }),
+      visibleError ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: visibleError }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Input, { "aria-label": "View name", value: name, onChange: (event) => setName(event.target.value), placeholder: "View name", autoFocus: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DialogFooter, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { type: "button", variant: "outline", onClick: () => setSaveOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { type: "button", disabled: !name.trim() || saving, onClick: () => void save(), children: saving ? "Saving\u2026" : "Save view" })
+      ] })
+    ] }) })
+  ] });
+}
+
 // src/data-table/tableXlsx.ts
 var XLSX = __toESM(require("xlsx"), 1);
 function downloadTableAsXlsx({