@ai-matrx/design-system 0.16.0 → 0.17.1

package/dist/data-table/index.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { b as MatrxDataTableProps } from '../types-XXbVB1sh.cjs';
-export { A as AnyOfColumnSearch, c as CellEditType, d as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, g as MatrxDataTableDetailConfig, h as MatrxDataTableEditConfig, i as MatrxDataTableEmptyState, j as MatrxDataTableFilterUi, k as MatrxDataTableHierarchyConfig, l as MatrxDataTableHierarchyMove, m as MatrxDataTableMobileCardControls, n as MatrxDataTableQueryControl, o as MatrxDataTableQueryState, p as MatrxDataTableRecordControls, q as MatrxDataTableSelectionConfig, r as MatrxDataTableSourceProcessing, s as MatrxDataTableToolbar, t as MatrxDataTableUrlStateConfig, u as MatrxDataTableWindowConfig, v as MatrxTablePagination, w as SortDirection, S as SortState, T as TableSearchMatchMode, x as TextFilterMode, y as ToolbarFacet } from '../types-XXbVB1sh.cjs';
+import { b as MatrxDataTableProps } from '../types-4fmLG5AN.cjs';
+export { A as AnyOfColumnSearch, c as CellEditType, d as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, g as MatrxDataTableDetailConfig, h as MatrxDataTableEditConfig, i as MatrxDataTableEmptyState, j as MatrxDataTableFilterUi, k as MatrxDataTableHierarchyConfig, l as MatrxDataTableHierarchyMove, m as MatrxDataTableMobileCardControls, n as MatrxDataTableQueryControl, o as MatrxDataTableQueryState, p as MatrxDataTableRecordControls, q as MatrxDataTableSelectionConfig, r as MatrxDataTableSourceProcessing, s as MatrxDataTableToolbar, t as MatrxDataTableUrlStateConfig, u as MatrxDataTableWindowConfig, v as MatrxTablePagination, w as SortDirection, S as SortState, T as TableSearchMatchMode, x as TextFilterMode, y as ToolbarFacet } from '../types-4fmLG5AN.cjs';
 export { MatrxDataTableHost, MatrxDataTableProvider, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableWindowPanelProps, useMatrxDataTableHost } from './host.cjs';
 export { DataRowInspector } from './data-row-inspector.cjs';
 export { DataRowWindow, DataRowWindowProps, DataRowWindowTab } from './data-row-window.cjs';

package/dist/data-table/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { b as MatrxDataTableProps } from '../types-ClaxTaXq.js';
-export { A as AnyOfColumnSearch, c as CellEditType, d as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, g as MatrxDataTableDetailConfig, h as MatrxDataTableEditConfig, i as MatrxDataTableEmptyState, j as MatrxDataTableFilterUi, k as MatrxDataTableHierarchyConfig, l as MatrxDataTableHierarchyMove, m as MatrxDataTableMobileCardControls, n as MatrxDataTableQueryControl, o as MatrxDataTableQueryState, p as MatrxDataTableRecordControls, q as MatrxDataTableSelectionConfig, r as MatrxDataTableSourceProcessing, s as MatrxDataTableToolbar, t as MatrxDataTableUrlStateConfig, u as MatrxDataTableWindowConfig, v as MatrxTablePagination, w as SortDirection, S as SortState, T as TableSearchMatchMode, x as TextFilterMode, y as ToolbarFacet } from '../types-ClaxTaXq.js';
+import { b as MatrxDataTableProps } from '../types-pZ95iFk5.js';
+export { A as AnyOfColumnSearch, c as CellEditType, d as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, g as MatrxDataTableDetailConfig, h as MatrxDataTableEditConfig, i as MatrxDataTableEmptyState, j as MatrxDataTableFilterUi, k as MatrxDataTableHierarchyConfig, l as MatrxDataTableHierarchyMove, m as MatrxDataTableMobileCardControls, n as MatrxDataTableQueryControl, o as MatrxDataTableQueryState, p as MatrxDataTableRecordControls, q as MatrxDataTableSelectionConfig, r as MatrxDataTableSourceProcessing, s as MatrxDataTableToolbar, t as MatrxDataTableUrlStateConfig, u as MatrxDataTableWindowConfig, v as MatrxTablePagination, w as SortDirection, S as SortState, T as TableSearchMatchMode, x as TextFilterMode, y as ToolbarFacet } from '../types-pZ95iFk5.js';
 export { MatrxDataTableHost, MatrxDataTableProvider, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableWindowPanelProps, useMatrxDataTableHost } from './host.js';
 export { DataRowInspector } from './data-row-inspector.js';
 export { DataRowWindow, DataRowWindowProps, DataRowWindowTab } from './data-row-window.js';

package/dist/data-table/index.js

@@ -425,9 +425,9 @@ import {
   MeasuringStrategy,
   PointerSensor,
   pointerWithin,
-  useDndMonitor,
-  useDraggable,
-  useDroppable,
+  useDndMonitor as useDndMonitor2,
+  useDraggable as useDraggable2,
+  useDroppable as useDroppable2,
   useSensor,
   useSensors
 } from "@dnd-kit/core";
@@ -1167,6 +1167,7 @@ function useScrollPagination({
   const inFlightGenerationRef = useRef(null);
   const requestErrorRef = useRef(null);
   const mountedRef = useRef(false);
+  const observedTopRef = useRef(/* @__PURE__ */ new WeakMap());
   const effectiveError = error ?? requestError;
   useEffect(() => {
     mountedRef.current = true;
@@ -1200,6 +1201,7 @@ function useScrollPagination({
   };
   useEffect(() => {
     intentRef.current = null;
+    observedTopRef.current = /* @__PURE__ */ new WeakMap();
     consumedSequenceRef.current = inputSequenceRef.current;
     requestErrorRef.current = null;
     setRequestError(null);
@@ -1209,14 +1211,18 @@ function useScrollPagination({
   useEffect(() => {
     if (mode !== "scroll" || !enabled || typeof window === "undefined") return;
     const attachable = containers.map(resolveContainer).filter((container) => container !== null);
-    const setIntent = (container) => {
+    const setIntent = (container, startTop) => {
       const current = latestRef.current;
       if (!isVisibleContainer(container) || current.loading || current.isFetchingNextPage || inFlightGenerationRef.current !== null) return;
       inputSequenceRef.current += 1;
       intentRef.current = {
         queryKey: latestRef.current.queryKey,
         container,
-        startTop: container.scrollTop,
+        // The compositor can advance downward before the passive input
+        // listener, while DOM/test callers can move upward before its scroll
+        // notification. Either way, the lower position is the only safe
+        // baseline for proving that this downward intent caused movement.
+        startTop: Math.min(startTop, container.scrollTop),
         sequence: inputSequenceRef.current,
         expiresAt: Date.now() + intentTimeoutMs
       };
@@ -1231,9 +1237,11 @@ function useScrollPagination({
       void requestNextPage();
     };
     const cleanups = attachable.map((container) => {
+      if (!observedTopRef.current.has(container)) observedTopRef.current.set(container, container.scrollTop);
+      const lastObservedTop = () => observedTopRef.current.get(container) ?? container.scrollTop;
       const onWheel = (event) => {
         if (event.deltaY > 0 && Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
-          setIntent(container);
+          setIntent(container, lastObservedTop());
         }
       };
       const onTouchStart = (event) => {
@@ -1244,19 +1252,22 @@ function useScrollPagination({
         const touch = event.touches.item(0);
         const startY = Number(container.dataset.matrxPaginationTouchY);
         if (touch && Number.isFinite(startY) && startY - touch.clientY > 0) {
-          setIntent(container);
+          setIntent(container, lastObservedTop());
         }
       };
       const onTouchEnd = () => {
         delete container.dataset.matrxPaginationTouchY;
       };
       const onKeyDown = (event) => {
-        if (isDownwardKeyboardInput(event)) setIntent(container);
+        if (isDownwardKeyboardInput(event)) setIntent(container, lastObservedTop());
       };
       const onPointerDown = (event) => {
-        if (isNativeScrollbarPointer(event, container)) setIntent(container);
+        if (isNativeScrollbarPointer(event, container)) setIntent(container, lastObservedTop());
+      };
+      const onScroll = () => {
+        handleScroll(container);
+        observedTopRef.current.set(container, container.scrollTop);
       };
-      const onScroll = () => handleScroll(container);
       container.addEventListener("wheel", onWheel, { passive: true });
       container.addEventListener("touchstart", onTouchStart, { passive: true });
       container.addEventListener("touchmove", onTouchMove, { passive: true });
@@ -3393,6 +3404,7 @@ function parseOptionalNumber(raw) {
 
 // src/data-table/ColumnManager.tsx
 import { useEffect as useEffect6, useMemo as useMemo3, useState as useState9 } from "react";
+import { useDndMonitor, useDraggable, useDroppable } from "@dnd-kit/core";
 init_filter_engine();
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function ColumnManager({
@@ -3409,6 +3421,8 @@ function ColumnManager({
   );
   const [draftOrder, setDraftOrder] = useState9(order);
   const [draftHidden, setDraftHidden] = useState9(() => new Set(hidden));
+  const [draggedColumnId, setDraggedColumnId] = useState9(null);
+  const [dropTarget, setDropTarget] = useState9(null);
   useEffect6(() => {
     if (!open) return;
     setDraftOrder(order);
@@ -3427,6 +3441,45 @@ function ColumnManager({
       return next;
     });
   };
+  const moveTo = (id, targetId) => {
+    if (id === targetId) return;
+    setDraftOrder((current) => {
+      const from = current.indexOf(id);
+      const target = current.indexOf(targetId);
+      if (from < 0 || target < 0) return current;
+      const next = [...current];
+      next.splice(from, 1);
+      const targetAfterRemoval = next.indexOf(targetId);
+      next.splice(targetAfterRemoval, 0, id);
+      return next;
+    });
+  };
+  useDndMonitor({
+    onDragStart(event) {
+      if (event.active.data.current?.matrxDragKind !== "column-manager") return;
+      setDraggedColumnId(String(event.active.data.current.columnId));
+    },
+    onDragOver(event) {
+      if (event.active.data.current?.matrxDragKind !== "column-manager") return;
+      const overData = event.over?.data.current;
+      const target = overData?.matrxDragKind === "column-manager" ? overData.columnId : null;
+      setDropTarget(target ? String(target) : null);
+    },
+    onDragCancel(event) {
+      if (event.active.data.current?.matrxDragKind !== "column-manager") return;
+      setDraggedColumnId(null);
+      setDropTarget(null);
+    },
+    onDragEnd(event) {
+      if (event.active.data.current?.matrxDragKind !== "column-manager") return;
+      const dragged = String(event.active.data.current.columnId);
+      const overData = event.over?.data.current;
+      const target = overData?.matrxDragKind === "column-manager" ? overData.columnId : null;
+      setDraggedColumnId(null);
+      setDropTarget(null);
+      if (target) moveTo(dragged, String(target));
+    }
+  });
   return /* @__PURE__ */ jsx23(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs16(DialogContent, { className: "max-w-md", children: [
     /* @__PURE__ */ jsxs16(DialogHeader, { children: [
       /* @__PURE__ */ jsx23(DialogTitle, { children: "Columns" }),
@@ -3439,14 +3492,16 @@ function ColumnManager({
       const hideable = column.hideable !== false;
       const visible = !draftHidden.has(id);
       return /* @__PURE__ */ jsxs16(
-        "div",
+        ColumnManagerDropTarget,
         {
+          id,
           className: cn(
             "flex items-center gap-2 px-2 py-2",
-            !visible && "bg-muted/30 text-muted-foreground"
+            !visible && "bg-muted/30 text-muted-foreground",
+            dropTarget === id && draggedColumnId !== id && "border-t-2 border-primary"
           ),
           children: [
-            /* @__PURE__ */ jsx23(GripVertical, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx23(ColumnManagerDragHandle, { id, label }),
             /* @__PURE__ */ jsx23(
               Checkbox,
               {
@@ -3512,6 +3567,36 @@ function ColumnManager({
     ] })
   ] }) });
 }
+function ColumnManagerDropTarget({
+  id,
+  className,
+  children
+}) {
+  const { setNodeRef } = useDroppable({
+    id: `matrx-column-manager:${id}`,
+    data: { matrxDragKind: "column-manager", columnId: id }
+  });
+  return /* @__PURE__ */ jsx23("div", { ref: setNodeRef, "data-matrx-column-manager-drop-target": id, className, children });
+}
+function ColumnManagerDragHandle({ id, label }) {
+  const { attributes, listeners, setNodeRef } = useDraggable({
+    id: `matrx-column-manager:${id}`,
+    data: { matrxDragKind: "column-manager", columnId: id }
+  });
+  return /* @__PURE__ */ jsx23(
+    "button",
+    {
+      ref: setNodeRef,
+      type: "button",
+      className: "flex h-10 w-10 shrink-0 touch-none cursor-grab items-center justify-center text-muted-foreground hover:text-foreground active:cursor-grabbing",
+      "aria-label": `Reorder ${label}`,
+      title: `Drag to reorder ${label}`,
+      ...attributes,
+      ...listeners,
+      children: /* @__PURE__ */ jsx23(GripVertical, { className: "h-4 w-4" })
+    }
+  );
+}
 
 // src/data-table/MatrxUuidCell.tsx
 import {
@@ -4985,6 +5070,9 @@ function safeQueryPage(requestedPage, totalItems, pageSize) {
 
 // src/data-table/MatrxDataTable.tsx
 import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+function hasSameRowReferences(previous, next) {
+  return previous.length === next.length && previous.every((row, index) => row === next[index]);
+}
 function TableRowCopyControl({
   copy,
   row,
@@ -5102,6 +5190,9 @@ function MatrxDataTableWithUrlState({
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
+  columnState,
+  reorderableColumns = false,
+  columnManager: controlledColumnManager,
   getRowId,
   searchText,
   processLocalRows,
@@ -5405,13 +5496,67 @@ function MatrxDataTableCore({
       observer?.disconnect();
     };
   }, [updateScrollHint, data, columns]);
-  const [columnOrder, setColumnOrder] = useState14(() => columns.map(columnId));
+  const [columnOrder, setColumnOrder] = useState14(() => columnState?.order ?? columns.map(columnId));
   const [hiddenColumnIds, setHiddenColumnIds] = useState14(
-    () => new Set(columns.filter((column) => column.hidden).map(columnId))
+    () => new Set(columnState?.hidden ?? columns.filter((column) => column.hidden).map(columnId))
   );
-  const [columnManagerOpen, setColumnManagerOpen] = useState14(false);
+  const draggedColumnId = useRef4(null);
+  const columnDragActive = useRef4(false);
+  const columnDragRaf = useRef4(null);
+  const columnDragScrollDirection = useRef4(0);
+  const [columnDropTarget, setColumnDropTarget] = useState14(null);
+  const stopColumnDragScroll = useCallback3(() => {
+    if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
+    columnDragRaf.current = null;
+    columnDragScrollDirection.current = 0;
+  }, []);
+  useEffect9(() => () => {
+    columnDragActive.current = false;
+    stopColumnDragScroll();
+  }, [stopColumnDragScroll]);
+  const startColumnDragScroll = useCallback3(() => {
+    if (!columnDragActive.current || columnDragRaf.current !== null) return;
+    const scrollStep = () => {
+      const scroll = scrollRef.current;
+      const direction = columnDragScrollDirection.current;
+      if (!columnDragActive.current || !scroll || direction === 0) {
+        columnDragRaf.current = null;
+        return;
+      }
+      const nextScrollLeft = Math.max(
+        0,
+        Math.min(scroll.scrollLeft + direction * 18, scroll.scrollWidth - scroll.clientWidth)
+      );
+      if (nextScrollLeft === scroll.scrollLeft) {
+        columnDragRaf.current = null;
+        columnDragScrollDirection.current = 0;
+        return;
+      }
+      scroll.scrollLeft = nextScrollLeft;
+      if (!columnDragActive.current || columnDragScrollDirection.current === 0) {
+        columnDragRaf.current = null;
+        return;
+      }
+      columnDragRaf.current = requestAnimationFrame(scrollStep);
+    };
+    columnDragRaf.current = requestAnimationFrame(scrollStep);
+  }, []);
+  const commitColumnState = useCallback3((order, hidden) => {
+    if (columnState) columnState.onChange({ order, hidden: [...hidden] });
+    else {
+      setColumnOrder(order);
+      setHiddenColumnIds(hidden);
+    }
+  }, [columnState]);
+  const [internalColumnManagerOpen, setInternalColumnManagerOpen] = useState14(false);
+  const columnManagerOpen = controlledColumnManager?.open ?? internalColumnManagerOpen;
+  const setColumnManagerOpen = controlledColumnManager?.onOpenChange ?? setInternalColumnManagerOpen;
+  const columnIds = useMemo4(() => columns.map(columnId), [columns]);
+  const effectiveColumnOrder = useMemo4(() => 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 = useMemo4(() => columnState ? new Set(columnState.hidden.filter((id) => columnIds.includes(id))) : hiddenColumnIds, [columnIds, columnState, hiddenColumnIds]);
   useEffect9(() => {
     const ids = columns.map(columnId);
+    if (columnState) return;
     setColumnOrder((current) => [
       ...current.filter((id) => ids.includes(id)),
       ...ids.filter((id) => !current.includes(id))
@@ -5423,13 +5568,13 @@ function MatrxDataTableCore({
       }
       return next;
     });
-  }, [columns]);
+  }, [columns, columnState]);
   const visibleColumns = useMemo4(() => {
     const byId = new Map(columns.map((column) => [columnId(column), column]));
-    return columnOrder.map((id) => byId.get(id)).filter(
-      (column) => column !== void 0 && !hiddenColumnIds.has(columnId(column))
+    return effectiveColumnOrder.map((id) => byId.get(id)).filter(
+      (column) => column !== void 0 && !effectiveHiddenColumnIds.has(columnId(column))
     );
-  }, [columns, columnOrder, hiddenColumnIds]);
+  }, [columns, effectiveColumnOrder, effectiveHiddenColumnIds]);
   const copySubsetVariant = useCopySubsetVariant();
   const copySubsetColumns = () => visibleColumns.filter((c) => c.filter !== false || c.accessorKey || c.accessorFn).map((c) => ({
     id: columnId(c),
@@ -5503,8 +5648,15 @@ function MatrxDataTableCore({
     sourceOwnsColumnFilters,
     sourceOwnsSort
   ]);
+  const lastNotifiedViewRows = useRef4(null);
   useEffect9(() => {
-    onViewChange?.(processed);
+    if (!onViewChange) {
+      lastNotifiedViewRows.current = null;
+      return;
+    }
+    const changed = lastNotifiedViewRows.current === null || !hasSameRowReferences(lastNotifiedViewRows.current, processed);
+    lastNotifiedViewRows.current = processed;
+    if (changed) onViewChange(processed);
   }, [processed, onViewChange]);
   useEffect9(() => {
     if (controlledQuery) return;
@@ -5940,10 +6092,71 @@ function MatrxDataTableCore({
       collisionDetection: pointerWithin,
       measuring: { droppable: { strategy: MeasuringStrategy.Always } },
       onDragStart: (event) => {
+        const kind = event.active.data.current?.matrxDragKind;
+        if (kind === "column-header") {
+          draggedColumnId.current = String(event.active.data.current?.columnId);
+          columnDragActive.current = true;
+          return;
+        }
+        if (kind === "column-manager") return;
         setDraggedRowId(String(event.active.id));
       },
-      onDragCancel: () => setDraggedRowId(null),
-      onDragEnd: endHierarchyDrag,
+      onDragMove: (event) => {
+        if (!columnDragActive.current || event.active.data.current?.matrxDragKind !== "column-header") return;
+        const overData = event.over?.data.current;
+        const overId = overData?.matrxDragKind === "column-header" ? overData.columnId : null;
+        const activeRect = event.active.rect.current.translated;
+        const overRect = event.over?.rect;
+        if (!overId || !activeRect || !overRect) {
+          setColumnDropTarget(null);
+          columnDragScrollDirection.current = 0;
+          stopColumnDragScroll();
+          return;
+        }
+        const after = activeRect.left + activeRect.width / 2 >= overRect.left + overRect.width / 2;
+        setColumnDropTarget({ id: String(overId), after });
+        const scroll = scrollRef.current;
+        if (!scroll) return;
+        const bounds = scroll.getBoundingClientRect();
+        const center = activeRect.left + activeRect.width / 2;
+        columnDragScrollDirection.current = center - bounds.left < 80 ? -1 : bounds.right - center < 80 ? 1 : 0;
+        if (columnDragScrollDirection.current === 0) stopColumnDragScroll();
+        else startColumnDragScroll();
+      },
+      onDragCancel: () => {
+        columnDragActive.current = false;
+        draggedColumnId.current = null;
+        setColumnDropTarget(null);
+        stopColumnDragScroll();
+        setDraggedRowId(null);
+      },
+      onDragEnd: (event) => {
+        const kind = event.active.data.current?.matrxDragKind;
+        if (kind === "column-manager") return;
+        if (kind !== "column-header") {
+          endHierarchyDrag(event);
+          return;
+        }
+        const from = String(event.active.data.current?.columnId);
+        const targetData = event.over?.data.current;
+        const target = targetData?.matrxDragKind === "column-header" ? targetData.columnId : null;
+        const activeRect = event.active.rect.current.translated;
+        const overRect = event.over?.rect;
+        columnDragActive.current = false;
+        draggedColumnId.current = null;
+        setColumnDropTarget(null);
+        stopColumnDragScroll();
+        if (!target || from === target || !activeRect || !overRect) return;
+        const order = [...effectiveColumnOrder];
+        const fromIndex = order.indexOf(from);
+        const targetIndex = order.indexOf(String(target));
+        if (fromIndex < 0 || targetIndex < 0) return;
+        order.splice(fromIndex, 1);
+        const after = activeRect.left + activeRect.width / 2 >= overRect.left + overRect.width / 2;
+        const insertion = order.indexOf(String(target)) + (after ? 1 : 0);
+        order.splice(insertion, 0, from);
+        commitColumnState(order, effectiveHiddenColumnIds);
+      },
       children: [
         /* @__PURE__ */ jsxs24(
           "div",
@@ -6165,8 +6378,8 @@ function MatrxDataTableCore({
                               onClick: () => setColumnManagerOpen(true),
                               children: [
                                 /* @__PURE__ */ jsx32(SlidersHorizontal, { className: "h-4 w-4" }),
-                                hiddenColumnIds.size > 0 ? /* @__PURE__ */ jsxs24("span", { className: "sr-only", children: [
-                                  hiddenColumnIds.size,
+                                effectiveHiddenColumnIds.size > 0 ? /* @__PURE__ */ jsxs24("span", { className: "sr-only", children: [
+                                  effectiveHiddenColumnIds.size,
                                   " hidden"
                                 ] }) : null
                               ]
@@ -6420,46 +6633,50 @@ function MatrxDataTableCore({
                                     // horizontal-scroll surface.
                                     col.width !== void 0 && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
                                     col.headerClassName,
+                                    columnDropTarget?.id === id && (columnDropTarget.after ? "border-r-2 border-primary" : "border-l-2 border-primary"),
                                     col.align === "center" && "text-center",
                                     col.align === "right" && "text-right"
                                   ),
                                   style: columnWidthVar(col.width),
-                                  children: /* @__PURE__ */ jsx32(
-                                    ColumnHeaderCell,
-                                    {
-                                      label: col.header,
-                                      labelText: headerLabel,
-                                      sortable: col.sortable !== false,
-                                      isSorted: Boolean(isSorted),
-                                      sortDirection: sort?.direction ?? defaultSortDirection,
-                                      onSortAsc: () => setSort({ id, direction: "asc" }),
-                                      onSortDesc: () => setSort({ id, direction: "desc" }),
-                                      onClearSort: () => setSort(null),
-                                      onHeaderSortClick: () => {
-                                        if (!isSorted) {
-                                          setSort({ id, direction: defaultSortDirection });
-                                          return;
-                                        }
-                                        if (sort?.direction === "asc") {
-                                          setSort({ id, direction: "desc" });
-                                          return;
-                                        }
-                                        setSort(null);
-                                      },
-                                      filterKind: meta?.kind ?? null,
-                                      filterValue: columnFilters[id],
-                                      onFilterChange: (next) => setColumnFilter(id, next),
-                                      selectOptions: meta?.options,
-                                      selectSingle: col.filterSingle,
-                                      filterApplyLabel: filterUi?.applyLabel,
-                                      filterShowCancel: filterUi?.showCancel,
-                                      filterFooterHint: filterUi?.footerHint,
-                                      allowNegation: filterUi?.allowNegation,
-                                      allowNullModes: filterUi?.allowNullModes,
-                                      align: col.align,
-                                      compact: col.compact
-                                    }
-                                  )
+                                  children: /* @__PURE__ */ jsxs24(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: [
+                                    reorderableColumns ? /* @__PURE__ */ jsx32(ColumnReorderHandle, { id, label: headerLabel }) : null,
+                                    /* @__PURE__ */ jsx32(
+                                      ColumnHeaderCell,
+                                      {
+                                        label: col.header,
+                                        labelText: headerLabel,
+                                        sortable: col.sortable !== false,
+                                        isSorted: Boolean(isSorted),
+                                        sortDirection: sort?.direction ?? defaultSortDirection,
+                                        onSortAsc: () => setSort({ id, direction: "asc" }),
+                                        onSortDesc: () => setSort({ id, direction: "desc" }),
+                                        onClearSort: () => setSort(null),
+                                        onHeaderSortClick: () => {
+                                          if (!isSorted) {
+                                            setSort({ id, direction: defaultSortDirection });
+                                            return;
+                                          }
+                                          if (sort?.direction === "asc") {
+                                            setSort({ id, direction: "desc" });
+                                            return;
+                                          }
+                                          setSort(null);
+                                        },
+                                        filterKind: meta?.kind ?? null,
+                                        filterValue: columnFilters[id],
+                                        onFilterChange: (next) => setColumnFilter(id, next),
+                                        selectOptions: meta?.options,
+                                        selectSingle: col.filterSingle,
+                                        filterApplyLabel: filterUi?.applyLabel,
+                                        filterShowCancel: filterUi?.showCancel,
+                                        filterFooterHint: filterUi?.footerHint,
+                                        allowNegation: filterUi?.allowNegation,
+                                        allowNullModes: filterUi?.allowNullModes,
+                                        align: col.align,
+                                        compact: col.compact
+                                      }
+                                    )
+                                  ] })
                                 },
                                 id
                               );
@@ -6758,12 +6975,9 @@ function MatrxDataTableCore({
                   open: columnManagerOpen,
                   onOpenChange: setColumnManagerOpen,
                   columns,
-                  order: columnOrder,
-                  hidden: hiddenColumnIds,
-                  onApply: (order, hidden) => {
-                    setColumnOrder(order);
-                    setHiddenColumnIds(hidden);
-                  }
+                  order: effectiveColumnOrder,
+                  hidden: effectiveHiddenColumnIds,
+                  onApply: commitColumnState
                 }
               ),
               detailEnabled && selectedRow ? /* @__PURE__ */ jsx32(
@@ -6977,7 +7191,7 @@ function HierarchyDragHandle({
   label,
   disabled
 }) {
-  const { attributes, listeners, setNodeRef } = useDraggable({
+  const { attributes, listeners, setNodeRef } = useDraggable2({
     id,
     disabled
   });
@@ -7001,7 +7215,7 @@ function HierarchyRootDropTarget({
   label,
   draggedLabel
 }) {
-  const { isOver, setNodeRef } = useDroppable({ id: "__root__" });
+  const { isOver, setNodeRef } = useDroppable2({ id: "__root__" });
   return /* @__PURE__ */ jsxs24(
     "div",
     {
@@ -7025,7 +7239,7 @@ function HierarchyDragIndicatorLayer({
   const [indicator, setIndicator] = useState14(
     null
   );
-  useDndMonitor({
+  useDndMonitor2({
     onDragMove(event) {
       const container = scrollRef.current;
       const overId = event.over ? String(event.over.id) : null;
@@ -7125,7 +7339,7 @@ function HierarchyDroppableRow({
   disabled,
   children
 }) {
-  const { setNodeRef } = useDroppable({ id, disabled });
+  const { setNodeRef } = useDroppable2({ id, disabled });
   if (!isValidElement(children) || children.type !== "tr") return children;
   const row = children;
   return cloneElement(row, {
@@ -7133,6 +7347,38 @@ function HierarchyDroppableRow({
     className: row.props.className
   });
 }
+function ColumnHeaderDropZone({
+  id,
+  enabled,
+  children
+}) {
+  const { setNodeRef } = useDroppable2({
+    id: `matrx-column-header:${id}`,
+    disabled: !enabled,
+    data: { matrxDragKind: "column-header", columnId: id }
+  });
+  return /* @__PURE__ */ jsx32("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
+}
+function ColumnReorderHandle({ id, label }) {
+  const { attributes, listeners, setNodeRef } = useDraggable2({
+    id: `matrx-column-header:${id}`,
+    data: { matrxDragKind: "column-header", columnId: id }
+  });
+  return /* @__PURE__ */ jsx32(
+    "button",
+    {
+      ref: setNodeRef,
+      type: "button",
+      className: "mr-1 flex h-7 w-5 shrink-0 touch-none cursor-grab items-center justify-center text-muted-foreground hover:text-foreground active:cursor-grabbing",
+      "aria-label": `Reorder ${label}`,
+      title: `Drag to reorder ${label}`,
+      onClick: (event) => event.stopPropagation(),
+      ...attributes,
+      ...listeners,
+      children: /* @__PURE__ */ jsx32(GripVertical, { className: "h-3.5 w-3.5" })
+    }
+  );
+}
 function columnWidthVar(width) {
   if (width === void 0) return void 0;
   return {