@proteos/ui 0.45.0 → 0.47.0

package/src/components/color-input/color-input.test.tsx

@@ -0,0 +1,95 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { ColorInput, normalizeHexColor } from './color-input'
+
+describe('normalizeHexColor', () => {
+  it('canonicalizes six-digit hex with or without the hash', () => {
+    expect(normalizeHexColor('#5B8DEF')).toBe('#5b8def')
+    expect(normalizeHexColor('5b8def')).toBe('#5b8def')
+    expect(normalizeHexColor('  #5b8def ')).toBe('#5b8def')
+  })
+
+  it('expands three-digit shorthand', () => {
+    expect(normalizeHexColor('#abc')).toBe('#aabbcc')
+    expect(normalizeHexColor('ABC')).toBe('#aabbcc')
+  })
+
+  it('returns null for anything else', () => {
+    expect(normalizeHexColor('')).toBeNull()
+    expect(normalizeHexColor(null)).toBeNull()
+    expect(normalizeHexColor('red')).toBeNull()
+    expect(normalizeHexColor('#12345')).toBeNull()
+    expect(normalizeHexColor('#gggggg')).toBeNull()
+  })
+})
+
+describe('ColorInput', () => {
+  it('shows the committed value canonically', () => {
+    render(<ColorInput label="Color" value="#5B8DEF" onChange={() => {}} />)
+    expect(screen.getByLabelText('Color')).toHaveValue('#5b8def')
+  })
+
+  it('commits only canonical hex while typing', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<ColorInput label="Color" value={null} onChange={onChange} />)
+
+    await user.type(screen.getByLabelText('Color'), '#FF0000')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('#ff0000')
+  })
+
+  it('expands shorthand only on blur', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<ColorInput label="Color" value={null} onChange={onChange} />)
+
+    const input = screen.getByLabelText('Color')
+    await user.type(input, 'abc')
+    expect(onChange).not.toHaveBeenCalled()
+    expect(input).not.toHaveAttribute('aria-invalid', 'true')
+
+    await user.tab()
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('#aabbcc')
+    expect(input).toHaveValue('#aabbcc')
+  })
+
+  it('holds invalid drafts without committing and flags them', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<ColorInput label="Color" value={null} onChange={onChange} />)
+
+    const input = screen.getByLabelText('Color')
+    await user.type(input, 'zz')
+    expect(onChange).not.toHaveBeenCalled()
+    expect(input).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('clears with null when emptied', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<ColorInput label="Color" value="#5b8def" onChange={onChange} />)
+
+    await user.clear(screen.getByLabelText('Color'))
+    expect(onChange).toHaveBeenLastCalledWith(null)
+  })
+
+  it('commits a pick from the native color input', () => {
+    const onChange = vi.fn()
+    render(<ColorInput label="Color" value={null} onChange={onChange} />)
+
+    const native = screen.getByRole('button', { name: 'Pick color' }).querySelector('input')
+    if (!native) throw new Error('native color input missing')
+    fireEvent.change(native, { target: { value: '#3f9d6b' } })
+
+    expect(onChange).toHaveBeenCalledWith('#3f9d6b')
+  })
+
+  it('takes an aria-label when rendered without a visible label', () => {
+    render(<ColorInput aria-label="Enum color" value={null} onChange={() => {}} />)
+    expect(screen.getByLabelText('Enum color')).toBeInTheDocument()
+  })
+})

package/src/components/color-input/color-input.tsx

@@ -0,0 +1,208 @@
+import { Pipette } from 'lucide-react'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { Input as AriaInput, FieldError, Label, Text, TextField } from 'react-aria-components'
+
+import { cn } from '../../lib/cn'
+import {
+  type FieldAppearance,
+  type FieldSize,
+  fieldControlStyles,
+  fieldErrorStyles,
+  fieldHintStyles,
+  fieldLabelStyles,
+  fieldTextStyles,
+} from '../field/field'
+
+/* =========================================================================
+   ColorInput — a form field for a `#rrggbb` color.
+
+   Text-first: the hex is what the platform stores (enum values, labels),
+   so the field is a mono text input with a swatch in front of it. The
+   swatch doubles as a trigger for the browser's native color picker, which
+   is the "good enough for now" picker until a proper one lands — the API
+   (value in, canonical hex out) won't change when it does.
+
+   Commit discipline: `onChange` only ever fires with a canonical lowercase
+   `#rrggbb` or `null` (cleared). While the draft is something else — half a
+   hex, a named color — the field shows its invalid chrome and holds the
+   last committed value, so consumers never see partial input. Shorthand
+   (`#abc`) is accepted but only expanded on blur: typing `#ff0000` passes
+   through `#ff0`, and committing that transiently would flash the wrong
+   color at the consumer.
+   ========================================================================= */
+
+const HEX6 = /^#?([0-9a-f]{6})$/i
+const HEX3 = /^#?([0-9a-f]{3})$/i
+
+/**
+ * Normalizes free-form text to a canonical lowercase `#rrggbb`, or null when
+ * it isn't a hex color. Accepts a missing `#` and 3-digit shorthand.
+ */
+export function normalizeHexColor(text: string | null | undefined): string | null {
+  const raw = (text ?? '').trim()
+  if (raw === '') return null
+  const six = HEX6.exec(raw)
+  if (six?.[1]) return `#${six[1].toLowerCase()}`
+  const three = HEX3.exec(raw)
+  if (three?.[1]) {
+    const [r, g, b] = three[1].toLowerCase()
+    return `#${r}${r}${g}${g}${b}${b}`
+  }
+  return null
+}
+
+export type ColorInputProps = {
+  label?: ReactNode
+  description?: ReactNode
+  errorMessage?: ReactNode
+  /** Shown while empty. Defaults to a sample hex. */
+  placeholder?: string
+  /** Canonical or loose hex; null/'' mean "no color". */
+  value: string | null
+  /** Fires with the canonical lowercase `#rrggbb`, or null when cleared. */
+  onChange: (hex: string | null) => void
+  isDisabled?: boolean
+  isInvalid?: boolean
+  /** Field size. Defaults to `md`. */
+  size?: FieldSize
+  /** Chrome variant. Defaults to `field`. `cell` flattens the box. */
+  appearance?: FieldAppearance
+  /** Accessible name when no visible `label` is rendered. */
+  'aria-label'?: string
+  className?: string
+}
+
+export function ColorInput({
+  label,
+  description,
+  errorMessage,
+  placeholder = '#5b8def',
+  value,
+  onChange,
+  isDisabled = false,
+  isInvalid = false,
+  size = 'md',
+  appearance,
+  'aria-label': ariaLabel,
+  className,
+}: ColorInputProps) {
+  const committed = normalizeHexColor(value)
+  const [draft, setDraft] = useState(committed ?? '')
+  const nativeRef = useRef<HTMLInputElement>(null)
+
+  // An outside change to `value` (reset, another picker) replaces the draft;
+  // our own commits already match, so typing is never clobbered mid-word.
+  useEffect(() => {
+    setDraft((current) => (normalizeHexColor(current) === committed ? current : (committed ?? '')))
+  }, [committed])
+
+  const isDraftInvalid = draft.trim() !== '' && normalizeHexColor(draft) === null
+  const invalid = isInvalid || isDraftInvalid
+  const styles = fieldControlStyles({ size, invalid, appearance })
+  const focusWithin =
+    appearance === 'cell'
+      ? 'focus-within:border-accent focus-within:shadow-none'
+      : 'focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]'
+
+  const edit = (next: string) => {
+    setDraft(next)
+    if (next.trim() === '') {
+      if (committed !== null) onChange(null)
+      return
+    }
+    // Live commits need the full six digits; shorthand waits for blur.
+    if (!HEX6.test(next.trim())) return
+    const hex = normalizeHexColor(next)
+    if (hex !== null && hex !== committed) onChange(hex)
+  }
+
+  const settle = () => {
+    const hex = normalizeHexColor(draft)
+    if (hex === null) return
+    setDraft(hex)
+    if (hex !== committed) onChange(hex)
+  }
+
+  const pick = (next: string) => {
+    const hex = normalizeHexColor(next)
+    if (hex === null) return
+    setDraft(hex)
+    if (hex !== committed) onChange(hex)
+  }
+
+  return (
+    <TextField
+      value={draft}
+      onChange={edit}
+      isDisabled={isDisabled}
+      isInvalid={invalid}
+      // Canonical formatting once the user leaves: "ABC" → "#aabbcc".
+      onBlur={settle}
+      {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
+      className={cn('grid grid-cols-1 gap-1.5', className)}
+    >
+      {label ? <Label className={fieldLabelStyles}>{label}</Label> : null}
+
+      <div
+        data-disabled={isDisabled || undefined}
+        className={cn(
+          styles.box(),
+          'flex items-center gap-2',
+          size === 'sm' ? 'pl-2' : 'pl-2.5',
+          focusWithin,
+        )}
+      >
+        <button
+          type="button"
+          aria-label="Pick color"
+          disabled={isDisabled}
+          onClick={() => nativeRef.current?.click()}
+          className={cn(
+            'relative flex shrink-0 items-center justify-center rounded-sm border border-rule',
+            'cursor-pointer outline-none',
+            'focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]',
+            'disabled:cursor-not-allowed',
+            size === 'sm' ? 'size-4' : 'size-5',
+            committed ? null : 'text-ink-4',
+          )}
+          style={committed ? { backgroundColor: committed } : undefined}
+        >
+          {committed ? null : <Pipette aria-hidden className="size-2.5" />}
+          {/* The browser picker rides a hidden native input — clicking the
+              swatch forwards to it. Not tabbable: the text input is the
+              keyboard path. */}
+          <input
+            ref={nativeRef}
+            type="color"
+            tabIndex={-1}
+            aria-hidden
+            disabled={isDisabled}
+            value={committed ?? '#000000'}
+            onChange={(event) => pick(event.target.value)}
+            className="pointer-events-none absolute inset-0 size-full opacity-0"
+          />
+        </button>
+        <AriaInput
+          placeholder={placeholder}
+          spellCheck={false}
+          autoComplete="off"
+          className={cn(
+            styles.content(),
+            'min-w-0 flex-1 bg-transparent font-mono outline-none',
+            'pl-0',
+            fieldTextStyles[size],
+          )}
+        />
+      </div>
+
+      {description ? (
+        <Text slot="description" className={fieldHintStyles}>
+          {description}
+        </Text>
+      ) : null}
+      {errorMessage && appearance !== 'cell' ? (
+        <FieldError className={fieldErrorStyles}>{errorMessage}</FieldError>
+      ) : null}
+    </TextField>
+  )
+}

package/src/components/color-input/index.ts

@@ -0,0 +1,2 @@
+export type { ColorInputProps } from './color-input'
+export { ColorInput, normalizeHexColor } from './color-input'

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

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { DataTable, type InfiniteQueryLike } from './data-table'
+
+type Row = { id: string; name: string }
+
+const ROWS: Row[] = [
+  { id: 'r-1', name: 'Alpha' },
+  { id: 'r-2', name: 'Beta' },
+  { id: 'r-3', name: 'Gamma' },
+]
+
+function query(rows: Row[]): InfiniteQueryLike<Row> {
+  return {
+    data: { pages: [{ data: rows, meta: { items_total: rows.length } }] },
+    isLoading: false,
+    isFetchingNextPage: false,
+    hasNextPage: false,
+    error: null,
+    fetchNextPage: vi.fn(),
+  }
+}
+
+const columns = [{ id: 'name', accessorKey: 'name', header: 'Name', size: 160 }]
+
+function Harness({ onChange }: { onChange?: (ids: Set<string>) => void }) {
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  return (
+    <DataTable<Row>
+      query={query(ROWS)}
+      columns={columns}
+      ariaLabel="Records"
+      selectionMode="multiple"
+      selectedIds={selected}
+      onSelectionChange={(ids) => {
+        setSelected(ids)
+        onChange?.(ids)
+      }}
+    />
+  )
+}
+
+// The body is virtualized against a real scroll box, which jsdom cannot
+// measure (every rect is 0×0, so the virtualizer yields no items and no row
+// ever renders). Swap the virtualizer for a pass-through that emits every
+// row — the windowing itself is TanStack's to test, not ours.
+vi.mock('@tanstack/react-virtual', () => ({
+  useVirtualizer: ({ count, estimateSize }: { count: number; estimateSize: () => number }) => {
+    const size = estimateSize()
+    return {
+      getTotalSize: () => count * size,
+      getVirtualItems: () =>
+        Array.from({ length: count }, (_unused, index) => ({
+          index,
+          key: index,
+          start: index * size,
+          size,
+        })),
+    }
+  },
+}))
+
+describe('DataTable selection', () => {
+  it('renders no checkboxes when selection is off', () => {
+    render(<DataTable<Row> query={query(ROWS)} columns={columns} ariaLabel="Records" />)
+    expect(screen.queryByRole('checkbox')).toBeNull()
+  })
+
+  it('select-all toggles every loaded row, then clears', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness onChange={onChange} />)
+
+    await user.click(screen.getByRole('checkbox', { name: 'Select all rows' }))
+    expect(onChange).toHaveBeenLastCalledWith(new Set(['r-1', 'r-2', 'r-3']))
+
+    await user.click(screen.getByRole('checkbox', { name: 'Deselect all rows' }))
+    expect(onChange).toHaveBeenLastCalledWith(new Set())
+  })
+
+  it('selecting one row leaves select-all indeterminate', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+
+    await user.click(screen.getByRole('checkbox', { name: 'Select row 1' }))
+
+    const selectAll = screen.getByRole('checkbox', { name: 'Select all rows' })
+    expect(selectAll).toBePartiallyChecked()
+  })
+
+  it('does not open a row when its checkbox is clicked', async () => {
+    const user = userEvent.setup()
+    const onRowClick = vi.fn()
+    render(
+      <DataTable<Row>
+        query={query(ROWS)}
+        columns={columns}
+        ariaLabel="Records"
+        selectionMode="multiple"
+        selectedIds={new Set()}
+        onSelectionChange={vi.fn()}
+        onRowClick={onRowClick}
+      />,
+    )
+
+    await user.click(screen.getByRole('checkbox', { name: 'Select row 1' }))
+    expect(onRowClick).not.toHaveBeenCalled()
+  })
+})

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

@@ -24,6 +24,7 @@ import {
 } from 'react'
 
 import { cn } from '../../lib/cn'
+import { Checkbox } from '../checkbox'
 import {
   isColumnDragData,
   type SortDirection,
@@ -138,6 +139,20 @@ export type DataTableProps<TRow> = {
    * at slot='end'. Sits inside the scrollable area below the rows.
    */
   bodyAfter?: ReactNode
+  /**
+   * Row selection. `none` (default) renders no checkbox column; `multiple`
+   * prepends a sticky leading checkbox column and turns the header checkbox
+   * into a tri-state select-all.
+   *
+   * Selection is CONTROLLED — the owner holds the ids because it is the one
+   * that acts on them (running a batch action, clearing after a save). The
+   * header checkbox covers the rows currently LOADED: an infinite list can't
+   * honestly claim to select rows it has never fetched, so "select everything
+   * matching the filter" belongs to the owner's toolbar, not here.
+   */
+  selectionMode?: 'none' | 'multiple'
+  selectedIds?: Set<string>
+  onSelectionChange?: (ids: Set<string>) => void
   /**
    * Draw vertical gridlines between body cells. The header always has them;
    * the body opts in (e.g. inline-edit mode wants the full Excel-style grid).
@@ -148,6 +163,9 @@ export type DataTableProps<TRow> = {
 
 const DEFAULT_ROW_HEIGHT = 32
 
+/** Column id of the leading checkbox column added by `selectionMode`. */
+export const SELECTION_COLUMN_ID = '__select__' 
+
 export function DataTable<TRow>({
   query,
   columns,
@@ -172,6 +190,9 @@ export function DataTable<TRow>({
   extraRows,
   bodyBefore,
   bodyAfter,
+  selectionMode = 'none',
+  selectedIds,
+  onSelectionChange,
   columnBorders = false,
 }: DataTableProps<TRow>) {
   const rows = useMemo<TRow[]>(() => {
@@ -183,21 +204,124 @@ export function DataTable<TRow>({
     return [...startExtras, ...dataRows, ...endExtras]
   }, [query.data, extraRows])
 
+  const resolveRowId = useMemo(
+    () =>
+      getRowId ??
+      ((row: TRow, index: number) => {
+        const r = row as Record<string, unknown>
+        if (typeof r.id === 'string' || typeof r.id === 'number') return String(r.id)
+        if (typeof r.slug === 'string') return r.slug
+        return String(index)
+      }),
+    [getRowId],
+  )
+
+  const selectionEnabled = selectionMode === 'multiple'
+  const selected = useMemo(() => selectedIds ?? new Set<string>(), [selectedIds])
+  // Ids of the rows currently LOADED — what the header checkbox operates on.
+  const loadedIds = useMemo(
+    () => (selectionEnabled ? rows.map((row, index) => resolveRowId(row, index)) : []),
+    [selectionEnabled, rows, resolveRowId],
+  )
+  // Anchor for shift-click range selection, in loaded-row index space.
+  const lastToggledIndexRef = useRef<number | null>(null)
+
+  const toggleRow = (id: string, index: number, isRange: boolean) => {
+    if (!onSelectionChange) return
+    const next = new Set(selected)
+    const anchor = lastToggledIndexRef.current
+    if (isRange && anchor !== null) {
+      const [from, to] = anchor <= index ? [anchor, index] : [index, anchor]
+      // A range drag always ADDS — matching how file managers and mail
+      // clients behave; use individual clicks to take rows back out.
+      for (let i = from; i <= to; i += 1) {
+        const rangeId = loadedIds[i]
+        if (rangeId !== undefined) next.add(rangeId)
+      }
+    } else if (next.has(id)) {
+      next.delete(id)
+    } else {
+      next.add(id)
+    }
+    lastToggledIndexRef.current = index
+    onSelectionChange(next)
+  }
+
+  const loadedSelectedCount = loadedIds.reduce((count, id) => count + (selected.has(id) ? 1 : 0), 0)
+  const allLoadedSelected = loadedIds.length > 0 && loadedSelectedCount === loadedIds.length
+
+  const toggleAllLoaded = () => {
+    if (!onSelectionChange) return
+    const next = new Set(selected)
+    if (allLoadedSelected) {
+      for (const id of loadedIds) next.delete(id)
+    } else {
+      for (const id of loadedIds) next.add(id)
+    }
+    lastToggledIndexRef.current = null
+    onSelectionChange(next)
+  }
+
+  // RAC's Checkbox onChange carries no modifier keys, so the shift state is
+  // captured on the preceding pointer event.
+  const rangeModifierRef = useRef(false)
+
+  const selectionColumn = useMemo<ColumnDef<TRow>>(
+    () => ({
+      id: SELECTION_COLUMN_ID,
+      size: 36,
+      enableSorting: false,
+      meta: { align: 'center', sticky: 'left', cellClassName: 'px-0 justify-center' },
+      header: () => (
+        <span className="inline-flex items-center justify-center w-full">
+          <Checkbox
+            aria-label={allLoadedSelected ? 'Deselect all rows' : 'Select all rows'}
+            isSelected={allLoadedSelected}
+            isIndeterminate={loadedSelectedCount > 0 && !allLoadedSelected}
+            isDisabled={loadedIds.length === 0}
+            onChange={toggleAllLoaded}
+          />
+        </span>
+      ),
+      cell: ({ row }) => (
+        // Stop the click here: selecting a row must never also open it.
+        <span
+          className="inline-flex items-center justify-center w-full"
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={(event) => {
+            event.stopPropagation()
+            rangeModifierRef.current = event.shiftKey
+          }}
+          onPointerDownCapture={(event) => {
+            rangeModifierRef.current = event.shiftKey
+          }}
+          role="presentation"
+        >
+          <Checkbox
+            aria-label={`Select row ${row.index + 1}`}
+            isSelected={selected.has(row.id)}
+            onChange={() => toggleRow(row.id, row.index, rangeModifierRef.current)}
+          />
+        </span>
+      ),
+    }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: handlers read the latest selection via closure recreated on these inputs
+    [selected, loadedIds, allLoadedSelected, loadedSelectedCount],
+  )
+
+  const tableColumns = useMemo(
+    () => (selectionEnabled ? [selectionColumn, ...columns] : columns),
+    [selectionEnabled, selectionColumn, columns],
+  )
+
   const table = useReactTable({
     data: rows,
-    columns,
+    columns: tableColumns,
     state: { sorting: sorting ?? [] },
     ...(onSortingChange ? { onSortingChange } : {}),
     manualSorting: true,
     getCoreRowModel: getCoreRowModel(),
-    getRowId: getRowId
-      ? (row, index) => getRowId(row, index)
-      : (row, index) => {
-          const r = row as Record<string, unknown>
-          if (typeof r.id === 'string' || typeof r.id === 'number') return String(r.id)
-          if (typeof r.slug === 'string') return r.slug
-          return String(index)
-        },
+    getRowId: (row, index) => resolveRowId(row, index),
   })
 
   const tableRows = table.getRowModel().rows
@@ -243,8 +367,8 @@ export function DataTable<TRow>({
   })
 
   const totalColumnWidth = useMemo(
-    () => columns.reduce((sum, c) => sum + (c.size ?? 140), 0),
-    [columns],
+    () => tableColumns.reduce((sum, c) => sum + (c.size ?? 140), 0),
+    [tableColumns],
   )
 
   // Single global pragmatic-dnd monitor for column reorder. We mirror the

package/src/components/data-table/index.ts

@@ -7,7 +7,7 @@ export type {
 } from './cells'
 export { BooleanCell, DateCell, DateTimeCell, LinkCell, TruncateCell } from './cells'
 export type { DataTableProps, InfiniteQueryLike } from './data-table'
-export { DataTable } from './data-table'
+export { DataTable, SELECTION_COLUMN_ID } from './data-table'
 
 export type { ActionsColumnOptions } from './make-actions-column'
 export { makeActionsColumn } from './make-actions-column'

package/src/components/draft-message-composer/draft-message-composer.stories.tsx

@@ -64,7 +64,7 @@ function client(
     ...options.conversation,
   } as Conversation
   const delay = <T,>(value: T): Promise<T> =>
-    new Promise((resolve) => setTimeout(() => resolve(value), options.loadDelayMs ?? 250))
+    new Promise((resolve) => setTimeout(() => resolve(value), options.loadDelayMs ?? 0))
   return {
     getMessage: () => delay(message),
     getConversation: () => delay(conversation),