@ai-matrx/design-system 0.20.5 → 0.20.8

package/dist/data-table/index.js

@@ -8,9 +8,9 @@ import {
   useCallback as useCallback6,
   useEffect as useEffect13,
   useId as useId2,
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo7,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState19
 } from "react";
 import {
@@ -183,6 +183,46 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
+// src/data-table/use-column-reorder-animation.ts
+import { useLayoutEffect, useRef } from "react";
+function useColumnReorderAnimation(tableRef, order, dragging) {
+  const previous = useRef({ positions: /* @__PURE__ */ new Map(), dragging: false });
+  const animations = useRef([]);
+  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]);
+  useLayoutEffect(() => () => {
+    animations.current.forEach((animation) => animation.cancel());
+  }, []);
+}
+
 // src/data-table/MatrxDataTable.tsx
 import { formatCount as formatCount3 } from "@ai-matrx/kit/format";
 
@@ -928,7 +968,7 @@ function TableTitleRow({
 }
 
 // src/data-table/TableSearch.tsx
-import { useRef, useState } from "react";
+import { useRef as useRef2, useState } from "react";
 
 // src/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
@@ -960,7 +1000,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function TableSearch({ value, onChange, scope, onScopeChange, scopes, placeholder = "Search\u2026" }) {
   const [expanded, setExpanded] = useState(false);
-  const inputRef = useRef(null);
+  const inputRef = useRef2(null);
   return /* @__PURE__ */ jsx13("div", { "data-matrx-table-search": true, className: "h-11 min-w-0 w-full sm:max-w-xs", children: /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -1006,7 +1046,7 @@ function TableSearch({ value, onChange, scope, onScopeChange, scopes, placeholde
 }
 
 // src/data-table/useScrollPagination.ts
-import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect, useRef as useRef3, useState as useState2 } from "react";
 var DEFAULT_THRESHOLD_PX = 96;
 var DEFAULT_INTENT_TIMEOUT_MS = 1200;
 function resolveContainer(container) {
@@ -1078,7 +1118,7 @@ function useScrollPagination({
   enabled = true
 }) {
   const [requestError, setRequestError] = useState2(null);
-  const latestRef = useRef2({
+  const latestRef = useRef3({
     queryKey,
     hasNextPage,
     isFetchingNextPage,
@@ -1100,14 +1140,14 @@ function useScrollPagination({
     thresholdPx,
     enabled
   };
-  const intentRef = useRef2(null);
-  const inputSequenceRef = useRef2(0);
-  const consumedSequenceRef = useRef2(0);
-  const requestGenerationRef = useRef2(0);
-  const inFlightGenerationRef = useRef2(null);
-  const requestErrorRef = useRef2(null);
-  const mountedRef = useRef2(false);
-  const observedTopRef = useRef2(/* @__PURE__ */ new WeakMap());
+  const intentRef = useRef3(null);
+  const inputSequenceRef = useRef3(0);
+  const consumedSequenceRef = useRef3(0);
+  const requestGenerationRef = useRef3(0);
+  const inFlightGenerationRef = useRef3(null);
+  const requestErrorRef = useRef3(null);
+  const mountedRef = useRef3(false);
+  const observedTopRef = useRef3(/* @__PURE__ */ new WeakMap());
   const effectiveError = error ?? requestError;
   useEffect(() => {
     mountedRef.current = true;
@@ -1244,7 +1284,7 @@ function useScrollPagination({
 }
 
 // src/data-table/useProgressiveTableRows.ts
-import { useEffect as useEffect2, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect2, useMemo, useRef as useRef4, useState as useState3 } from "react";
 function safePageSize(pageSize) {
   return Number.isFinite(pageSize) && pageSize > 0 ? Math.floor(pageSize) : 0;
 }
@@ -1267,9 +1307,9 @@ function useProgressiveTableRows({
   const pageSize = safePageSize(rawPageSize);
   const hasExplicitRequestedPage = rawRequestedPage !== void 0;
   const requestedPage = safeRequestedPage(rawRequestedPage);
-  const initialRequestedPageRef = useRef3(requestedPage);
-  const latestRequestedPageRef = useRef3(requestedPage);
-  const optimisticAdvancePageRef = useRef3(null);
+  const initialRequestedPageRef = useRef4(requestedPage);
+  const latestRequestedPageRef = useRef4(requestedPage);
+  const optimisticAdvancePageRef = useRef4(null);
   latestRequestedPageRef.current = requestedPage;
   const progressionKey = `${queryKey}\0${pageSize}`;
   const initialShownCount = startCount(pageSize, initialRequestedPageRef.current);
@@ -2825,7 +2865,7 @@ var useContentTransferCapabilities = () => React14.useContext(CapabilityContext)
 var SurfaceContext = React14.createContext(null);
 function MenuPresentation({ label, hint, icon: Icon3 }) {
   return /* @__PURE__ */ jsxs16(Fragment2, { children: [
-    Icon3 ? /* @__PURE__ */ jsx24(Icon3, { className: "matrx-alchemy-menu-icon" }) : null,
+    Icon3 ? /* @__PURE__ */ jsx24(Icon3, { className: "matrx-alchemy-menu-icon" }) : /* @__PURE__ */ jsx24(PaletteGlyph, { file: true }),
     /* @__PURE__ */ jsxs16("span", { children: [
       label,
       hint ? /* @__PURE__ */ jsx24("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__ */ jsxs16(Fragment2, { children: [
-    !action.icon ? path2 ? /* @__PURE__ */ jsx24("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__ */ jsx24("path", { d: path2 }) }) : /* @__PURE__ */ jsx24(PaletteGlyph, { file: true }) : null,
-    /* @__PURE__ */ jsx24(MenuPresentation, { ...action })
+    action.icon ? /* @__PURE__ */ jsx24(action.icon, { className: "matrx-alchemy-menu-icon" }) : path2 ? /* @__PURE__ */ jsx24("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__ */ jsx24("path", { d: path2 }) }) : /* @__PURE__ */ jsx24(PaletteGlyph, { file: true }),
+    /* @__PURE__ */ jsxs16("span", { children: [
+      action.label,
+      action.hint ? /* @__PURE__ */ jsx24("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__ */ jsx24("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__ */ jsx24("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__ */ jsxs16("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__ */ jsx24("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx24("path", { d: "M3 9h18M9 9v12" })
+  ] });
   if (kind === "ai-copy") return /* @__PURE__ */ jsxs16("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__ */ jsx24("rect", { x: "5", y: "5", width: "11", height: "14", rx: "2" }),
     /* @__PURE__ */ jsx24("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__ */ jsxs16("button", { type: "button", className: "matrx-alchemy-palette-tile", "aria-label": presentation?.ariaLabel ?? (presentation ? fallbackLabel : options.ariaLabel ?? `${resolvedMode === "copy" ? "Copy" : "Download"} ${label2}`), onClick: () => {
+    return /* @__PURE__ */ jsxs16("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__ */ jsx24(PaletteGlyph, { kind: "ai-copy" }),
             /* @__PURE__ */ jsxs16("span", { children: [
               "Copy with AI context",
-              /* @__PURE__ */ jsx24("small", { className: "matrx-alchemy-menu-hint", children: "Content, source and capture details" })
+              /* @__PURE__ */ jsx24("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__ */ jsx24(PaletteGlyph, { kind: "sliders" }),
             /* @__PURE__ */ jsxs16("span", { children: [
               "Prepare for AI",
-              /* @__PURE__ */ jsx24("small", { className: "matrx-alchemy-menu-hint", children: "Review and edit before copying" })
+              /* @__PURE__ */ jsx24("small", { className: "matrx-alchemy-menu-hint", children: "Trim, edit or summarize" })
             ] })
           ] }) })
         ] }) : null,
         prepareAvailable && (nearestWorkspaceKey || variants.length) ? /* @__PURE__ */ jsx24(PaletteRows, { title: "Other sources", items: [], extra: /* @__PURE__ */ jsxs16(Fragment2, { children: [
-          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ jsx24("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
+          nearestWorkspaceKey && nearestSurface ? /* @__PURE__ */ jsxs16("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => {
             closePalette();
             void openWorkspace(nearestWorkspaceKey, { source: nearestSurface, label: nearestSurface.surfaceName });
-          }, children: /* @__PURE__ */ jsx24("span", { children: "Prepare this surface" }) }) : null,
+          }, children: [
+            /* @__PURE__ */ jsx24(PaletteGlyph, { kind: "surface" }),
+            /* @__PURE__ */ jsx24("span", { children: "Prepare this page" })
+          ] }) : null,
           variants.map((variant) => /* @__PURE__ */ jsx24("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": variant.ariaLabel, onClick: () => {
             closePalette();
             void openWorkspace(variantWorkspaceKeys.get(variant.id), variant);
           }, children: /* @__PURE__ */ jsx24(MenuPresentation, { ...variant, label: `Prepare ${variant.label}` }) }, variant.id))
         ] }) }) : null,
         references.length || referenceActions.length ? /* @__PURE__ */ jsxs16("section", { className: "matrx-alchemy-palette-section", children: [
-          /* @__PURE__ */ jsx24("h3", { children: "Live references" }),
-          /* @__PURE__ */ jsx24("p", { className: "matrx-alchemy-menu-hint", children: "Pointers to saved data, independent of filters and edits." }),
-          references.map((reference) => /* @__PURE__ */ jsx24("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void copyReference(reference), children: /* @__PURE__ */ jsx24("span", { children: reference.label }) }, reference.id)),
-          referenceActions.map((action) => /* @__PURE__ */ jsx24("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void openReference(action), children: /* @__PURE__ */ jsx24("span", { children: action.label }) }, action.id))
+          /* @__PURE__ */ jsx24("h3", { children: "References" }),
+          referenceActions.map((action) => /* @__PURE__ */ jsxs16("button", { type: "button", className: "matrx-alchemy-palette-row", onClick: () => void openReference(action), children: [
+            /* @__PURE__ */ jsx24(PaletteGlyph, { kind: "link" }),
+            /* @__PURE__ */ jsx24("span", { children: action.label }),
+            /* @__PURE__ */ jsx24("svg", { className: "matrx-alchemy-disclosure", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx24("path", { d: "m6 4 4 4-4 4" }) })
+          ] }, action.id)),
+          references.map((reference) => /* @__PURE__ */ jsxs16("button", { type: "button", className: "matrx-alchemy-palette-row", title: "Copies a reference to saved data", onClick: () => void copyReference(reference), children: [
+            /* @__PURE__ */ jsx24(PaletteGlyph, { kind: "link" }),
+            /* @__PURE__ */ jsx24("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__ */ jsxs16("details", { className: "matrx-alchemy-palette-destinations", children: [
             /* @__PURE__ */ jsxs16("summary", { children: [
               group === "save" ? "Save to Matrx" : group === "chat" ? "Continue with AI" : group === "email" ? "Email to me" : "Actions",
-              /* @__PURE__ */ jsx24("span", { children: entries.length })
+              /* @__PURE__ */ jsxs16("span", { className: "matrx-alchemy-disclosure-meta", children: [
+                /* @__PURE__ */ jsx24("span", { children: entries.length }),
+                /* @__PURE__ */ jsx24("svg", { className: "matrx-alchemy-disclosure", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx24("path", { d: "m6 4 4 4-4 4" }) })
+              ] })
             ] }),
             /* @__PURE__ */ jsx24("div", { children: entries.map((action) => /* @__PURE__ */ jsx24("button", { type: "button", className: "matrx-alchemy-palette-row", "aria-label": action.ariaLabel, onClick: () => {
               closePalette();
@@ -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": {
@@ -5157,7 +5220,7 @@ function useClippedContentGuard(ref, options) {
 }
 
 // src/data-table/url-state.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef8, useState as useState11 } from "react";
 import {
   commitUrlParams,
   useUrlSearchParams
@@ -5237,7 +5300,7 @@ function useTableUrlState(options) {
     [defaultPageSize, defaultSortDirection, defaultSortId, key]
   );
   const state = readState(searchParams);
-  const lastTextWriteAt = useRef7(0);
+  const lastTextWriteAt = useRef8(0);
   const [debouncedSearch, setDebouncedSearch] = useState11(state.search);
   useEffect7(() => {
     if (state.search === debouncedSearch) return;
@@ -6138,7 +6201,7 @@ function parseOptionalNumber(raw) {
 import {
   useCallback as useCallback5,
   useEffect as useEffect9,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState13
 } from "react";
 
@@ -6182,11 +6245,11 @@ function ColumnResizeHandle({
   onResizeCancel,
   onResizeCommit
 }) {
-  const handleRef = useRef8(null);
-  const activeResizeRef = useRef8(null);
-  const previewRafRef = useRef8(null);
-  const queuedWidthRef = useRef8(null);
-  const keyboardWidthRef = useRef8(null);
+  const handleRef = useRef9(null);
+  const activeResizeRef = useRef9(null);
+  const previewRafRef = useRef9(null);
+  const queuedWidthRef = useRef9(null);
+  const keyboardWidthRef = useRef9(null);
   const [announcedWidth, setAnnouncedWidth] = useState13(null);
   const bounds = resolveColumnResizeBounds(minWidth, maxWidth);
   const cssVar = columnResizeCssVar(columnId2);
@@ -6643,7 +6706,7 @@ function parseTableViewSnapshot(raw) {
 // src/data-table/MatrxUuidCell.tsx
 import {
   useEffect as useEffect11,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState15
 } from "react";
 import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -6688,7 +6751,7 @@ function MatrxUuidCell({
   const [copied, setCopied] = useState15(false);
   const [opening, setOpening] = useState15(false);
   const [peekOpen, setPeekOpen] = useState15(false);
-  const timer = useRef9(null);
+  const timer = useRef10(null);
   useEffect11(
     () => () => {
       if (timer.current) clearTimeout(timer.current);
@@ -8051,7 +8114,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";
@@ -8063,15 +8126,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) {
@@ -8323,7 +8387,7 @@ function MatrxDataTableCore({
 }) {
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
-  const committedAppendQueryKey = useRef10(appendQueryKey);
+  const committedAppendQueryKey = useRef11(appendQueryKey);
   const appendSourceChanged = appendQuery !== null && committedAppendQueryKey.current !== appendQueryKey;
   const data = appendQuery ? appendQuery.pagination.rows : suppliedData;
   const isLoading = appendQuery ? appendQuery.pagination.loading : suppliedLoading;
@@ -8337,7 +8401,7 @@ function MatrxDataTableCore({
   const [savedViewError, setSavedViewError] = useState19(null);
   const [toolbarActionError, setToolbarActionError] = useState19(null);
   const [toolbarActionPending, setToolbarActionPending] = useState19({ refresh: false, add: false });
-  const toolbarActionPendingRef = useRef10({ refresh: false, add: false });
+  const toolbarActionPendingRef = useRef11({ 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";
@@ -8475,7 +8539,7 @@ function MatrxDataTableCore({
   const [windowRowSnapshot, setWindowRowSnapshot] = useState19(null);
   const editScopeKey = appendQueryKey === null ? "\0local" : `append:${appendQueryKey}`;
   const [editsByScope, setEditsByScope] = useState19({});
-  const editRevisionRef = useRef10({});
+  const editRevisionRef = useRef11({});
   const [savingByScope, setSavingByScope] = useState19({});
   const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = useState19(false);
   const edits = editsByScope[editScopeKey]?.values ?? {};
@@ -8562,11 +8626,11 @@ function MatrxDataTableCore({
     onWindowRowIdChange,
     selectionConfig
   ]);
-  const scrollRef = useRef10(null);
-  const tableRef = useRef10(null);
-  const cardsScrollRef = useRef10(null);
-  const previousAppendKeyForScrollReset = useRef10(appendQueryKey);
-  useLayoutEffect(() => {
+  const scrollRef = useRef11(null);
+  const tableRef = useRef11(null);
+  const cardsScrollRef = useRef11(null);
+  const previousAppendKeyForScrollReset = useRef11(appendQueryKey);
+  useLayoutEffect2(() => {
     const previous = previousAppendKeyForScrollReset.current;
     previousAppendKeyForScrollReset.current = appendQueryKey;
     if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
@@ -8591,7 +8655,7 @@ function MatrxDataTableCore({
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.thresholdPx !== void 0 ? { thresholdPx: appendScrollPolicy.thresholdPx } : {},
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
   });
-  const rootRef = useRef10(null);
+  const rootRef = useRef11(null);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
@@ -8634,11 +8698,11 @@ function MatrxDataTableCore({
     () => normalizeColumnWidthsForColumns(columnState?.widths, columns)
   );
   const [fixedTableGeometry, setFixedTableGeometry] = useState19(null);
-  const knownColumnIds = useRef10(new Set(columns.map(columnId)));
-  const draggedColumnId = useRef10(null);
-  const columnDragActive = useRef10(false);
-  const columnDragRaf = useRef10(null);
-  const columnDragScrollDirection = useRef10(0);
+  const knownColumnIds = useRef11(new Set(columns.map(columnId)));
+  const draggedColumnId = useRef11(null);
+  const columnDragActive = useRef11(false);
+  const columnDragRaf = useRef11(null);
+  const columnDragScrollDirection = useRef11(0);
   const [columnDragPreview, setColumnDragPreview] = useState19(null);
   const stopColumnDragScroll = useCallback6(() => {
     if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
@@ -8693,7 +8757,7 @@ function MatrxDataTableCore({
     () => normalizeColumnWidthsForColumns(columnState?.widths ?? columnWidths, columns),
     [columns, columnState?.widths, columnWidths]
   );
-  const resizeGestureSnapshotRef = useRef10(null);
+  const resizeGestureSnapshotRef = useRef11(null);
   const measureVisibleColumnWidths = useCallback6(() => {
     const measured = {};
     const headers = tableRef.current ? Array.from(tableRef.current.querySelectorAll(
@@ -8785,7 +8849,7 @@ function MatrxDataTableCore({
     setColumnWidths((current) => normalizeColumnWidthsForColumns(current, columns));
     knownColumnIds.current = new Set(ids);
   }, [columns, columnState]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     for (const id of columnIds) {
       tableRef.current?.style.removeProperty(columnResizeCssVar(id));
     }
@@ -8794,6 +8858,7 @@ function MatrxDataTableCore({
     () => projectColumnDragOrder(effectiveColumnOrder, columnDragPreview),
     [columnDragPreview, effectiveColumnOrder]
   );
+  useColumnReorderAnimation(tableRef, previewColumnOrder.join("\0"), columnDragPreview !== null);
   const visibleColumns = useMemo7(() => {
     const byId = new Map(columns.map((column) => [columnId(column), column]));
     return previewColumnOrder.map((id) => byId.get(id)).filter(
@@ -8801,14 +8866,14 @@ function MatrxDataTableCore({
     );
   }, [columns, effectiveHiddenColumnIds, previewColumnOrder]);
   const usesMeasuredFixedLayout = visibleColumns.length > 0 && visibleColumns.every((column) => effectiveColumnWidths[columnId(column)] !== void 0);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!usesMeasuredFixedLayout) {
       if (fixedTableGeometry !== null) setFixedTableGeometry(null);
       return;
     }
     if (fixedTableGeometry === null) setFixedTableGeometry(measureFixedTableGeometry());
   }, [fixedTableGeometry, measureFixedTableGeometry, usesMeasuredFixedLayout]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!usesMeasuredFixedLayout) return;
     const table = tableRef.current;
     if (!table) return;
@@ -8949,7 +9014,7 @@ function MatrxDataTableCore({
     intelligentSearchEnabled,
     searchScope
   ]);
-  const lastNotifiedViewRows = useRef10(null);
+  const lastNotifiedViewRows = useRef11(null);
   useEffect13(() => {
     if (!onViewChange) {
       lastNotifiedViewRows.current = null;
@@ -9363,7 +9428,7 @@ function MatrxDataTableCore({
     () => data.filter((row) => selectedIdSet.has(getRowId(row))),
     [data, selectedIdSet, getRowId]
   );
-  const lastToggledIndex = useRef10(null);
+  const lastToggledIndex = useRef11(null);
   const setSelectedIds = (next) => selection?.onSelectedIdsChange([...next]);
   const toggleRowSelected = (index, shiftKey) => {
     if (!selection) return;
@@ -10367,6 +10432,7 @@ function MatrxDataTableCore({
                                           return /* @__PURE__ */ jsx39(
                                             "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",