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/Toggle.tsx

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithRef, KeyboardEvent } from 'react'
+import styles from './Toggle.module.css'
+
+export type ToggleProps = Omit<
+  ComponentPropsWithRef<'button'>,
+  'type' | 'role' | 'aria-checked' | 'onChange' | 'onClick' | 'onKeyDown' | 'onKeyUp' | 'children'
+> & {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}
+
+// 40×24 pill switch (role="switch"). Name it with aria-label or
+// aria-labelledby. Space and Enter are handled here and their native button
+// activation is suppressed, so each key press toggles exactly once.
+export function Toggle({ checked, onCheckedChange, className, ...rest }: ToggleProps) {
+  function onKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+    if (event.key !== ' ' && event.key !== 'Enter') return
+    event.preventDefault()
+    onCheckedChange(!checked)
+  }
+
+  function onKeyUp(event: KeyboardEvent<HTMLButtonElement>) {
+    if (event.key === ' ') event.preventDefault()
+  }
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      className={[styles.toggle, className].filter(Boolean).join(' ')}
+      onClick={() => onCheckedChange(!checked)}
+      onKeyDown={onKeyDown}
+      onKeyUp={onKeyUp}
+      {...rest}
+    >
+      <span className={styles.track} aria-hidden="true">
+        <span className={styles.knob} />
+      </span>
+    </button>
+  )
+}