@duro-app/ui 0.45.0 → 0.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^0.45.0"
+    "@duro-app/tokens": "^0.47.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Table/FromTanstack.tsx

@@ -22,8 +22,8 @@ interface FromTanstackBaseProps<TData> {
   readonly variant?: TableVariant
   readonly size?: TableSize
   readonly responsive?: boolean
-  /** Min comfortable column width (px) before the table cards up. Forwarded
-   *  to Table.Root — see its `minColumnWidth`. Default 128. */
+  /** Min width (px) each flexible column keeps before the table scrolls
+   *  horizontally. Forwarded to Table.Root — see its `minColumnWidth`. */
   readonly minColumnWidth?: number
   /** Render a SortChip above the grid (stack-mode only). Options derive from
    *  columns where `column.getCanSort()` returns true. Wires value/onChange

package/src/components/Table/SortChip.tsx

@@ -13,13 +13,6 @@ export interface SortChipProps {
   readonly onChange: (next: SortValue | null) => void
   /** Visible label preceding the sort field, e.g. "Sort by". */
   readonly label?: string
-  /**
-   * Reveal the chip regardless of the container query. Injected by
-   * `Table.Root` when it force-stacks a cramped medium-width table (headers
-   * hidden but container wider than the mobile breakpoint, so the chip's own
-   * `@container` rule hasn't fired). Not part of the public API.
-   */
-  readonly forceShow?: boolean
 }
 
 /**
@@ -31,18 +24,12 @@ export interface SortChipProps {
  * couple to @tanstack/react-table — the consumer wires `value` and
  * `onChange` from whatever sort state they manage.
  */
-export function SortChip({
-  options,
-  value,
-  onChange,
-  label = 'Sort by',
-  forceShow = false,
-}: SortChipProps) {
+export function SortChip({options, value, onChange, label = 'Sort by'}: SortChipProps) {
   const current = value ? options.find((o) => o.id === value.id) : null
   const triggerLabel = current ? `${label}: ${current.label} ${value!.desc ? '↓' : '↑'}` : label
 
   return (
-    <html.div style={[styles.sortChip, forceShow && styles.sortChipStacked]}>
+    <html.div style={styles.sortChip}>
       <Menu.Root>
         <Menu.Trigger>{triggerLabel}</Menu.Trigger>
         <Menu.Popup>

package/src/components/Table/Table.stories.tsx

@@ -1137,80 +1137,112 @@ export const SlotPropsOnRoot: Story = {
 
 // --- Regression: many columns + long content must wrap, not overlap ---
 //
-// In a wide-but-tight container, columns whose combined content exceeds the
-// width used to keep their intrinsic size (minWidth: auto) and spill over their
-// grid track into the next column. Cells now shrink to their track and wrap.
-const overlapWrapStyles = css.create({
-  wide: {width: 760},
-  // 6 columns in 560px → each column would get < 128px (the min comfortable
-  // width), well above the 440px mobile breakpoint, so only the JS
-  // ResizeObserver — not the @container query — can catch the cramping.
-  cramped: {width: 560},
+// The responsive model: above the `sm` (640px) breakpoint a table stays
+// tabular and, if its columns don't fit, scrolls horizontally (each column
+// keeps a `minColumnWidth` floor); below `sm` it cards up. One uniform
+// breakpoint for every table — no per-table content measurement.
+const respStyles = css.create({
+  // 8 columns × 120px floor = 960px min. At 800px the grid overflows → the
+  // wrapper scrolls sideways, but it's still tabular (above 640).
+  scrollDense: {width: 800},
+  // Same table at 1120px: 960 < 1120, so it fits with no scrollbar.
+  roomy: {width: 1120},
+  // Below the 640px card breakpoint → cards.
+  phone: {width: 560},
 })
 
 const LONG_EMAIL = 'a-really-long-service-account.address@subdomain.example-company.com'
 
-export const ManyColumnsWrapNoOverlap: Story = {
+const grantsColumns = (
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell>Principal</Table.HeaderCell>
+      <Table.HeaderCell>Application</Table.HeaderCell>
+      <Table.HeaderCell>Role</Table.HeaderCell>
+      <Table.HeaderCell>Entitlement</Table.HeaderCell>
+      <Table.HeaderCell>Resource</Table.HeaderCell>
+      <Table.HeaderCell>Granted by</Table.HeaderCell>
+      <Table.HeaderCell>Expires</Table.HeaderCell>
+      <Table.HeaderCell>Status</Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+)
+const grantsRow = (
+  <Table.Row>
+    <Table.Cell>alice</Table.Cell>
+    <Table.Cell>Immich</Table.Cell>
+    <Table.Cell>Editor</Table.Cell>
+    <Table.Cell>library</Table.Cell>
+    <Table.Cell>all</Table.Cell>
+    <Table.Cell>daddy</Table.Cell>
+    <Table.Cell>Never</Table.Cell>
+    <Table.Cell>
+      <Badge variant="success">Active</Badge>
+    </Table.Cell>
+  </Table.Row>
+)
+
+// A dense table too narrow to fit but WIDER than the card breakpoint stays
+// tabular and scrolls sideways — the standard data-table behavior, and the
+// fix for grants carding up on a laptop.
+export const ScrollsHorizontallyWhenDense: Story = {
+  name: 'Scrolls horizontally when dense (not cards)',
   render: () => (
-    <html.div style={overlapWrapStyles.wide}>
+    <html.div style={respStyles.scrollDense}>
       <Table.Root>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>Display Name</Table.HeaderCell>
-            <Table.HeaderCell>Type</Table.HeaderCell>
-            <Table.HeaderCell>Email</Table.HeaderCell>
-            <Table.HeaderCell>Status</Table.HeaderCell>
-            <Table.HeaderCell width="max-content">Actions</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>SMTP submission service account</Table.Cell>
-            <Table.Cell>
-              <Badge>User</Badge>
-            </Table.Cell>
-            <Table.Cell>{LONG_EMAIL}</Table.Cell>
-            <Table.Cell>
-              <Badge variant="warning">No certs</Badge>
-            </Table.Cell>
-            <Table.Cell isActions>
-              <Button size="small">Send Cert</Button>
-              <Button size="small" variant="secondary">
-                Certificates
-              </Button>
-              <Button size="small" variant="danger">
-                Revoke All
-              </Button>
-            </Table.Cell>
-          </Table.Row>
-        </Table.Body>
+        {grantsColumns}
+        <Table.Body>{grantsRow}</Table.Body>
       </Table.Root>
     </html.div>
   ),
   play: async ({canvas}) => {
-    const emailCell = canvas.getByText(LONG_EMAIL).closest('[role="cell"]') as HTMLElement
-    await expect(emailCell).toBeTruthy()
-    // The long email wraps inside its column instead of overflowing into the
-    // next one: the cell's content is no wider than the cell box.
-    await expect(emailCell.scrollWidth).toBeLessThanOrEqual(emailCell.clientWidth + 2)
+    const grid = canvas.getByRole('table')
+    const scroller = grid.parentElement as HTMLElement
+    await waitFor(async () => {
+      // Still tabular: all 8 headers present (NOT carded up).
+      await expect(canvas.queryAllByRole('columnheader')).toHaveLength(8)
+    })
+    // The wrapper scrolls: content (8 × 120px ≈ 960) exceeds its 800px box.
+    await expect(scroller.scrollWidth).toBeGreaterThan(scroller.clientWidth + 2)
   },
 }
 
-// A dense table wider than the 440px mobile breakpoint but too narrow to give
-// each column a comfortable width. The @container query never fires (560 >
-// 440), so this asserts the JS ResizeObserver force-stacks it into cards:
-// 6 columns × 128px default = 768px threshold > 560px container.
-export const AutoStacksWhenCramped: Story = {
-  name: 'Auto-stacks when columns get cramped',
+// Same table with room: fits, no horizontal scrollbar, stays tabular. Guards
+// against the old column-count heuristic that carded this up on a laptop.
+export const ManyColumnsFitNoScroll: Story = {
+  name: 'Many columns fit — no scroll, no cards',
   render: () => (
-    <html.div style={overlapWrapStyles.cramped}>
+    <html.div style={respStyles.roomy}>
+      <Table.Root>
+        {grantsColumns}
+        <Table.Body>{grantsRow}</Table.Body>
+      </Table.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const grid = canvas.getByRole('table')
+    const scroller = grid.parentElement as HTMLElement
+    await waitFor(async () => {
+      await expect(canvas.queryAllByRole('columnheader')).toHaveLength(8)
+    })
+    const tracks = getComputedStyle(grid).gridTemplateColumns.trim().split(/\s+/)
+    await expect(tracks.length).toBe(8)
+    // No horizontal overflow: the grid fits its container.
+    await expect(scroller.scrollWidth).toBeLessThanOrEqual(scroller.clientWidth + 2)
+  },
+}
+
+// Below the single 640px card breakpoint every table cards up: header hides,
+// each row becomes a label/value card.
+export const CardsBelowMobileBreakpoint: Story = {
+  name: 'Cards below the mobile breakpoint',
+  render: () => (
+    <html.div style={respStyles.phone}>
       <Table.Root>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Display Name</Table.HeaderCell>
-            <Table.HeaderCell>Type</Table.HeaderCell>
             <Table.HeaderCell>Email</Table.HeaderCell>
-            <Table.HeaderCell>Status</Table.HeaderCell>
             <Table.HeaderCell>Owner</Table.HeaderCell>
             <Table.HeaderCell width="max-content">Actions</Table.HeaderCell>
           </Table.Row>
@@ -1218,19 +1250,10 @@ export const AutoStacksWhenCramped: Story = {
         <Table.Body>
           <Table.Row>
             <Table.Cell>SMTP submission service account</Table.Cell>
-            <Table.Cell>
-              <Badge>User</Badge>
-            </Table.Cell>
             <Table.Cell>{LONG_EMAIL}</Table.Cell>
-            <Table.Cell>
-              <Badge variant="warning">No certs</Badge>
-            </Table.Cell>
             <Table.Cell>daddy</Table.Cell>
             <Table.Cell isActions>
               <Button size="small">Send Cert</Button>
-              <Button size="small" variant="secondary">
-                Revoke
-              </Button>
             </Table.Cell>
           </Table.Row>
         </Table.Body>
@@ -1239,18 +1262,11 @@ export const AutoStacksWhenCramped: Story = {
   ),
   play: async ({canvas}) => {
     const grid = canvas.getByRole('table')
-    // ResizeObserver fires post-layout; wait for the stack decision to commit.
-    await waitFor(async () => {
-      // The grid collapses to a single column — one resolved track, no spaces.
-      const tracks = getComputedStyle(grid).gridTemplateColumns.trim().split(/\s+/)
-      await expect(tracks.length).toBe(1)
-    })
-    // Header group is display:none, so it drops out of the accessibility tree:
-    // no column headers remain queryable, leaving only the body rowgroup.
+    // Single-track grid = card layout (the @container rule fires below 640).
+    const tracks = getComputedStyle(grid).gridTemplateColumns.trim().split(/\s+/)
+    await expect(tracks.length).toBe(1)
+    // Header hidden → out of the a11y tree; each cell surfaces its label span.
     await expect(canvas.queryAllByRole('columnheader')).toHaveLength(0)
-    await expect(canvas.getAllByRole('rowgroup')).toHaveLength(1)
-    // Each body cell now surfaces its label span (label|value card rows). The
-    // hidden header 'Owner' stays in the DOM, so pick the visible <span>.
     const ownerLabel = canvas
       .getAllByText('Owner')
       .find((el) => el.tagName.toLowerCase() === 'span') as HTMLElement

package/src/components/Table/Table.tsx

@@ -3,12 +3,8 @@ import {
   type ReactNode,
   type MutableRefObject,
   createContext,
-  cloneElement,
   useContext,
-  useEffect,
-  useLayoutEffect,
   useRef,
-  useState,
   Children,
   isValidElement,
 } from 'react'
@@ -35,20 +31,8 @@ interface TableContextValue {
   labels: ReadonlyArray<string>
   /** Mutable ref: header Row writes inferred template, Root reads it */
   inferredTemplateRef: MutableRefObject<string | null>
-  /** JS-measured force-stack flag. True when Root's ResizeObserver finds the
-   *  container too narrow for its column count (cells would be crushed), so
-   *  every cell/row/header also applies its `*Stacked` variant. Independent
-   *  of the @container base, which still handles genuinely narrow widths. */
-  stacked: boolean
 }
 
-// useLayoutEffect measures + commits the stack decision before the browser
-// paints, so a client-rendered narrow table shows cards on first frame
-// rather than flashing tabular. On the server it would warn (no layout), so
-// fall back to useEffect there — SSR always emits the non-stacked markup and
-// the @container CSS covers true mobile without JS.
-const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
 const TableContext = createContext<TableContextValue | null>(null)
 
 function useTable() {
@@ -123,7 +107,10 @@ function unwrapElementType(t: unknown): unknown {
   return current
 }
 
-function extractColumnMeta(children: ReactNode): {
+function extractColumnMeta(
+  children: ReactNode,
+  minColumnWidth: number,
+): {
   template: string
   compactTemplate: string
   labels: string[]
@@ -142,14 +129,14 @@ function extractColumnMeta(children: ReactNode): {
         (unwrappedType as {name?: string} | null)?.name ||
         ''
       if (unwrappedType === HeaderCell || displayName === 'HeaderCell') {
-        // Default to minmax(0, 1fr) instead of plain '1fr' so each column
-        // can shrink below its content's min-content size. A plain '1fr'
-        // track has an implicit min of `auto` (= min-content), which makes
-        // the column refuse to shrink and the whole table overflow when a
-        // cell's text is wider than 1/N of the container. With minmax(0,
-        // 1fr), the cell's compact-mode `min-width: 0` + `overflow:
-        // hidden` + `text-overflow: ellipsis` can actually truncate.
-        const width = props.width || 'minmax(0, 1fr)'
+        // Default each column to `minmax(<minColumnWidth>px, 1fr)`: columns
+        // share the row evenly (1fr) but never shrink below a readable floor.
+        // That floor is what makes a dense table overflow its container
+        // instead of crushing — Root's scroll wrapper then scrolls sideways.
+        // Narrow columns (a checkbox) or naturally-wide ones (an actions
+        // cell) override this with an explicit `width` (e.g. '40px',
+        // 'max-content').
+        const width = props.width || `minmax(${minColumnWidth}px, 1fr)`
         widths.push(width)
         // `compactWidth` lets the consumer switch to a content-aware
         // layout in the compact band while staying evenly distributed
@@ -188,14 +175,14 @@ interface RootProps {
   children: ReactNode
   variant?: TableVariant
   size?: TableSize
-  /** Opt out of responsive container-query behavior. Default true. */
+  /** Opt out of responsive behavior (horizontal scroll + card breakpoint). Default true. */
   responsive?: boolean
   /**
-   * Minimum comfortable width (px) for a single column. When responsive,
-   * Root measures its container and switches to the stacked card layout as
-   * soon as `containerWidth < columnCount × minColumnWidth` — i.e. before
-   * cells get crushed, not only at the fixed mobile breakpoint. Raise it to
-   * card up sooner, lower it to keep the grid at tighter widths. Default 128.
+   * Minimum width (px) each flexible column keeps before the table scrolls
+   * horizontally rather than crushing its cells. Columns still share the row
+   * evenly (`minmax(<minColumnWidth>px, 1fr)`); this is only the floor. Raise
+   * it for roomier columns (more scrolling), lower it to fit more before
+   * scrolling. Columns with an explicit `width` are unaffected. Default 120.
    */
   minColumnWidth?: number
   /**
@@ -216,45 +203,16 @@ export function Root({
   variant = 'default',
   size = 'md',
   responsive = true,
-  minColumnWidth = 128,
+  minColumnWidth = 120,
   sortChip,
   pagination,
 }: RootProps) {
   const inferredTemplateRef = useRef<string | null>(null)
-  const {template, compactTemplate, labels} = extractColumnMeta(children)
+  const {template, compactTemplate, labels} = extractColumnMeta(children, minColumnWidth)
   if (template) {
     inferredTemplateRef.current = template
   }
 
-  // Content-aware stacking. A container query can't see the column count, so
-  // measure the container and card up as soon as each column would fall
-  // below `minColumnWidth`. Keyed on labels.length so it tracks the actual
-  // number of columns. The @container base (styles.*: STACK_BP) still fires
-  // independently for genuinely narrow widths without needing JS.
-  const columnCount = labels.length
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [stacked, setStacked] = useState(false)
-
-  useIsoLayoutEffect(() => {
-    if (!responsive || columnCount === 0) {
-      setStacked(false)
-      return
-    }
-    const el = containerRef.current
-    if (!el || typeof ResizeObserver === 'undefined') return
-    const threshold = columnCount * minColumnWidth
-    const apply = (width: number) => setStacked(width > 0 && width < threshold)
-    apply(el.getBoundingClientRect().width)
-    const ro = new ResizeObserver((entries) => {
-      const entry = entries[0]
-      if (!entry) return
-      const box = entry.contentBoxSize?.[0]
-      apply(box ? box.inlineSize : entry.contentRect.width)
-    })
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [responsive, columnCount, minColumnWidth])
-
   const grid = (
     <html.div
       role="table"
@@ -272,45 +230,33 @@ export function Root({
             : styles.gridColumns(template)
           : undefined,
         responsive && styles.rootResponsive,
-        // Force-stack override — collapses the grid to one column. Applied
-        // last so its gridTemplateColumns wins over gridColumnsResponsive.
-        responsive && stacked && styles.rootStacked,
       ]}
     >
       {children}
     </html.div>
   )
 
-  // The sort chip is normally revealed only by the @container query. When
-  // JS force-stacks (headers hidden, but container wider than STACK_BP) the
-  // chip's own query hasn't fired, so inject forceShow to reveal it.
-  const sortChipEl =
-    stacked && isValidElement(sortChip)
-      ? cloneElement(sortChip as ReactElement<{forceShow?: boolean}>, {forceShow: true})
-      : sortChip
+  // Above the stack breakpoint the grid keeps each column ≥ minColumnWidth, so
+  // a dense table overflows this wrapper and scrolls sideways instead of
+  // crushing. Below it (@container ≤ sm) the grid is one column and there's
+  // nothing to scroll. Non-responsive tables opt out of the frame entirely.
+  const framedGrid = responsive ? <html.div style={styles.scrollX}>{grid}</html.div> : grid
 
   // Slots render unconditionally — `responsive=false` still wants its sort/
   // pagination chrome. Only the containerType:inline-size wrapper is
-  // conditional, since it only matters when @container queries fire.
+  // conditional, since it only matters when @container queries fire. SortChip
+  // reveals itself in card mode via its own @container rule — no JS needed.
   const body = (
     <>
-      {sortChipEl}
-      {grid}
+      {sortChip}
+      {framedGrid}
       {pagination}
     </>
   )
 
   return (
-    <TableContext.Provider
-      value={{variant, size, responsive, labels, inferredTemplateRef, stacked}}
-    >
-      {responsive ? (
-        <html.div ref={containerRef} style={styles.rootContainer}>
-          {body}
-        </html.div>
-      ) : (
-        body
-      )}
+    <TableContext.Provider value={{variant, size, responsive, labels, inferredTemplateRef}}>
+      {responsive ? <html.div style={styles.rootContainer}>{body}</html.div> : body}
     </TableContext.Provider>
   )
 }
@@ -318,10 +264,9 @@ export function Root({
 // --- Header ---
 
 export function Header({children}: {children: ReactNode}) {
-  const {stacked} = useTable()
   return (
     <HeaderContext.Provider value={true}>
-      <html.div role="rowgroup" style={[styles.header, stacked && styles.headerStacked]}>
+      <html.div role="rowgroup" style={styles.header}>
         {children}
       </html.div>
     </HeaderContext.Provider>
@@ -385,7 +330,7 @@ const INTERACTIVE_SELECTOR =
   'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="menuitem"], [role="switch"], [role="tab"], [contenteditable="true"]'
 
 export function Row({children, onClick, 'aria-label': ariaLabel}: RowProps) {
-  const {variant, stacked} = useTable()
+  const {variant} = useTable()
   const isHeader = useContext(HeaderContext)
   const rowIndex = useContext(RowIndexContext)
   const isEvenRow = rowIndex >= 0 && rowIndex % 2 === 1
@@ -427,9 +372,6 @@ export function Row({children, onClick, 'aria-label': ariaLabel}: RowProps) {
         !isHeader && styles.bodyRow,
         !isHeader && variant === 'striped' && isEvenRow && styles.stripedEven,
         isClickable && styles.clickableRow,
-        stacked && styles.rowStacked,
-        // bodyRowStacked last so its card background wins over stripedEven.
-        !isHeader && stacked && styles.bodyRowStacked,
       ]}
     >
       {childArray.map((child, index) => (
@@ -518,7 +460,7 @@ HeaderCell.displayName = 'HeaderCell'
 // isActions=true — actions footers don't show a label.
 
 export function Cell({children, isActions}: {children: ReactNode; isActions?: boolean}) {
-  const {size, variant, labels, responsive, stacked} = useTable()
+  const {size, variant, labels, responsive} = useTable()
   const {index, total} = useContext(CellIndexContext)
   const isLast = variant === 'bordered' && index === total - 1
   const label = labels[index] ?? ''
@@ -532,20 +474,10 @@ export function Cell({children, isActions}: {children: ReactNode; isActions?: bo
         variant === 'bordered' && styles.borderedCell,
         isLast && styles.borderedCellLast,
         isActions && styles.cellActions,
-        // Force-stack: cells become a label|value grid; the actions cell then
-        // overrides its template to a single track and turns into the card's
-        // right-aligned footer. Mirrors the @container (STACK_BP) branch, so
-        // cellStacked applies for every cell and cellActionsStacked layers on
-        // top for actions (its gridTemplateColumns wins as the later entry).
-        stacked && styles.cellStacked,
-        isActions && stacked && styles.cellActionsStacked,
-        variant === 'bordered' && stacked && styles.borderedCellStacked,
       ]}
     >
       {responsive && !isActions && label !== '' ? (
-        <html.span style={[styles.cellLabel, stacked && styles.cellLabelStacked]}>
-          {label}
-        </html.span>
+        <html.span style={styles.cellLabel}>{label}</html.span>
       ) : null}
       {isActions ? children : <html.div style={styles.cellValue}>{children}</html.div>}
     </html.div>