@proteos/ui 0.45.0 → 0.46.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/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),

package/src/components/icon-picker/icon-picker.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { IconPicker } from './icon-picker'
+
+const meta: Meta<typeof IconPicker> = {
+  title: 'Components/IconPicker',
+  component: IconPicker,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-[320px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof IconPicker>
+
+function Controlled({ initial }: { initial: string | null }) {
+  const [value, setValue] = useState<string | null>(initial)
+  return (
+    <IconPicker
+      label="Icon"
+      description="Stored as the canonical Lucide name."
+      value={value}
+      onChange={setValue}
+    />
+  )
+}
+
+export const Empty: Story = {
+  render: () => <Controlled initial={null} />,
+}
+
+export const Preselected: Story = {
+  render: () => <Controlled initial="TrendingUp" />,
+}
+
+export const ResolvesLooseNames: Story = {
+  name: 'Resolves loose names (kebab-case in, canonical out)',
+  render: () => <Controlled initial="trending-up" />,
+}
+
+/** `compact` — a square, icon-only trigger for dense rows (enum value
+ *  editors, table toolbars). Same popover; `aria-label` carries the name. */
+export const Compact: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>('CircleDashed')
+    const [empty, setEmpty] = useState<string | null>(null)
+    return (
+      <div className="flex items-center gap-3">
+        <IconPicker compact aria-label="Icon" value={value} onChange={setValue} />
+        <IconPicker compact size="sm" aria-label="Icon (sm)" value={value} onChange={setValue} />
+        <IconPicker compact size="sm" aria-label="Icon (empty)" value={empty} onChange={setEmpty} />
+      </div>
+    )
+  },
+}
+
+export const Invalid: Story = {
+  render: () => (
+    <IconPicker
+      label="Icon"
+      value={null}
+      onChange={() => {}}
+      isInvalid
+      errorMessage="Pick an icon."
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => <IconPicker label="Icon" value="Layers" onChange={() => {}} isDisabled />,
+}

package/src/components/icon-picker/icon-picker.test.tsx

@@ -0,0 +1,88 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { IconPicker, resolveLucideIcon, resolveLucideIconName } from './icon-picker'
+
+describe('resolveLucideIconName', () => {
+  it('accepts canonical, kebab-case, and lowercase spellings', () => {
+    expect(resolveLucideIconName('TrendingUp')).toBe('TrendingUp')
+    expect(resolveLucideIconName('trending-up')).toBe('TrendingUp')
+    expect(resolveLucideIconName('trendingup')).toBe('TrendingUp')
+  })
+
+  it('returns null for unknown names and empty input', () => {
+    expect(resolveLucideIconName('not-an-icon')).toBeNull()
+    expect(resolveLucideIconName(null)).toBeNull()
+    expect(resolveLucideIcon('not-an-icon')).toBeNull()
+  })
+})
+
+describe('IconPicker', () => {
+  it('shows the placeholder until a value is set, then the canonical name', () => {
+    const { rerender } = render(<IconPicker label="Icon" value={null} onChange={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Icon' })).toHaveTextContent('Choose an icon…')
+
+    rerender(<IconPicker label="Icon" value="trending-up" onChange={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Icon' })).toHaveTextContent('TrendingUp')
+  })
+
+  it('searches and emits the canonical PascalCase name', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<IconPicker label="Icon" value={null} onChange={onChange} />)
+
+    await user.click(screen.getByRole('button', { name: 'Icon' }))
+    await user.type(screen.getByRole('textbox', { name: 'Search icons' }), 'trending up')
+    await user.click(await screen.findByRole('option', { name: 'TrendingUp' }))
+
+    expect(onChange).toHaveBeenCalledWith('TrendingUp')
+  })
+
+  it('clears through the Clear button', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<IconPicker label="Icon" value="Layers" onChange={onChange} />)
+
+    await user.click(screen.getByRole('button', { name: 'Icon' }))
+    await user.click(screen.getByRole('button', { name: 'Clear' }))
+
+    expect(onChange).toHaveBeenCalledWith(null)
+  })
+
+  it('compact: renders an icon-only trigger that still picks canonically', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<IconPicker compact aria-label="Enum icon" value="layers" onChange={onChange} />)
+
+    const trigger = screen.getByRole('button', { name: 'Enum icon' })
+    expect(trigger).toHaveTextContent('')
+    expect(trigger).toHaveAttribute('title', 'Layers')
+    expect(trigger.querySelector('svg')).not.toBeNull()
+
+    await user.click(trigger)
+    await user.type(screen.getByRole('textbox', { name: 'Search icons' }), 'trending up')
+    await user.click(await screen.findByRole('option', { name: 'TrendingUp' }))
+
+    expect(onChange).toHaveBeenCalledWith('TrendingUp')
+  })
+
+  it('draws one batch up front and appends the next on scroll', async () => {
+    const user = userEvent.setup()
+    render(<IconPicker label="Icon" value={null} onChange={() => {}} />)
+
+    await user.click(screen.getByRole('button', { name: 'Icon' }))
+
+    expect(screen.getAllByRole('option')).toHaveLength(120)
+    expect(screen.getByText(/more — keep scrolling/)).toBeInTheDocument()
+
+    // jsdom has no layout, so every geometry reads 0 and any scroll event
+    // counts as "near the bottom" — which is exactly what this asserts: the
+    // handler appends a batch instead of leaving the hard cap in place.
+    const grid = screen.getByRole('listbox').parentElement
+    if (!grid) throw new Error('grid wrapper missing')
+    fireEvent.scroll(grid)
+
+    expect(screen.getAllByRole('option')).toHaveLength(240)
+  })
+})