@ai-matrx/design-system 0.19.0 → 0.19.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 0.19.2 — 2026-09-13
+
+TabbedBottomSheet accepts `initialTabId`, opening directly inside an available tab on initial open and reopen while retaining back navigation. Missing tabs fall back to the index. Hosts can now honor destination deep links consistently on mobile and desktop.
+
+### Consumer action
+
+Pass the existing initial tab to `initialTabId` for mobile destination windows. Omitting it retains the existing index-first behavior.
+
+## 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
                             ] })
                           ]
                         }