@ai-matrx/design-system 0.15.2 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 0.17.0 — 2026-09-12
+
+- `MatrxDataTable` accepts opt-in controlled `columnState` and `reorderableColumns`, allowing URL-backed order/visibility and package-owned header drag without a host renderer fork. Header grips and the column manager use the existing pointer sensor for mouse/touch ordering; the manager retains arrow controls and protected visibility. Headers show insertion feedback and cancel edge scrolling when the drag ends or leaves a valid target.
+- `onViewChange` notifies when a subscriber attaches or row references/order change, while callback identity changes alone do not trigger a feedback loop.
+
+### Consumer action
+
+Update to 0.17.0 before using `columnState`, `reorderableColumns`, or the
+controlled `columnManager` open state. These column ports are opt-in: existing
+column-order and visibility behavior is unchanged until a consumer supplies
+them. `onViewChange` subscribers receive the corrected attach and identity
+semantics described above.
+
+## 0.16.0 — 2026-09-11
+
+`ConfirmDialogHost` now rides the shared opener primitive instead of its own
+copy of the machinery: `useOpenerHost` from `@ai-matrx/kit/opener-react`
+(kit 0.10.0) supplies the host registration, the ref-backed request queue, the
+drain effect and the settle-once callback, and this package keeps only what was
+ever its own — the dialog body, its motion layer and the themed scrim.
+
+The same twenty lines lived here AND in three matrx-frontend dialog hosts;
+package logic is never duplicated outside the package, and a host registry in
+particular must never be re-implemented, because module-level host state
+silently splits across ESM/CJS loader graphs.
+
+Behaviour is unchanged and proven unchanged: all 17 confirm-surface tests —
+imperative queueing, pre-mount calls, sequential presentation, the
+never-resolve-silently rule, the destructive variant and the consequence-first
+copy contract — pass untouched against the new host.
+
+### Consumer action
+
+None. `<ConfirmDialogHost />` mounts and behaves exactly as before. Requires
+`@ai-matrx/kit` 0.10.0 or later.
+
 ## 0.15.2 — 2026-09-11
 
 Editable append tables retain unsaved drafts by source identity. Returning to the

package/README.md

@@ -150,6 +150,12 @@ const pagination = usePaginatedData({ queryKey, initialCursor: 0, loadPage, getR
     scroll: { mode: "scroll", thresholdPx: 96, intentTimeoutMs: 1200 } }} />;
 ```
 
+URL/source owners can control columns without rebuilding the table: pass
+`columnState={{ order, hidden, onChange }}` and `reorderableColumns`. The
+package then commits both the Columns dialog and header drag through `onChange`.
+The dialog provides drag ordering and labelled arrow controls; columns marked
+`hideable: false` remain visible.
+
 Use application-resolved preferences for `scroll`; `manual` always retains Load
 more. Numbered exact-page sources use `controlled` with `totalItems`; fully loaded
 client arrays use local mode or `controlled-local`. Partial server results must

package/dist/data-table/copy-helpers.d.cts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.cjs';
-import { f as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-XXbVB1sh.cjs';
+import { f as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-4fmLG5AN.cjs';
 import 'react';
 
 /** Human markdown table of the current view (visible columns × rows). */

package/dist/data-table/copy-helpers.d.ts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.js';
-import { f as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-ClaxTaXq.js';
+import { f as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-pZ95iFk5.js';
 import 'react';
 
 /** Human markdown table of the current view (visible columns × rows). */

package/dist/data-table/filter-engine.d.cts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-XXbVB1sh.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-4fmLG5AN.cjs';
 import 'react';
 import './copy-types.cjs';
 

package/dist/data-table/filter-engine.d.ts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-ClaxTaXq.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-pZ95iFk5.js';
 import 'react';
 import './copy-types.js';
 

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");
@@ -3416,6 +3416,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 +3433,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 +3453,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 +3504,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 +3579,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 +5078,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 +5198,9 @@ function MatrxDataTableWithUrlState({
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
+  columnState,
+  reorderableColumns = false,
+  columnManager: controlledColumnManager,
   getRowId,
   searchText,
   processLocalRows,
@@ -5186,8 +5266,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 +5504,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 +5576,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 +5656,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 +6094,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 +6386,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 +6641,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 +6983,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 +7184,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 +7199,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 +7223,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 +7247,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 +7347,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 +7355,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 {