@ai-matrx/design-system 0.21.0 → 0.21.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.21.2
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.21.1..npm/design-system/v0.21.2 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
+## 0.21.1
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.21.0..npm/design-system/v0.21.1 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.21.0
 
 **The Button touch floor.** Every rung of the size scale below `xl` was shorter
@@ -33,6 +45,12 @@ and pins the no-inversion ordering. Proven red with the attribute removed.
 small buttons sit in fixed-height rows; a control that is genuinely not a finger
 target takes `data-touch-exempt` with a reason at the call site.
 
+## 0.20.22
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.20.21..npm/design-system/v0.20.22 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.20.21
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

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-B99KFITZ.cjs';
+import { f as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-Bt-0UhEw.cjs';
 import '../extensions-DCHtNwG3.cjs';
 import '@ai-matrx/kit/content-transfer';
 import 'react';

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-CryQuMmz.js';
+import { f as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-DnnvjGV4.js';
 import '../extensions-DCHtNwG3.js';
 import '@ai-matrx/kit/content-transfer';
 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-B99KFITZ.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-Bt-0UhEw.cjs';
 import '../extensions-DCHtNwG3.cjs';
 import '@ai-matrx/kit/content-transfer';
 import 'react';

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-CryQuMmz.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-DnnvjGV4.js';
 import '../extensions-DCHtNwG3.js';
 import '@ai-matrx/kit/content-transfer';
 import 'react';

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, c as MatrxDataTableDensity } from '../types-B99KFITZ.cjs';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity } from '../types-Bt-0UhEw.cjs';
 import '../extensions-DCHtNwG3.cjs';
 import '@ai-matrx/kit/content-transfer';
 

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, c as MatrxDataTableDensity } from '../types-CryQuMmz.js';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity } from '../types-DnnvjGV4.js';
 import '../extensions-DCHtNwG3.js';
 import '@ai-matrx/kit/content-transfer';
 

package/dist/data-table/index.cjs

@@ -8541,6 +8541,7 @@ function MatrxDataTableCore({
   localPagination,
   pageSizeOptions = [10, 25, 50, 100, 200, 500, 1e3, 2e3],
   zebra = true,
+  stickyHeader = true,
   className,
   tableClassName,
   mobileCards,
@@ -8791,7 +8792,10 @@ function MatrxDataTableCore({
   ]);
   const scrollRef = (0, import_react19.useRef)(null);
   const tableRef = (0, import_react19.useRef)(null);
+  const tableHeaderRef = (0, import_react19.useRef)(null);
   const cardsScrollRef = (0, import_react19.useRef)(null);
+  const [documentStickyHeader, setDocumentStickyHeader] = (0, import_react19.useState)(false);
+  const documentStickyHeaderRef = (0, import_react19.useRef)(false);
   const previousAppendKeyForScrollReset = (0, import_react19.useRef)(appendQueryKey);
   (0, import_react19.useLayoutEffect)(() => {
     const previous = previousAppendKeyForScrollReset.current;
@@ -8853,6 +8857,65 @@ function MatrxDataTableCore({
       observer?.disconnect();
     };
   }, [updateScrollHint, data, columns]);
+  (0, import_react19.useLayoutEffect)(() => {
+    const scroll = scrollRef.current;
+    const table = tableRef.current;
+    const header = tableHeaderRef.current;
+    if (!scroll || !table || !header || !stickyHeader) return;
+    let frame = 0;
+    const update = () => {
+      const hasInternalVerticalScroll = scroll.scrollHeight > scroll.clientHeight + 1;
+      const nextDocumentSticky = !hasInternalVerticalScroll;
+      if (documentStickyHeaderRef.current !== nextDocumentSticky) {
+        documentStickyHeaderRef.current = nextDocumentSticky;
+        setDocumentStickyHeader(nextDocumentSticky);
+      }
+      if (!nextDocumentSticky) {
+        header.style.setProperty("--matrx-document-sticky-offset", "0px");
+        return;
+      }
+      const previousOffset = Number.parseFloat(
+        header.style.getPropertyValue("--matrx-document-sticky-offset")
+      ) || 0;
+      const headerRect = header.getBoundingClientRect();
+      const naturalHeaderTop = headerRect.top - previousOffset;
+      const tableRect = table.getBoundingClientRect();
+      let scrollTargetTop = 0;
+      for (let ancestor = scroll.parentElement; ancestor; ancestor = ancestor.parentElement) {
+        const ancestorStyle = window.getComputedStyle(ancestor);
+        const overflowY = ancestorStyle.overflowY;
+        if (/^(auto|scroll|overlay)$/.test(overflowY) && ancestor.scrollHeight > ancestor.clientHeight + 1) {
+          const scrollPaddingTop = Number.parseFloat(ancestorStyle.scrollPaddingTop) || 0;
+          scrollTargetTop = ancestor.getBoundingClientRect().top + scrollPaddingTop;
+          break;
+        }
+      }
+      const offset = Math.max(
+        0,
+        Math.min(
+          scrollTargetTop - naturalHeaderTop,
+          tableRect.bottom - headerRect.height - naturalHeaderTop
+        )
+      );
+      header.style.setProperty("--matrx-document-sticky-offset", `${offset}px`);
+    };
+    const requestUpdate = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(update);
+    };
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(requestUpdate);
+    resizeObserver?.observe(scroll);
+    resizeObserver?.observe(table);
+    window.addEventListener("scroll", requestUpdate, true);
+    window.addEventListener("resize", requestUpdate);
+    requestUpdate();
+    return () => {
+      cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      window.removeEventListener("scroll", requestUpdate, true);
+      window.removeEventListener("resize", requestUpdate);
+    };
+  }, [stickyHeader, data, columns]);
   const [columnOrder, setColumnOrder] = (0, import_react19.useState)(() => columnState?.order ?? columns.map(columnId));
   const [hiddenColumnIds, setHiddenColumnIds] = (0, import_react19.useState)(
     () => new Set(columnState?.hidden ?? columns.filter((column) => column.hidden).map(columnId))
@@ -10230,7 +10293,7 @@ function MatrxDataTableCore({
                       "aria-busy": isLoading || isFetching,
                       ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
                       className: cn(
-                        "flex h-full min-h-0 flex-col gap-2 overflow-y-auto rounded-md border border-border bg-card p-2",
+                        "relative flex h-full min-h-0 flex-col gap-2 overflow-y-auto rounded-md border border-border bg-card p-2",
                         mobileCardsClass
                       ),
                       children: [
@@ -10238,7 +10301,7 @@ function MatrxDataTableCore({
                           "div",
                           {
                             role: "status",
-                            className: "h-0.5 shrink-0 overflow-hidden rounded-full bg-primary/15",
+                            className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
                               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
@@ -10360,7 +10423,7 @@ function MatrxDataTableCore({
                           "div",
                           {
                             role: "status",
-                            className: "sticky left-0 top-0 z-20 h-0.5 w-full overflow-hidden bg-primary/15",
+                            className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-full w-full animate-pulse bg-primary" }),
                               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "sr-only", children: "Refreshing table data" })
@@ -10385,142 +10448,153 @@ function MatrxDataTableCore({
                               fixedLayoutActive && "sm:table-fixed sm:max-w-none sm:w-[var(--matrx-resized-table-width)]"
                             ),
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("thead", { className: "sticky top-0 z-10 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { children: [
-                                selection ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                                  "th",
-                                  {
-                                    "data-matrx-table-selection-column": true,
-                                    className: "h-9 w-9 px-2 text-left align-middle",
-                                    style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                                      "div",
+                              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                                "thead",
+                                {
+                                  ref: tableHeaderRef,
+                                  "data-matrx-table-sticky-header": stickyHeader ? "true" : void 0,
+                                  className: cn(
+                                    "z-10 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm",
+                                    stickyHeader && (documentStickyHeader ? "relative translate-y-[var(--matrx-document-sticky-offset)]" : "sticky top-0")
+                                  ),
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { children: [
+                                    selection ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                                      "th",
                                       {
-                                        "data-matrx-table-selection-target": true,
-                                        onClick: (event) => {
-                                          if (event.target === event.currentTarget) {
-                                            event.currentTarget.querySelector('[role="checkbox"]')?.click();
-                                          }
-                                        },
+                                        "data-matrx-table-selection-column": true,
+                                        className: "h-9 w-9 px-2 text-left align-middle",
+                                        style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
                                         children: /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.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"
+                                              }
+                                            )
                                           }
                                         )
                                       }
-                                    )
-                                  }
-                                ) : null,
-                                visibleColumns.map((col) => {
-                                  const id = columnId(col);
-                                  const meta = filterMeta.get(id);
-                                  const isSorted = sort?.id === id;
-                                  const headerLabel = col.label ?? (typeof col.header === "string" ? col.header : id);
-                                  const defaultSortDirection = col.defaultSortDirection ?? "asc";
-                                  const isColumnDragShadow = columnDragPreview?.draggedId === id && columnDragPreview.targetId !== null;
-                                  const columnResizable = resizableColumns && col.resizable !== false;
-                                  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-                                    "th",
-                                    {
-                                      "data-matrx-table-column-id": id,
-                                      "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
-                                      "aria-sort": isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : void 0,
-                                      className: cn(
-                                        "relative h-9 text-left align-middle max-sm:whitespace-nowrap",
-                                        // ICON COLUMN (MatrxColumnDef.compact): a 40px star
-                                        // column cannot honor `width: 40` while paying 16px of
-                                        // padding for a 14px glyph.
-                                        col.compact ? "px-1" : "px-2",
-                                        // An intentional mobile column set (see
-                                        // MatrxColumnDef.mobileHidden). CSS, not a JS
-                                        // breakpoint — no hydration mismatch, and the column
-                                        // stays sortable/filterable from the toolbar.
-                                        col.mobileHidden && "max-sm:hidden",
-                                        // Consumer widths are desktop tuning: applied from `sm`
-                                        // up via a CSS var. The minimum is load-bearing: without
-                                        // it, a crowded table crushes a declared 190px column to a
-                                        // few characters wide instead of using the canonical
-                                        // horizontal-scroll surface.
-                                        (col.width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
-                                        col.headerClassName,
-                                        isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
-                                        col.align === "center" && "text-center",
-                                        col.align === "right" && "text-right"
-                                      ),
-                                      style: columnWidthVar(col.width, effectiveColumnWidths[id], id, columnResizable),
-                                      children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime40.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;
+                                    ) : null,
+                                    visibleColumns.map((col) => {
+                                      const id = columnId(col);
+                                      const meta = filterMeta.get(id);
+                                      const isSorted = sort?.id === id;
+                                      const headerLabel = col.label ?? (typeof col.header === "string" ? col.header : id);
+                                      const defaultSortDirection = col.defaultSortDirection ?? "asc";
+                                      const isColumnDragShadow = columnDragPreview?.draggedId === id && columnDragPreview.targetId !== null;
+                                      const columnResizable = resizableColumns && col.resizable !== false;
+                                      return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+                                        "th",
+                                        {
+                                          "data-matrx-table-column-id": id,
+                                          "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
+                                          "aria-sort": isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : void 0,
+                                          className: cn(
+                                            "relative h-9 text-left align-middle max-sm:whitespace-nowrap",
+                                            // ICON COLUMN (MatrxColumnDef.compact): a 40px star
+                                            // column cannot honor `width: 40` while paying 16px of
+                                            // padding for a 14px glyph.
+                                            col.compact ? "px-1" : "px-2",
+                                            // An intentional mobile column set (see
+                                            // MatrxColumnDef.mobileHidden). CSS, not a JS
+                                            // breakpoint — no hydration mismatch, and the column
+                                            // stays sortable/filterable from the toolbar.
+                                            col.mobileHidden && "max-sm:hidden",
+                                            // Consumer widths are desktop tuning: applied from `sm`
+                                            // up via a CSS var. The minimum is load-bearing: without
+                                            // it, a crowded table crushes a declared 190px column to a
+                                            // few characters wide instead of using the canonical
+                                            // horizontal-scroll surface.
+                                            (col.width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
+                                            col.headerClassName,
+                                            isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
+                                            col.align === "center" && "text-center",
+                                            col.align === "right" && "text-right"
+                                          ),
+                                          style: columnWidthVar(col.width, effectiveColumnWidths[id], id, columnResizable),
+                                          children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime40.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({ id, direction: "asc" });
+                                                },
+                                                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,
+                                                reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
                                               }
-                                              if (sort?.direction === "asc") {
-                                                setSort({ id, direction: "desc" });
-                                                return;
+                                            ) }),
+                                            columnResizable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                                              ColumnResizeHandle,
+                                              {
+                                                columnId: id,
+                                                label: headerLabel,
+                                                tableRef,
+                                                minWidth: col.minWidth,
+                                                maxWidth: col.maxWidth,
+                                                onResizeStart: captureResizeGestureSnapshot,
+                                                onResizeCancel: clearResizeGestureSnapshot,
+                                                onResizeCommit: (columnId2, width) => commitColumnWidths(
+                                                  { ...effectiveColumnWidths, [columnId2]: width },
+                                                  true
+                                                )
                                               }
-                                              setSort({ id, direction: "asc" });
-                                            },
-                                            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,
-                                            reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
-                                          }
-                                        ) }),
-                                        columnResizable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                                          ColumnResizeHandle,
-                                          {
-                                            columnId: id,
-                                            label: headerLabel,
-                                            tableRef,
-                                            minWidth: col.minWidth,
-                                            maxWidth: col.maxWidth,
-                                            onResizeStart: captureResizeGestureSnapshot,
-                                            onResizeCancel: clearResizeGestureSnapshot,
-                                            onResizeCommit: (columnId2, width) => commitColumnWidths(
-                                              { ...effectiveColumnWidths, [columnId2]: width },
-                                              true
-                                            )
-                                          }
-                                        ) : null
-                                      ]
-                                    },
-                                    id
-                                  );
-                                }),
-                                showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                                  "th",
-                                  {
-                                    "data-matrx-table-actions-column": true,
-                                    className: "h-9 w-px px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
-                                    style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
-                                    children: "Actions"
-                                  }
-                                )
-                              ] }) }),
+                                            ) : null
+                                          ]
+                                        },
+                                        id
+                                      );
+                                    }),
+                                    showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                                      "th",
+                                      {
+                                        "data-matrx-table-actions-column": true,
+                                        className: "h-9 w-px px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                                        style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
+                                        children: "Actions"
+                                      }
+                                    )
+                                  ] })
+                                }
+                              ),
                               /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tbody", { children: [
                                 isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { className: "border-b border-border/60", children: [
                                   selection ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-2 py-2", style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,