@ai-matrx/design-system 0.20.5 → 0.20.8

package/dist/data-table/index.cjs

@@ -59,7 +59,7 @@ __export(data_table_exports, {
 module.exports = __toCommonJS(data_table_exports);
 
 // src/data-table/MatrxDataTable.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_core3 = require("@dnd-kit/core");
 
 // src/data-table/icons.tsx
@@ -219,6 +219,46 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
+// src/data-table/use-column-reorder-animation.ts
+var import_react = require("react");
+function useColumnReorderAnimation(tableRef, order, dragging) {
+  const previous = (0, import_react.useRef)({ positions: /* @__PURE__ */ new Map(), dragging: false });
+  const animations = (0, import_react.useRef)([]);
+  (0, import_react.useLayoutEffect)(() => {
+    const table = tableRef.current;
+    if (!table) return;
+    const headers = Array.from(table.querySelectorAll("th[data-matrx-table-column-id]"));
+    const positions = new Map(headers.map((header) => [header.dataset.matrxTableColumnId, header.offsetLeft]));
+    const prefersReducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const shouldAnimate = (dragging || previous.current.dragging) && !prefersReducedMotion;
+    const offsets = /* @__PURE__ */ new Map();
+    for (const header of headers) {
+      const id = header.dataset.matrxTableColumnId;
+      const oldLeft = previous.current.positions.get(id);
+      if (oldLeft === void 0) continue;
+      const transform = getComputedStyle(header).transform;
+      const remaining = transform && transform !== "none" ? new DOMMatrixReadOnly(transform).m41 : 0;
+      offsets.set(id, oldLeft - header.offsetLeft + remaining);
+    }
+    animations.current.forEach((animation) => animation.cancel());
+    animations.current = [];
+    if (shouldAnimate) {
+      for (const cell of Array.from(table.querySelectorAll("[data-matrx-table-column-id]"))) {
+        const offset = offsets.get(cell.dataset.matrxTableColumnId);
+        if (!offset || typeof cell.animate !== "function") continue;
+        animations.current.push(cell.animate(
+          [{ transform: `translateX(${offset}px)` }, { transform: "translateX(0)" }],
+          { duration: 180, easing: "cubic-bezier(0.2, 0.8, 0.2, 1)" }
+        ));
+      }
+    }
+    previous.current = { positions, dragging };
+  }, [tableRef, order, dragging]);
+  (0, import_react.useLayoutEffect)(() => () => {
+    animations.current.forEach((animation) => animation.cancel());
+  }, []);
+}
+
 // src/data-table/MatrxDataTable.tsx
 var import_format3 = require("@ai-matrx/kit/format");
 
@@ -964,7 +1004,7 @@ function TableTitleRow({
 }
 
 // src/data-table/TableSearch.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
@@ -995,8 +1035,8 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 // src/data-table/TableSearch.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function TableSearch({ value, onChange, scope, onScopeChange, scopes, placeholder = "Search\u2026" }) {
-  const [expanded, setExpanded] = (0, import_react.useState)(false);
-  const inputRef = (0, import_react.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  const inputRef = (0, import_react2.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-matrx-table-search": true, className: "h-11 min-w-0 w-full sm:max-w-xs", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
@@ -1042,7 +1082,7 @@ function TableSearch({ value, onChange, scope, onScopeChange, scopes, placeholde
 }
 
 // src/data-table/useScrollPagination.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var DEFAULT_THRESHOLD_PX = 96;
 var DEFAULT_INTENT_TIMEOUT_MS = 1200;
 function resolveContainer(container) {
@@ -1113,8 +1153,8 @@ function useScrollPagination({
   intentTimeoutMs = DEFAULT_INTENT_TIMEOUT_MS,
   enabled = true
 }) {
-  const [requestError, setRequestError] = (0, import_react2.useState)(null);
-  const latestRef = (0, import_react2.useRef)({
+  const [requestError, setRequestError] = (0, import_react3.useState)(null);
+  const latestRef = (0, import_react3.useRef)({
     queryKey,
     hasNextPage,
     isFetchingNextPage,
@@ -1136,16 +1176,16 @@ function useScrollPagination({
     thresholdPx,
     enabled
   };
-  const intentRef = (0, import_react2.useRef)(null);
-  const inputSequenceRef = (0, import_react2.useRef)(0);
-  const consumedSequenceRef = (0, import_react2.useRef)(0);
-  const requestGenerationRef = (0, import_react2.useRef)(0);
-  const inFlightGenerationRef = (0, import_react2.useRef)(null);
-  const requestErrorRef = (0, import_react2.useRef)(null);
-  const mountedRef = (0, import_react2.useRef)(false);
-  const observedTopRef = (0, import_react2.useRef)(/* @__PURE__ */ new WeakMap());
+  const intentRef = (0, import_react3.useRef)(null);
+  const inputSequenceRef = (0, import_react3.useRef)(0);
+  const consumedSequenceRef = (0, import_react3.useRef)(0);
+  const requestGenerationRef = (0, import_react3.useRef)(0);
+  const inFlightGenerationRef = (0, import_react3.useRef)(null);
+  const requestErrorRef = (0, import_react3.useRef)(null);
+  const mountedRef = (0, import_react3.useRef)(false);
+  const observedTopRef = (0, import_react3.useRef)(/* @__PURE__ */ new WeakMap());
   const effectiveError = error ?? requestError;
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -1175,7 +1215,7 @@ function useScrollPagination({
       }
     }
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     intentRef.current = null;
     observedTopRef.current = /* @__PURE__ */ new WeakMap();
     consumedSequenceRef.current = inputSequenceRef.current;
@@ -1184,7 +1224,7 @@ function useScrollPagination({
     inFlightGenerationRef.current = null;
     requestGenerationRef.current += 1;
   }, [queryKey]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (mode !== "scroll" || !enabled || typeof window === "undefined") return;
     const attachable = containers.map(resolveContainer).filter((container) => container !== null);
     const ownerCleanups = /* @__PURE__ */ new Map();
@@ -1280,7 +1320,7 @@ function useScrollPagination({
 }
 
 // src/data-table/useProgressiveTableRows.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function safePageSize(pageSize) {
   return Number.isFinite(pageSize) && pageSize > 0 ? Math.floor(pageSize) : 0;
 }
@@ -1303,15 +1343,15 @@ function useProgressiveTableRows({
   const pageSize = safePageSize(rawPageSize);
   const hasExplicitRequestedPage = rawRequestedPage !== void 0;
   const requestedPage = safeRequestedPage(rawRequestedPage);
-  const initialRequestedPageRef = (0, import_react3.useRef)(requestedPage);
-  const latestRequestedPageRef = (0, import_react3.useRef)(requestedPage);
-  const optimisticAdvancePageRef = (0, import_react3.useRef)(null);
+  const initialRequestedPageRef = (0, import_react4.useRef)(requestedPage);
+  const latestRequestedPageRef = (0, import_react4.useRef)(requestedPage);
+  const optimisticAdvancePageRef = (0, import_react4.useRef)(null);
   latestRequestedPageRef.current = requestedPage;
   const progressionKey = `${queryKey}\0${pageSize}`;
   const initialShownCount = startCount(pageSize, initialRequestedPageRef.current);
   const resetShownCount = startCount(pageSize, 1);
   const queryStartShownCount = hasExplicitRequestedPage ? startCount(pageSize, requestedPage) : resetShownCount;
-  const [progression, setProgression] = (0, import_react3.useState)(() => ({
+  const [progression, setProgression] = (0, import_react4.useState)(() => ({
     key: progressionKey,
     shownCount: initialShownCount,
     requestedPage
@@ -1322,7 +1362,7 @@ function useProgressiveTableRows({
   const shownCount = progression.key !== progressionKey ? queryStartShownCount : externallyRequestedPage ? startCount(pageSize, requestedPage) : Math.max(progression.shownCount, resetShownCount);
   const visibleCount = Math.min(rows.length, shownCount);
   const hasMore = enabled && pageSize > 0 && visibleCount < rows.length;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setProgression((current) => {
       if (current.key !== progressionKey) {
         optimisticAdvancePageRef.current = null;
@@ -1370,7 +1410,7 @@ function useProgressiveTableRows({
     ...thresholdPx === void 0 ? {} : { thresholdPx }
   });
   return {
-    rows: (0, import_react3.useMemo)(() => rows.slice(0, visibleCount), [rows, visibleCount]),
+    rows: (0, import_react4.useMemo)(() => rows.slice(0, visibleCount), [rows, visibleCount]),
     shownCount: visibleCount,
     hasMore,
     showMore: scroll.requestNextPage
@@ -1805,26 +1845,26 @@ function DefaultTableWindow({ title, onClose, width = 720, height = 560, actions
 }
 
 // src/data-table/useTableNotice.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/data-table/host.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var HOST_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.table-host-context");
 var hostRegistry = globalThis;
-var HostContext = hostRegistry[HOST_SLOT] ??= (0, import_react4.createContext)({});
+var HostContext = hostRegistry[HOST_SLOT] ??= (0, import_react5.createContext)({});
 function MatrxDataTableProvider({ value, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HostContext.Provider, { value, children });
 }
 function useMatrxDataTableHost() {
-  return (0, import_react4.useContext)(HostContext);
+  return (0, import_react5.useContext)(HostContext);
 }
 
 // src/data-table/useTableNotice.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function useTableNotice() {
   const host = useMatrxDataTableHost();
-  const [message, setMessage] = (0, import_react5.useState)(null);
+  const [message, setMessage] = (0, import_react6.useState)(null);
   const notify = {
     success(text) {
       if (host.notify) host.notify.success(text);
@@ -2303,7 +2343,7 @@ var PopoverContent = React13.forwardRef(
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/tap-target/tap-target-button.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/tap-target/cn.ts
 function cn2(...values) {
@@ -2328,8 +2368,8 @@ function IconContent({
   className
 }) {
   if (icon) {
-    if ((0, import_react6.isValidElement)(icon)) {
-      return (0, import_react6.cloneElement)(icon, {
+    if ((0, import_react7.isValidElement)(icon)) {
+      return (0, import_react7.cloneElement)(icon, {
         className: cn2(className, icon.props.className)
       });
     }
@@ -2572,7 +2612,7 @@ function withTooltip(trigger, {
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipContent, { side: tooltipSide, align: tooltipAlign, children: label })
   ] });
 }
-var TapTargetButton = (0, import_react6.forwardRef)(function TapTargetButton2({
+var TapTargetButton = (0, import_react7.forwardRef)(function TapTargetButton2({
   icon,
   children,
   strokeWidth = 2,
@@ -2620,7 +2660,7 @@ var TapTargetButton = (0, import_react6.forwardRef)(function TapTargetButton2({
     buttonRef: ref
   });
 });
-var TapTargetButtonTransparent = (0, import_react6.forwardRef)(function TapTargetButtonTransparent2({
+var TapTargetButtonTransparent = (0, import_react7.forwardRef)(function TapTargetButtonTransparent2({
   icon,
   children,
   strokeWidth = 2,
@@ -2668,7 +2708,7 @@ var TapTargetButtonTransparent = (0, import_react6.forwardRef)(function TapTarge
     buttonRef: ref
   });
 });
-var TapTargetButtonSolid = (0, import_react6.forwardRef)(function TapTargetButtonSolid2({
+var TapTargetButtonSolid = (0, import_react7.forwardRef)(function TapTargetButtonSolid2({
   icon,
   children,
   strokeWidth = 2,
@@ -2719,7 +2759,7 @@ var TapTargetButtonSolid = (0, import_react6.forwardRef)(function TapTargetButto
     buttonRef: ref
   });
 });
-var TapTargetButtonDestructive = (0, import_react6.forwardRef)(function TapTargetButtonDestructive2({
+var TapTargetButtonDestructive = (0, import_react7.forwardRef)(function TapTargetButtonDestructive2({
   bgColor = "bg-destructive",
   iconColor = "text-destructive-foreground",
   hoverBgColor = "hover:bg-destructive/90",
@@ -2736,7 +2776,7 @@ var TapTargetButtonDestructive = (0, import_react6.forwardRef)(function TapTarge
     }
   );
 });
-var TapTargetButtonForGroup = (0, import_react6.forwardRef)(function TapTargetButtonForGroup2({
+var TapTargetButtonForGroup = (0, import_react7.forwardRef)(function TapTargetButtonForGroup2({
   icon,
   children,
   strokeWidth = 2,
@@ -2825,7 +2865,7 @@ var useContentTransferCapabilities = () => React14.useContext(CapabilityContext)
 var SurfaceContext = React14.createContext(null);
 function MenuPresentation({ label, hint, icon: Icon3 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon3, { className: "matrx-alchemy-menu-icon" }) : null,
+    Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon3, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { file: true }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
       label,
       hint ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: hint }) : null
@@ -2847,8 +2887,11 @@ function DestinationPresentation({ action }) {
   };
   const path2 = paths[action.id.replace(/^matrx:/, "")];
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    !action.icon ? path2 ? /* @__PURE__ */ (0, import_jsx_runtime24.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: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: path2 }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { file: true }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuPresentation, { ...action })
+    action.icon ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(action.icon, { className: "matrx-alchemy-menu-icon" }) : path2 ? /* @__PURE__ */ (0, import_jsx_runtime24.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: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: path2 }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { file: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
+      action.label,
+      action.hint ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: action.hint }) : null
+    ] })
   ] });
 }
 function ReceiptLink({ target }) {
@@ -2858,6 +2901,11 @@ function ReceiptLink({ target }) {
   ] }) : null;
 }
 function PaletteGlyph({ format, ai = false, file = false, kind }) {
+  if (kind === "link") return /* @__PURE__ */ (0, import_jsx_runtime24.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: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2" }) });
+  if (kind === "surface") return /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M3 9h18M9 9v12" })
+  ] });
   if (kind === "ai-copy") return /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)("rect", { x: "5", y: "5", width: "11", height: "14", rx: "2" }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M9 3h6a2 2 0 0 1 2 2v10" }),
@@ -3338,7 +3386,7 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
     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_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-tile", "aria-label": presentation?.ariaLabel ?? (presentation ? fallbackLabel : options.ariaLabel ?? `${resolvedMode === "copy" ? "Copy" : "Download"} ${label2}`), onClick: () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-tile", title: id === "table-data" ? "JSON using column display names" : id === "table-schema" ? "Table schema and rows" : label2, "aria-label": presentation?.ariaLabel ?? (presentation ? fallbackLabel : options.ariaLabel ?? `${resolvedMode === "copy" ? "Copy" : "Download"} ${label2}`), onClick: () => {
       closePalette();
       onClick();
     }, children: [
@@ -3400,7 +3448,7 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "ai-copy" }),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
               "Copy with AI context",
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: "Content, source and capture details" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: "Include source context" })
             ] })
           ] }) : null, items: quickVariants("ai"), onRun: (variant) => {
             closePalette();
@@ -3413,32 +3461,44 @@ function ContentTransferMenuSession({ references = [], referenceActions = [], so
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "sliders" }),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
               "Prepare for AI",
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: "Review and edit before copying" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("small", { className: "matrx-alchemy-menu-hint", children: "Trim, edit or summarize" })
             ] })
           ] }) })
         ] }) : null,
         prepareAvailable && (nearestWorkspaceKey || variants.length) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteRows, { title: "Other sources", items: [], extra: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
+          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
             closePalette();
             void openWorkspace(nearestWorkspaceKey, { source: nearestSurface, label: nearestSurface.surfaceName });
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Prepare this surface" }) }) : null,
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "surface" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Prepare this page" })
+          ] }) : null,
           variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(MenuPresentation, { ...variant, label: `Prepare ${variant.label}` }) }, variant.id))
         ] }) }) : null,
         references.length || referenceActions.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("section", { className: "matrx-alchemy-palette-section", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { children: "Live references" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "matrx-alchemy-menu-hint", children: "Pointers to saved data, independent of filters and edits." }),
-          references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void copyReference(reference), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: reference.label }) }, reference.id)),
-          referenceActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void openReference(action), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: action.label }) }, action.id))
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { children: "References" }),
+          referenceActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void openReference(action), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "link" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: action.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: "matrx-alchemy-disclosure", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m6 4 4 4-4 4" }) })
+          ] }, action.id)),
+          references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", className: "matrx-alchemy-palette-row", title: "Copies a reference to saved data", onClick: () => void copyReference(reference), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PaletteGlyph, { kind: "link" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: reference.label })
+          ] }, reference.id))
         ] }) : null,
         ["save", "chat", "email", "other"].map((group) => {
           const entries = ordinaryActions.filter((action) => (action.group ?? "other") === group);
           return entries.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("details", { className: "matrx-alchemy-palette-destinations", children: [
             /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("summary", { children: [
               group === "save" ? "Save to Matrx" : group === "chat" ? "Continue with AI" : group === "email" ? "Email to me" : "Actions",
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: entries.length })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "matrx-alchemy-disclosure-meta", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: entries.length }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: "matrx-alchemy-disclosure", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m6 4 4 4-4 4" }) })
+              ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: entries.map((action) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": action.ariaLabel, onClick: () => {
               closePalette();
@@ -4586,7 +4646,7 @@ function CopyButtons(props) {
 }
 
 // src/data-table/CopySubset.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_clipboard = require("@ai-matrx/kit/clipboard");
 
 // src/data-table/layered-filters.ts
@@ -4799,6 +4859,9 @@ function compareValues(a, b) {
     sensitivity: "base"
   });
 }
+function selectCellValues(value) {
+  return (Array.isArray(value) ? value : [value]).map(stringifyCellValue).filter((item) => item !== "");
+}
 function passesColumnFilter(value, filter) {
   const matches = (() => {
     switch (filter.kind) {
@@ -4815,9 +4878,9 @@ function passesColumnFilter(value, filter) {
       case "select": {
         const selected = filter.values ?? (filter.value && filter.value !== "__all__" ? [filter.value] : []);
         if (selected.length === 0) return true;
-        const s = stringifyCellValue(value);
+        const values = selectCellValues(value);
         return selected.some(
-          (v) => v === SELECT_EMPTY_VALUE ? s === "" : v === SELECT_NOT_EMPTY_VALUE ? s !== "" : s === v
+          (v) => v === SELECT_EMPTY_VALUE ? values.length === 0 : v === SELECT_NOT_EMPTY_VALUE ? values.length > 0 : values.includes(v)
         );
       }
       case "boolean": {
@@ -5072,11 +5135,11 @@ function buildViewHuman(config, visible, columns) {
 // src/data-table/CopySubset.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function CopySubsetDialog({ source, onClose }) {
-  const [rows] = (0, import_react7.useState)(() => [...source.rows]);
-  const [hidden, setHidden] = (0, import_react7.useState)(() => new Set(source.columns.filter((c) => c.hidden).map((c) => c.id)));
-  const [selectedIds, setSelectedIds] = (0, import_react7.useState)([]);
-  const [format, setFormat] = (0, import_react7.useState)("ai");
-  const [query, setQuery] = (0, import_react7.useState)({ page: 1, pageSize: 50, search: "", anyOf: "", columnFilters: {}, sort: null });
+  const [rows] = (0, import_react8.useState)(() => [...source.rows]);
+  const [hidden, setHidden] = (0, import_react8.useState)(() => new Set(source.columns.filter((c) => c.hidden).map((c) => c.id)));
+  const [selectedIds, setSelectedIds] = (0, import_react8.useState)([]);
+  const [format, setFormat] = (0, import_react8.useState)("ai");
+  const [query, setQuery] = (0, import_react8.useState)({ page: 1, pageSize: 50, search: "", anyOf: "", columnFilters: {}, sort: null });
   const { notify, notice } = useTableNotice();
   const clipboard = (0, import_clipboard.useClipboard)({ notify: (message, kind) => notify[kind](message) });
   const columns = source.columns.filter((c) => !hidden.has(c.id));
@@ -5141,9 +5204,9 @@ function useCopySubsetVariant() {
 }
 
 // src/data-table/clipping.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useClippedContentGuard(ref, options) {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!options.enabled || !ref.current) return;
     const node = ref.current;
     const check = () => {
@@ -5157,7 +5220,7 @@ function useClippedContentGuard(ref, options) {
 }
 
 // src/data-table/url-state.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_url_state = require("@ai-matrx/kit/url-state");
 function parseSort(raw) {
   if (!raw) return null;
@@ -5209,11 +5272,11 @@ function useTableUrlState(options) {
     textHistory = "session"
   } = options;
   const prefix = tableUrlParamPrefix(tableId);
-  const key = (0, import_react9.useCallback)((name) => `${prefix}.${name}`, [prefix]);
+  const key = (0, import_react10.useCallback)((name) => `${prefix}.${name}`, [prefix]);
   const defaultSortId = defaultSort?.id;
   const defaultSortDirection = defaultSort?.direction;
   const searchParams = (0, import_url_state.useUrlSearchParams)();
-  const readState = (0, import_react9.useCallback)(
+  const readState = (0, import_react10.useCallback)(
     (params) => {
       const initialSort = defaultSortId && defaultSortDirection ? { id: defaultSortId, direction: defaultSortDirection } : null;
       return {
@@ -5234,9 +5297,9 @@ function useTableUrlState(options) {
     [defaultPageSize, defaultSortDirection, defaultSortId, key]
   );
   const state = readState(searchParams);
-  const lastTextWriteAt = (0, import_react9.useRef)(0);
-  const [debouncedSearch, setDebouncedSearch] = (0, import_react9.useState)(state.search);
-  (0, import_react9.useEffect)(() => {
+  const lastTextWriteAt = (0, import_react10.useRef)(0);
+  const [debouncedSearch, setDebouncedSearch] = (0, import_react10.useState)(state.search);
+  (0, import_react10.useEffect)(() => {
     if (state.search === debouncedSearch) return;
     const timer = window.setTimeout(
       () => setDebouncedSearch(state.search),
@@ -5244,7 +5307,7 @@ function useTableUrlState(options) {
     );
     return () => window.clearTimeout(timer);
   }, [state.search, debouncedSearch, searchDebounceMs]);
-  const writeState = (0, import_react9.useCallback)(
+  const writeState = (0, import_react10.useCallback)(
     (nextState, mode = history) => {
       const params = new URLSearchParams(window.location.search);
       const setOrDelete = (name, value) => {
@@ -5295,7 +5358,7 @@ function useTableUrlState(options) {
     },
     [defaultPageSize, defaultSortDirection, defaultSortId, history, key]
   );
-  const onStateChange = (0, import_react9.useCallback)(
+  const onStateChange = (0, import_react10.useCallback)(
     (next) => {
       const changed = Object.keys(next).filter(
         (name) => JSON.stringify(next[name]) !== JSON.stringify(state[name])
@@ -5313,7 +5376,7 @@ function useTableUrlState(options) {
     },
     [history, state, textHistory, writeState]
   );
-  const reset = (0, import_react9.useCallback)(() => {
+  const reset = (0, import_react10.useCallback)(() => {
     const dSort = defaultSortId && defaultSortDirection ? { id: defaultSortId, direction: defaultSortDirection } : null;
     const next = {
       page: 1,
@@ -5329,7 +5392,7 @@ function useTableUrlState(options) {
     writeState(next);
     setDebouncedSearch("");
   }, [defaultPageSize, defaultSortDirection, defaultSortId, writeState]);
-  const queryState = (0, import_react9.useMemo)(
+  const queryState = (0, import_react10.useMemo)(
     () => state.search === debouncedSearch ? state : { ...state, search: debouncedSearch, page: 1 },
     [state, debouncedSearch]
   );
@@ -5340,7 +5403,7 @@ function useTableUrlState(options) {
 var import_url_state3 = require("@ai-matrx/kit/url-state");
 
 // src/data-table/ColumnHeaderCell.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_core = require("@dnd-kit/core");
 
 // src/command.tsx
@@ -5488,7 +5551,7 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/data-table/ColumnHeaderCell.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var HeaderButton = (0, import_react10.forwardRef)(({ dragDescription, "aria-describedby": tooltipDescription, ...props }, ref) => {
+var HeaderButton = (0, import_react11.forwardRef)(({ dragDescription, "aria-describedby": tooltipDescription, ...props }, ref) => {
   const descriptions = [tooltipDescription, dragDescription].filter((value) => Boolean(value)).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "button",
@@ -5548,9 +5611,9 @@ function ColumnHeaderCell({
   const reorderClass = reorderEnabled ? "touch-none cursor-grab active:cursor-grabbing" : void 0;
   const filterActive = isColumnFilterActive(filterValue);
   const deferredFilter = filterApplyLabel !== void 0 || filterShowCancel || filterFooterHint !== void 0;
-  const [filterOpen, setFilterOpen] = (0, import_react10.useState)(false);
-  const [draftFilter, setDraftFilter] = (0, import_react10.useState)(filterValue);
-  (0, import_react10.useEffect)(() => {
+  const [filterOpen, setFilterOpen] = (0, import_react11.useState)(false);
+  const [draftFilter, setDraftFilter] = (0, import_react11.useState)(filterValue);
+  (0, import_react11.useEffect)(() => {
     if (!filterOpen) setDraftFilter(filterValue);
   }, [filterOpen, filterValue]);
   const applyFilter = () => {
@@ -5955,8 +6018,8 @@ function SearchableSelectFilter({
   onChange,
   single = false
 }) {
-  const [query, setQuery] = (0, import_react10.useState)("");
-  const filtered = (0, import_react10.useMemo)(() => {
+  const [query, setQuery] = (0, import_react11.useState)("");
+  const filtered = (0, import_react11.useMemo)(() => {
     const q = query.trim().toLowerCase();
     if (!q) return options;
     return options.filter(
@@ -6054,8 +6117,8 @@ function NumberFilterBody({
 }) {
   const min = value?.kind === "number" ? value.min : void 0;
   const max = value?.kind === "number" ? value.max : void 0;
-  const [minText, setMinText] = (0, import_react10.useState)(min !== void 0 ? String(min) : "");
-  const [maxText, setMaxText] = (0, import_react10.useState)(max !== void 0 ? String(max) : "");
+  const [minText, setMinText] = (0, import_react11.useState)(min !== void 0 ? String(min) : "");
+  const [maxText, setMaxText] = (0, import_react11.useState)(max !== void 0 ? String(max) : "");
   const commit = (raw, which) => {
     const nextMin = which === "min" ? parseOptionalNumber(raw) : min;
     const nextMax = which === "max" ? parseOptionalNumber(raw) : max;
@@ -6123,7 +6186,7 @@ function parseOptionalNumber(raw) {
 }
 
 // src/data-table/ColumnResizeHandle.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/data-table/column-resize.ts
 var DEFAULT_COLUMN_MIN_WIDTH = 80;
@@ -6165,24 +6228,24 @@ function ColumnResizeHandle({
   onResizeCancel,
   onResizeCommit
 }) {
-  const handleRef = (0, import_react11.useRef)(null);
-  const activeResizeRef = (0, import_react11.useRef)(null);
-  const previewRafRef = (0, import_react11.useRef)(null);
-  const queuedWidthRef = (0, import_react11.useRef)(null);
-  const keyboardWidthRef = (0, import_react11.useRef)(null);
-  const [announcedWidth, setAnnouncedWidth] = (0, import_react11.useState)(null);
+  const handleRef = (0, import_react12.useRef)(null);
+  const activeResizeRef = (0, import_react12.useRef)(null);
+  const previewRafRef = (0, import_react12.useRef)(null);
+  const queuedWidthRef = (0, import_react12.useRef)(null);
+  const keyboardWidthRef = (0, import_react12.useRef)(null);
+  const [announcedWidth, setAnnouncedWidth] = (0, import_react12.useState)(null);
   const bounds = resolveColumnResizeBounds(minWidth, maxWidth);
   const cssVar = columnResizeCssVar(columnId2);
-  const readWidth = (0, import_react11.useCallback)(() => {
+  const readWidth = (0, import_react12.useCallback)(() => {
     const header = handleRef.current?.closest("th");
     const measured = header?.getBoundingClientRect().width ?? 0;
     const computed = header ? Number.parseFloat(getComputedStyle(header).width) : 0;
     return clampColumnWidth(measured || computed || keyboardWidthRef.current || bounds.minWidth, bounds);
   }, [bounds]);
-  const writePreview = (0, import_react11.useCallback)((width) => {
+  const writePreview = (0, import_react12.useCallback)((width) => {
     tableRef.current?.style.setProperty(cssVar, `${width}px`);
   }, [cssVar, tableRef]);
-  const queuePreview = (0, import_react11.useCallback)((width) => {
+  const queuePreview = (0, import_react12.useCallback)((width) => {
     queuedWidthRef.current = width;
     if (previewRafRef.current !== null) return;
     previewRafRef.current = requestAnimationFrame(() => {
@@ -6192,12 +6255,12 @@ function ColumnResizeHandle({
       if (nextWidth !== null) writePreview(nextWidth);
     });
   }, [writePreview]);
-  const clearQueuedPreview = (0, import_react11.useCallback)(() => {
+  const clearQueuedPreview = (0, import_react12.useCallback)(() => {
     if (previewRafRef.current !== null) cancelAnimationFrame(previewRafRef.current);
     previewRafRef.current = null;
     queuedWidthRef.current = null;
   }, []);
-  const finishPointerResize = (0, import_react11.useCallback)((commit) => {
+  const finishPointerResize = (0, import_react12.useCallback)((commit) => {
     const active = activeResizeRef.current;
     if (!active) return;
     activeResizeRef.current = null;
@@ -6217,7 +6280,7 @@ function ColumnResizeHandle({
       handleRef.current.releasePointerCapture(active.pointerId);
     }
   }, [clearQueuedPreview, columnId2, cssVar, onResizeCancel, onResizeCommit, tableRef, writePreview]);
-  (0, import_react11.useEffect)(() => () => clearQueuedPreview(), [clearQueuedPreview]);
+  (0, import_react12.useEffect)(() => () => clearQueuedPreview(), [clearQueuedPreview]);
   const onPointerDown = (event) => {
     if (disabled || event.button !== 0 || !event.isPrimary) return;
     event.preventDefault();
@@ -6372,7 +6435,7 @@ function rankTableSearchRows(rows, columns, query, options = {}, extraText) {
 }
 
 // src/data-table/ColumnManager.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_core2 = require("@dnd-kit/core");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function ColumnManager({
@@ -6383,15 +6446,15 @@ function ColumnManager({
   hidden,
   onApply
 }) {
-  const byId = (0, import_react12.useMemo)(
+  const byId = (0, import_react13.useMemo)(
     () => new Map(columns.map((column) => [columnId(column), column])),
     [columns]
   );
-  const [draftOrder, setDraftOrder] = (0, import_react12.useState)(order);
-  const [draftHidden, setDraftHidden] = (0, import_react12.useState)(() => new Set(hidden));
-  const [draggedColumnId, setDraggedColumnId] = (0, import_react12.useState)(null);
-  const [dropTarget, setDropTarget] = (0, import_react12.useState)(null);
-  (0, import_react12.useEffect)(() => {
+  const [draftOrder, setDraftOrder] = (0, import_react13.useState)(order);
+  const [draftHidden, setDraftHidden] = (0, import_react13.useState)(() => new Set(hidden));
+  const [draggedColumnId, setDraggedColumnId] = (0, import_react13.useState)(null);
+  const [dropTarget, setDropTarget] = (0, import_react13.useState)(null);
+  (0, import_react13.useEffect)(() => {
     if (!open) return;
     setDraftOrder(order);
     setDraftHidden(new Set(hidden));
@@ -6624,7 +6687,7 @@ function parseTableViewSnapshot(raw) {
 }
 
 // src/data-table/MatrxUuidCell.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var SHORT_LEN = 8;
 function shortUuid(id, len = SHORT_LEN) {
@@ -6664,11 +6727,11 @@ function MatrxUuidCell({
 }) {
   const { resolveEntityDoors, ResourcePeek } = useMatrxDataTableHost();
   const { notify, notice } = useTableNotice();
-  const [copied, setCopied] = (0, import_react13.useState)(false);
-  const [opening, setOpening] = (0, import_react13.useState)(false);
-  const [peekOpen, setPeekOpen] = (0, import_react13.useState)(false);
-  const timer = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(
+  const [copied, setCopied] = (0, import_react14.useState)(false);
+  const [opening, setOpening] = (0, import_react14.useState)(false);
+  const [peekOpen, setPeekOpen] = (0, import_react14.useState)(false);
+  const timer = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(
     () => () => {
       if (timer.current) clearTimeout(timer.current);
     },
@@ -6963,7 +7026,7 @@ function DataRowInspector({
 }
 
 // src/data-table/DataRowWindow.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function DataRowWindow({
   isOpen,
@@ -6984,8 +7047,8 @@ function DataRowWindow({
   const hasEdit = editContent != null;
   const hasTabs = hasEdit && children == null;
   const initialTab = defaultTab ?? (hasEdit ? "edit" : "view");
-  const [tab, setTab] = (0, import_react14.useState)(initialTab);
-  (0, import_react14.useEffect)(() => {
+  const [tab, setTab] = (0, import_react15.useState)(initialTab);
+  (0, import_react15.useEffect)(() => {
     if (!isOpen) return;
     setTab(defaultTab ?? (hasEdit ? "edit" : "view"));
   }, [isOpen, windowId, hasEdit, defaultTab]);
@@ -7136,7 +7199,7 @@ function DirtySavePill({
 }
 
 // src/data-table/EditableTableCell.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function CellEditShell({
   href,
@@ -7185,7 +7248,7 @@ function EditableTableCell({
   href,
   editTrigger = "click"
 }) {
-  const [open, setOpen] = (0, import_react15.useState)(false);
+  const [open, setOpen] = (0, import_react16.useState)(false);
   const usePencil = Boolean(href) || editTrigger === "pencil";
   if (editType === "string") {
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -7274,8 +7337,8 @@ function InlineStringEditor({
   href,
   usePencil
 }) {
-  const [editing, setEditing] = (0, import_react15.useState)(false);
-  const [draft, setDraft] = (0, import_react15.useState)(value);
+  const [editing, setEditing] = (0, import_react16.useState)(false);
+  const [draft, setDraft] = (0, import_react16.useState)(value);
   if (!editing) {
     if (usePencil) {
       return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -7426,8 +7489,8 @@ function TagsEditor({
   onCommit,
   onCancel
 }) {
-  const [tags, setTags] = (0, import_react15.useState)(value);
-  const [draft, setDraft] = (0, import_react15.useState)("");
+  const [tags, setTags] = (0, import_react16.useState)(value);
+  const [draft, setDraft] = (0, import_react16.useState)("");
   const add = (raw) => {
     const next = raw.trim();
     if (!next || tags.includes(next)) return;
@@ -7524,7 +7587,7 @@ function NumberEditor({
   onCommit,
   onCancel
 }) {
-  const [draft, setDraft] = (0, import_react15.useState)(String(value));
+  const [draft, setDraft] = (0, import_react16.useState)(String(value));
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       Input,
@@ -7651,7 +7714,7 @@ function resetToolbarFacets(facets) {
 }
 
 // src/data-table/LayeredFilterBuilder.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function moveRule(rules, from, to) {
   if (from === to || to < 0 || to >= rules.length) return [...rules];
@@ -7668,8 +7731,8 @@ function LayeredFilterBuilder({
   maxRules = 20,
   label = "Advanced filters"
 }) {
-  const [open, setOpen] = (0, import_react16.useState)(false);
-  const [draggedIndex, setDraggedIndex] = (0, import_react16.useState)(null);
+  const [open, setOpen] = (0, import_react17.useState)(false);
+  const [draggedIndex, setDraggedIndex] = (0, import_react17.useState)(null);
   if (fields.length === 0) return null;
   const updateRule = (index, patch) => {
     onChange(
@@ -8030,7 +8093,7 @@ function resolveFilterKind(col, sampleRows) {
   if (values.every((v) => typeof v === "number" && Number.isFinite(v))) {
     return "number";
   }
-  const strings = values.map(stringifyCellValue);
+  const strings = values.flatMap(selectCellValues);
   const unique = new Set(strings);
   if (unique.size >= 1 && unique.size <= SELECT_CARDINALITY_CAP && unique.size < strings.length * 0.6) {
     return "select";
@@ -8042,15 +8105,16 @@ function collectSelectOptions(col, rows) {
   const options = [];
   let hasEmpty = false;
   for (const row of rows) {
-    const raw = getCellValue(row, col);
-    const value = raw == null ? "" : stringifyCellValue(raw);
-    if (!value) {
+    const values = selectCellValues(getCellValue(row, col));
+    if (values.length === 0) {
       hasEmpty = true;
       continue;
     }
-    if (col.filterOptions?.length || seen.has(value)) continue;
-    seen.add(value);
-    options.push({ value, label: value });
+    for (const value of values) {
+      if (col.filterOptions?.length || seen.has(value)) continue;
+      seen.add(value);
+      options.push({ value, label: value });
+    }
   }
   const base = col.filterOptions?.length ? [...col.filterOptions] : options.sort((a, b) => a.label.localeCompare(b.label));
   if (hasEmpty) {
@@ -8124,7 +8188,7 @@ function TableToolbarAction({
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "data-matrx-table-toolbar-action": true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "data-matrx-table-toolbar-action": true, className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: (0, import_react17.isValidElement)(children) ? (0, import_react17.cloneElement)(children, { className: cn("h-5 w-5", children.props.className) }) : children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "data-matrx-table-toolbar-action": true, className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: (0, import_react18.isValidElement)(children) ? (0, import_react18.cloneElement)(children, { className: cn("h-5 w-5", children.props.className) }) : children }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { children: tooltip ?? ariaLabel })
   ] });
 }
@@ -8181,7 +8245,7 @@ function MatrxDataTableWithUrlState({
     ...urlState.history === void 0 ? {} : { history: urlState.history },
     ...urlState.textHistory === void 0 ? {} : { textHistory: urlState.textHistory }
   });
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (activeUrlTableIds.has(urlState.id)) {
       throw new Error(
         `Duplicate MatrxDataTable urlState.id "${urlState.id}" on one page. Give every table a unique stable id.`
@@ -8302,7 +8366,7 @@ function MatrxDataTableCore({
 }) {
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
-  const committedAppendQueryKey = (0, import_react17.useRef)(appendQueryKey);
+  const committedAppendQueryKey = (0, import_react18.useRef)(appendQueryKey);
   const appendSourceChanged = appendQuery !== null && committedAppendQueryKey.current !== appendQueryKey;
   const data = appendQuery ? appendQuery.pagination.rows : suppliedData;
   const isLoading = appendQuery ? appendQuery.pagination.loading : suppliedLoading;
@@ -8313,10 +8377,10 @@ function MatrxDataTableCore({
   const Link = host.Link ?? DefaultTableLink;
   const SidePanelSurface = host.SidePanelSurface ?? DefaultTableSidePanel;
   const { notify: toast, notice } = useTableNotice();
-  const [savedViewError, setSavedViewError] = (0, import_react17.useState)(null);
-  const [toolbarActionError, setToolbarActionError] = (0, import_react17.useState)(null);
-  const [toolbarActionPending, setToolbarActionPending] = (0, import_react17.useState)({ refresh: false, add: false });
-  const toolbarActionPendingRef = (0, import_react17.useRef)({ refresh: false, add: false });
+  const [savedViewError, setSavedViewError] = (0, import_react18.useState)(null);
+  const [toolbarActionError, setToolbarActionError] = (0, import_react18.useState)(null);
+  const [toolbarActionPending, setToolbarActionPending] = (0, import_react18.useState)({ refresh: false, add: false });
+  const toolbarActionPendingRef = (0, import_react18.useRef)({ refresh: false, add: false });
   const CHECKBOX_TAP_AREA = "h-4 w-4 touch-manipulation";
   const mobileCardsClass = mobileCardsBreakpoint === "lg" ? "lg:hidden" : "sm:hidden";
   const tableWithCardsClass = mobileCardsBreakpoint === "lg" ? "max-lg:hidden" : "max-sm:hidden";
@@ -8329,7 +8393,7 @@ function MatrxDataTableCore({
   const sourceOwnsIntelligentSearch = sourceProcessing?.intelligentSearch === "source";
   const sourceOwnsSearch = remoteQuery?.mode === "controlled" || appendQuery !== null && sourceProcessing === void 0 || sourceProcessing?.search === "source" || sourceOwnsIntelligentSearch;
   const intelligentSearchEnabled = toolbar?.intelligentSearch !== void 0 && (sourceOwnsIntelligentSearch || remoteQuery === null && !sourceOwnsSearch);
-  const emitControlledQueryChange = (0, import_react17.useCallback)(
+  const emitControlledQueryChange = (0, import_react18.useCallback)(
     (patch, options) => {
       if (!controlledQuery) return;
       controlledQuery.onStateChange(
@@ -8338,8 +8402,8 @@ function MatrxDataTableCore({
     },
     [controlledQuery]
   );
-  const [internalSearch, setInternalSearch] = (0, import_react17.useState)("");
-  const [draggedRowId, setDraggedRowId] = (0, import_react17.useState)(null);
+  const [internalSearch, setInternalSearch] = (0, import_react18.useState)("");
+  const [draggedRowId, setDraggedRowId] = (0, import_react18.useState)(null);
   const hierarchySensors = (0, import_core3.useSensors)(
     (0, import_core3.useSensor)(import_core3.PointerSensor, {
       activationConstraint: { distance: COLUMN_REORDER_ACTIVATION_DISTANCE }
@@ -8355,7 +8419,7 @@ function MatrxDataTableCore({
     }
     toolbar?.onSearchChange?.(v);
   };
-  const [internalSearchMatchMode, setInternalSearchMatchMode] = (0, import_react17.useState)(
+  const [internalSearchMatchMode, setInternalSearchMatchMode] = (0, import_react18.useState)(
     toolbar?.searchMatch?.defaultMode ?? "contains"
   );
   const searchMatchMode = controlledQuery ? controlledQuery.state.searchMatchMode ?? toolbar?.searchMatch?.defaultMode ?? "contains" : internalSearchMatchMode;
@@ -8366,7 +8430,7 @@ function MatrxDataTableCore({
     }
     setInternalSearchMatchMode(mode);
   };
-  const [internalSearchScope, setInternalSearchScope] = (0, import_react17.useState)("all");
+  const [internalSearchScope, setInternalSearchScope] = (0, import_react18.useState)("all");
   const searchScope = controlledQuery ? controlledQuery.state.searchScope ?? "all" : internalSearchScope;
   const setSearchScope = (scope) => {
     if (controlledQuery) {
@@ -8375,7 +8439,7 @@ function MatrxDataTableCore({
     }
     setInternalSearchScope(scope);
   };
-  const [internalAnyOf, setInternalAnyOf] = (0, import_react17.useState)("");
+  const [internalAnyOf, setInternalAnyOf] = (0, import_react18.useState)("");
   const toolbarAnyOfControlled = toolbar?.anyOf?.value !== void 0;
   const anyOfValue = controlledQuery ? controlledQuery.state.anyOf : toolbarAnyOfControlled ? toolbar?.anyOf?.value ?? "" : internalAnyOf;
   const setAnyOfValue = (v) => {
@@ -8386,7 +8450,7 @@ function MatrxDataTableCore({
     }
     toolbar?.anyOf?.onChange?.(v);
   };
-  const [internalLayeredFilters, setInternalLayeredFilters] = (0, import_react17.useState)([]);
+  const [internalLayeredFilters, setInternalLayeredFilters] = (0, import_react18.useState)([]);
   const layeredFilters = controlledQuery ? controlledQuery.state.layeredFilters ?? [] : internalLayeredFilters;
   const setLayeredFilters = (next) => {
     if (controlledQuery) {
@@ -8395,7 +8459,7 @@ function MatrxDataTableCore({
     }
     setInternalLayeredFilters(next);
   };
-  const [internalColumnFilters, setInternalColumnFilters] = (0, import_react17.useState)({});
+  const [internalColumnFilters, setInternalColumnFilters] = (0, import_react18.useState)({});
   const columnFilters = controlledQuery ? controlledQuery.state.columnFilters : internalColumnFilters;
   const setColumnFilter = (id, next) => {
     const nextFilters = { ...columnFilters, [id]: next };
@@ -8408,7 +8472,7 @@ function MatrxDataTableCore({
     }
     setInternalColumnFilters(nextFilters);
   };
-  const [internalSort, setInternalSort] = (0, import_react17.useState)(defaultSort);
+  const [internalSort, setInternalSort] = (0, import_react18.useState)(defaultSort);
   const sort = controlledQuery ? controlledQuery.state.sort : internalSort;
   const setSort = (next) => {
     if (controlledQuery) {
@@ -8417,7 +8481,7 @@ function MatrxDataTableCore({
     }
     setInternalSort(next);
   };
-  const [internalPage, setInternalPage] = (0, import_react17.useState)(1);
+  const [internalPage, setInternalPage] = (0, import_react18.useState)(1);
   const page = controlledQuery ? controlledQuery.state.page : internalPage;
   const setPage = (next) => {
     if (controlledQuery) {
@@ -8426,7 +8490,7 @@ function MatrxDataTableCore({
     }
     setInternalPage(next);
   };
-  const [internalPageSize, setInternalPageSize] = (0, import_react17.useState)(
+  const [internalPageSize, setInternalPageSize] = (0, import_react18.useState)(
     defaultPageSize === 0 ? Math.max(data.length, 1) : defaultPageSize
   );
   const pageSize = controlledQuery ? controlledQuery.state.pageSize : internalPageSize;
@@ -8437,26 +8501,26 @@ function MatrxDataTableCore({
     }
     setInternalPageSize(next);
   };
-  const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0, import_react17.useState)(null);
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0, import_react18.useState)(null);
   const rawSelectedId = controlledSelectedId !== void 0 ? controlledSelectedId : uncontrolledSelectedId;
   const selectedId = appendSourceChanged ? null : rawSelectedId;
   const setSelectedId = (id) => {
     if (controlledSelectedId === void 0) setUncontrolledSelectedId(id);
     onSelectedIdChange?.(id);
   };
-  const [uncontrolledWindowRowId, setUncontrolledWindowRowId] = (0, import_react17.useState)(null);
+  const [uncontrolledWindowRowId, setUncontrolledWindowRowId] = (0, import_react18.useState)(null);
   const rawWindowRowId = controlledWindowRowId !== void 0 ? controlledWindowRowId : uncontrolledWindowRowId;
   const windowRowId = appendSourceChanged ? null : rawWindowRowId;
   const setWindowRowId = (id) => {
     if (controlledWindowRowId === void 0) setUncontrolledWindowRowId(id);
     onWindowRowIdChange?.(id);
   };
-  const [windowRowSnapshot, setWindowRowSnapshot] = (0, import_react17.useState)(null);
+  const [windowRowSnapshot, setWindowRowSnapshot] = (0, import_react18.useState)(null);
   const editScopeKey = appendQueryKey === null ? "\0local" : `append:${appendQueryKey}`;
-  const [editsByScope, setEditsByScope] = (0, import_react17.useState)({});
-  const editRevisionRef = (0, import_react17.useRef)({});
-  const [savingByScope, setSavingByScope] = (0, import_react17.useState)({});
-  const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = (0, import_react17.useState)(false);
+  const [editsByScope, setEditsByScope] = (0, import_react18.useState)({});
+  const editRevisionRef = (0, import_react18.useRef)({});
+  const [savingByScope, setSavingByScope] = (0, import_react18.useState)({});
+  const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = (0, import_react18.useState)(false);
   const edits = editsByScope[editScopeKey]?.values ?? {};
   const saving = (savingByScope[editScopeKey] ?? 0) > 0;
   const setEdits = (next) => {
@@ -8523,7 +8587,7 @@ function MatrxDataTableCore({
     rows: Object.entries(draft.values).map(([rowId, columns2]) => ({ rowId, columns: columns2 }))
   }));
   const selection = appendSourceChanged && selectionConfig ? { ...selectionConfig, selectedIds: [] } : selectionConfig;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const previous = committedAppendQueryKey.current;
     committedAppendQueryKey.current = appendQueryKey;
     if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
@@ -8541,11 +8605,11 @@ function MatrxDataTableCore({
     onWindowRowIdChange,
     selectionConfig
   ]);
-  const scrollRef = (0, import_react17.useRef)(null);
-  const tableRef = (0, import_react17.useRef)(null);
-  const cardsScrollRef = (0, import_react17.useRef)(null);
-  const previousAppendKeyForScrollReset = (0, import_react17.useRef)(appendQueryKey);
-  (0, import_react17.useLayoutEffect)(() => {
+  const scrollRef = (0, import_react18.useRef)(null);
+  const tableRef = (0, import_react18.useRef)(null);
+  const cardsScrollRef = (0, import_react18.useRef)(null);
+  const previousAppendKeyForScrollReset = (0, import_react18.useRef)(appendQueryKey);
+  (0, import_react18.useLayoutEffect)(() => {
     const previous = previousAppendKeyForScrollReset.current;
     previousAppendKeyForScrollReset.current = appendQueryKey;
     if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
@@ -8570,13 +8634,13 @@ function MatrxDataTableCore({
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.thresholdPx !== void 0 ? { thresholdPx: appendScrollPolicy.thresholdPx } : {},
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
   });
-  const rootRef = (0, import_react17.useRef)(null);
+  const rootRef = (0, import_react18.useRef)(null);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
-  const [scrollHintRight, setScrollHintRight] = (0, import_react17.useState)(false);
-  const [scrollHintLeft, setScrollHintLeft] = (0, import_react17.useState)(false);
-  const updateScrollHint = (0, import_react17.useCallback)(() => {
+  const [scrollHintRight, setScrollHintRight] = (0, import_react18.useState)(false);
+  const [scrollHintLeft, setScrollHintLeft] = (0, import_react18.useState)(false);
+  const updateScrollHint = (0, import_react18.useCallback)(() => {
     const el = scrollRef.current;
     if (!el) return;
     setScrollHintRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 2);
@@ -8590,7 +8654,7 @@ function MatrxDataTableCore({
       behavior: "smooth"
     });
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     updateScrollHint();
     window.addEventListener("resize", updateScrollHint);
     const el = scrollRef.current;
@@ -8605,30 +8669,30 @@ function MatrxDataTableCore({
       observer?.disconnect();
     };
   }, [updateScrollHint, data, columns]);
-  const [columnOrder, setColumnOrder] = (0, import_react17.useState)(() => columnState?.order ?? columns.map(columnId));
-  const [hiddenColumnIds, setHiddenColumnIds] = (0, import_react17.useState)(
+  const [columnOrder, setColumnOrder] = (0, import_react18.useState)(() => columnState?.order ?? columns.map(columnId));
+  const [hiddenColumnIds, setHiddenColumnIds] = (0, import_react18.useState)(
     () => new Set(columnState?.hidden ?? columns.filter((column) => column.hidden).map(columnId))
   );
-  const [columnWidths, setColumnWidths] = (0, import_react17.useState)(
+  const [columnWidths, setColumnWidths] = (0, import_react18.useState)(
     () => normalizeColumnWidthsForColumns(columnState?.widths, columns)
   );
-  const [fixedTableGeometry, setFixedTableGeometry] = (0, import_react17.useState)(null);
-  const knownColumnIds = (0, import_react17.useRef)(new Set(columns.map(columnId)));
-  const draggedColumnId = (0, import_react17.useRef)(null);
-  const columnDragActive = (0, import_react17.useRef)(false);
-  const columnDragRaf = (0, import_react17.useRef)(null);
-  const columnDragScrollDirection = (0, import_react17.useRef)(0);
-  const [columnDragPreview, setColumnDragPreview] = (0, import_react17.useState)(null);
-  const stopColumnDragScroll = (0, import_react17.useCallback)(() => {
+  const [fixedTableGeometry, setFixedTableGeometry] = (0, import_react18.useState)(null);
+  const knownColumnIds = (0, import_react18.useRef)(new Set(columns.map(columnId)));
+  const draggedColumnId = (0, import_react18.useRef)(null);
+  const columnDragActive = (0, import_react18.useRef)(false);
+  const columnDragRaf = (0, import_react18.useRef)(null);
+  const columnDragScrollDirection = (0, import_react18.useRef)(0);
+  const [columnDragPreview, setColumnDragPreview] = (0, import_react18.useState)(null);
+  const stopColumnDragScroll = (0, import_react18.useCallback)(() => {
     if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
     columnDragRaf.current = null;
     columnDragScrollDirection.current = 0;
   }, []);
-  (0, import_react17.useEffect)(() => () => {
+  (0, import_react18.useEffect)(() => () => {
     columnDragActive.current = false;
     stopColumnDragScroll();
   }, [stopColumnDragScroll]);
-  const startColumnDragScroll = (0, import_react17.useCallback)(() => {
+  const startColumnDragScroll = (0, import_react18.useCallback)(() => {
     if (!columnDragActive.current || columnDragRaf.current !== null) return;
     const scrollStep = () => {
       const scroll = scrollRef.current;
@@ -8655,25 +8719,25 @@ function MatrxDataTableCore({
     };
     columnDragRaf.current = requestAnimationFrame(scrollStep);
   }, []);
-  const commitColumnState = (0, import_react17.useCallback)((order, hidden) => {
+  const commitColumnState = (0, import_react18.useCallback)((order, hidden) => {
     if (columnState) columnState.onChange({ order, hidden: [...hidden] });
     else {
       setColumnOrder(order);
       setHiddenColumnIds(hidden);
     }
   }, [columnState]);
-  const [internalColumnManagerOpen, setInternalColumnManagerOpen] = (0, import_react17.useState)(false);
+  const [internalColumnManagerOpen, setInternalColumnManagerOpen] = (0, import_react18.useState)(false);
   const columnManagerOpen = controlledColumnManager?.open ?? internalColumnManagerOpen;
   const setColumnManagerOpen = controlledColumnManager?.onOpenChange ?? setInternalColumnManagerOpen;
-  const columnIds = (0, import_react17.useMemo)(() => columns.map(columnId), [columns]);
-  const effectiveColumnOrder = (0, import_react17.useMemo)(() => columnState ? [...columnState.order.filter((id, index, values) => columnIds.includes(id) && values.indexOf(id) === index), ...columnIds.filter((id) => !columnState.order.includes(id))] : columnOrder, [columnIds, columnOrder, columnState]);
-  const effectiveHiddenColumnIds = (0, import_react17.useMemo)(() => columnState ? new Set(columnState.hidden.filter((id) => columnIds.includes(id))) : hiddenColumnIds, [columnIds, columnState, hiddenColumnIds]);
-  const effectiveColumnWidths = (0, import_react17.useMemo)(
+  const columnIds = (0, import_react18.useMemo)(() => columns.map(columnId), [columns]);
+  const effectiveColumnOrder = (0, import_react18.useMemo)(() => columnState ? [...columnState.order.filter((id, index, values) => columnIds.includes(id) && values.indexOf(id) === index), ...columnIds.filter((id) => !columnState.order.includes(id))] : columnOrder, [columnIds, columnOrder, columnState]);
+  const effectiveHiddenColumnIds = (0, import_react18.useMemo)(() => columnState ? new Set(columnState.hidden.filter((id) => columnIds.includes(id))) : hiddenColumnIds, [columnIds, columnState, hiddenColumnIds]);
+  const effectiveColumnWidths = (0, import_react18.useMemo)(
     () => normalizeColumnWidthsForColumns(columnState?.widths ?? columnWidths, columns),
     [columns, columnState?.widths, columnWidths]
   );
-  const resizeGestureSnapshotRef = (0, import_react17.useRef)(null);
-  const measureVisibleColumnWidths = (0, import_react17.useCallback)(() => {
+  const resizeGestureSnapshotRef = (0, import_react18.useRef)(null);
+  const measureVisibleColumnWidths = (0, import_react18.useCallback)(() => {
     const measured = {};
     const headers = tableRef.current ? Array.from(tableRef.current.querySelectorAll(
       "thead th[data-matrx-table-column-id]"
@@ -8687,7 +8751,7 @@ function MatrxDataTableCore({
     }
     return normalizeColumnWidthsForColumns(measured, columns);
   }, [columns]);
-  const measureFixedTableGeometry = (0, import_react17.useCallback)(() => {
+  const measureFixedTableGeometry = (0, import_react18.useCallback)(() => {
     const table = tableRef.current;
     const headers = table ? Array.from(table.querySelectorAll("thead th")) : [];
     const widthFor = (selector) => {
@@ -8717,16 +8781,16 @@ function MatrxDataTableCore({
       ...actionsWidth === void 0 ? {} : { actionsWidth }
     };
   }, [resolvedDensity]);
-  const captureResizeGestureSnapshot = (0, import_react17.useCallback)(() => {
+  const captureResizeGestureSnapshot = (0, import_react18.useCallback)(() => {
     resizeGestureSnapshotRef.current = {
       widths: measureVisibleColumnWidths(),
       geometry: measureFixedTableGeometry()
     };
   }, [measureFixedTableGeometry, measureVisibleColumnWidths]);
-  const clearResizeGestureSnapshot = (0, import_react17.useCallback)(() => {
+  const clearResizeGestureSnapshot = (0, import_react18.useCallback)(() => {
     resizeGestureSnapshotRef.current = null;
   }, []);
-  const commitColumnWidths = (0, import_react17.useCallback)((next, captureInitialWidths = false) => {
+  const commitColumnWidths = (0, import_react18.useCallback)((next, captureInitialWidths = false) => {
     const gestureSnapshot = captureInitialWidths ? resizeGestureSnapshotRef.current : null;
     resizeGestureSnapshotRef.current = null;
     const normalized = normalizeColumnWidthsForColumns(
@@ -8745,7 +8809,7 @@ function MatrxDataTableCore({
     }
     setColumnWidths(normalized);
   }, [columnIds, columnState, columns, measureFixedTableGeometry, measureVisibleColumnWidths]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const ids = columns.map(columnId);
     if (columnState) return;
     const previousIds = knownColumnIds.current;
@@ -8764,30 +8828,31 @@ function MatrxDataTableCore({
     setColumnWidths((current) => normalizeColumnWidthsForColumns(current, columns));
     knownColumnIds.current = new Set(ids);
   }, [columns, columnState]);
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     for (const id of columnIds) {
       tableRef.current?.style.removeProperty(columnResizeCssVar(id));
     }
   });
-  const previewColumnOrder = (0, import_react17.useMemo)(
+  const previewColumnOrder = (0, import_react18.useMemo)(
     () => projectColumnDragOrder(effectiveColumnOrder, columnDragPreview),
     [columnDragPreview, effectiveColumnOrder]
   );
-  const visibleColumns = (0, import_react17.useMemo)(() => {
+  useColumnReorderAnimation(tableRef, previewColumnOrder.join("\0"), columnDragPreview !== null);
+  const visibleColumns = (0, import_react18.useMemo)(() => {
     const byId = new Map(columns.map((column) => [columnId(column), column]));
     return previewColumnOrder.map((id) => byId.get(id)).filter(
       (column) => column !== void 0 && !effectiveHiddenColumnIds.has(columnId(column))
     );
   }, [columns, effectiveHiddenColumnIds, previewColumnOrder]);
   const usesMeasuredFixedLayout = visibleColumns.length > 0 && visibleColumns.every((column) => effectiveColumnWidths[columnId(column)] !== void 0);
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     if (!usesMeasuredFixedLayout) {
       if (fixedTableGeometry !== null) setFixedTableGeometry(null);
       return;
     }
     if (fixedTableGeometry === null) setFixedTableGeometry(measureFixedTableGeometry());
   }, [fixedTableGeometry, measureFixedTableGeometry, usesMeasuredFixedLayout]);
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     if (!usesMeasuredFixedLayout) return;
     const table = tableRef.current;
     if (!table) return;
@@ -8809,14 +8874,14 @@ function MatrxDataTableCore({
     setFixedTableGeometry(geometry);
   }, [resolvedDensity, measureFixedTableGeometry, usesMeasuredFixedLayout]);
   const fixedLayoutActive = usesMeasuredFixedLayout && fixedTableGeometry !== null;
-  const declaredVisibleCopyColumns = (0, import_react17.useMemo)(
+  const declaredVisibleCopyColumns = (0, import_react18.useMemo)(
     () => visibleColumns.filter((column) => column.accessorFn !== void 0 || column.accessorKey !== void 0),
     [visibleColumns]
   );
-  const tableCopySourceNamespace = (0, import_react17.useId)();
-  const tableDndContextId = (0, import_react17.useId)();
+  const tableCopySourceNamespace = (0, import_react18.useId)();
+  const tableDndContextId = (0, import_react18.useId)();
   const defaultCopyTitle = toolbar?.title || "Table";
-  const defaultCopy = (0, import_react17.useMemo)(() => ({
+  const defaultCopy = (0, import_react18.useMemo)(() => ({
     label: defaultCopyTitle,
     listLabel: defaultCopyTitle,
     location: defaultCopyTitle,
@@ -8851,7 +8916,7 @@ function MatrxDataTableCore({
       serializer: (shaped) => buildViewAgentInput(effectiveCopy, shaped, data, { scope: "custom" })
     }))
   ] : [];
-  const filterMeta = (0, import_react17.useMemo)(() => {
+  const filterMeta = (0, import_react18.useMemo)(() => {
     const meta = /* @__PURE__ */ new Map();
     for (const col of visibleColumns) {
       const id = columnId(col);
@@ -8859,14 +8924,14 @@ function MatrxDataTableCore({
     }
     return meta;
   }, [visibleColumns, data, remoteQuery]);
-  const intelligentSearchScopes = (0, import_react17.useMemo)(
+  const intelligentSearchScopes = (0, import_react18.useMemo)(
     () => resolveTableSearchScopes(data, columns, {
       ...toolbar?.intelligentSearch?.roles === void 0 ? {} : { roles: toolbar.intelligentSearch.roles },
       ...toolbar?.intelligentSearch?.scopes === void 0 ? {} : { scopes: toolbar.intelligentSearch.scopes }
     }),
     [columns, data, toolbar?.intelligentSearch?.roles, toolbar?.intelligentSearch?.scopes]
   );
-  const processed = (0, import_react17.useMemo)(() => {
+  const processed = (0, import_react18.useMemo)(() => {
     if (remoteQuery && !appendUsesLocalProcessing) return data;
     if (processLocalRows) {
       return processLocalRows(data, {
@@ -8928,8 +8993,8 @@ function MatrxDataTableCore({
     intelligentSearchEnabled,
     searchScope
   ]);
-  const lastNotifiedViewRows = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const lastNotifiedViewRows = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
     if (!onViewChange) {
       lastNotifiedViewRows.current = null;
       return;
@@ -8938,7 +9003,7 @@ function MatrxDataTableCore({
     lastNotifiedViewRows.current = processed;
     if (changed) onViewChange(processed);
   }, [processed, onViewChange]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (controlledQuery) return;
     setInternalPage(1);
   }, [
@@ -8977,7 +9042,7 @@ function MatrxDataTableCore({
     enabled: localProgressiveEnabled,
     onPageAdvance: setPage
   });
-  const paginated = (0, import_react17.useMemo)(() => {
+  const paginated = (0, import_react18.useMemo)(() => {
     if (remoteQuery) return processed;
     if (hidePagination) return processed;
     if (localProgressiveEnabled) return [...progressiveRows.rows];
@@ -8985,15 +9050,15 @@ function MatrxDataTableCore({
     const start = (safePage - 1) * effectivePageSize;
     return processed.slice(start, start + effectivePageSize);
   }, [processed, safePage, effectivePageSize, pageSize, remoteQuery, hidePagination, localProgressiveEnabled, progressiveRows.rows]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!controlledQuery || controlledQuery.state.page === safePage) return;
     emitControlledQueryChange({ page: safePage });
   }, [controlledQuery, emitControlledQueryChange, safePage]);
-  const selectedRow = (0, import_react17.useMemo)(() => {
+  const selectedRow = (0, import_react18.useMemo)(() => {
     if (!selectedId) return null;
     return data.find((r) => getRowId(r) === selectedId) ?? null;
   }, [data, selectedId, getRowId]);
-  const windowRow = (0, import_react17.useMemo)(() => {
+  const windowRow = (0, import_react18.useMemo)(() => {
     if (!windowRowId) return null;
     return data.find((r) => getRowId(r) === windowRowId) ?? (windowRowSnapshot && windowRowSnapshot.queryKey === appendQueryKey && getRowId(windowRowSnapshot.row) === windowRowId ? windowRowSnapshot.row : null);
   }, [data, windowRowId, windowRowSnapshot, getRowId, appendQueryKey]);
@@ -9012,7 +9077,7 @@ function MatrxDataTableCore({
     return def !== void 0 && f.value !== def;
   });
   const hasActiveFilters = activeFilterCount > 0 || Boolean(searchValue.trim()) || intelligentSearchEnabled && searchScope !== "all" || Boolean(anyOfValue.trim()) || completeLayeredFilterRules(layeredFilters).length > 0 || facetActive;
-  const changeCount = (0, import_react17.useMemo)(() => {
+  const changeCount = (0, import_react18.useMemo)(() => {
     let n = 0;
     for (const fields of Object.values(edits)) {
       n += Object.keys(fields).length;
@@ -9114,7 +9179,7 @@ function MatrxDataTableCore({
   };
   const hierarchyRows = hierarchy?.rows ?? data;
   const hierarchyGetParentId = hierarchy?.getParentId;
-  const hierarchyIndex = (0, import_react17.useMemo)(() => {
+  const hierarchyIndex = (0, import_react18.useMemo)(() => {
     if (!hierarchyGetParentId) return null;
     const byId = /* @__PURE__ */ new Map();
     const parentById = /* @__PURE__ */ new Map();
@@ -9146,7 +9211,7 @@ function MatrxDataTableCore({
     return { byId, parentById, depthById };
   }, [hierarchyGetParentId, hierarchyRows, getRowId]);
   const draggedRow = draggedRowId && hierarchyIndex ? hierarchyIndex.byId.get(draggedRowId) : void 0;
-  const hierarchyBlockedIds = (0, import_react17.useMemo)(() => {
+  const hierarchyBlockedIds = (0, import_react18.useMemo)(() => {
     if (!draggedRowId || !hierarchyIndex) return null;
     const childrenById = /* @__PURE__ */ new Map();
     for (const [id, parentId] of hierarchyIndex.parentById) {
@@ -9326,7 +9391,7 @@ function MatrxDataTableCore({
     edit?.onCancel?.();
   };
   const showActionsCol = windowEnabled || Boolean(rowActions) || showRowCopy;
-  const selectedIdSet = (0, import_react17.useMemo)(
+  const selectedIdSet = (0, import_react18.useMemo)(
     () => new Set(selection?.selectedIds ?? []),
     [selection?.selectedIds]
   );
@@ -9338,11 +9403,11 @@ function MatrxDataTableCore({
   );
   const allOnPageSelected = selectableRows.length > 0 && selectedOnPage.length === selectableRows.length;
   const someOnPageSelected = selectedOnPage.length > 0 && !allOnPageSelected;
-  const selectedRows = (0, import_react17.useMemo)(
+  const selectedRows = (0, import_react18.useMemo)(
     () => data.filter((row) => selectedIdSet.has(getRowId(row))),
     [data, selectedIdSet, getRowId]
   );
-  const lastToggledIndex = (0, import_react17.useRef)(null);
+  const lastToggledIndex = (0, import_react18.useRef)(null);
   const setSelectedIds = (next) => selection?.onSelectedIdsChange([...next]);
   const toggleRowSelected = (index, shiftKey) => {
     if (!selection) return;
@@ -9411,7 +9476,7 @@ function MatrxDataTableCore({
     }
     return href ? /* @__PURE__ */ (0, import_jsx_runtime39.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_react17.useMemo)(
+  const currentViewSnapshot = (0, import_react18.useMemo)(
     () => ({
       __kind: "matrx-table-view",
       version: 1,
@@ -9446,7 +9511,7 @@ function MatrxDataTableCore({
       sort
     ]
   );
-  const declaredDefaultViewSnapshot = (0, import_react17.useMemo)(
+  const declaredDefaultViewSnapshot = (0, import_react18.useMemo)(
     () => defaultViewSnapshot ?? {
       __kind: "matrx-table-view",
       version: 1,
@@ -9465,7 +9530,7 @@ function MatrxDataTableCore({
     },
     [columns, defaultPageSize, defaultSort, defaultViewSnapshot]
   );
-  const applySavedView = (0, import_react17.useCallback)(
+  const applySavedView = (0, import_react18.useCallback)(
     (rawSnapshot) => {
       const snapshot = parseTableViewSnapshot(rawSnapshot);
       if (!snapshot) {
@@ -9995,7 +10060,7 @@ function MatrxDataTableCore({
                           const id = getRowId(row);
                           const displayRow = applyRowEdits(row, edits[id]);
                           const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
-                          return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react17.Fragment, { children: mobileCards(displayRow, index, {
+                          return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react18.Fragment, { children: mobileCards(displayRow, index, {
                             renderCell: (columnKey) => {
                               const column = columns.find((candidate) => columnId(candidate) === columnKey);
                               return column ? renderRecordCell(row, column, index) : null;
@@ -10346,6 +10411,7 @@ function MatrxDataTableCore({
                                           return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                                             "td",
                                             {
+                                              "data-matrx-table-column-id": columnId(col),
                                               "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
                                               className: cn(
                                                 "py-1.5 align-middle lg:py-0.5",
@@ -10464,7 +10530,7 @@ function MatrxDataTableCore({
                                       children: wrappedRow
                                     },
                                     id
-                                  ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react17.Fragment, { children: wrappedRow }, id);
+                                  ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react18.Fragment, { children: wrappedRow }, id);
                                 }),
                                 appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                                   "td",
@@ -10958,7 +11024,7 @@ function HierarchyDragIndicatorLayer({
   scrollRef,
   resolve: resolve2
 }) {
-  const [indicator, setIndicator] = (0, import_react17.useState)(
+  const [indicator, setIndicator] = (0, import_react18.useState)(
     null
   );
   (0, import_core3.useDndMonitor)({
@@ -11062,9 +11128,9 @@ function HierarchyDroppableRow({
   children
 }) {
   const { setNodeRef } = (0, import_core3.useDroppable)({ id, disabled });
-  if (!(0, import_react17.isValidElement)(children) || children.type !== "tr") return children;
+  if (!(0, import_react18.isValidElement)(children) || children.type !== "tr") return children;
   const row = children;
-  return (0, import_react17.cloneElement)(row, {
+  return (0, import_react18.cloneElement)(row, {
     ref: setNodeRef,
     className: row.props.className
   });
@@ -11104,7 +11170,7 @@ function columnWidthVar(width, resizedWidth, id, resizable) {
   };
 }
 function DefaultJsonCell({ value }) {
-  const [open, setOpen] = (0, import_react17.useState)(false);
+  const [open, setOpen] = (0, import_react18.useState)(false);
   const host = useMatrxDataTableHost();
   const Viewer = host.JsonViewer;
   const text = JSON.stringify(value, null, 2);
@@ -11161,7 +11227,7 @@ function resolveStringTitle(title, fallback) {
 }
 
 // src/data-table/SavedViewsControl.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/dropdown-menu.tsx
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
@@ -11304,11 +11370,11 @@ function SavedViewsControl({
   onUpdate,
   onReload
 }) {
-  const unsavedChangesId = (0, import_react18.useId)();
-  const [saveOpen, setSaveOpen] = (0, import_react18.useState)(false);
-  const [name, setName] = (0, import_react18.useState)("");
-  const [saving, setSaving] = (0, import_react18.useState)(false);
-  const [actionError, setActionError] = (0, import_react18.useState)(null);
+  const unsavedChangesId = (0, import_react19.useId)();
+  const [saveOpen, setSaveOpen] = (0, import_react19.useState)(false);
+  const [name, setName] = (0, import_react19.useState)("");
+  const [saving, setSaving] = (0, import_react19.useState)(false);
+  const [actionError, setActionError] = (0, import_react19.useState)(null);
   const visibleError = actionError ?? error;
   const save = async () => {
     const next = name.trim();