gridsmith-ui 0.17.3 → 0.18.0

package/README.md

@@ -1,10 +1,10 @@
 # gridsmith-ui
 
-98 React components with a CSS custom property theming engine, 14 chart components, and 5 icon packs.
+103 React components with a CSS custom property theming engine, 13 chart components, and 5 icon packs.
 
 ## Installation
 
-gridsmith-ui needs React 19. On a React 18 project, upgrade `react`, `react-dom`, `@types/react` and `@types/react-dom` to 19 first; installing with `--force` or `--legacy-peer-deps` gives an app that cannot run.
+gridsmith-ui needs React 19. On a React 18 project, upgrade `react`, `react-dom`, `@types/react` and `@types/react-dom` to 19 first; installing with `--force` or `--legacy-peer-deps` gives an app that cannot run. On React 18, `AppShell` and `PageContainer` stop with an error that says so.
 
 ```bash
 npm install gridsmith-ui
@@ -18,7 +18,7 @@ npm install recharts
 
 ### Heavy components (optional)
 
-Five components depend on large third-party libraries. They live in their own entry points so the main bundle stays small — install the library only if you use the component:
+Seven components depend on large third-party libraries. They live in six entry points of their own so the main bundle stays small — install the library only if you use the component:
 
 ```bash
 npm install @tiptap/react @tiptap/pm @tiptap/starter-kit lowlight \
@@ -28,18 +28,19 @@ npm install @tiptap/react @tiptap/pm @tiptap/starter-kit lowlight \
   @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header \
   @tiptap/extension-table-row @tiptap/extension-task-item @tiptap/extension-task-list \
   @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-underline   # gridsmith-ui/editor
+npm install react-markdown remark-gfm                            # gridsmith-ui/chat
 npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities   # gridsmith-ui/kanban
 npm install @tanstack/react-table                                # gridsmith-ui/data-grid
 npm install @tanstack/react-virtual                              # gridsmith-ui/virtualized
 npm install react-resizable-panels                               # gridsmith-ui/resizable
 ```
 
-### Icon packs (optional)
+### Icon packs
 
-The `Icon` component uses `lucide-react` by default. Other packs are loaded on demand — install only what you need:
+The `Icon` component uses `lucide-react` by default, and every other pack falls back to it for a missing name, so always install it. Other packs are loaded on demand — install only what you need:
 
 ```bash
-# Default (recommended)
+# Default and fallback (required)
 npm install lucide-react
 
 # Alternative packs
@@ -58,11 +59,13 @@ Import the design tokens and Tailwind bindings in your CSS entry point:
 @import "gridsmith-ui/roots.css";
 @import "gridsmith-ui/tokens.css";
 @import "gridsmith-ui/tailwind.css";
+@source "../node_modules/gridsmith-ui/dist/*.js";
 ```
 
 - **roots.css** — the CSS custom property engine (L1 roots, L2 derived scales, L3 semantics)
-- **tokens.css** — default Precision Minimal preset values (optional: use `generate-tokens.ts` to customise)
+- **tokens.css** — default Precision Minimal preset values (a Gridsmith project imports the `tokens_css` from `get_tokens` called with `css: true`, saved as `gridsmith-tokens.css`, instead)
 - **tailwind.css** — maps `--ds-*` tokens to Tailwind utilities (`p-ds-4`, `text-2xs`, `opacity-disabled`)
+- **@source** — tells Tailwind to scan the compiled components; without it they render unstyled. It must come after every `@import`.
 
 For the fastest icon rendering on cold loads, call `preloadPack` in your entry point before `createRoot`:
 
@@ -75,13 +78,14 @@ preloadPack("lucide");
 
 | Import path | What it provides |
 |---|---|
-| `gridsmith-ui` | 97 components (actions, forms, data display, navigation, overlays, feedback, layout) |
-| `gridsmith-ui/charts` | 14 chart components (Bar, Line, Area, Pie, Composite, Scatter, Radar, RadialBar, Funnel, Treemap, Sankey, Sparkline, ChartContainer) + `useChartColors` hook |
+| `gridsmith-ui` | 96 components (actions, forms, data display, navigation, overlays, feedback, layout) |
+| `gridsmith-ui/charts` | 13 chart components (Bar, Line, Area, Pie, Composite, Scatter, Radar, RadialBar, Funnel, Treemap, Sankey, Sparkline, ChartContainer) + `useChartColors` hook + `categoryKind()` |
 | `gridsmith-ui/editor` | `RichTextEditor` (requires the tiptap packages + `lowlight`) |
+| `gridsmith-ui/chat` | `MarkdownContent` for chat replies; pass it to `ChatMessageList`'s `renderContent` (requires `react-markdown` + `remark-gfm`) |
 | `gridsmith-ui/kanban` | `KanbanBoard` (requires `@dnd-kit/*`) |
 | `gridsmith-ui/data-grid` | `DataGrid` (requires `@tanstack/react-table`) |
 | `gridsmith-ui/virtualized` | `VirtualizedList` (requires `@tanstack/react-virtual`) |
-| `gridsmith-ui/resizable` | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` (requires `react-resizable-panels`) |
+| `gridsmith-ui/resizable` | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`, `SplitView` (requires `react-resizable-panels`) |
 | `gridsmith-ui/icons` | `Icon`, `IconProvider`, `preloadPack` — 5 icon packs with two-phase loading |
 | `gridsmith-ui/utils` | `cn()` — className merge utility (clsx + tailwind-merge) |
 | `gridsmith-ui/roots.css` | CSS custom property engine |
@@ -94,10 +98,11 @@ preloadPack("lucide");
 import { Button, Card, Input, Table } from "gridsmith-ui";
 import { BarChart, LineChart } from "gridsmith-ui/charts";
 import { RichTextEditor } from "gridsmith-ui/editor";
+import { MarkdownContent } from "gridsmith-ui/chat";
 import { KanbanBoard } from "gridsmith-ui/kanban";
 import { DataGrid } from "gridsmith-ui/data-grid";
 import { VirtualizedList } from "gridsmith-ui/virtualized";
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "gridsmith-ui/resizable";
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle, SplitView } from "gridsmith-ui/resizable";
 import { Icon, IconProvider } from "gridsmith-ui/icons";
 import { cn } from "gridsmith-ui/utils";
 ```
@@ -134,10 +139,11 @@ Wrap your app in `<IconProvider>` to select a pack:
 
 | Package | Required |
 |---------|----------|
-| `react` / `react-dom` | Yes (^18 or ^19) |
-| `lucide-react` | Optional (default icon pack) |
+| `react` / `react-dom` | Yes (^19) |
+| `lucide-react` | Yes (the default icon pack and every pack's fallback) |
 | `recharts` | Optional (required for `gridsmith-ui/charts`) |
 | `@tiptap/*`, `lowlight` | Optional (required for `gridsmith-ui/editor`) |
+| `react-markdown`, `remark-gfm` | Optional (required for `gridsmith-ui/chat`) |
 | `@dnd-kit/*` | Optional (required for `gridsmith-ui/kanban`) |
 | `@tanstack/react-table` | Optional (required for `gridsmith-ui/data-grid`) |
 | `@tanstack/react-virtual` | Optional (required for `gridsmith-ui/virtualized`) |

package/dist/index.d.ts

@@ -682,16 +682,23 @@ interface TableProps {
      * The table's title inside its frame (Sprint 25.9, A1): a heading in CardTitle's style at CardHeader's inset, in a band
      * above the scroll area that never scrolls sideways, and the `<table>`'s name. Title a table this way or with a
      * SectionHeading above it — the same way as the blocks beside it (page_composition#45). In card mode, and while it
-     * loads or is empty there, the same heading sits above the cards. Without a title the table renders as before.
+     * loads or is empty there, the same heading sits above the cards. Without a title the frame holds the scroll area
+     * alone.
      */
     title?: string;
     /** A line under the title, which also describes the `<table>` (aria-describedby). Needs `title`. */
     description?: string;
     /** The table's buttons, at the end of the title band as in a CardHeader. Needs `title`. */
     actions?: ReactNode;
+    /**
+     * The table's name for assistive tech when it has no title (a title names a titled one): the `<table>`'s label, and
+     * its scroll region's while it scrolls, which is otherwise "Table". Two untitled tables on one page need a name each,
+     * or their regions share one (Sprint 25.10 review).
+     */
+    "aria-label"?: string;
     ref?: Ref<HTMLDivElement>;
 }
-declare function Table({ columns, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, title, description, actions, ref, }: TableProps): react_jsx_runtime.JSX.Element;
+declare function Table({ columns, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, title, description, actions, "aria-label": ariaLabel, ref, }: TableProps): react_jsx_runtime.JSX.Element;
 
 interface CalendarEvent {
     id: string;

package/dist/index.js

@@ -19,7 +19,7 @@ import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-4LDYR7QP.js';
 import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING } from './chunk-4KVFH5KC.js';
-import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, useId, memo, useEffect, useImperativeHandle, Children, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, Children, isValidElement, useId, memo, useEffect, useImperativeHandle, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -4907,6 +4907,17 @@ function MentionInput({
     )
   ] });
 }
+var HEADER_LAYOUT = {
+  row: "flex flex-wrap items-start justify-between gap-ds-4",
+  block: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words",
+  titleLeads: "grow basis-1/2 max-w-max [min-width:min-content] break-words",
+  actions: "flex items-center gap-ds-2 shrink-0 ml-auto",
+  below: "mt-ds-1.5"
+};
+function actionsAreBadges(actions) {
+  const items = Children.toArray(actions);
+  return items.length > 0 && items.every((item) => isValidElement(item) && (item.type === Fragment$1 ? actionsAreBadges(item.props.children) : item.type === Badge));
+}
 var CardCtx = createContext(false);
 var CardActionCtx = createContext(null);
 var CARD_ACTION_ATTR = "data-card-action";
@@ -5149,7 +5160,7 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
   const isCheckable = useContext(CardCtx);
   const hasActions = actions || menuItems;
   const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
-  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 shrink-0 ml-auto", children: [
+  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.actions, children: [
     actions,
     menuItems && /* @__PURE__ */ jsx(
       DropdownMenu,
@@ -5174,8 +5185,20 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
   ] }) : null;
   const iconBlock = icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center mb-ds-1", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) }) : null;
   if (hasActions) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-ds-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words", children: [
+    const parts = Children.toArray(children);
+    const titleLeads = !iconBlock && !menuItems && actionsAreBadges(actions) && parts.length > 0 && isValidElement(parts[0]) && parts[0].type === CardTitle;
+    if (titleLeads) {
+      const below = parts.slice(1);
+      return /* @__PURE__ */ jsxs("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: [
+        /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+          /* @__PURE__ */ jsx("div", { "data-card-title-row": "", className: HEADER_LAYOUT.titleLeads, children: parts[0] }),
+          actionsBlock
+        ] }),
+        below.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-ds-1.5 break-words", HEADER_LAYOUT.below), children: below })
+      ] });
+    }
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+      /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.block, children: [
         iconBlock,
         children
       ] }),
@@ -5599,6 +5622,69 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
     ] }, i);
   }) });
 }
+var EDGE_FADE = 24;
+var NONE = { left: false, right: false, vertical: false, gutterRight: 0, gutterBottom: 0 };
+var same = (a, b) => a.left === b.left && a.right === b.right && a.vertical === b.vertical && a.gutterRight === b.gutterRight && a.gutterBottom === b.gutterBottom;
+function useScrollEdges(options = {}) {
+  const { enabled = true, fade = EDGE_FADE } = options;
+  const elRef = useRef(null);
+  const observer = useRef(null);
+  const borders = useRef({ x: 0, y: 0 });
+  const [state, setState] = useState(NONE);
+  const measure = useCallback(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const next = {
+      left: el.scrollLeft > 1,
+      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
+      vertical: el.scrollHeight > el.clientHeight + 1,
+      gutterRight: Math.max(0, el.offsetWidth - el.clientWidth - borders.current.x),
+      gutterBottom: Math.max(0, el.offsetHeight - el.clientHeight - borders.current.y)
+    };
+    setState((prev) => same(prev, next) ? prev : next);
+  }, []);
+  const ref = useCallback((el) => {
+    observer.current?.disconnect();
+    observer.current = null;
+    elRef.current = el;
+    if (!el || !enabled) return;
+    const style = getComputedStyle(el);
+    const px = (v) => parseFloat(v) || 0;
+    borders.current = { x: px(style.borderLeftWidth) + px(style.borderRightWidth), y: px(style.borderTopWidth) + px(style.borderBottomWidth) };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const o = new ResizeObserver(measure);
+    o.observe(el);
+    for (const child of Array.from(el.children)) o.observe(child);
+    observer.current = o;
+  }, [enabled, measure]);
+  const shown = enabled && (state.left || state.right);
+  const { gutterRight: gr, gutterBottom: gb } = state;
+  const fadeLayer = `linear-gradient(to right, ${state.left ? `transparent 0, black ${fade}px` : "black 0"}, ${state.right ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : "black 100%"})`;
+  const gutters = [gb > 0 && { size: `100% ${gb}px`, position: "0 100%" }, gr > 0 && { size: `${gr}px 100%`, position: "100% 0" }].filter(Boolean);
+  const mask = shown ? {
+    image: [fadeLayer, ...gutters.map(() => "linear-gradient(black, black)")].join(", "),
+    size: ["100% 100%", ...gutters.map((g) => g.size)].join(", "),
+    position: ["0 0", ...gutters.map((g) => g.position)].join(", ")
+  } : void 0;
+  return {
+    /** The scroller's ref (a callback). */
+    ref,
+    /** The scroller itself, for code that moves it. */
+    elRef,
+    measure,
+    /** Content hides past a side edge: the scroller moves sideways, and its edges fade. */
+    overflowing: shown,
+    /** It scrolls either way, sideways or up and down: a keyboard needs to reach it. */
+    scrollable: enabled && (state.left || state.right || state.vertical),
+    edges: { left: state.left, right: state.right },
+    /** For the scroller: `data-fade` names the faded edges ("left", "right" or "left right"), the style masks them. */
+    fadeProps: {
+      "data-fade": shown ? [state.left && "left", state.right && "right"].filter(Boolean).join(" ") : void 0,
+      style: mask ? { maskImage: mask.image, WebkitMaskImage: mask.image, maskSize: mask.size, WebkitMaskSize: mask.size, maskPosition: mask.position, WebkitMaskPosition: mask.position, maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat" } : void 0
+    }
+  };
+}
 function TruncCell({ children, lines }) {
   const { ref, isTruncated } = useTextOverflow({ lines });
   const clampClass = lines === 1 ? "truncate" : `line-clamp-${lines}`;
@@ -5614,13 +5700,22 @@ var FRAME_CLASSES = cn(
   "bg-[var(--ds-bg-surface)]"
 );
 function TableHeading({ title, description, actions, titleId, descriptionId, inset }) {
-  return /* @__PURE__ */ jsxs("div", { "data-table-heading": "", className: cn("flex flex-wrap items-start justify-between gap-ds-4", inset ? "px-ds-5 py-ds-4" : "pb-ds-4"), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words", children: [
-      /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title }),
-      description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-[var(--ds-text-muted)]", children: description })
+  const heading = /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title });
+  const actionsBlock = actions ? /* @__PURE__ */ jsx("div", { className: HEADER_LAYOUT.actions, children: actions }) : null;
+  const descriptionText = (className) => description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: cn(className, "text-sm text-[var(--ds-text-muted)] break-words"), children: description }) : null;
+  return /* @__PURE__ */ jsx("div", { "data-table-heading": "", className: cn(inset ? "px-ds-5 py-ds-4" : "pb-ds-4"), children: actions && !actionsAreBadges(actions) ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+    /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.block, children: [
+      heading,
+      descriptionText()
     ] }),
-    actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0 ml-auto", children: actions })
-  ] });
+    actionsBlock
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+      /* @__PURE__ */ jsx("div", { className: HEADER_LAYOUT.titleLeads, children: heading }),
+      actionsBlock
+    ] }),
+    descriptionText(HEADER_LAYOUT.below)
+  ] }) });
 }
 function Table({
   columns,
@@ -5645,6 +5740,7 @@ function Table({
   title,
   description,
   actions,
+  "aria-label": ariaLabel,
   ref
 }) {
   const headingId = useId();
@@ -5716,6 +5812,8 @@ function Table({
   const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const isMobile = useBreakpoint(mobileBreakpoint);
+  const { ref: scrollRef, measure: measureScroll, scrollable, fadeProps } = useScrollEdges({ enabled: !isMobile });
+  const [regionFocused, setRegionFocused] = useState(false);
   const cardHeading = title ? /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: false }) : null;
   const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("flex flex-col", className), children: [
     cardHeading,
@@ -5766,7 +5864,7 @@ function Table({
     }) }) });
     return title ? titledCards(cards) : cards;
   }
-  const table = /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : {}, children: [
+  const table = /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
     /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
       selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(
         Checkbox,
@@ -5917,26 +6015,37 @@ function Table({
       ] }, i);
     }) })
   ] });
-  if (!title) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-ds-list": "",
-        "data-gs": "table",
-        className: cn(
-          "w-full overflow-x-auto",
-          FRAME_CLASSES,
-          className
-        ),
-        children: table
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("w-full flex flex-col", FRAME_CLASSES, className), children: [
-    /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
-    /* @__PURE__ */ jsx("div", { "data-table-scroll": "", className: "min-h-0 overflow-x-auto rounded-b-[inherit]", children: table })
-  ] });
+  const region = scrollable || regionFocused ? { tabIndex: 0, role: "region", ...title ? { "aria-labelledby": titleId } : { "aria-label": ariaLabel ?? "Table" } } : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-ds-list": "",
+      "data-gs": "table",
+      className: cn("w-full min-w-0 flex flex-col", FRAME_CLASSES, "has-[>[data-table-scroll]:focus-visible]:shadow-[var(--ds-shadow-focus)]", className),
+      children: [
+        title && /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            "data-table-scroll": "",
+            onScroll: measureScroll,
+            onFocus: (e) => {
+              if (e.target === e.currentTarget) setRegionFocused(true);
+            },
+            onBlur: (e) => {
+              if (e.target === e.currentTarget) setRegionFocused(false);
+            },
+            ...fadeProps,
+            ...region,
+            className: cn("min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
+            children: table
+          }
+        )
+      ]
+    }
+  );
 }
 function optionsKeyForFit(options) {
   return options.map((o) => `${o.value}:${o.label}`).join("|");
@@ -11121,40 +11230,22 @@ function trackClasses(orientation) {
     "border-b-[length:var(--ds-nav-h-track-border)] border-[var(--ds-border-default)]"
   );
 }
-var FADE = 24;
 function useScrollTrack(activeTab, enabled) {
-  const ref = useRef(null);
-  const [edges, setEdges] = useState({ left: false, right: false });
-  const measure = useCallback(() => {
-    const el = ref.current;
-    if (!el) return;
-    const left = el.scrollLeft > 1;
-    const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
-    setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
-  }, []);
-  useLayoutEffect(() => {
-    if (!enabled) return;
-    measure();
-    const el = ref.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(measure);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [enabled, measure]);
+  const { ref, elRef, measure, fadeProps } = useScrollEdges({ enabled });
   useLayoutEffect(() => {
     if (!enabled) return;
-    const el = ref.current;
+    const el = elRef.current;
     const tab = el?.querySelector('[role="tab"][aria-selected="true"]');
     if (!el || !tab) return;
     const start = tab.offsetLeft;
     const end = start + tab.offsetWidth;
-    if (start < el.scrollLeft + FADE) el.scrollLeft = Math.max(0, start - FADE);
-    else if (end > el.scrollLeft + el.clientWidth - FADE) el.scrollLeft = end - el.clientWidth + FADE;
+    if (start < el.scrollLeft + EDGE_FADE) el.scrollLeft = Math.max(0, start - EDGE_FADE);
+    else if (end > el.scrollLeft + el.clientWidth - EDGE_FADE) el.scrollLeft = end - el.clientWidth + EDGE_FADE;
     measure();
-  }, [activeTab, enabled, measure]);
+  }, [activeTab, enabled, measure, elRef]);
   useEffect(() => {
     if (!enabled) return;
-    const el = ref.current;
+    const el = elRef.current;
     if (!el) return;
     const onWheel = (e) => {
       if (el.scrollWidth <= el.clientWidth || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
@@ -11204,14 +11295,11 @@ function useScrollTrack(activeTab, enabled) {
       el.removeEventListener("pointercancel", onUp);
       el.removeEventListener("click", onClick, true);
     };
-  }, [enabled]);
-  const fade = enabled ? [edges.left && "left", edges.right && "right"].filter(Boolean).join(" ") : "";
-  const mask = fade ? `linear-gradient(to right, ${edges.left ? `transparent 0, black ${FADE}px` : "black 0"}, ${edges.right ? `black calc(100% - ${FADE}px), transparent 100%` : "black 100%"})` : void 0;
+  }, [enabled, elRef]);
   return {
     ref,
     onScroll: measure,
-    "data-fade": fade || void 0,
-    style: mask ? { maskImage: mask, WebkitMaskImage: mask } : void 0
+    ...fadeProps
   };
 }
 var SCROLL_TRACK = "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-w-full";