@proteos/ui 0.54.1 → 0.55.0

package/src/components/data-table/data-table.tsx

@@ -107,6 +107,14 @@ export type DataTableProps<TRow> = {
   enableColumnRemoval?: boolean
   onReorderColumn?: (params: { id: string; toIndex: number }) => void
   onRemoveColumn?: (id: string) => void
+  /**
+   * Enable a resize handle on each column header's trailing separator.
+   * Widths are controlled: `onResizeColumn` reports the column id and its
+   * new pixel width while dragging; the parent feeds it back through the
+   * column defs' `size`. Each `ColumnDef` must carry a stable `id`.
+   */
+  enableColumnResizing?: boolean
+  onResizeColumn?: (params: { id: string; width: number }) => void
   /**
    * Visual chrome around the table. `panel` (default) wraps the table in a
    * bordered, rounded, soft-shadowed card. `bare` strips that chrome so the
@@ -135,8 +143,10 @@ export type DataTableProps<TRow> = {
    */
   bodyBefore?: ReactNode
   /**
-   * Slot rendered BELOW the body. Used for controls like an Add row button
-   * at slot='end'. Sits inside the scrollable area below the rows.
+   * Trailing row rendered directly below the last row — an Add row control at
+   * slot='end', say. Row-height, edge-to-edge, and sticky to the bottom of
+   * the scroll viewport, so it stays reachable while the end of a long list
+   * is scrolled out of view.
    */
   bodyAfter?: ReactNode
   /**
@@ -181,7 +191,7 @@ type ListItem<TRow> =
 const DEFAULT_ROW_HEIGHT = 32
 
 /** Column id of the leading checkbox column added by `selectionMode`. */
-export const SELECTION_COLUMN_ID = '__select__' 
+export const SELECTION_COLUMN_ID = '__select__'
 
 export function DataTable<TRow>({
   query,
@@ -202,6 +212,8 @@ export function DataTable<TRow>({
   enableColumnRemoval = false,
   onReorderColumn,
   onRemoveColumn,
+  enableColumnResizing = false,
+  onResizeColumn,
   variant = 'panel',
   rowWrapper,
   extraRows,
@@ -457,8 +469,6 @@ export function DataTable<TRow>({
     !query.isLoading && !query.error && tableRowCount === 0 && !query.isFetchingNextPage
   const showInitialLoading = query.isLoading && tableRowCount === 0
   const showError = !!query.error && tableRowCount === 0
-  const showEndMarker =
-    !query.isLoading && !query.isFetchingNextPage && !query.hasNextPage && tableRowCount > 0
 
   const totalSize = virtualizer.getTotalSize()
   const virtualItems = virtualizer.getVirtualItems()
@@ -475,7 +485,13 @@ export function DataTable<TRow>({
       {/* Single both-axes scroll container. Horizontal wheel/trackpad scrolls
           the columns; vertical scrolls the rows. The sticky header pins to the
           top, and any `sticky left-0` gutter column freezes to the left. */}
-      <TableScroller ref={scrollerRef}>
+      <TableScroller
+        ref={scrollerRef}
+        // Scroll padding keeps a row scrolled (or focused) into view clear of
+        // the sticky header and, when present, the sticky trailing row —
+        // otherwise a freshly added last row lands underneath the strip.
+        className={cn('scroll-pt-[36px]', bodyAfter ? 'scroll-pb-8' : undefined)}
+      >
         {/* Content track — owns the horizontal min-width so the header + rows
             scroll horizontally together as one unit. */}
         <div className="flex flex-col" style={{ minWidth: minPanelWidth }}>
@@ -525,6 +541,12 @@ export function DataTable<TRow>({
                     {...(enableColumnRemoval && onRemoveColumn && header.column.id
                       ? { onRemove: () => onRemoveColumn(header.column.id) }
                       : {})}
+                    {...(enableColumnResizing && onResizeColumn && header.column.id
+                      ? {
+                          onResize: (width: number) =>
+                            onResizeColumn({ id: header.column.id, width }),
+                        }
+                      : {})}
                   >
                     {headerNode}
                   </TableHeaderCell>
@@ -585,18 +607,30 @@ export function DataTable<TRow>({
                 </div>
               )}
 
-              {/* Sentinel — visually empty, positioned just above the loader/end
-                  marker so it intersects ~200 px before the bottom. */}
+              {/* Sentinel — visually empty, positioned just above the loader so
+                  it intersects ~200 px before the bottom. */}
               {!showEmpty && (
                 <div ref={sentinelRef} aria-hidden="true" style={{ height: 1, width: '100%' }} />
               )}
 
               {query.isFetchingNextPage ? <LoaderRow /> : null}
-              {showEndMarker ? <EndMarker count={tableRowCount} /> : null}
             </div>
           )}
 
-          {bodyAfter}
+          {bodyAfter ? (
+            // Sticky to the scroller's bottom edge; `bg-bg` covers the rows
+            // sliding underneath. z-[4] — like the sticky header — stays above an
+            // editing row (z-[3]), so an editor scrolled under the strip is
+            // covered rather than drawn over it.
+            <div
+              className={cn(
+                'sticky bottom-0 z-[4] flex items-center h-8 px-0.5',
+                'border-t border-rule-2 bg-bg',
+              )}
+            >
+              {bodyAfter}
+            </div>
+          ) : null}
         </div>
       </TableScroller>
     </Table>
@@ -705,7 +739,7 @@ function DataRow<TRow>({
   )
 }
 
-/* ---------- Loader & end marker ----------------------------------------- */
+/* ---------- Loader ------------------------------------------------------- */
 
 function LoaderRow() {
   return (
@@ -732,17 +766,3 @@ function LoaderRow() {
     </div>
   )
 }
-
-function EndMarker({ count }: { count: number }) {
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-center',
-        'h-8 font-mono text-[10.5px] uppercase tracking-[0.08em]',
-        'text-ink-4',
-      )}
-    >
-      end · {count.toLocaleString()} rows
-    </div>
-  )
-}

package/src/components/field/listbox-check.tsx

@@ -0,0 +1,44 @@
+import { tv, type VariantProps } from 'tailwind-variants'
+
+/* =========================================================================
+   ListboxCheck — the selection box at the head of a multi-select listbox
+   row. Empty box at rest, ink fill with a tick once the row is selected.
+   Reads the row's RAC `data-selected` through the `group` class, so the
+   host ListBoxItem must carry `group`. Shared by MultiSelect and
+   BadgeMultiSelect so both pickers mark selection identically.
+   ========================================================================= */
+
+export const listboxCheckStyles = tv({
+  slots: {
+    box: [
+      'relative inline-flex items-center justify-center shrink-0',
+      'size-[16px] rounded-[3px] border border-ink-4 bg-surface',
+      'transition-[background-color,border-color] duration-150',
+      'group-data-[selected]:bg-ink group-data-[selected]:border-ink',
+    ],
+    tick: [
+      'size-3 text-surface transition-opacity duration-150',
+      'opacity-0 group-data-[selected]:opacity-100',
+    ],
+  },
+})
+
+export type ListboxCheckVariants = VariantProps<typeof listboxCheckStyles>
+
+export function ListboxCheck() {
+  const { box, tick } = listboxCheckStyles()
+  return (
+    <span aria-hidden className={box()}>
+      <svg viewBox="0 0 12 12" className={tick()} aria-hidden>
+        <path
+          d="M2.5 6.25 5 8.75 9.5 3.75"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+      </svg>
+    </span>
+  )
+}

package/src/components/field/use-chip-row-wrap.ts

@@ -0,0 +1,45 @@
+import { type RefObject, useLayoutEffect, useState } from 'react'
+
+/* =========================================================================
+   useChipRowWrap — does a `flex-wrap` row of chips currently need more than
+   one line? Drives the inline cell editors: they stay one row tall while
+   the chips fit, and grow into the two-row pop-out only once they wrap.
+
+   Measured from the children's boxes: a child whose top sits at or below
+   the first child's bottom is on a later line. Wrapping depends on the
+   container's width, not its height, so the answer is the same whether the
+   box is currently short (clipping) or tall. Re-measured when `signature`
+   (the chip identity) changes and whenever the container resizes. `false`
+   without layout (jsdom) and while `isEnabled` is off.
+   ========================================================================= */
+
+export function useChipRowWrap(
+  ref: RefObject<HTMLElement | null>,
+  isEnabled: boolean,
+  signature: string,
+): boolean {
+  const [hasWrapped, setHasWrapped] = useState(false)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `signature` (chip identity) is the re-measure trigger; it is not read inside.
+  useLayoutEffect(() => {
+    if (!isEnabled) return
+    const element = ref.current
+    if (!element) return
+    const measure = () => {
+      const children = Array.from(element.children)
+      const first = children[0]?.getBoundingClientRect()
+      if (!first || first.height === 0) {
+        setHasWrapped(false)
+        return
+      }
+      setHasWrapped(children.some((child) => child.getBoundingClientRect().top >= first.bottom - 1))
+    }
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [ref, isEnabled, signature])
+
+  return hasWrapped
+}

package/src/components/multi-select/multi-select.tsx

@@ -13,6 +13,7 @@ import {
   fieldMinHeight,
   fieldTextStyles,
 } from '../field/field'
+import { ListboxCheck } from '../field/listbox-check'
 
 /* =========================================================================
    MultiSelect — pick many from a list. Trigger shows selected items as
@@ -180,7 +181,9 @@ export function MultiSelect<T extends Key>({
         placement="bottom start"
         className={cn(
           'w-[var(--trigger-width)]',
-          'rounded-md border border-rule bg-surface p-1',
+          // The popover element itself takes focus when opened programmatically
+          // (defaultOpen) — no browser outline around the whole panel.
+          'outline-none rounded-md border border-rule bg-surface p-1',
           'shadow-[var(--shadow-raised)]',
           'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
           'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
@@ -205,6 +208,9 @@ export function MultiSelect<T extends Key>({
         <ListBox
           aria-label={typeof label === 'string' ? label : 'Options'}
           selectionMode="multiple"
+          // RAC clears a multi-selection on Escape by default — here Escape
+          // must close the list (useOverlay) and keep the selection.
+          escapeKeyBehavior="none"
           selectedKeys={selectedSet}
           onSelectionChange={(keys) => {
             if (keys === 'all') {
@@ -232,11 +238,10 @@ export function MultiSelect<T extends Key>({
                 'cursor-pointer outline-none select-none',
                 'data-[hovered]:bg-surface-2 data-[hovered]:text-ink',
                 'data-[focused]:bg-surface-2 data-[focused]:text-ink',
-                'data-[selected]:bg-surface-3 data-[selected]:text-ink',
                 'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
               )}
             >
-              <Checkmark />
+              <ListboxCheck />
               <span className="flex-1 truncate">{option.content ?? option.label}</span>
             </ListBoxItem>
           ))}
@@ -301,39 +306,3 @@ function Chip({
     </span>
   )
 }
-
-/* =========================================================================
-   Internal: empty box → indigo tick when the row is selected.
-   ========================================================================= */
-
-function Checkmark() {
-  return (
-    <span
-      aria-hidden
-      className={cn(
-        'relative inline-flex items-center justify-center shrink-0',
-        'size-[16px] rounded-[3px] border border-ink-4 bg-surface',
-        'transition-[background-color,border-color] duration-150',
-        'group-data-[selected]:bg-ink group-data-[selected]:border-ink',
-      )}
-    >
-      <svg
-        viewBox="0 0 12 12"
-        className={cn(
-          'size-3 text-surface transition-opacity duration-150',
-          'opacity-0 group-data-[selected]:opacity-100',
-        )}
-        aria-hidden
-      >
-        <path
-          d="M2.5 6.25 5 8.75 9.5 3.75"
-          stroke="currentColor"
-          strokeWidth="1.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          fill="none"
-        />
-      </svg>
-    </span>
-  )
-}

package/src/components/table/table.test.tsx

@@ -1,15 +1,8 @@
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableHeaderCell,
-  TableRow,
-} from './table'
+import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from './table'
 
 describe('Table chrome', () => {
   it('renders semantic ARIA grid roles', () => {
@@ -113,3 +106,89 @@ describe('Table chrome', () => {
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('TableHeaderCell resize handle', () => {
+  it('renders no handle without onResize', () => {
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell ariaLabel="Lane">Lane</TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    expect(screen.queryByRole('separator')).not.toBeInTheDocument()
+  })
+
+  it('reports the dragged width and never toggles sort', () => {
+    const onResize = vi.fn()
+    const onSortToggle = vi.fn()
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      width: 160,
+      height: 36,
+      top: 0,
+      left: 0,
+      right: 160,
+      bottom: 36,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    } as DOMRect)
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell
+            ariaLabel="Lane"
+            sortDirection={null}
+            onSortToggle={onSortToggle}
+            onResize={onResize}
+          >
+            Lane
+          </TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    // Reports are frame-throttled; run each frame synchronously.
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+      callback(0)
+      return 0
+    })
+    const handle = screen.getByRole('separator', { name: 'Resize column Lane' })
+    fireEvent.pointerDown(handle, { button: 0, clientX: 100, pointerId: 1 })
+    fireEvent.pointerMove(handle, { clientX: 140, pointerId: 1 })
+    fireEvent.pointerUp(handle, { clientX: 140, pointerId: 1 })
+    fireEvent.click(handle)
+    expect(onResize).toHaveBeenLastCalledWith(200)
+    expect(onSortToggle).not.toHaveBeenCalled()
+    vi.restoreAllMocks()
+  })
+
+  it('clamps to minWidth and resizes by keyboard', () => {
+    const onResize = vi.fn()
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      width: 70,
+      height: 36,
+      top: 0,
+      left: 0,
+      right: 70,
+      bottom: 36,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    } as DOMRect)
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell ariaLabel="Lane" onResize={onResize} minWidth={64}>
+            Lane
+          </TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    const handle = screen.getByRole('separator', { name: 'Resize column Lane' })
+    fireEvent.keyDown(handle, { key: 'ArrowLeft' })
+    expect(onResize).toHaveBeenLastCalledWith(64)
+    fireEvent.keyDown(handle, { key: 'ArrowRight' })
+    expect(onResize).toHaveBeenLastCalledWith(78)
+    vi.restoreAllMocks()
+  })
+})

package/src/components/table/table.tsx

@@ -59,7 +59,9 @@ const tableHeaderStyles = tv({
     'border-b border-rule',
   ],
   variants: {
-    sticky: { true: 'sticky top-0 z-[2]', false: '' },
+    // z-[4]: above an editing row (z-[3]) — sticky chrome stays on top of
+    // rows scrolling underneath, popped-out editors included.
+    sticky: { true: 'sticky top-0 z-[4]', false: '' },
   },
   defaultVariants: { sticky: false },
 })
@@ -109,7 +111,8 @@ export const tableHeaderCellStyles = tv({
     },
     sticky: {
       left: 'sticky left-0 z-[3] bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
-      right: 'sticky right-0 z-[3] bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
+      right:
+        'sticky right-0 z-[3] bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
       false: '',
     },
   },
@@ -164,6 +167,14 @@ export type TableHeaderCellProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClick
   onRemove?: () => void
   /** Aria label fragment used in the remove button label and any drag a11y. */
   ariaLabel?: string
+  /**
+   * When provided, renders a resize handle on the trailing edge. Dragging it
+   * (or focusing it and pressing ←/→) reports the new width; the column is
+   * controlled, so the parent decides what to do with it.
+   */
+  onResize?: (width: number) => void
+  /** Smallest width the resize handle will report. Defaults to 64. */
+  minWidth?: number
 }
 
 export function TableHeaderCell({
@@ -179,11 +190,63 @@ export function TableHeaderCell({
   onRemove,
   ariaLabel,
   sticky = false,
+  onResize,
+  minWidth = 64,
   ...rest
 }: TableHeaderCellProps) {
   const cellRef = useRef<HTMLDivElement | null>(null)
   const handleRef = useRef<HTMLSpanElement | null>(null)
   const [dragState, setDragState] = useState<DragState>({ kind: 'idle' })
+  const [isResizing, setIsResizing] = useState(false)
+
+  /* Column resize — pointer capture on the handle so the drag survives the
+     pointer leaving the header, one report per animation frame so a busy
+     table re-renders at most 60×/s. The reported width is the cell's live
+     box width plus the pointer delta, never below `minWidth`. */
+  const startResize = (event: React.PointerEvent<HTMLSpanElement>) => {
+    if (!onResize || event.button !== 0) return
+    const cell = cellRef.current
+    if (!cell) return
+    event.preventDefault()
+    event.stopPropagation()
+    const handle = event.currentTarget
+    const startX = event.clientX
+    const startWidth = cell.getBoundingClientRect().width
+    if (typeof handle.setPointerCapture === 'function') handle.setPointerCapture(event.pointerId)
+    setIsResizing(true)
+    document.body.style.cursor = 'col-resize'
+    let frame = 0
+    const report = (clientX: number) => {
+      const next = Math.max(minWidth, Math.round(startWidth + clientX - startX))
+      if (typeof requestAnimationFrame !== 'function') {
+        onResize(next)
+        return
+      }
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => onResize(next))
+    }
+    const onMove = (move: PointerEvent) => report(move.clientX)
+    const onEnd = () => {
+      handle.removeEventListener('pointermove', onMove)
+      handle.removeEventListener('pointerup', onEnd)
+      handle.removeEventListener('pointercancel', onEnd)
+      document.body.style.cursor = ''
+      setIsResizing(false)
+    }
+    handle.addEventListener('pointermove', onMove)
+    handle.addEventListener('pointerup', onEnd)
+    handle.addEventListener('pointercancel', onEnd)
+  }
+
+  const resizeByKey = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (!onResize) return
+    const step = event.key === 'ArrowRight' ? 8 : event.key === 'ArrowLeft' ? -8 : 0
+    if (step === 0) return
+    event.preventDefault()
+    event.stopPropagation()
+    const current = cellRef.current?.getBoundingClientRect().width ?? minWidth
+    onResize(Math.max(minWidth, Math.round(current + step)))
+  }
 
   useEffect(() => {
     if (!isDraggable || !columnId) return
@@ -203,13 +266,9 @@ export function TableHeaderCell({
       }),
       dropTargetForElements({
         element: cell,
-        canDrop: ({ source }) =>
-          isColumnDragData(source.data) && source.data.columnId !== columnId,
+        canDrop: ({ source }) => isColumnDragData(source.data) && source.data.columnId !== columnId,
         getData: ({ input, element }) =>
-          attachClosestEdge(
-            { ...data },
-            { input, element, allowedEdges: ['left', 'right'] },
-          ),
+          attachClosestEdge({ ...data }, { input, element, allowedEdges: ['left', 'right'] }),
         getIsSticky: () => true,
         onDragEnter: ({ self }) => {
           const edge = extractClosestEdge(self.data)
@@ -238,6 +297,7 @@ export function TableHeaderCell({
     const target = e.target as HTMLElement
     if (target.closest('[data-dnd-handle="true"]')) return
     if (target.closest('[data-column-remove="true"]')) return
+    if (target.closest('[data-column-resize="true"]')) return
     onSortToggle?.()
   }
 
@@ -292,7 +352,11 @@ export function TableHeaderCell({
       <span
         className={cn(
           'flex items-center gap-[7px] min-w-0 flex-1',
-          align === 'right' ? 'justify-end' : align === 'center' ? 'justify-center' : 'justify-start',
+          align === 'right'
+            ? 'justify-end'
+            : align === 'center'
+              ? 'justify-center'
+              : 'justify-start',
         )}
       >
         <span className="truncate">{children}</span>
@@ -328,6 +392,40 @@ export function TableHeaderCell({
           )}
         />
       ) : null}
+
+      {onResize ? (
+        // Sits astride the trailing separator: an 8px grab zone with a 2px
+        // bar that lights up on hover, focus and while dragging. A focusable
+        // separator is the ARIA pattern for a resizer (no semantic element
+        // exists for it); its value is the column width when one is known.
+        // biome-ignore lint/a11y/useSemanticElements: interactive vertical resizer — <hr> cannot be one
+        <span
+          role="separator"
+          aria-orientation="vertical"
+          aria-label={`Resize column ${ariaLabel ?? 'column'}`}
+          aria-valuemin={minWidth}
+          aria-valuenow={typeof width === 'number' ? width : undefined}
+          tabIndex={0}
+          data-column-resize="true"
+          onPointerDown={startResize}
+          onKeyDown={resizeByKey}
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            'group/resize absolute inset-y-0 -right-1 z-10 w-2 cursor-col-resize outline-none',
+            'flex justify-center',
+          )}
+        >
+          <span
+            aria-hidden="true"
+            className={cn(
+              'h-full w-0.5 transition-colors',
+              isResizing
+                ? 'bg-accent'
+                : 'bg-transparent group-hover/resize:bg-accent group-focus-visible/resize:bg-accent',
+            )}
+          />
+        </span>
+      ) : null}
     </div>
   )
 }
@@ -407,7 +505,12 @@ const tableScrollerStyles = tv({
 
 export function TableScroller({ className, ref, ...props }: TableBodyProps) {
   return (
-    <div role="presentation" ref={ref} {...props} className={cn(tableScrollerStyles(), className)} />
+    <div
+      role="presentation"
+      ref={ref}
+      {...props}
+      className={cn(tableScrollerStyles(), className)}
+    />
   )
 }
 
@@ -424,8 +527,28 @@ const rowStripeBg = 'bg-[color-mix(in_oklab,var(--color-ink)_var(--row-stripe),v
 const rowHoverBg =
   'hover:bg-[color-mix(in_oklab,var(--color-ink)_var(--row-hover),var(--color-bg))]'
 
+/* Inline cell editors that outgrow the row (a chip picker, say) escape the
+   cell clip by marking their host `data-cell-editing`: the row lifts above
+   its neighbours and the cell drops its overflow clip, so an editor sized
+   taller than the row pops out over the rows above and below. The app-side
+   wrapper sets the attribute and positions the editor absolutely inside the
+   cell. Virtualized rows are transformed (own stacking context), hence the
+   z-index has to sit on the row, not only on the cell. Rows and cells are
+   positioned unconditionally (`relative`, overridden by the absolute /
+   sticky variants) so the z-index applies without the `:has()` rule ever
+   touching `position` — a `:has()` rule outranks a plain utility, and
+   forcing `relative` on a virtualized row would drop it into normal flow
+   and shove every row after it down by one. */
+const cellEditingRow = 'has-[[data-cell-editing]]:z-[3]'
+const cellEditingCell = 'has-[[data-cell-editing]]:z-[3] has-[[data-cell-editing]]:overflow-visible'
+
 const tableRowStyles = tv({
-  base: ['flex items-stretch', 'border-b border-rule-2 last:border-b-0', 'bg-bg'],
+  base: [
+    'relative flex items-stretch',
+    'border-b border-rule-2 last:border-b-0',
+    'bg-bg',
+    cellEditingRow,
+  ],
   variants: {
     alt: {
       true: rowStripeBg,
@@ -436,7 +559,9 @@ const tableRowStyles = tv({
       false: rowHoverBg,
     },
     absolute: {
-      true: 'absolute left-0 right-0',
+      // `top-0` pins the static position: a virtualized row must never
+      // inherit a flow offset from a sibling that is in normal flow.
+      true: 'absolute top-0 left-0 right-0',
       false: '',
     },
   },
@@ -481,11 +606,12 @@ export function TableRow({
 
 export const tableCellStyles = tv({
   base: [
-    'flex items-center shrink-0 min-w-0',
+    'relative flex items-center shrink-0 min-w-0',
     'px-[14px]',
     'whitespace-nowrap overflow-hidden text-ellipsis',
     'font-sans text-[13px] tracking-[-0.005em]',
     'text-ink-2',
+    cellEditingCell,
   ],
   variants: {
     align: {