@ai-matrx/design-system 0.16.0 → 0.17.1

package/dist/data-table/index.cjs

@@ -460,7 +460,7 @@ module.exports = __toCommonJS(data_table_exports);
 
 // src/data-table/MatrxDataTable.tsx
 var import_react14 = require("react");
-var import_core = require("@dnd-kit/core");
+var import_core2 = require("@dnd-kit/core");
 
 // src/data-table/icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1197,6 +1197,7 @@ function useScrollPagination({
   const inFlightGenerationRef = (0, import_react.useRef)(null);
   const requestErrorRef = (0, import_react.useRef)(null);
   const mountedRef = (0, import_react.useRef)(false);
+  const observedTopRef = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
   const effectiveError = error ?? requestError;
   (0, import_react.useEffect)(() => {
     mountedRef.current = true;
@@ -1230,6 +1231,7 @@ function useScrollPagination({
   };
   (0, import_react.useEffect)(() => {
     intentRef.current = null;
+    observedTopRef.current = /* @__PURE__ */ new WeakMap();
     consumedSequenceRef.current = inputSequenceRef.current;
     requestErrorRef.current = null;
     setRequestError(null);
@@ -1239,14 +1241,18 @@ function useScrollPagination({
   (0, import_react.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
       };
@@ -1261,9 +1267,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) => {
@@ -1274,19 +1282,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 });
@@ -3416,6 +3427,7 @@ function parseOptionalNumber(raw) {
 
 // src/data-table/ColumnManager.tsx
 var import_react9 = require("react");
+var import_core = require("@dnd-kit/core");
 init_filter_engine();
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function ColumnManager({
@@ -3432,6 +3444,8 @@ function ColumnManager({
   );
   const [draftOrder, setDraftOrder] = (0, import_react9.useState)(order);
   const [draftHidden, setDraftHidden] = (0, import_react9.useState)(() => new Set(hidden));
+  const [draggedColumnId, setDraggedColumnId] = (0, import_react9.useState)(null);
+  const [dropTarget, setDropTarget] = (0, import_react9.useState)(null);
   (0, import_react9.useEffect)(() => {
     if (!open) return;
     setDraftOrder(order);
@@ -3450,6 +3464,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;
+    });
+  };
+  (0, import_core.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__ */ (0, import_jsx_runtime23.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DialogContent, { className: "max-w-md", children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DialogHeader, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogTitle, { children: "Columns" }),
@@ -3462,14 +3515,16 @@ function ColumnManager({
       const hideable = column.hideable !== false;
       const visible = !draftHidden.has(id);
       return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-        "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__ */ (0, import_jsx_runtime23.jsx)(GripVertical, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ColumnManagerDragHandle, { id, label }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               Checkbox,
               {
@@ -3535,6 +3590,36 @@ function ColumnManager({
     ] })
   ] }) });
 }
+function ColumnManagerDropTarget({
+  id,
+  className,
+  children
+}) {
+  const { setNodeRef } = (0, import_core.useDroppable)({
+    id: `matrx-column-manager:${id}`,
+    data: { matrxDragKind: "column-manager", columnId: id }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref: setNodeRef, "data-matrx-column-manager-drop-target": id, className, children });
+}
+function ColumnManagerDragHandle({ id, label }) {
+  const { attributes, listeners, setNodeRef } = (0, import_core.useDraggable)({
+    id: `matrx-column-manager:${id}`,
+    data: { matrxDragKind: "column-manager", columnId: id }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "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__ */ (0, import_jsx_runtime23.jsx)(GripVertical, { className: "h-4 w-4" })
+    }
+  );
+}
 
 // src/data-table/MatrxUuidCell.tsx
 var import_react10 = require("react");
@@ -5004,6 +5089,9 @@ function safeQueryPage(requestedPage, totalItems, pageSize) {
 
 // src/data-table/MatrxDataTable.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
+function hasSameRowReferences(previous, next) {
+  return previous.length === next.length && previous.every((row, index) => row === next[index]);
+}
 function TableRowCopyControl({
   copy,
   row,
@@ -5121,6 +5209,9 @@ function MatrxDataTableWithUrlState({
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
+  columnState,
+  reorderableColumns = false,
+  columnManager: controlledColumnManager,
   getRowId,
   searchText,
   processLocalRows,
@@ -5186,8 +5277,8 @@ function MatrxDataTableCore({
   );
   const [internalSearch, setInternalSearch] = (0, import_react14.useState)("");
   const [draggedRowId, setDraggedRowId] = (0, import_react14.useState)(null);
-  const hierarchySensors = (0, import_core.useSensors)(
-    (0, import_core.useSensor)(import_core.PointerSensor, { activationConstraint: { distance: 6 } })
+  const hierarchySensors = (0, import_core2.useSensors)(
+    (0, import_core2.useSensor)(import_core2.PointerSensor, { activationConstraint: { distance: 6 } })
   );
   const toolbarSearchControlled = toolbar?.searchValue !== void 0;
   const searchValue = controlledQuery ? controlledQuery.state.search : toolbarSearchControlled ? toolbar?.searchValue ?? "" : internalSearch;
@@ -5424,13 +5515,67 @@ function MatrxDataTableCore({
       observer?.disconnect();
     };
   }, [updateScrollHint, data, columns]);
-  const [columnOrder, setColumnOrder] = (0, import_react14.useState)(() => columns.map(columnId));
+  const [columnOrder, setColumnOrder] = (0, import_react14.useState)(() => columnState?.order ?? columns.map(columnId));
   const [hiddenColumnIds, setHiddenColumnIds] = (0, import_react14.useState)(
-    () => new Set(columns.filter((column) => column.hidden).map(columnId))
+    () => new Set(columnState?.hidden ?? columns.filter((column) => column.hidden).map(columnId))
   );
-  const [columnManagerOpen, setColumnManagerOpen] = (0, import_react14.useState)(false);
+  const draggedColumnId = (0, import_react14.useRef)(null);
+  const columnDragActive = (0, import_react14.useRef)(false);
+  const columnDragRaf = (0, import_react14.useRef)(null);
+  const columnDragScrollDirection = (0, import_react14.useRef)(0);
+  const [columnDropTarget, setColumnDropTarget] = (0, import_react14.useState)(null);
+  const stopColumnDragScroll = (0, import_react14.useCallback)(() => {
+    if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
+    columnDragRaf.current = null;
+    columnDragScrollDirection.current = 0;
+  }, []);
+  (0, import_react14.useEffect)(() => () => {
+    columnDragActive.current = false;
+    stopColumnDragScroll();
+  }, [stopColumnDragScroll]);
+  const startColumnDragScroll = (0, import_react14.useCallback)(() => {
+    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 = (0, import_react14.useCallback)((order, hidden) => {
+    if (columnState) columnState.onChange({ order, hidden: [...hidden] });
+    else {
+      setColumnOrder(order);
+      setHiddenColumnIds(hidden);
+    }
+  }, [columnState]);
+  const [internalColumnManagerOpen, setInternalColumnManagerOpen] = (0, import_react14.useState)(false);
+  const columnManagerOpen = controlledColumnManager?.open ?? internalColumnManagerOpen;
+  const setColumnManagerOpen = controlledColumnManager?.onOpenChange ?? setInternalColumnManagerOpen;
+  const columnIds = (0, import_react14.useMemo)(() => columns.map(columnId), [columns]);
+  const effectiveColumnOrder = (0, import_react14.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_react14.useMemo)(() => columnState ? new Set(columnState.hidden.filter((id) => columnIds.includes(id))) : hiddenColumnIds, [columnIds, columnState, hiddenColumnIds]);
   (0, import_react14.useEffect)(() => {
     const ids = columns.map(columnId);
+    if (columnState) return;
     setColumnOrder((current) => [
       ...current.filter((id) => ids.includes(id)),
       ...ids.filter((id) => !current.includes(id))
@@ -5442,13 +5587,13 @@ function MatrxDataTableCore({
       }
       return next;
     });
-  }, [columns]);
+  }, [columns, columnState]);
   const visibleColumns = (0, import_react14.useMemo)(() => {
     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),
@@ -5522,8 +5667,15 @@ function MatrxDataTableCore({
     sourceOwnsColumnFilters,
     sourceOwnsSort
   ]);
+  const lastNotifiedViewRows = (0, import_react14.useRef)(null);
   (0, import_react14.useEffect)(() => {
-    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]);
   (0, import_react14.useEffect)(() => {
     if (controlledQuery) return;
@@ -5953,16 +6105,77 @@ function MatrxDataTableCore({
     } : facet
   ) : toolbar?.facets;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    import_core.DndContext,
+    import_core2.DndContext,
     {
       sensors: hierarchySensors,
-      collisionDetection: import_core.pointerWithin,
-      measuring: { droppable: { strategy: import_core.MeasuringStrategy.Always } },
+      collisionDetection: import_core2.pointerWithin,
+      measuring: { droppable: { strategy: import_core2.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__ */ (0, import_jsx_runtime32.jsxs)(
           "div",
@@ -6184,8 +6397,8 @@ function MatrxDataTableCore({
                               onClick: () => setColumnManagerOpen(true),
                               children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SlidersHorizontal, { className: "h-4 w-4" }),
-                                hiddenColumnIds.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "sr-only", children: [
-                                  hiddenColumnIds.size,
+                                effectiveHiddenColumnIds.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "sr-only", children: [
+                                  effectiveHiddenColumnIds.size,
                                   " hidden"
                                 ] }) : null
                               ]
@@ -6439,46 +6652,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__ */ (0, import_jsx_runtime32.jsx)(
-                                    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__ */ (0, import_jsx_runtime32.jsxs)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: [
+                                    reorderableColumns ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColumnReorderHandle, { id, label: headerLabel }) : null,
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                                      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
                               );
@@ -6777,12 +6994,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__ */ (0, import_jsx_runtime32.jsx)(
@@ -6981,7 +7195,7 @@ function MatrxDataTableCore({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core.DragOverlay, { children: draggedRow ? (
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core2.DragOverlay, { children: draggedRow ? (
           // w-max: the overlay inherits the ACTIVE node's size, and the active
           // node is the 16px grip handle — without it the label wraps to one
           // character per line.
@@ -6996,7 +7210,7 @@ function HierarchyDragHandle({
   label,
   disabled
 }) {
-  const { attributes, listeners, setNodeRef } = (0, import_core.useDraggable)({
+  const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
     id,
     disabled
   });
@@ -7020,7 +7234,7 @@ function HierarchyRootDropTarget({
   label,
   draggedLabel
 }) {
-  const { isOver, setNodeRef } = (0, import_core.useDroppable)({ id: "__root__" });
+  const { isOver, setNodeRef } = (0, import_core2.useDroppable)({ id: "__root__" });
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
@@ -7044,7 +7258,7 @@ function HierarchyDragIndicatorLayer({
   const [indicator, setIndicator] = (0, import_react14.useState)(
     null
   );
-  (0, import_core.useDndMonitor)({
+  (0, import_core2.useDndMonitor)({
     onDragMove(event) {
       const container = scrollRef.current;
       const overId = event.over ? String(event.over.id) : null;
@@ -7144,7 +7358,7 @@ function HierarchyDroppableRow({
   disabled,
   children
 }) {
-  const { setNodeRef } = (0, import_core.useDroppable)({ id, disabled });
+  const { setNodeRef } = (0, import_core2.useDroppable)({ id, disabled });
   if (!(0, import_react14.isValidElement)(children) || children.type !== "tr") return children;
   const row = children;
   return (0, import_react14.cloneElement)(row, {
@@ -7152,6 +7366,38 @@ function HierarchyDroppableRow({
     className: row.props.className
   });
 }
+function ColumnHeaderDropZone({
+  id,
+  enabled,
+  children
+}) {
+  const { setNodeRef } = (0, import_core2.useDroppable)({
+    id: `matrx-column-header:${id}`,
+    disabled: !enabled,
+    data: { matrxDragKind: "column-header", columnId: id }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
+}
+function ColumnReorderHandle({ id, label }) {
+  const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
+    id: `matrx-column-header:${id}`,
+    data: { matrxDragKind: "column-header", columnId: id }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "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__ */ (0, import_jsx_runtime32.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
+    }
+  );
+}
 function columnWidthVar(width) {
   if (width === void 0) return void 0;
   return {