@ai-matrx/design-system 0.19.7 → 0.19.9

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

package/dist/data-table/host.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/data-table/host.tsx"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type Context, type ComponentType, type ReactNode, type MouseEventHandler } from \"react\";\nimport type { CopyControlProps } from \"./copy-types\";\nimport type { TableSavedViewsProps } from \"./types\";\n\nexport type {\n  AgentPayloadInput,\n  AiCustomSource,\n  AiVariant,\n  CopyControlProps,\n  CopyExportConfig,\n} from \"./copy-types\";\n\nexport interface TableLinkProps { href: string; children: ReactNode; className?: string; onClick?: MouseEventHandler<HTMLAnchorElement>; }\n/**\n * Host-owned toolbar affordance. The table package keeps operation state and\n * labels; an application can supply its canonical icon-button primitive\n * without making the shared package depend on an application UI package.\n */\nexport interface TableToolbarActionProps { ariaLabel: string; tooltip?: string | undefined; disabled?: boolean | undefined; busy?: boolean | undefined; /** Indicates a selected mutually-exclusive action such as the current page. */ active?: boolean | undefined; onClick: () => void; children: ReactNode; }\nexport interface TableSidePanelProps { title: string; titleNode?: ReactNode; description?: ReactNode; onClose: () => void; defaultWidth?: number; headerActions?: ReactNode; children: ReactNode; }\nexport interface TableWindowPanelProps { id: string; title: string; onClose: () => void; width?: number; height?: number; minWidth?: number; minHeight?: number; actionsRight?: ReactNode; bodyClassName?: string; sidebarDefaultSize?: number; sidebarMinSize?: number; sidebar?: ReactNode; children: ReactNode; }\nexport interface TableEntityRefProps { token: string; id: string; href?: string; children: ReactNode; className?: string; }\nexport interface TablePeekProps { kind: string; id: string; href?: string; onClose: () => void; }\nexport interface TableDoors { href?: string; peekKind?: string; canPeek?: boolean; }\nexport interface MatrxDataTableHost { Link?: ComponentType<TableLinkProps>; CopyControls?: ComponentType<CopyControlProps>; ToolbarAction?: ComponentType<TableToolbarActionProps>; SidePanelSurface?: ComponentType<TableSidePanelProps>; WindowPanel?: ComponentType<TableWindowPanelProps>; EntityRef?: ComponentType<TableEntityRefProps>; resolveEntityDoors?: (token: string, id: string, href?: string | null) => TableDoors | null; ResourcePeek?: ComponentType<TablePeekProps>; SavedViews?: ComponentType<TableSavedViewsProps>; notify?: { success(message: string): void; error(message: string): void }; }\n// Public entrypoints are independently bundled in ESM and CJS. The context\n// identity must survive those bundle boundaries; values stay provider-scoped.\nconst HOST_SLOT = Symbol.for(\"ai-matrx.design-system.table-host-context\");\nconst hostRegistry = globalThis as typeof globalThis & { [HOST_SLOT]?: Context<MatrxDataTableHost> };\nconst HostContext = hostRegistry[HOST_SLOT] ??= createContext<MatrxDataTableHost>({});\nexport function MatrxDataTableProvider({ value, children }: { value: MatrxDataTableHost; children: ReactNode }) { return <HostContext.Provider value={value}>{children}</HostContext.Provider>; }\nexport function useMatrxDataTableHost(): MatrxDataTableHost { return useContext(HostContext); }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoH;AA8BK;AAHzH,IAAM,YAAY,uBAAO,IAAI,2CAA2C;AACxE,IAAM,eAAe;AACrB,IAAM,cAAc,aAAa,SAAS,UAAM,4BAAkC,CAAC,CAAC;AAC7E,SAAS,uBAAuB,EAAE,OAAO,SAAS,GAAuD;AAAE,SAAO,4CAAC,YAAY,UAAZ,EAAqB,OAAe,UAAS;AAAyB;AACzL,SAAS,wBAA4C;AAAE,aAAO,yBAAW,WAAW;AAAG;","names":[]}
+{"version":3,"sources":["../../src/data-table/host.tsx"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type Context, type ComponentType, type ReactNode, type MouseEventHandler } from \"react\";\nimport type { CopyControlProps } from \"./copy-types\";\nimport type { MatrxDataTableDensity, TableSavedViewsProps } from \"./types\";\n\nexport type {\n  AgentPayloadInput,\n  AiCustomSource,\n  AiVariant,\n  CopyControlProps,\n  CopyExportConfig,\n} from \"./copy-types\";\n\nexport interface TableLinkProps { href: string; children: ReactNode; className?: string; onClick?: MouseEventHandler<HTMLAnchorElement>; }\n/**\n * Host-owned toolbar affordance. The table package keeps operation state and\n * labels; an application can supply its canonical icon-button primitive\n * without making the shared package depend on an application UI package.\n */\nexport interface TableToolbarActionProps { ariaLabel: string; tooltip?: string | undefined; disabled?: boolean | undefined; busy?: boolean | undefined; /** Indicates a selected mutually-exclusive action such as the current page. */ active?: boolean | undefined; onClick: () => void; children: ReactNode; }\nexport interface TableSidePanelProps { title: string; titleNode?: ReactNode; description?: ReactNode; onClose: () => void; defaultWidth?: number; headerActions?: ReactNode; children: ReactNode; }\nexport interface TableWindowPanelProps { id: string; title: string; onClose: () => void; width?: number; height?: number; minWidth?: number; minHeight?: number; actionsRight?: ReactNode; bodyClassName?: string; sidebarDefaultSize?: number; sidebarMinSize?: number; sidebar?: ReactNode; children: ReactNode; }\nexport interface TableEntityRefProps { token: string; id: string; href?: string; children: ReactNode; className?: string; }\nexport interface TablePeekProps { kind: string; id: string; href?: string; onClose: () => void; }\nexport interface TableDoors { href?: string; peekKind?: string; canPeek?: boolean; }\nexport interface MatrxDataTableHost { Link?: ComponentType<TableLinkProps>; CopyControls?: ComponentType<CopyControlProps>; ToolbarAction?: ComponentType<TableToolbarActionProps>; SidePanelSurface?: ComponentType<TableSidePanelProps>; WindowPanel?: ComponentType<TableWindowPanelProps>; EntityRef?: ComponentType<TableEntityRefProps>; resolveEntityDoors?: (token: string, id: string, href?: string | null) => TableDoors | null; ResourcePeek?: ComponentType<TablePeekProps>; SavedViews?: ComponentType<TableSavedViewsProps>; /** Host default; a table's explicit density takes precedence. */ defaultDensity?: MatrxDataTableDensity; notify?: { success(message: string): void; error(message: string): void }; }\n// Public entrypoints are independently bundled in ESM and CJS. The context\n// identity must survive those bundle boundaries; values stay provider-scoped.\nconst HOST_SLOT = Symbol.for(\"ai-matrx.design-system.table-host-context\");\nconst hostRegistry = globalThis as typeof globalThis & { [HOST_SLOT]?: Context<MatrxDataTableHost> };\nconst HostContext = hostRegistry[HOST_SLOT] ??= createContext<MatrxDataTableHost>({});\nexport function MatrxDataTableProvider({ value, children }: { value: MatrxDataTableHost; children: ReactNode }) { return <HostContext.Provider value={value}>{children}</HostContext.Provider>; }\nexport function useMatrxDataTableHost(): MatrxDataTableHost { return useContext(HostContext); }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoH;AA8BK;AAHzH,IAAM,YAAY,uBAAO,IAAI,2CAA2C;AACxE,IAAM,eAAe;AACrB,IAAM,cAAc,aAAa,SAAS,UAAM,4BAAkC,CAAC,CAAC;AAC7E,SAAS,uBAAuB,EAAE,OAAO,SAAS,GAAuD;AAAE,SAAO,4CAAC,YAAY,UAAZ,EAAqB,OAAe,UAAS;AAAyB;AACzL,SAAS,wBAA4C;AAAE,aAAO,yBAAW,WAAW;AAAG;","names":[]}

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-BcIcmIxd.cjs';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity } from '../types-DqlfNcC5.cjs';
 
 interface TableLinkProps {
     href: string;
@@ -75,7 +75,8 @@ interface MatrxDataTableHost {
     EntityRef?: ComponentType<TableEntityRefProps>;
     resolveEntityDoors?: (token: string, id: string, href?: string | null) => TableDoors | null;
     ResourcePeek?: ComponentType<TablePeekProps>;
-    SavedViews?: ComponentType<TableSavedViewsProps>;
+    SavedViews?: ComponentType<TableSavedViewsProps>; /** Host default; a table's explicit density takes precedence. */
+    defaultDensity?: MatrxDataTableDensity;
     notify?: {
         success(message: string): void;
         error(message: string): void;

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-xTXSqmR7.js';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity } from '../types-lNw7TnTM.js';
 
 interface TableLinkProps {
     href: string;
@@ -75,7 +75,8 @@ interface MatrxDataTableHost {
     EntityRef?: ComponentType<TableEntityRefProps>;
     resolveEntityDoors?: (token: string, id: string, href?: string | null) => TableDoors | null;
     ResourcePeek?: ComponentType<TablePeekProps>;
-    SavedViews?: ComponentType<TableSavedViewsProps>;
+    SavedViews?: ComponentType<TableSavedViewsProps>; /** Host default; a table's explicit density takes precedence. */
+    defaultDensity?: MatrxDataTableDensity;
     notify?: {
         success(message: string): void;
         error(message: string): void;

package/dist/data-table/host.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/data-table/host.tsx"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type Context, type ComponentType, type ReactNode, type MouseEventHandler } from \"react\";\nimport type { CopyControlProps } from \"./copy-types\";\nimport type { TableSavedViewsProps } from \"./types\";\n\nexport type {\n  AgentPayloadInput,\n  AiCustomSource,\n  AiVariant,\n  CopyControlProps,\n  CopyExportConfig,\n} from \"./copy-types\";\n\nexport interface TableLinkProps { href: string; children: ReactNode; className?: string; onClick?: MouseEventHandler<HTMLAnchorElement>; }\n/**\n * Host-owned toolbar affordance. The table package keeps operation state and\n * labels; an application can supply its canonical icon-button primitive\n * without making the shared package depend on an application UI package.\n */\nexport interface TableToolbarActionProps { ariaLabel: string; tooltip?: string | undefined; disabled?: boolean | undefined; busy?: boolean | undefined; /** Indicates a selected mutually-exclusive action such as the current page. */ active?: boolean | undefined; onClick: () => void; children: ReactNode; }\nexport interface TableSidePanelProps { title: string; titleNode?: ReactNode; description?: ReactNode; onClose: () => void; defaultWidth?: number; headerActions?: ReactNode; children: ReactNode; }\nexport interface TableWindowPanelProps { id: string; title: string; onClose: () => void; width?: number; height?: number; minWidth?: number; minHeight?: number; actionsRight?: ReactNode; bodyClassName?: string; sidebarDefaultSize?: number; sidebarMinSize?: number; sidebar?: ReactNode; children: ReactNode; }\nexport interface TableEntityRefProps { token: string; id: string; href?: string; children: ReactNode; className?: string; }\nexport interface TablePeekProps { kind: string; id: string; href?: string; onClose: () => void; }\nexport interface TableDoors { href?: string; peekKind?: string; canPeek?: boolean; }\nexport interface MatrxDataTableHost { Link?: ComponentType<TableLinkProps>; CopyControls?: ComponentType<CopyControlProps>; ToolbarAction?: ComponentType<TableToolbarActionProps>; SidePanelSurface?: ComponentType<TableSidePanelProps>; WindowPanel?: ComponentType<TableWindowPanelProps>; EntityRef?: ComponentType<TableEntityRefProps>; resolveEntityDoors?: (token: string, id: string, href?: string | null) => TableDoors | null; ResourcePeek?: ComponentType<TablePeekProps>; SavedViews?: ComponentType<TableSavedViewsProps>; notify?: { success(message: string): void; error(message: string): void }; }\n// Public entrypoints are independently bundled in ESM and CJS. The context\n// identity must survive those bundle boundaries; values stay provider-scoped.\nconst HOST_SLOT = Symbol.for(\"ai-matrx.design-system.table-host-context\");\nconst hostRegistry = globalThis as typeof globalThis & { [HOST_SLOT]?: Context<MatrxDataTableHost> };\nconst HostContext = hostRegistry[HOST_SLOT] ??= createContext<MatrxDataTableHost>({});\nexport function MatrxDataTableProvider({ value, children }: { value: MatrxDataTableHost; children: ReactNode }) { return <HostContext.Provider value={value}>{children}</HostContext.Provider>; }\nexport function useMatrxDataTableHost(): MatrxDataTableHost { return useContext(HostContext); }\n"],"mappings":";;;;AACA,SAAS,eAAe,kBAA4F;AA8BK;AAHzH,IAAM,YAAY,uBAAO,IAAI,2CAA2C;AACxE,IAAM,eAAe;AACrB,IAAM,cAAc,aAAa,SAAS,MAAM,cAAkC,CAAC,CAAC;AAC7E,SAAS,uBAAuB,EAAE,OAAO,SAAS,GAAuD;AAAE,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAe,UAAS;AAAyB;AACzL,SAAS,wBAA4C;AAAE,SAAO,WAAW,WAAW;AAAG;","names":[]}
+{"version":3,"sources":["../../src/data-table/host.tsx"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type Context, type ComponentType, type ReactNode, type MouseEventHandler } from \"react\";\nimport type { CopyControlProps } from \"./copy-types\";\nimport type { MatrxDataTableDensity, TableSavedViewsProps } from \"./types\";\n\nexport type {\n  AgentPayloadInput,\n  AiCustomSource,\n  AiVariant,\n  CopyControlProps,\n  CopyExportConfig,\n} from \"./copy-types\";\n\nexport interface TableLinkProps { href: string; children: ReactNode; className?: string; onClick?: MouseEventHandler<HTMLAnchorElement>; }\n/**\n * Host-owned toolbar affordance. The table package keeps operation state and\n * labels; an application can supply its canonical icon-button primitive\n * without making the shared package depend on an application UI package.\n */\nexport interface TableToolbarActionProps { ariaLabel: string; tooltip?: string | undefined; disabled?: boolean | undefined; busy?: boolean | undefined; /** Indicates a selected mutually-exclusive action such as the current page. */ active?: boolean | undefined; onClick: () => void; children: ReactNode; }\nexport interface TableSidePanelProps { title: string; titleNode?: ReactNode; description?: ReactNode; onClose: () => void; defaultWidth?: number; headerActions?: ReactNode; children: ReactNode; }\nexport interface TableWindowPanelProps { id: string; title: string; onClose: () => void; width?: number; height?: number; minWidth?: number; minHeight?: number; actionsRight?: ReactNode; bodyClassName?: string; sidebarDefaultSize?: number; sidebarMinSize?: number; sidebar?: ReactNode; children: ReactNode; }\nexport interface TableEntityRefProps { token: string; id: string; href?: string; children: ReactNode; className?: string; }\nexport interface TablePeekProps { kind: string; id: string; href?: string; onClose: () => void; }\nexport interface TableDoors { href?: string; peekKind?: string; canPeek?: boolean; }\nexport interface MatrxDataTableHost { Link?: ComponentType<TableLinkProps>; CopyControls?: ComponentType<CopyControlProps>; ToolbarAction?: ComponentType<TableToolbarActionProps>; SidePanelSurface?: ComponentType<TableSidePanelProps>; WindowPanel?: ComponentType<TableWindowPanelProps>; EntityRef?: ComponentType<TableEntityRefProps>; resolveEntityDoors?: (token: string, id: string, href?: string | null) => TableDoors | null; ResourcePeek?: ComponentType<TablePeekProps>; SavedViews?: ComponentType<TableSavedViewsProps>; /** Host default; a table's explicit density takes precedence. */ defaultDensity?: MatrxDataTableDensity; notify?: { success(message: string): void; error(message: string): void }; }\n// Public entrypoints are independently bundled in ESM and CJS. The context\n// identity must survive those bundle boundaries; values stay provider-scoped.\nconst HOST_SLOT = Symbol.for(\"ai-matrx.design-system.table-host-context\");\nconst hostRegistry = globalThis as typeof globalThis & { [HOST_SLOT]?: Context<MatrxDataTableHost> };\nconst HostContext = hostRegistry[HOST_SLOT] ??= createContext<MatrxDataTableHost>({});\nexport function MatrxDataTableProvider({ value, children }: { value: MatrxDataTableHost; children: ReactNode }) { return <HostContext.Provider value={value}>{children}</HostContext.Provider>; }\nexport function useMatrxDataTableHost(): MatrxDataTableHost { return useContext(HostContext); }\n"],"mappings":";;;;AACA,SAAS,eAAe,kBAA4F;AA8BK;AAHzH,IAAM,YAAY,uBAAO,IAAI,2CAA2C;AACxE,IAAM,eAAe;AACrB,IAAM,cAAc,aAAa,SAAS,MAAM,cAAkC,CAAC,CAAC;AAC7E,SAAS,uBAAuB,EAAE,OAAO,SAAS,GAAuD;AAAE,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAe,UAAS;AAAyB;AACzL,SAAS,wBAA4C;AAAE,SAAO,WAAW,WAAW;AAAG;","names":[]}

package/dist/data-table/index.cjs

@@ -1880,7 +1880,7 @@ function PaginationAction({
   ...props
 }) {
   if (HostAction) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: visibilityClassName, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "data-matrx-table-icon-action": true, className: visibilityClassName, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       HostAction,
       {
         ...props,
@@ -1905,6 +1905,7 @@ function PaginationAction({
         fallbackClassName
       ),
       "aria-current": active ? "page" : void 0,
+      "data-matrx-table-icon-action": true,
       children: props.children
     }
   );
@@ -7896,10 +7897,10 @@ function TableToolbarAction({
   children
 }) {
   if (HostAction) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "data-matrx-table-toolbar-action": true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(HostAction, { ariaLabel, tooltip, disabled, busy, onClick, children }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: (0, import_react17.isValidElement)(children) ? (0, import_react17.cloneElement)(children, { className: cn("h-5 w-5", children.props.className) }) : children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "data-matrx-table-toolbar-action": true, className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 [&_svg]:size-5", "aria-label": ariaLabel, "aria-busy": busy || void 0, disabled, onClick, children: (0, import_react17.isValidElement)(children) ? (0, import_react17.cloneElement)(children, { className: cn("h-5 w-5", children.props.className) }) : children }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipContent, { children: tooltip ?? ariaLabel })
   ] });
 }
@@ -8070,7 +8071,8 @@ function MatrxDataTableCore({
   tableClassName,
   mobileCards,
   mobileCardsBreakpoint = "sm",
-  onRowOpen
+  onRowOpen,
+  density
 }) {
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
@@ -8080,6 +8082,7 @@ function MatrxDataTableCore({
   const isLoading = appendQuery ? appendQuery.pagination.loading : suppliedLoading;
   const isFetching = appendQuery ? appendQuery.pagination.isFetchingNextPage : suppliedFetching;
   const host = useMatrxDataTableHost();
+  const resolvedDensity = density ?? host.defaultDensity ?? "normal";
   const SavedViews = host.SavedViews;
   const Link = host.Link ?? DefaultTableLink;
   const SidePanelSurface = host.SidePanelSurface ?? DefaultTableSidePanel;
@@ -8088,7 +8091,7 @@ function MatrxDataTableCore({
   const [toolbarActionError, setToolbarActionError] = (0, import_react17.useState)(null);
   const [toolbarActionPending, setToolbarActionPending] = (0, import_react17.useState)({ refresh: false, add: false });
   const toolbarActionPendingRef = (0, import_react17.useRef)({ refresh: false, add: false });
-  const CHECKBOX_TAP_AREA = "relative max-lg:before:absolute max-lg:before:left-1/2 max-lg:before:top-1/2 max-lg:before:h-11 max-lg:before:w-11 max-lg:before:-translate-x-1/2 max-lg:before:-translate-y-1/2 max-lg:before:content-['']";
+  const CHECKBOX_TAP_AREA = "h-4 w-4 touch-manipulation";
   const mobileCardsClass = mobileCardsBreakpoint === "lg" ? "lg:hidden" : "sm:hidden";
   const tableWithCardsClass = mobileCardsBreakpoint === "lg" ? "max-lg:hidden" : "max-sm:hidden";
   const controlledQuery = query?.mode === "controlled" || query?.mode === "controlled-local" || query?.mode === "controlled-append" ? query : null;
@@ -8515,7 +8518,7 @@ function MatrxDataTableCore({
       ...selectionWidth === void 0 ? {} : { selectionWidth },
       ...actionsWidth === void 0 ? {} : { actionsWidth }
     };
-  }, []);
+  }, [resolvedDensity]);
   const captureResizeGestureSnapshot = (0, import_react17.useCallback)(() => {
     resizeGestureSnapshotRef.current = {
       widths: measureVisibleColumnWidths(),
@@ -8586,6 +8589,27 @@ function MatrxDataTableCore({
     }
     if (fixedTableGeometry === null) setFixedTableGeometry(measureFixedTableGeometry());
   }, [fixedTableGeometry, measureFixedTableGeometry, usesMeasuredFixedLayout]);
+  (0, import_react17.useLayoutEffect)(() => {
+    if (!usesMeasuredFixedLayout) return;
+    const table = tableRef.current;
+    if (!table) return;
+    const utilityHeaders = Array.from(table.querySelectorAll(
+      "th[data-matrx-table-selection-column], th[data-matrx-table-actions-column]"
+    ));
+    const utilityStyles = utilityHeaders.map((header) => header.getAttribute("style"));
+    const resizedWidth = table.style.getPropertyValue("--matrx-resized-table-width");
+    for (const header of utilityHeaders) header.removeAttribute("style");
+    table.style.removeProperty("--matrx-resized-table-width");
+    void table.getBoundingClientRect();
+    const geometry = measureFixedTableGeometry();
+    utilityHeaders.forEach((header, index) => {
+      const style = utilityStyles[index];
+      if (style == null) header.removeAttribute("style");
+      else header.setAttribute("style", style);
+    });
+    table.style.setProperty("--matrx-resized-table-width", resizedWidth);
+    setFixedTableGeometry(geometry);
+  }, [resolvedDensity, measureFixedTableGeometry, usesMeasuredFixedLayout]);
   const fixedLayoutActive = usesMeasuredFixedLayout && fixedTableGeometry !== null;
   const declaredVisibleCopyColumns = (0, import_react17.useMemo)(
     () => visibleColumns.filter((column) => column.accessorFn !== void 0 || column.accessorKey !== void 0),
@@ -9391,16 +9415,10 @@ function MatrxDataTableCore({
           {
             ref: setDiagnosticBoundaryRef,
             "data-matrx-table": true,
+            "data-matrx-table-density": resolvedDensity,
             "data-url-state-table": urlState?.id,
             className: cn(
-              // The touch-target floor deliberately SKIPS checkboxes, radios and
-              // switches. Radix renders those as `<button role="checkbox">`, so the
-              // blanket `[&_button]` rule inflated a 14px checkbox into a 44×44
-              // bordered empty box — measured on Search Console → Queries at 375px,
-              // where every row read as an empty text input rather than a selection
-              // control. The control keeps its own size and gains the 44px tap area
-              // as an invisible ::before below.
-              "flex h-full min-h-0 flex-col gap-2 p-2 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-h-11 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-w-11 max-lg:[&_input]:min-h-11 max-lg:[&_table_a]:inline-flex max-lg:[&_table_a]:min-h-11 max-lg:[&_table_a]:items-center",
+              "flex h-full min-h-0 flex-col gap-2 px-0 py-2",
               className
             ),
             children: [
@@ -9902,13 +9920,24 @@ function MatrxDataTableCore({
                                     className: "h-9 w-9 px-2 text-left align-middle",
                                     style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
                                     children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                      Checkbox,
+                                      "div",
                                       {
-                                        className: CHECKBOX_TAP_AREA,
-                                        checked: allOnPageSelected ? true : someOnPageSelected ? "indeterminate" : false,
-                                        disabled: selectableRows.length === 0,
-                                        onCheckedChange: toggleAllOnPage,
-                                        "aria-label": allOnPageSelected ? "Clear selection on this page" : "Select every row on this page"
+                                        "data-matrx-table-selection-target": true,
+                                        onClick: (event) => {
+                                          if (event.target === event.currentTarget) {
+                                            event.currentTarget.querySelector('[role="checkbox"]')?.click();
+                                          }
+                                        },
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                          Checkbox,
+                                          {
+                                            className: CHECKBOX_TAP_AREA,
+                                            checked: allOnPageSelected ? true : someOnPageSelected ? "indeterminate" : false,
+                                            disabled: selectableRows.length === 0,
+                                            onCheckedChange: toggleAllOnPage,
+                                            "aria-label": allOnPageSelected ? "Clear selection on this page" : "Select every row on this page"
+                                          }
+                                        )
                                       }
                                     )
                                   }
@@ -10083,12 +10112,23 @@ function MatrxDataTableCore({
                                             style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
                                             onClick: (e) => e.stopPropagation(),
                                             children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                              Checkbox,
+                                              "div",
                                               {
-                                                className: CHECKBOX_TAP_AREA,
-                                                checked: isChecked,
-                                                "aria-label": `Select this ${selectionNoun}`,
-                                                onClick: (e) => toggleRowSelected(index, e.shiftKey)
+                                                "data-matrx-table-selection-target": true,
+                                                onClick: (event) => {
+                                                  if (event.target === event.currentTarget) {
+                                                    event.currentTarget.querySelector('[role="checkbox"]')?.click();
+                                                  }
+                                                },
+                                                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                                  Checkbox,
+                                                  {
+                                                    className: CHECKBOX_TAP_AREA,
+                                                    checked: isChecked,
+                                                    "aria-label": `Select this ${selectionNoun}`,
+                                                    onClick: (e) => toggleRowSelected(index, e.shiftKey)
+                                                  }
+                                                )
                                               }
                                             ) : null
                                           }