@ai-matrx/design-system 0.19.0 → 0.19.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.19.1 — 2026-09-13
+
+### Data-table interaction and pagination
+
+MatrxDataTable now supports desktop column resizing with pointer and keyboard
+separators, progressive rendering for complete local datasets, and scroll
+append that recognizes the actual table, ancestor, or document scroll owner
+only after a fresh user-driven downward movement. Mobile keeps content-sized
+columns and hides resize handles. Manual Load more remains available whenever
+automatic pagination is suspended.
+
+Table toolbar and pagination controls use the canonical 44px target and 14px
+icon geometry, and shared SVG icons use rounded caps and joins.
+
+### Consumer action
+
+Update `@ai-matrx/data` with this package. Hosts that pass a manual pagination
+policy must provide its documented reason and `approvedBy`; use `suspended` for
+unavailable configuration.
+
 ## 0.19.0
 
 Alchemy uses the canonical Tap Target primitive with Portal by default and glass or transparent presentation. Adds native AI-context copy, preparation recipes, content limits, and grouped Matrx destinations using the exact prepared revision. Destination handoff releases the dialog focus trap and saved artifacts expose their receipt. Copy + Transform remains an optional packaged icon.

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

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.cjs';
-import { e as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-Di6QT0P1.cjs';
+import { e as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-BcIcmIxd.cjs';
 import 'react';
 
 /**

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

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.js';
-import { e as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-D1m14boM.js';
+import { e as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-xTXSqmR7.js';
 import 'react';
 
 /**

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-Di6QT0P1.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-BcIcmIxd.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-D1m14boM.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-xTXSqmR7.js';
 import 'react';
 import './copy-types.js';
 

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.cjs';
-import { b as TableSavedViewsProps } from '../types-Di6QT0P1.cjs';
+import { b as TableSavedViewsProps } from '../types-BcIcmIxd.cjs';
 
 interface TableLinkProps {
     href: string;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.js';
-import { b as TableSavedViewsProps } from '../types-D1m14boM.js';
+import { b as TableSavedViewsProps } from '../types-xTXSqmR7.js';
 
 interface TableLinkProps {
     href: string;

package/dist/data-table/index.cjs

@@ -1070,12 +1070,16 @@ function isVerticallyScrollable(element) {
   return (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") && element.scrollHeight > element.clientHeight;
 }
 function resolveScrollOwner(source) {
+  const documentOwner = document.scrollingElement instanceof HTMLElement ? document.scrollingElement : document.documentElement;
   for (let node = source; node; node = node.parentElement) {
+    if (node === documentOwner || node === document.documentElement || node === document.body) {
+      return { element: documentOwner, document: true };
+    }
     if (node === source && node.scrollHeight > node.clientHeight || isVerticallyScrollable(node)) {
       return { element: node, document: false };
     }
   }
-  return { element: document.scrollingElement instanceof HTMLElement ? document.scrollingElement : document.documentElement, document: true };
+  return { element: documentOwner, document: true };
 }
 function ownerScrollTop(owner) {
   return owner.document ? window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0 : owner.element.scrollTop;
@@ -1202,7 +1206,7 @@ function useScrollPagination({
         else owner.element.removeEventListener("scroll", onOwnerScroll);
       });
     };
-    const setIntent = (source, startTop) => {
+    const setIntent = (source) => {
       const current = latestRef.current;
       const owner = resolveScrollOwner(source);
       if (!isVisibleContainer(source) || current.loading || current.isFetchingNextPage || inFlightGenerationRef.current !== null) return;
@@ -1215,9 +1219,8 @@ function useScrollPagination({
     };
     const cleanups = attachable.map((source) => {
       if (!observedTopRef.current.has(source)) observedTopRef.current.set(source, source.scrollTop);
-      const lastObservedTop = () => observedTopRef.current.get(source) ?? source.scrollTop;
       const onWheel = (event) => {
-        if (event.deltaY > 0 && Math.abs(event.deltaY) > Math.abs(event.deltaX)) setIntent(source, lastObservedTop());
+        if (event.deltaY > 0 && Math.abs(event.deltaY) > Math.abs(event.deltaX)) setIntent(source);
       };
       const onTouchStart = (event) => {
         const touch = event.touches.item(0);
@@ -1226,16 +1229,16 @@ function useScrollPagination({
       const onTouchMove = (event) => {
         const touch = event.touches.item(0);
         const startY = Number(source.dataset.matrxPaginationTouchY);
-        if (touch && Number.isFinite(startY) && startY - touch.clientY > 0) setIntent(source, lastObservedTop());
+        if (touch && Number.isFinite(startY) && startY - touch.clientY > 0) setIntent(source);
       };
       const onTouchEnd = () => {
         delete source.dataset.matrxPaginationTouchY;
       };
       const onKeyDown = (event) => {
-        if (isDownwardKeyboardInput(event)) setIntent(source, lastObservedTop());
+        if (isDownwardKeyboardInput(event)) setIntent(source);
       };
       const onPointerDown = (event) => {
-        if (isNativeScrollbarPointer(event, source)) setIntent(source, lastObservedTop());
+        if (isNativeScrollbarPointer(event, source)) setIntent(source);
       };
       const onScroll = () => {
         handleScroll(source, { element: source, document: false });
@@ -5957,6 +5960,8 @@ function ColumnResizeHandle({
   minWidth,
   maxWidth,
   disabled = false,
+  onResizeStart,
+  onResizeCancel,
   onResizeCommit
 }) {
   const handleRef = (0, import_react11.useRef)(null);
@@ -6001,6 +6006,7 @@ function ColumnResizeHandle({
     if (!commit) {
       if (active.priorPreview) table?.style.setProperty(cssVar, active.priorPreview);
       else table?.style.removeProperty(cssVar);
+      onResizeCancel?.();
     } else {
       writePreview(width);
       setAnnouncedWidth(width);
@@ -6009,7 +6015,7 @@ function ColumnResizeHandle({
     if (handleRef.current?.hasPointerCapture(active.pointerId)) {
       handleRef.current.releasePointerCapture(active.pointerId);
     }
-  }, [clearQueuedPreview, columnId2, cssVar, onResizeCommit, tableRef, writePreview]);
+  }, [clearQueuedPreview, columnId2, cssVar, onResizeCancel, onResizeCommit, tableRef, writePreview]);
   (0, import_react11.useEffect)(() => () => clearQueuedPreview(), [clearQueuedPreview]);
   const onPointerDown = (event) => {
     if (disabled || event.button !== 0 || !event.isPrimary) return;
@@ -6017,6 +6023,7 @@ function ColumnResizeHandle({
     event.stopPropagation();
     const startWidth = readWidth();
     keyboardWidthRef.current = startWidth;
+    onResizeStart?.();
     activeResizeRef.current = {
       pointerId: event.pointerId,
       startX: event.clientX,
@@ -6056,6 +6063,7 @@ function ColumnResizeHandle({
     event.stopPropagation();
     const nextWidth = clampColumnWidth(width, bounds);
     keyboardWidthRef.current = nextWidth;
+    onResizeStart?.();
     writePreview(nextWidth);
     setAnnouncedWidth(nextWidth);
     onResizeCommit(columnId2, nextWidth);
@@ -8314,6 +8322,7 @@ function MatrxDataTableCore({
     if (scrollRef.current) scrollRef.current.scrollTop = 0;
     if (cardsScrollRef.current) cardsScrollRef.current.scrollTop = 0;
   }, [appendQueryKey]);
+  const appendScrollPolicy = appendQuery?.scroll;
   const scrollPagination = useScrollPagination({
     containers: [scrollRef, cardsScrollRef],
     queryKey: appendQuery?.pagination.queryKey ?? "",
@@ -8323,7 +8332,11 @@ function MatrxDataTableCore({
     error: appendQuery?.pagination.error ?? null,
     loadNextPage: appendQuery?.pagination.loadNextPage ?? (() => void 0),
     enabled: appendQuery !== null,
-    ...appendQuery?.scroll
+    // Suspended policy is deliberately manual at the hook boundary: its
+    // reason remains visible in the footer while automatic listeners stay off.
+    mode: appendScrollPolicy?.mode === "suspended" ? "manual" : appendScrollPolicy?.mode ?? "scroll",
+    ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.thresholdPx !== void 0 ? { thresholdPx: appendScrollPolicy.thresholdPx } : {},
+    ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
   });
   const rootRef = (0, import_react17.useRef)(null);
   const actionDiagnosticObserver = (0, import_react17.useRef)(null);
@@ -8465,6 +8478,7 @@ function MatrxDataTableCore({
     () => normalizeColumnWidthsForColumns(columnState?.widths ?? columnWidths, columns),
     [columns, columnState?.widths, columnWidths]
   );
+  const resizeGestureSnapshotRef = (0, import_react17.useRef)(null);
   const measureVisibleColumnWidths = (0, import_react17.useCallback)(() => {
     const measured = {};
     const headers = tableRef.current ? Array.from(tableRef.current.querySelectorAll(
@@ -8499,13 +8513,25 @@ function MatrxDataTableCore({
       ...actionsWidth === void 0 ? {} : { actionsWidth }
     };
   }, []);
+  const captureResizeGestureSnapshot = (0, import_react17.useCallback)(() => {
+    resizeGestureSnapshotRef.current = {
+      widths: measureVisibleColumnWidths(),
+      geometry: measureFixedTableGeometry()
+    };
+  }, [measureFixedTableGeometry, measureVisibleColumnWidths]);
+  const clearResizeGestureSnapshot = (0, import_react17.useCallback)(() => {
+    resizeGestureSnapshotRef.current = null;
+  }, []);
   const commitColumnWidths = (0, import_react17.useCallback)((next, captureInitialWidths = false) => {
+    const gestureSnapshot = captureInitialWidths ? resizeGestureSnapshotRef.current : null;
+    resizeGestureSnapshotRef.current = null;
     const normalized = normalizeColumnWidthsForColumns(
-      captureInitialWidths ? { ...measureVisibleColumnWidths(), ...next } : next,
+      captureInitialWidths ? { ...gestureSnapshot?.widths ?? measureVisibleColumnWidths(), ...next } : next,
       columns
     );
-    if (captureInitialWidths) setFixedTableGeometry(measureFixedTableGeometry());
-    else setFixedTableGeometry(null);
+    if (captureInitialWidths) {
+      setFixedTableGeometry(gestureSnapshot?.geometry ?? measureFixedTableGeometry());
+    } else setFixedTableGeometry(null);
     for (const id of columnIds) {
       tableRef.current?.style.removeProperty(columnResizeCssVar(id));
     }
@@ -9967,6 +9993,8 @@ function MatrxDataTableCore({
                                             tableRef,
                                             minWidth: col.minWidth,
                                             maxWidth: col.maxWidth,
+                                            onResizeStart: captureResizeGestureSnapshot,
+                                            onResizeCancel: clearResizeGestureSnapshot,
                                             onResizeCommit: (columnId2, width) => commitColumnWidths(
                                               { ...effectiveColumnWidths, [columnId2]: width },
                                               true
@@ -10309,7 +10337,11 @@ function MatrxDataTableCore({
                                 "."
                               ] }) : null,
                               !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { children: "All source rows are loaded." }) : appendUsesLocalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { children: "Local search and filters cover loaded rows." }) : null,
-                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null
+                              scrollPagination.error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { role: "alert", className: "break-words text-destructive", children: scrollPagination.error.message }) : null,
+                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { role: "status", className: "break-words", children: [
+                                appendScrollPolicy.reason,
+                                " Load more remains available."
+                              ] }) : null
                             ] })
                           ]
                         }