Add core UI primitives in web/src/ui

Button, IconButton, Tag, Chip, TextInput, Segmented, Toggle, Checkbox,
Slider, Card and ListRow, styled with CSS Modules over the design tokens.
Every interactive primitive keeps a hit area of at least 44 px; visually
smaller controls draw their face inside a larger hit box.

Vitest now injects CSS Modules into jsdom (css: true) so tests assert the
sizes the stylesheets declare, alongside roles, aria states and keyboard
behaviour (Segmented arrow keys, Toggle Space/Enter, Chip "Remove X").

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/ui/Slider.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, expect, it } from 'vitest'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { Slider } from './Slider.tsx'
+
+function Harness() {
+  const [value, setValue] = useState(0.7)
+  return (
+    <Slider
+      aria-label="Creativity (temperature)"
+      min={0}
+      max={1}
+      step={0.1}
+      value={value}
+      onChange={(event) => setValue(Number(event.target.value))}
+    />
+  )
+}
+
+describe('Slider', () => {
+  it('is a native slider exposing its range and value', () => {
+    render(<Harness />)
+    const slider = screen.getByRole('slider', { name: 'Creativity (temperature)' })
+    expect(slider).toHaveAttribute('type', 'range')
+    expect(slider).toHaveAttribute('min', '0')
+    expect(slider).toHaveAttribute('max', '1')
+    expect(slider).toHaveValue('0.7')
+  })
+
+  it('updates the grape fill with the value', () => {
+    render(<Harness />)
+    const slider = screen.getByRole('slider')
+    expect(slider.style.getPropertyValue('--slider-fill')).toBe('70%')
+    fireEvent.change(slider, { target: { value: '0.2' } })
+    expect(slider).toHaveValue('0.2')
+    expect(slider.style.getPropertyValue('--slider-fill')).toBe('20%')
+  })
+
+  it('has a ≥ 44 px hit area', () => {
+    render(<Harness />)
+    expectMinHitArea(screen.getByRole('slider'))
+  })
+
+  it('fails fast on an empty range', () => {
+    expect(() => render(<Slider aria-label="Bad" min={1} max={1} value={1} readOnly />)).toThrow(
+      'max (1) must be greater than min (1)',
+    )
+  })
+})