@duro-app/ui 0.43.0 → 0.45.0

package/package.json

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

package/src/components/Table/FromTanstack.tsx

@@ -22,6 +22,9 @@ 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. */
+  readonly minColumnWidth?: number
   /** Render a SortChip above the grid (stack-mode only). Options derive from
    *  columns where `column.getCanSort()` returns true. Wires value/onChange
    *  through the TanStack sorting state automatically. */
@@ -68,6 +71,7 @@ export function FromTanstack<TData>({
   variant = 'default',
   size = 'md',
   responsive = true,
+  minColumnWidth,
   sortChip,
   pagination,
   rowKey,
@@ -82,6 +86,7 @@ export function FromTanstack<TData>({
       variant={variant}
       size={size}
       responsive={responsive}
+      minColumnWidth={minColumnWidth}
       sortChip={sortChipNode}
       pagination={paginationNode}
     >

package/src/components/Table/SortChip.tsx

@@ -13,6 +13,13 @@ 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
 }
 
 /**
@@ -24,12 +31,18 @@ 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'}: SortChipProps) {
+export function SortChip({
+  options,
+  value,
+  onChange,
+  label = 'Sort by',
+  forceShow = false,
+}: 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}>
+    <html.div style={[styles.sortChip, forceShow && styles.sortChipStacked]}>
       <Menu.Root>
         <Menu.Trigger>{triggerLabel}</Menu.Trigger>
         <Menu.Popup>

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

@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect} from 'storybook/test'
+import {expect, waitFor} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {useState} from 'react'
 import {Table} from './Table'
@@ -1134,3 +1134,127 @@ export const SlotPropsOnRoot: Story = {
     await expect(canvas.getAllByText('Name').length).toBeGreaterThan(0)
   },
 }
+
+// --- 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},
+})
+
+const LONG_EMAIL = 'a-really-long-service-account.address@subdomain.example-company.com'
+
+export const ManyColumnsWrapNoOverlap: Story = {
+  render: () => (
+    <html.div style={overlapWrapStyles.wide}>
+      <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>
+      </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)
+  },
+}
+
+// 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',
+  render: () => (
+    <html.div style={overlapWrapStyles.cramped}>
+      <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>
+        </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>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>
+      </Table.Root>
+    </html.div>
+  ),
+  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.
+    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
+    await expect(ownerLabel).toBeTruthy()
+    await expect(getComputedStyle(ownerLabel).display).toBe('block')
+  },
+}

package/src/components/Table/Table.tsx

@@ -3,8 +3,12 @@ import {
   type ReactNode,
   type MutableRefObject,
   createContext,
+  cloneElement,
   useContext,
+  useEffect,
+  useLayoutEffect,
   useRef,
+  useState,
   Children,
   isValidElement,
 } from 'react'
@@ -31,8 +35,20 @@ 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() {
@@ -174,6 +190,14 @@ interface RootProps {
   size?: TableSize
   /** Opt out of responsive container-query behavior. 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.
+   */
+  minColumnWidth?: number
   /**
    * Optional sort UI rendered above the grid. Visible only in stack mode
    * (SortChip carries its own `display: none → inline-flex` rule). Typical
@@ -192,6 +216,7 @@ export function Root({
   variant = 'default',
   size = 'md',
   responsive = true,
+  minColumnWidth = 128,
   sortChip,
   pagination,
 }: RootProps) {
@@ -201,6 +226,35 @@ export function Root({
     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"
@@ -218,26 +272,45 @@ 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
+
   // 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.
   const body = (
     <>
-      {sortChip}
+      {sortChipEl}
       {grid}
       {pagination}
     </>
   )
 
   return (
-    <TableContext.Provider value={{variant, size, responsive, labels, inferredTemplateRef}}>
-      {responsive ? <html.div style={styles.rootContainer}>{body}</html.div> : body}
+    <TableContext.Provider
+      value={{variant, size, responsive, labels, inferredTemplateRef, stacked}}
+    >
+      {responsive ? (
+        <html.div ref={containerRef} style={styles.rootContainer}>
+          {body}
+        </html.div>
+      ) : (
+        body
+      )}
     </TableContext.Provider>
   )
 }
@@ -245,9 +318,10 @@ 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}>
+      <html.div role="rowgroup" style={[styles.header, stacked && styles.headerStacked]}>
         {children}
       </html.div>
     </HeaderContext.Provider>
@@ -311,7 +385,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} = useTable()
+  const {variant, stacked} = useTable()
   const isHeader = useContext(HeaderContext)
   const rowIndex = useContext(RowIndexContext)
   const isEvenRow = rowIndex >= 0 && rowIndex % 2 === 1
@@ -353,6 +427,9 @@ 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) => (
@@ -441,7 +518,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} = useTable()
+  const {size, variant, labels, responsive, stacked} = useTable()
   const {index, total} = useContext(CellIndexContext)
   const isLast = variant === 'bordered' && index === total - 1
   const label = labels[index] ?? ''
@@ -455,12 +532,22 @@ 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}>{label}</html.span>
+        <html.span style={[styles.cellLabel, stacked && styles.cellLabelStacked]}>
+          {label}
+        </html.span>
       ) : null}
-      {children}
+      {isActions ? children : <html.div style={styles.cellValue}>{children}</html.div>}
     </html.div>
   )
 }

package/src/components/Table/styles.css.ts

@@ -154,6 +154,10 @@ export const styles = css.create({
     fontWeight: typography.fontWeightSemibold,
     color: colors.textMuted,
     textAlign: 'start',
+    // Match the body cell: shrink inside the track + wrap, so header labels
+    // don't overlap when many columns are cramped.
+    minWidth: 0,
+    overflowWrap: 'break-word',
     whiteSpace: {
       default: 'normal',
       [`@container (max-width: ${COMPACT_BP})`]: 'nowrap',
@@ -176,14 +180,13 @@ export const styles = css.create({
       [`@container (max-width: ${STACK_BP})`]: 'grid',
     },
     alignItems: 'center',
-    minWidth: {
-      // Allow the cell to shrink inside its grid track. In default (wide)
-      // mode there's enough room so `auto` is fine; in compact and stack
-      // we explicitly drop to 0 so wrappable content can size to the
-      // track instead of forcing the track to grow.
-      default: 'auto',
-      [`@container (max-width: ${COMPACT_BP})`]: 0,
-    },
+    // Always let the cell shrink inside its `minmax(0, 1fr)` track. Previously
+    // this was `auto` in the default (wide) band on the assumption there's
+    // "enough room" — but a table with many columns (or wide content) whose
+    // combined intrinsic width exceeds the container then can't shrink, so
+    // content spills its track and overlaps the next column. `0` + the
+    // wrapping below keeps every cell inside its column at any width.
+    minWidth: 0,
     overflow: {
       // Safety against pathological unbreakable content (long URLs,
       // dataless ids) at narrow widths.
@@ -191,6 +194,9 @@ export const styles = css.create({
       [`@container (max-width: ${COMPACT_BP})`]: 'hidden',
     },
     whiteSpace: 'normal',
+    // Break long unbreakable tokens (emails, UUIDs) so they wrap within the
+    // column instead of forcing it wider / overflowing.
+    overflowWrap: 'break-word',
     gridTemplateColumns: {
       default: null,
       [`@container (max-width: ${STACK_BP})`]: '1fr 2fr',
@@ -201,6 +207,16 @@ export const styles = css.create({
     },
   },
 
+  // Wrapper around a (non-actions) cell's value. A raw text node is an
+  // anonymous flex item with `min-width: auto`, so it refuses to shrink and
+  // overflows its column even when the cell itself can shrink. Giving the value
+  // its own `min-width: 0` flex item lets the text wrap inside the column.
+  cellValue: {
+    minWidth: 0,
+    flexGrow: 1,
+    overflowWrap: 'break-word',
+  },
+
   // Label rendered as a real <span> inside each cell. Display:none in
   // default/compact, shown only in stack — matches StyleX guidance to
   // prefer real elements over ::before/::after for non-shadow-DOM cases.
@@ -304,6 +320,63 @@ export const styles = css.create({
     alignSelf: 'flex-start',
   },
 
+  // --- JS-measured force-stack variants ---
+  //
+  // A container query can only test the container's WIDTH — it can't know
+  // "6 columns won't fit here". So a dense table can be wider than STACK_BP
+  // yet still crush every cell to a few characters. Table.Root measures the
+  // container with a ResizeObserver and, when `width < columnCount ×
+  // minColumnWidth`, sets `stacked` in context; each component then also
+  // applies its `*Stacked` variant here. These mirror the values in the
+  // `@container (max-width: ${STACK_BP})` branches above, so JS-forced and
+  // CSS-driven stacking render identically. The @container base is kept as
+  // the SSR-safe path for genuinely narrow (mobile) widths — no JS, no
+  // hydration flash — while these handle the cramped medium-width case.
+  rootStacked: {
+    gridTemplateColumns: '1fr',
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    overflow: 'visible',
+    rowGap: spacing.sm,
+  },
+  headerStacked: {
+    display: 'none',
+  },
+  rowStacked: {
+    gridTemplateColumns: '1fr',
+    borderBottomWidth: 0,
+  },
+  bodyRowStacked: {
+    backgroundColor: {
+      default: colors.bgCard,
+      ':hover': colors.bgCardHover,
+    },
+    padding: spacing.sm,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+  },
+  cellStacked: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 2fr',
+    gap: spacing.sm,
+  },
+  cellLabelStacked: {
+    display: 'block',
+  },
+  cellActionsStacked: {
+    gridTemplateColumns: '1fr',
+    justifyContent: 'flex-end',
+    marginTop: spacing.sm,
+    paddingTop: spacing.sm,
+    borderTopWidth: 1,
+  },
+  borderedCellStacked: {
+    borderRightWidth: 0,
+  },
+  sortChipStacked: {
+    display: 'inline-flex',
+  },
+
   // Dynamic: grid columns applied on Root (non-responsive path only).
   gridColumns: (template: string) => ({
     gridTemplateColumns: template,