feat: added UI component suite

* animation presets

docs/solid-carbon.md

···
+# SolidJS UI Component Library
+
+Carbon-inspired component library for Malfestio.
+
+## Animations
+
+Presets defined in `src/lib/animations.ts`:
+
+- `fadeIn`, `fadeOut` - opacity transitions
+- `slideInRight`, `slideInUp` - directional entry
+- `scaleIn`, `scaleOut` - scale with opacity
+- `springConfig` - natural bounce settings
+- `staggerDelay(index)` - list animation helper
+
+## Components
+
+### Core
+
+| Component  | File                | Purpose                                          |
+| ---------- | ------------------- | ------------------------------------------------ |
+| Dialog     | `ui/Dialog.tsx`     | Modal with transactional/danger/passive variants |
+| TreeView   | `ui/TreeView.tsx`   | Expandable hierarchy with keyboard nav           |
+| DataTable  | `ui/DataTable.tsx`  | Sortable, selectable, expandable rows            |
+| SidePanel  | `ui/SidePanel.tsx`  | Collapsible left navigation                      |
+| RightPanel | `ui/RightPanel.tsx` | Slide-in detail panel                            |
+| Tabs       | `ui/Tabs.tsx`       | Line and contained variants                      |
+| Dropdown   | `ui/Dropdown.tsx`   | Single/multi select with search                  |
+| Tag        | `ui/Tag.tsx`        | Read-only, dismissible, selectable               |
+
+### Supporting
+
+| Component   | File                 | Purpose                      |
+| ----------- | -------------------- | ---------------------------- |
+| Skeleton    | `ui/Skeleton.tsx`    | Loading placeholders         |
+| EmptyState  | `ui/EmptyState.tsx`  | Zero-state UI                |
+| Tooltip     | `ui/Tooltip.tsx`     | Hover info with positioning  |
+| ProgressBar | `ui/ProgressBar.tsx` | Determinate/indeterminate    |
+| Avatar      | `ui/Avatar.tsx`      | Image with initials fallback |
+| Menu        | `ui/Menu.tsx`        | Context/dropdown actions     |
+
+### Existing
+
+| Component | File            | Purpose                        |
+| --------- | --------------- | ------------------------------ |
+| Button    | `ui/Button.tsx` | Primary/secondary/danger/ghost |
+| Card      | `ui/Card.tsx`   | Container with optional title  |
+| Toast     | `ui/Toast.tsx`  | Notifications                  |
+
+## Keyboard Navigation
+
+- **Dialog**: `Escape` to close
+- **TreeView**: Arrow keys, `Enter`/`Space` to expand
+- **Tabs**: Left/Right arrows
+- **Dropdown**: Arrow keys, `Enter` to select, `Escape` to close
+- **Menu**: Arrow keys, `Enter` to select

docs/todo.md

···
     - PDS client for `putRecord`, `deleteRecord`, `uploadBlob`.
     - TID generation and AT-URI builder in core crate.
     - Database migration for token storage and AT-URI columns.
+- **(Done) Milestone E**: Internal component library/UI Foundation + Animations.
 
-### Milestone E - Content Authoring (Notes + Cards + Deck Builder)
+### Milestone F - Content Authoring (Notes + Cards + Deck Builder)
 
 #### Deliverables
 

web/package.json

···
     "@solidjs/router": "^0.15.4",
     "@tailwindcss/vite": "^4.1.18",
     "clsx": "^2.1.1",
+    "motion": "^12.23.26",
     "rehype-external-links": "^3.0.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "solid-js": "^1.9.10",
+    "solid-motionone": "^1.0.4",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "unified": "^11.0.5"

web/pnpm-lock.yaml

···
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      motion:
+        specifier: ^12.23.26
+        version: 12.23.26
       rehype-external-links:
         specifier: ^3.0.0
         version: 3.0.0
···
       solid-js:
         specifier: ^1.9.10
         version: 1.9.10
+      solid-motionone:
+        specifier: ^1.0.4
+        version: 1.0.4(solid-js@1.9.10)
       tailwind-merge:
         specifier: ^3.4.0
         version: 3.4.0
···
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@motionone/animation@10.18.0':
+    resolution: {integrity: sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==}
+
+  '@motionone/dom@10.18.0':
+    resolution: {integrity: sha512-bKLP7E0eyO4B2UaHBBN55tnppwRnaE3KFfh3Ps9HhnAkar3Cb69kUCJY9as8LrccVYKgHA+JY5dOQqJLOPhF5A==}
+
+  '@motionone/easing@10.18.0':
+    resolution: {integrity: sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==}
+
+  '@motionone/generators@10.18.0':
+    resolution: {integrity: sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==}
+
+  '@motionone/types@10.17.1':
+    resolution: {integrity: sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==}
+
+  '@motionone/utils@10.18.0':
+    resolution: {integrity: sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==}
+
   '@napi-rs/wasm-runtime@1.1.0':
     resolution: {integrity: sha512-Fq6DJW+Bb5jaWE69/qOE0D1TUN9+6uWhCeZpdnSBk14pjLcCWR7Q8n49PTSPHazM37JqrsdpEthXy2xn6jWWiA==}
 
···
   '@rolldown/pluginutils@1.0.0-beta.50':
     resolution: {integrity: sha512-5e76wQiQVeL1ICOZVUg4LSOVYg9jyhGCin+icYozhsUzM+fHE7kddi1bdiE0jwVqTfkjba3jUFbEkoC9WkdvyA==}
 
+  '@solid-primitives/props@3.2.2':
+    resolution: {integrity: sha512-lZOTwFJajBrshSyg14nBMEP0h8MXzPowGO0s3OeiR3z6nXHTfj0FhzDtJMv+VYoRJKQHG2QRnJTgCzK6erARAw==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/refs@1.1.2':
+    resolution: {integrity: sha512-K7tf2thy7L+YJjdqXspXOg5xvNEOH8tgEWsp0+1mQk3obHBRD6hEjYZk7p7FlJphSZImS35je3UfmWuD7MhDfg==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/transition-group@1.1.2':
+    resolution: {integrity: sha512-gnHS0OmcdjeoHN9n7Khu8KNrOlRc8a2weETDt2YT6o1zeW/XtUC6Db3Q9pkMU/9cCKdEmN4b0a/41MKAHRhzWA==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/utils@6.3.2':
+    resolution: {integrity: sha512-hZ/M/qr25QOCcwDPOHtGjxTD8w2mNyVAYvcfgwzBHq2RwNqHNdDNsMZYap20+ruRwW4A3Cdkczyoz0TSxLCAPQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
   '@solidjs/meta@0.29.4':
     resolution: {integrity: sha512-zdIWBGpR9zGx1p1bzIPqF5Gs+Ks/BH8R6fWhmUa/dcK1L2rUC8BAcZJzNRYBQv74kScf1TSOs0EY//Vd/I0V8g==}
     peerDependencies:
···
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  framer-motion@12.23.26:
+    resolution: {integrity: sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
···
 
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hey-listen@1.0.8:
+    resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
 
   html-encoding-sniffer@6.0.0:
     resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
···
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  motion-dom@12.23.23:
+    resolution: {integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
+  motion@12.23.26:
+    resolution: {integrity: sha512-Ll8XhVxY8LXMVYTCfme27WH2GjBrCIzY4+ndr5QKxsK+YwCtOi2B/oBi5jcIbik5doXuWT/4KKDOVAZJkeY5VQ==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
···
 
   solid-js@1.9.10:
     resolution: {integrity: sha512-Coz956cos/EPDlhs6+jsdTxKuJDPT7B5SVIWgABwROyxjY7Xbr8wkzD68Et+NxnV7DLJ3nJdAC2r9InuV/4Jew==}
+
+  solid-motionone@1.0.4:
+    resolution: {integrity: sha512-aqEjgecoO9raDFznu/dEci7ORSmA26Kjj9J4Cn1Gyr0GZuOVdvsNxdxClTL9J40Aq/uYFx4GLwC8n70fMLHiuA==}
+    peerDependencies:
+      solid-js: ^1.8.0
 
   solid-refresh@0.6.3:
     resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==}
···
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@motionone/animation@10.18.0':
+    dependencies:
+      '@motionone/easing': 10.18.0
+      '@motionone/types': 10.17.1
+      '@motionone/utils': 10.18.0
+      tslib: 2.8.1
+
+  '@motionone/dom@10.18.0':
+    dependencies:
+      '@motionone/animation': 10.18.0
+      '@motionone/generators': 10.18.0
+      '@motionone/types': 10.17.1
+      '@motionone/utils': 10.18.0
+      hey-listen: 1.0.8
+      tslib: 2.8.1
+
+  '@motionone/easing@10.18.0':
+    dependencies:
+      '@motionone/utils': 10.18.0
+      tslib: 2.8.1
+
+  '@motionone/generators@10.18.0':
+    dependencies:
+      '@motionone/types': 10.17.1
+      '@motionone/utils': 10.18.0
+      tslib: 2.8.1
+
+  '@motionone/types@10.17.1': {}
+
+  '@motionone/utils@10.18.0':
+    dependencies:
+      '@motionone/types': 10.17.1
+      hey-listen: 1.0.8
+      tslib: 2.8.1
+
   '@napi-rs/wasm-runtime@1.1.0':
     dependencies:
       '@emnapi/core': 1.7.1
···
 
   '@rolldown/pluginutils@1.0.0-beta.50': {}
 
+  '@solid-primitives/props@3.2.2(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/refs@1.1.2(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/transition-group@1.1.2(solid-js@1.9.10)':
+    dependencies:
+      solid-js: 1.9.10
+
+  '@solid-primitives/utils@6.3.2(solid-js@1.9.10)':
+    dependencies:
+      solid-js: 1.9.10
+
   '@solidjs/meta@0.29.4(solid-js@1.9.10)':
     dependencies:
       solid-js: 1.9.10
···
 
   flatted@3.3.3: {}
 
+  framer-motion@12.23.26:
+    dependencies:
+      motion-dom: 12.23.23
+      motion-utils: 12.23.6
+      tslib: 2.8.1
+
   fsevents@2.3.3:
     optional: true
 
···
   hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
+
+  hey-listen@1.0.8: {}
 
   html-encoding-sniffer@6.0.0:
     dependencies:
···
     dependencies:
       brace-expansion: 2.0.2
 
+  motion-dom@12.23.23:
+    dependencies:
+      motion-utils: 12.23.6
+
+  motion-utils@12.23.6: {}
+
+  motion@12.23.26:
+    dependencies:
+      framer-motion: 12.23.26
+      tslib: 2.8.1
+
   ms@2.1.3: {}
 
   nanoid@3.3.11: {}
···
       seroval: 1.3.2
       seroval-plugins: 1.3.3(seroval@1.3.2)
 
+  solid-motionone@1.0.4(solid-js@1.9.10):
+    dependencies:
+      '@motionone/dom': 10.18.0
+      '@motionone/utils': 10.18.0
+      '@solid-primitives/props': 3.2.2(solid-js@1.9.10)
+      '@solid-primitives/refs': 1.1.2(solid-js@1.9.10)
+      '@solid-primitives/transition-group': 1.1.2(solid-js@1.9.10)
+      csstype: 3.2.3
+      solid-js: 1.9.10
+
   solid-refresh@0.6.3(solid-js@1.9.10):
     dependencies:
       '@babel/generator': 7.28.5
···
     dependencies:
       typescript: 5.9.3
 
-  tslib@2.8.1:
-    optional: true
+  tslib@2.8.1: {}
 
   type-check@0.4.0:
     dependencies:

web/src/components/layout/Header.tsx

···
 import { A } from "@solidjs/router";
 import { type Component, Show } from "solid-js";
 import { authStore } from "../../lib/store";
+import { Avatar } from "../ui/Avatar";
 
 const Login: Component = () => (
   <A href="/login" class="px-4 py-2 bg-white text-gray-900 text-sm font-medium hover:bg-gray-100 transition-colors">
···
               class="text-xs text-red-400 hover:text-red-300 transition-colors">
               Logout
             </button>
-            <div class="w-8 h-8 rounded-full bg-blue-900/50 border border-blue-500/30 flex items-center justify-center text-blue-400 text-xs font-bold">
-              {authStore.user()?.handle.slice(0, 2).toUpperCase()}
-            </div>
+            <Avatar name={authStore.user()?.handle} size="sm" />
           </div>
         </Show>
       </div>

web/src/components/ui/Avatar.test.tsx

···
+import { cleanup, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it } from "vitest";
+import { Avatar } from "./Avatar";
+
+describe("Avatar", () => {
+  afterEach(cleanup);
+
+  it("renders initials fallback when no src", () => {
+    render(() => <Avatar name="John Doe" />);
+    expect(screen.getByText("JD")).toBeInTheDocument();
+  });
+
+  it("renders image when src provided", () => {
+    render(() => <Avatar src="/avatar.jpg" alt="User" />);
+    const img = screen.getByRole("img");
+    expect(img).toHaveAttribute("src", "/avatar.jpg");
+  });
+
+  it("applies size classes", () => {
+    render(() => <Avatar name="Test" size="lg" />);
+    const avatar = screen.getByText("T").closest("div");
+    expect(avatar).toHaveClass("w-12");
+  });
+});

web/src/components/ui/Avatar.tsx

···
+import { Show, splitProps } from "solid-js";
+import type { Component } from "solid-js";
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+type AvatarProps = { src?: string; alt?: string; name?: string; size?: AvatarSize; class?: string };
+
+const sizeStyles = {
+  xs: "w-6 h-6 text-xs",
+  sm: "w-8 h-8 text-xs",
+  md: "w-10 h-10 text-sm",
+  lg: "w-12 h-12 text-base",
+  xl: "w-16 h-16 text-lg",
+};
+
+const getInitials = (name: string): string => {
+  return name.split(" ").map((part) => part[0]).join("").slice(0, 2).toUpperCase();
+};
+
+const stringToColor = (str: string): string => {
+  const colors = [
+    "bg-blue-600",
+    "bg-green-600",
+    "bg-purple-600",
+    "bg-pink-600",
+    "bg-indigo-600",
+    "bg-teal-600",
+    "bg-orange-600",
+    "bg-cyan-600",
+  ];
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+};
+
+export const Avatar: Component<AvatarProps> = (props) => {
+  const [local, others] = splitProps(props, ["src", "alt", "name", "size", "class"]);
+  const size = () => local.size ?? "md";
+  const initials = () => (local.name ? getInitials(local.name) : "?");
+  const bgColor = () => (local.name ? stringToColor(local.name) : "bg-gray-700");
+
+  return (
+    <div
+      class={`relative inline-flex items-center justify-center rounded-full overflow-hidden flex-shrink-0 ${
+        sizeStyles[size()]
+      } ${local.class || ""}`}
+      {...others}>
+      <Show
+        when={local.src}
+        fallback={
+          <span class={`w-full h-full flex items-center justify-center font-semibold text-white ${bgColor()}`}>
+            {initials()}
+          </span>
+        }>
+        <img
+          src={local.src}
+          alt={local.alt || local.name || "Avatar"}
+          class="w-full h-full object-cover"
+          onError={(e) => (e.currentTarget as HTMLImageElement).style.display = "none"} />
+      </Show>
+    </div>
+  );
+};

web/src/components/ui/DataTable.test.tsx

···
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { type Column, DataTable } from "./DataTable";
+
+type TestRow = { id: string; name: string; status: string };
+
+const columns: Column<TestRow>[] = [{ key: "name", header: "Name", sortable: true }, {
+  key: "status",
+  header: "Status",
+}];
+
+const data: TestRow[] = [{ id: "1", name: "Alice", status: "Active" }, { id: "2", name: "Bob", status: "Inactive" }, {
+  id: "3",
+  name: "Charlie",
+  status: "Active",
+}];
+
+describe("DataTable", () => {
+  afterEach(cleanup);
+
+  it("renders table with data", () => {
+    render(() => <DataTable columns={columns} data={data} getRowId={(r) => r.id} />);
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+    expect(screen.getByText("Bob")).toBeInTheDocument();
+  });
+
+  it("sorts by column when clicked", () => {
+    render(() => <DataTable columns={columns} data={data} getRowId={(r) => r.id} />);
+    const nameHeader = screen.getByText("Name");
+    fireEvent.click(nameHeader);
+    const rows = screen.getAllByRole("row");
+    expect(rows.length).toBe(4);
+  });
+
+  it("allows row selection", () => {
+    const handleSelection = vi.fn();
+    render(() => (
+      <DataTable
+        columns={columns}
+        data={data}
+        getRowId={(r) => r.id}
+        selectable
+        onSelectionChange={handleSelection} />
+    ));
+    const checkboxes = screen.getAllByRole("checkbox");
+    expect(checkboxes.length).toBe(4);
+    fireEvent.click(checkboxes[1]);
+    expect(handleSelection).toHaveBeenCalled();
+  });
+});

web/src/components/ui/DataTable.tsx

···
+import { createMemo, createSignal, For, Show, splitProps } from "solid-js";
+import type { Accessor, Component, JSX } from "solid-js";
+
+export type Column<T> = {
+  key: keyof T | string;
+  header: string;
+  sortable?: boolean;
+  render?: (row: T, index: number) => JSX.Element;
+  width?: string;
+};
+
+type DataTableProps<T> = {
+  columns: Column<T>[];
+  data: T[];
+  getRowId: (row: T) => string;
+  selectable?: boolean;
+  expandable?: (row: T) => JSX.Element | null;
+  onSelectionChange?: (selectedIds: string[]) => void;
+  class?: string;
+};
+
+type SortDirection = "asc" | "desc" | null;
+
+const SortIcon: Component<{ direction: SortDirection }> = (props) => (
+  <svg class="w-4 h-4 ml-1 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <Show when={props.direction === "asc"}>
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+    </Show>
+    <Show when={props.direction === "desc"}>
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+    </Show>
+    <Show when={!props.direction}>
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4M8 15l4 4 4-4" />
+    </Show>
+  </svg>
+);
+
+export function DataTable<T>(props: DataTableProps<T>): JSX.Element {
+  const [local, _others] = splitProps(props, [
+    "columns",
+    "data",
+    "getRowId",
+    "selectable",
+    "expandable",
+    "onSelectionChange",
+    "class",
+  ]);
+
+  const [sortKey, setSortKey] = createSignal<string | null>(null);
+  const [sortDir, setSortDir] = createSignal<SortDirection>(null);
+  const [selected, setSelected] = createSignal<Set<string>>(new Set());
+  const [expanded, setExpanded] = createSignal<Set<string>>(new Set());
+
+  const sortedData: Accessor<T[]> = createMemo(() => {
+    const key = sortKey();
+    const dir = sortDir();
+    if (!key || !dir) return local.data;
+
+    return [...local.data].sort((a, b) => {
+      const aVal = (a as Record<string, unknown>)[key];
+      const bVal = (b as Record<string, unknown>)[key];
+      if (aVal === bVal) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+      const cmp = aVal < bVal ? -1 : 1;
+      return dir === "asc" ? cmp : -cmp;
+    });
+  });
+
+  const handleSort = (key: string) => {
+    if (sortKey() === key) {
+      setSortDir((d) => (d === "asc" ? "desc" : d === "desc" ? null : "asc"));
+      if (sortDir() === null) setSortKey(null);
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  };
+
+  const toggleSelect = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      local.onSelectionChange?.([...next]);
+      return next;
+    });
+  };
+
+  const toggleSelectAll = () => {
+    if (selected().size === local.data.length) {
+      setSelected(new Set<string>());
+      local.onSelectionChange?.([]);
+    } else {
+      const all = new Set(local.data.map(local.getRowId));
+      setSelected(all);
+      local.onSelectionChange?.([...all]);
+    }
+  };
+
+  const toggleExpand = (id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const getCellValue = (row: T, col: Column<T>, index: number): JSX.Element => {
+    if (col.render) return col.render(row, index);
+    const value = (row as Record<string, unknown>)[col.key as string];
+    return <>{value != null ? String(value) : ""}</>;
+  };
+
+  return (
+    <div class={`overflow-x-auto ${local.class || ""}`}>
+      <table class="w-full text-sm text-left">
+        <thead class="text-xs text-gray-400 uppercase bg-gray-900 border-b border-gray-700">
+          <tr>
+            <Show when={local.expandable}>
+              <th class="w-8 px-2 py-3" />
+            </Show>
+            <Show when={local.selectable}>
+              <th class="w-8 px-2 py-3">
+                <input
+                  type="checkbox"
+                  checked={selected().size === local.data.length && local.data.length > 0}
+                  onChange={toggleSelectAll}
+                  class="w-4 h-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500" />
+              </th>
+            </Show>
+            <For each={local.columns}>
+              {(col) => (
+                <th
+                  class={`px-4 py-3 ${col.sortable ? "cursor-pointer hover:bg-gray-800 select-none" : ""}`}
+                  style={{ width: col.width }}
+                  onClick={() => col.sortable && handleSort(col.key as string)}>
+                  <span class="flex items-center">
+                    {col.header}
+                    <Show when={col.sortable}>
+                      <SortIcon direction={sortKey() === col.key ? sortDir() : null} />
+                    </Show>
+                  </span>
+                </th>
+              )}
+            </For>
+          </tr>
+        </thead>
+        <tbody>
+          <For each={sortedData()}>
+            {(row, index) => {
+              const id = local.getRowId(row);
+              const isExpanded = () => expanded().has(id);
+              const expandedContent = () => local.expandable?.(row);
+
+              return (
+                <>
+                  <tr class="border-b border-gray-800 hover:bg-gray-800/50 text-gray-300">
+                    <Show when={local.expandable}>
+                      <td class="px-2 py-3">
+                        <Show when={expandedContent()}>
+                          <button
+                            onClick={() => toggleExpand(id)}
+                            class="p-1 hover:bg-gray-700 rounded"
+                            aria-expanded={isExpanded()}
+                            aria-label={isExpanded() ? "Collapse row" : "Expand row"}>
+                            <svg
+                              class={`w-4 h-4 transition-transform ${isExpanded() ? "rotate-90" : ""}`}
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                            </svg>
+                          </button>
+                        </Show>
+                      </td>
+                    </Show>
+                    <Show when={local.selectable}>
+                      <td class="px-2 py-3">
+                        <input
+                          type="checkbox"
+                          checked={selected().has(id)}
+                          onChange={() => toggleSelect(id)}
+                          class="w-4 h-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500" />
+                      </td>
+                    </Show>
+                    <For each={local.columns}>
+                      {(col) => <td class="px-4 py-3">{getCellValue(row, col, index())}</td>}
+                    </For>
+                  </tr>
+                  <Show when={isExpanded() && expandedContent()}>
+                    <tr class="bg-gray-900/50">
+                      <td
+                        colSpan={local.columns.length + (local.selectable ? 1 : 0) + (local.expandable ? 1 : 0)}
+                        class="px-4 py-3">
+                        {expandedContent()}
+                      </td>
+                    </tr>
+                  </Show>
+                </>
+              );
+            }}
+          </For>
+        </tbody>
+      </table>
+    </div>
+  );
+}

web/src/components/ui/Dialog.test.tsx

···
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "./Button";
+import { Dialog } from "./Dialog";
+
+describe("Dialog", () => {
+  afterEach(cleanup);
+
+  it("renders when open", () => {
+    render(() => <Dialog open={true} onClose={() => {}} title="Test Dialog">Dialog content</Dialog>);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Test Dialog")).toBeInTheDocument();
+    expect(screen.getByText("Dialog content")).toBeInTheDocument();
+  });
+
+  it("does not render when closed", () => {
+    render(() => <Dialog open={false} onClose={() => {}} title="Test Dialog">Dialog content</Dialog>);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("calls onClose when backdrop clicked", () => {
+    const handleClose = vi.fn();
+    render(() => <Dialog open={true} onClose={handleClose} title="Test Dialog">Content</Dialog>);
+    const backdrop = document.querySelector("[aria-hidden=\"true\"]");
+    fireEvent.click(backdrop!);
+    expect(handleClose).toHaveBeenCalled();
+  });
+
+  it("renders actions", () => {
+    render(() => (
+      <Dialog open={true} onClose={() => {}} title="Confirm" actions={<Button>Confirm</Button>}>Are you sure?</Dialog>
+    ));
+    expect(screen.getByRole("button", { name: /confirm/i })).toBeInTheDocument();
+  });
+});

web/src/components/ui/Dialog.tsx

···
+import { onCleanup, onMount, Show, splitProps } from "solid-js";
+import type { Component, JSX } from "solid-js";
+
+export type DialogVariant = "transactional" | "danger" | "passive";
+
+type DialogProps = {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  variant?: DialogVariant;
+  children: JSX.Element;
+  actions?: JSX.Element;
+};
+
+const variantStyles: Record<DialogVariant, { header: string; primary: string }> = {
+  transactional: { header: "border-b border-gray-700", primary: "bg-blue-600 hover:bg-blue-500" },
+  danger: { header: "border-b border-red-900/50", primary: "bg-red-600 hover:bg-red-500" },
+  passive: { header: "border-b border-gray-700", primary: "bg-gray-600 hover:bg-gray-500" },
+};
+
+export const Dialog: Component<DialogProps> = (props) => {
+  const [local, _others] = splitProps(props, ["open", "onClose", "title", "variant", "children", "actions"]);
+  const variant = () => local.variant ?? "transactional";
+  let dialogRef: HTMLDivElement | undefined;
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && local.open) {
+      local.onClose();
+    }
+  };
+
+  onMount(() => {
+    document.addEventListener("keydown", handleKeyDown);
+  });
+
+  onCleanup(() => {
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+
+  return (
+    <Show when={local.open}>
+      <div
+        class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm animate-fade-in"
+        onClick={() => local.onClose()}
+        aria-hidden="true" />
+
+      <div
+        class="fixed inset-0 z-50 flex items-center justify-center p-4 animate-scale-in"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dialog-title">
+        <div
+          ref={dialogRef}
+          class="w-full max-w-md bg-gray-900 border border-gray-700 shadow-2xl"
+          onClick={(e) => e.stopPropagation()}>
+          <div class={`px-6 py-4 ${variantStyles[variant()].header}`}>
+            <h2 id="dialog-title" class="text-lg font-semibold text-white">{local.title}</h2>
+          </div>
+          <div class="px-6 py-4 text-gray-300">{local.children}</div>
+          <Show when={local.actions}>
+            <div class="px-6 py-4 bg-gray-950/50 flex justify-end gap-3">{local.actions}</div>
+          </Show>
+        </div>
+      </div>
+    </Show>
+  );
+};

web/src/components/ui/Dropdown.test.tsx

···
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Dropdown, type DropdownOption } from "./Dropdown";
+
+const options: DropdownOption[] = [{ value: "a", label: "Option A" }, { value: "b", label: "Option B" }, {
+  value: "c",
+  label: "Option C",
+  disabled: true,
+}];
+
+describe("Dropdown", () => {
+  afterEach(cleanup);
+
+  it("renders with placeholder", () => {
+    render(() => <Dropdown options={options} placeholder="Select..." />);
+    expect(screen.getByText("Select...")).toBeInTheDocument();
+  });
+
+  it("opens dropdown on click", () => {
+    render(() => <Dropdown options={options} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(screen.getByText("Option A")).toBeInTheDocument();
+  });
+
+  it("calls onChange when option selected", () => {
+    const handleChange = vi.fn();
+    render(() => <Dropdown options={options} onChange={handleChange} />);
+    fireEvent.click(screen.getByRole("button"));
+    fireEvent.click(screen.getByText("Option A"));
+    expect(handleChange).toHaveBeenCalledWith("a");
+  });
+
+  it("supports multi-select", () => {
+    const handleChange = vi.fn();
+    render(() => <Dropdown options={options} multiple onChange={handleChange} />);
+    fireEvent.click(screen.getByRole("button"));
+    fireEvent.click(screen.getByText("Option A"));
+    expect(handleChange).toHaveBeenCalledWith(["a"]);
+  });
+});

web/src/components/ui/Dropdown.tsx

···
+import { createSignal, For, onCleanup, onMount, Show, splitProps } from "solid-js";
+import type { Component } from "solid-js";
+import { Motion, Presence } from "solid-motionone";
+
+export type DropdownOption = { value: string; label: string; disabled?: boolean };
+
+type DropdownProps = {
+  options: DropdownOption[];
+  value?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  placeholder?: string;
+  multiple?: boolean;
+  searchable?: boolean;
+  disabled?: boolean;
+  class?: string;
+};
+
+const ChevronIcon: Component<{ open: boolean }> = (props) => (
+  <svg
+    class={`w-4 h-4 transition-transform ${props.open ? "rotate-180" : ""}`}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+  </svg>
+);
+
+export const Dropdown: Component<DropdownProps> = (props) => {
+  const [local, _others] = splitProps(props, [
+    "options",
+    "value",
+    "onChange",
+    "placeholder",
+    "multiple",
+    "searchable",
+    "disabled",
+    "class",
+  ]);
+
+  const [open, setOpen] = createSignal(false);
+  const [search, setSearch] = createSignal("");
+  const [focusIndex, setFocusIndex] = createSignal(-1);
+  let containerRef: HTMLDivElement | undefined;
+  let inputRef: HTMLInputElement | undefined;
+
+  const selectedValues = (): string[] => {
+    if (!local.value) return [];
+    return Array.isArray(local.value) ? local.value : [local.value];
+  };
+
+  const filteredOptions = () => {
+    const q = search().toLowerCase();
+    if (!q) return local.options;
+    return local.options.filter((o) => o.label.toLowerCase().includes(q));
+  };
+
+  const displayLabel = () => {
+    const vals = selectedValues();
+    if (vals.length === 0) return local.placeholder || "Select...";
+    if (vals.length === 1) {
+      return local.options.find((o) => o.value === vals[0])?.label || vals[0];
+    }
+    return `${vals.length} selected`;
+  };
+
+  const toggleOption = (value: string) => {
+    if (local.multiple) {
+      const current = selectedValues();
+      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+      local.onChange?.(next);
+    } else {
+      local.onChange?.(value);
+      setOpen(false);
+    }
+    setSearch("");
+  };
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (containerRef && !containerRef.contains(e.target as Node)) {
+      setOpen(false);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    const opts = filteredOptions();
+    if (e.key === "Escape") {
+      setOpen(false);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocusIndex((prev) => Math.min(prev + 1, opts.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocusIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && focusIndex() >= 0) {
+      e.preventDefault();
+      const opt = opts[focusIndex()];
+      if (opt && !opt.disabled) toggleOption(opt.value);
+    }
+  };
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside);
+  });
+
+  onCleanup(() => {
+    document.removeEventListener("click", handleClickOutside);
+  });
+
+  return (
+    <div ref={containerRef} class={`relative ${local.class || ""}`} onKeyDown={handleKeyDown}>
+      {/* Trigger */}
+      <button
+        type="button"
+        disabled={local.disabled}
+        onClick={() => {
+          setOpen(!open());
+          if (!open() && inputRef) inputRef.focus();
+        }}
+        class={`w-full flex items-center justify-between gap-2 px-4 py-2 bg-gray-800 border border-gray-700 text-left text-sm transition-colors rounded
+          ${
+          local.disabled
+            ? "opacity-50 cursor-not-allowed"
+            : "hover:border-gray-600 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+        }
+          ${open() ? "border-blue-500 ring-1 ring-blue-500" : ""}
+        `}
+        aria-haspopup="listbox"
+        aria-expanded={open()}>
+        <span class={`truncate ${selectedValues().length === 0 ? "text-gray-500" : "text-white"}`}>
+          {displayLabel()}
+        </span>
+        <ChevronIcon open={open()} />
+      </button>
+
+      {/* Dropdown */}
+      <Presence>
+        <Show when={open()}>
+          <Motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.15 }}
+            class="absolute z-50 mt-1 w-full bg-gray-800 border border-gray-700 rounded shadow-xl max-h-60 overflow-hidden">
+            {/* Search */}
+            <Show when={local.searchable}>
+              <div class="p-2 border-b border-gray-700">
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={search()}
+                  onInput={(e) => {
+                    setSearch(e.currentTarget.value);
+                    setFocusIndex(0);
+                  }}
+                  placeholder="Search..."
+                  class="w-full px-3 py-1.5 bg-gray-900 border border-gray-700 rounded text-sm text-white placeholder-gray-500 focus:outline-none focus:border-blue-500" />
+              </div>
+            </Show>
+
+            {/* Options */}
+            <ul role="listbox" class="overflow-y-auto max-h-48 py-1">
+              <For each={filteredOptions()}>
+                {(option, index) => {
+                  const isSelected = () => selectedValues().includes(option.value);
+                  const isFocused = () => focusIndex() === index();
+
+                  return (
+                    <li
+                      role="option"
+                      aria-selected={isSelected()}
+                      aria-disabled={option.disabled}
+                      onClick={() => !option.disabled && toggleOption(option.value)}
+                      onMouseEnter={() => setFocusIndex(index())}
+                      class={`flex items-center gap-2 px-4 py-2 text-sm cursor-pointer transition-colors
+                        ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}
+                        ${isFocused() ? "bg-gray-700" : ""}
+                        ${isSelected() ? "text-blue-400" : "text-gray-300"}
+                      `}>
+                      <Show when={local.multiple}>
+                        <input
+                          type="checkbox"
+                          checked={isSelected()}
+                          disabled={option.disabled}
+                          class="w-4 h-4 rounded border-gray-600 bg-gray-700 text-blue-600"
+                          tabIndex={-1} />
+                      </Show>
+                      <span class="truncate">{option.label}</span>
+                      <Show when={isSelected() && !local.multiple}>
+                        <svg class="w-4 h-4 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                        </svg>
+                      </Show>
+                    </li>
+                  );
+                }}
+              </For>
+              <Show when={filteredOptions().length === 0}>
+                <li class="px-4 py-2 text-sm text-gray-500">No options found</li>
+              </Show>
+            </ul>
+          </Motion.div>
+        </Show>
+      </Presence>
+    </div>
+  );
+};

web/src/components/ui/EmptyState.tsx

···
+import { Show, splitProps } from "solid-js";
+import type { Component, JSX } from "solid-js";
+
+type EmptyStateProps = {
+  title: string;
+  description?: string;
+  icon?: JSX.Element;
+  action?: JSX.Element;
+  class?: string;
+};
+
+const DefaultIcon: Component = () => (
+  <svg class="w-12 h-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+  </svg>
+);
+
+export const EmptyState: Component<EmptyStateProps> = (props) => {
+  const [local, _others] = splitProps(props, ["title", "description", "icon", "action", "class"]);
+
+  return (
+    <div class={`flex flex-col items-center justify-center py-12 px-4 text-center ${local.class || ""}`}>
+      <div class="mb-4">{local.icon ?? <DefaultIcon />}</div>
+      <h3 class="text-lg font-semibold text-white mb-2">{local.title}</h3>
+      <Show when={local.description}>
+        <p class="text-sm text-gray-400 max-w-sm mb-6">{local.description}</p>
+      </Show>
+      <Show when={local.action}>{local.action}</Show>
+    </div>
+  );
+};

web/src/components/ui/Menu.test.tsx

···
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Menu, type MenuItem } from "./Menu";
+
+const items: MenuItem[] = [{ id: "edit", label: "Edit", shortcut: "⌘E" }, {
+  id: "delete",
+  label: "Delete",
+  danger: true,
+}];
+
+describe("Menu", () => {
+  afterEach(cleanup);
+
+  it("renders trigger", () => {
+    render(() => <Menu items={items} trigger={<button>Open</button>} />);
+    expect(screen.getByText("Open")).toBeInTheDocument();
+  });
+
+  it("opens menu on trigger click", () => {
+    render(() => <Menu items={items} trigger={<button>Open</button>} />);
+    fireEvent.click(screen.getByText("Open"));
+    expect(screen.getByRole("menu")).toBeInTheDocument();
+    expect(screen.getByText("Edit")).toBeInTheDocument();
+  });
+
+  it("calls onClick when item clicked", () => {
+    const handleClick = vi.fn();
+    const itemsWithHandler: MenuItem[] = [{ id: "action", label: "Action", onClick: handleClick }];
+    render(() => <Menu items={itemsWithHandler} trigger={<button>Open</button>} />);
+    fireEvent.click(screen.getByText("Open"));
+    fireEvent.click(screen.getByText("Action"));
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it("displays keyboard shortcuts", () => {
+    render(() => <Menu items={items} trigger={<button>Open</button>} />);
+    fireEvent.click(screen.getByText("Open"));
+    expect(screen.getByText("⌘E")).toBeInTheDocument();
+  });
+});

web/src/components/ui/Menu.tsx

···
+import { createSignal, For, onCleanup, onMount, Show, splitProps } from "solid-js";
+import type { Component, JSX } from "solid-js";
+import { Motion, Presence } from "solid-motionone";
+
+export type MenuItem = {
+  id: string;
+  label: string;
+  icon?: JSX.Element;
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+  onClick?: () => void;
+};
+
+export type MenuDivider = { type: "divider" };
+
+export type MenuItemType = MenuItem | MenuDivider;
+
+type MenuProps = { items: MenuItemType[]; trigger: JSX.Element; align?: "left" | "right"; class?: string };
+
+const isDivider = (item: MenuItemType): item is MenuDivider => "type" in item && item.type === "divider";
+
+export const Menu: Component<MenuProps> = (props) => {
+  const [local, _others] = splitProps(props, ["items", "trigger", "align", "class"]);
+  const align = () => local.align ?? "left";
+
+  const [open, setOpen] = createSignal(false);
+  const [focusIndex, setFocusIndex] = createSignal(-1);
+  let containerRef: HTMLDivElement | undefined;
+
+  const menuItems = () => local.items.filter((item): item is MenuItem => !isDivider(item));
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (containerRef && !containerRef.contains(e.target as Node)) {
+      setOpen(false);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!open()) return;
+
+    const items = menuItems();
+    if (e.key === "Escape") {
+      setOpen(false);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocusIndex((prev) => {
+        let next = prev + 1;
+        while (next < items.length && items[next].disabled) next++;
+        return next < items.length ? next : prev;
+      });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocusIndex((prev) => {
+        let next = prev - 1;
+        while (next >= 0 && items[next].disabled) next--;
+        return next >= 0 ? next : prev;
+      });
+    } else if (e.key === "Enter" && focusIndex() >= 0) {
+      e.preventDefault();
+      const item = items[focusIndex()];
+      if (item && !item.disabled) {
+        item.onClick?.();
+        setOpen(false);
+      }
+    }
+  };
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside);
+  });
+
+  onCleanup(() => {
+    document.removeEventListener("click", handleClickOutside);
+  });
+
+  let itemIndex = 0;
+
+  return (
+    <div ref={containerRef} class={`relative inline-block ${local.class || ""}`} onKeyDown={handleKeyDown}>
+      {/* Trigger */}
+      <div
+        onClick={() => {
+          setOpen(!open());
+          setFocusIndex(-1);
+        }}
+        class="cursor-pointer"
+        aria-haspopup="menu"
+        aria-expanded={open()}>
+        {local.trigger}
+      </div>
+
+      {/* Menu */}
+      <Presence>
+        <Show when={open()}>
+          <Motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.15 }}
+            class={`absolute z-50 mt-1 min-w-48 bg-gray-800 border border-gray-700 rounded-lg shadow-xl py-1 ${
+              align() === "right" ? "right-0" : "left-0"
+            }`}
+            role="menu">
+            <For each={local.items}>
+              {(item) => {
+                if (isDivider(item)) {
+                  return <div class="my-1 h-px bg-gray-700" role="separator" />;
+                }
+
+                const currentIndex = itemIndex;
+                itemIndex++;
+                const isFocused = () => focusIndex() === currentIndex;
+
+                return (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    disabled={item.disabled}
+                    onClick={() => {
+                      if (!item.disabled) {
+                        item.onClick?.();
+                        setOpen(false);
+                      }
+                    }}
+                    onMouseEnter={() => setFocusIndex(currentIndex)}
+                    class={`w-full flex items-center gap-3 px-4 py-2 text-sm text-left transition-colors
+                      ${item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+                      ${isFocused() ? "bg-gray-700" : ""}
+                      ${item.danger ? "text-red-400 hover:bg-red-900/30" : "text-gray-300"}
+                    `}>
+                    <Show when={item.icon}>
+                      <span class="w-4 h-4 flex items-center justify-center flex-shrink-0">{item.icon}</span>
+                    </Show>
+                    <span class="flex-1">{item.label}</span>
+                    <Show when={item.shortcut}>
+                      <kbd class="text-xs text-gray-500 font-mono">{item.shortcut}</kbd>
+                    </Show>
+                  </button>
+                );
+              }}
+            </For>
+          </Motion.div>
+        </Show>
+      </Presence>
+    </div>
+  );
+};

web/src/components/ui/ProgressBar.tsx

···
+import { Show, splitProps } from "solid-js";
+import type { Component } from "solid-js";
+
+type ProgressBarSize = "sm" | "md" | "lg";
+type ProgressBarColor = "blue" | "green" | "red" | "yellow";
+
+type ProgressBarProps = {
+  value?: number;
+  size?: ProgressBarSize;
+  color?: ProgressBarColor;
+  label?: string;
+  showValue?: boolean;
+  class?: string;
+};
+
+const sizeStyles: { [key in ProgressBarSize]: string } = { sm: "h-1", md: "h-2", lg: "h-3" };
+
+const colorStyles: { [key in ProgressBarColor]: string } = {
+  blue: "bg-blue-500",
+  green: "bg-green-500",
+  red: "bg-red-500",
+  yellow: "bg-yellow-500",
+};
+
+export const ProgressBar: Component<ProgressBarProps> = (props) => {
+  const [local, _others] = splitProps(props, ["value", "size", "color", "label", "showValue", "class"]);
+  const size = () => local.size ?? "md";
+  const color = () => local.color ?? "blue";
+  const isIndeterminate = () => local.value === undefined;
+  const clampedValue = () => Math.min(100, Math.max(0, local.value ?? 0));
+
+  return (
+    <div class={local.class || ""}>
+      <Show when={local.label || local.showValue}>
+        <div class="flex justify-between mb-1">
+          <Show when={local.label}>
+            <span class="text-sm text-gray-300">{local.label}</span>
+          </Show>
+          <Show when={local.showValue && !isIndeterminate()}>
+            <span class="text-sm text-gray-400">{Math.round(clampedValue())}%</span>
+          </Show>
+        </div>
+      </Show>
+      <div
+        class={`w-full bg-gray-800 rounded-full overflow-hidden ${sizeStyles[size()]}`}
+        role="progressbar"
+        aria-valuenow={isIndeterminate() ? undefined : clampedValue()}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label={local.label}>
+        <div
+          class={`${sizeStyles[size()]} ${colorStyles[color()]} rounded-full transition-all duration-300 ${
+            isIndeterminate() ? "w-1/3 animate-[shimmer_1.5s_ease-in-out_infinite]" : ""
+          }`}
+          style={isIndeterminate() ? undefined : { width: `${clampedValue()}%` }} />
+      </div>
+    </div>
+  );
+};

web/src/components/ui/RightPanel.tsx

···
+import { onCleanup, onMount, Show, splitProps } from "solid-js";
+import type { Component, JSX } from "solid-js";
+import { Motion, Presence } from "solid-motionone";
+
+type RightPanelProps = {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  width?: string;
+  children: JSX.Element;
+  class?: string;
+};
+
+export const RightPanel: Component<RightPanelProps> = (props) => {
+  const [local, _others] = splitProps(props, ["open", "onClose", "title", "width", "children", "class"]);
+  const width = () => local.width ?? "400px";
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && local.open) {
+      local.onClose();
+    }
+  };
+
+  onMount(() => {
+    document.addEventListener("keydown", handleKeyDown);
+  });
+
+  onCleanup(() => {
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+
+  return (
+    <Presence>
+      <Show when={local.open}>
+        {/* Backdrop */}
+        <Motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.15 }}
+          class="fixed inset-0 z-40 bg-black/40"
+          onClick={local.onClose}
+          aria-hidden="true" />
+        {/* Panel */}
+        <Motion.div
+          initial={{ x: "100%" }}
+          animate={{ x: 0 }}
+          exit={{ x: "100%" }}
+          transition={{ duration: 0.25, easing: [0.22, 1, 0.36, 1] }}
+          class={`fixed top-0 right-0 bottom-0 z-50 bg-gray-900 border-l border-gray-800 shadow-2xl flex flex-col ${
+            local.class || ""
+          }`}
+          style={{ width: width() }}
+          role="dialog"
+          aria-modal="true"
+          aria-label={local.title || "Panel"}>
+          {/* Header */}
+          <div class="h-16 flex items-center justify-between px-6 border-b border-gray-800">
+            <Show when={local.title}>
+              <h2 class="text-lg font-semibold text-white">{local.title}</h2>
+            </Show>
+            <button
+              onClick={() => local.onClose()}
+              class="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded transition-colors ml-auto"
+              aria-label="Close panel">
+              <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          {/* Content */}
+          <div class="flex-1 overflow-y-auto p-6 text-gray-300">{local.children}</div>
+        </Motion.div>
+      </Show>
+    </Presence>
+  );
+};

web/src/components/ui/SidePanel.tsx

···
+import { createSignal, For, Show, splitProps } from "solid-js";
+import type { Component, JSX } from "solid-js";
+
+export type NavItem = { id: string; label: string; icon?: JSX.Element; href?: string; onClick?: () => void };
+
+type SidePanelProps = {
+  items: NavItem[];
+  activeId?: string;
+  collapsed?: boolean;
+  onToggle?: () => void;
+  header?: JSX.Element;
+  footer?: JSX.Element;
+  class?: string;
+};
+
+const MenuIcon: Component = () => (
+  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+  </svg>
+);
+
+export const SidePanel: Component<SidePanelProps> = (props) => {
+  const [local, _others] = splitProps(props, [
+    "items",
+    "activeId",
+    "collapsed",
+    "onToggle",
+    "header",
+    "footer",
+    "class",
+  ]);
+  const [internalCollapsed, setInternalCollapsed] = createSignal(false);
+  const isCollapsed = () => local.collapsed ?? internalCollapsed();
+
+  const toggle = () => {
+    if (local.onToggle) {
+      local.onToggle();
+    } else {
+      setInternalCollapsed(!internalCollapsed());
+    }
+  };
+
+  return (
+    <aside
+      class={`flex flex-col bg-gray-900 border-r border-gray-800 transition-all duration-200 ${
+        isCollapsed() ? "w-16" : "w-64"
+      } ${local.class || ""}`}>
+      {/* Header */}
+      <div class="h-16 flex items-center justify-between px-4 border-b border-gray-800">
+        <Show when={!isCollapsed() && local.header}>{local.header}</Show>
+        <button
+          onClick={toggle}
+          class="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded transition-colors"
+          aria-label={isCollapsed() ? "Expand sidebar" : "Collapse sidebar"}>
+          <MenuIcon />
+        </button>
+      </div>
+
+      {/* Navigation */}
+      <nav class="flex-1 py-4 overflow-y-auto" role="navigation">
+        <ul class="space-y-1 px-2">
+          <For each={local.items}>
+            {(item) => {
+              const isActive = () => local.activeId === item.id;
+              const Component = item.href ? "a" : "button";
+
+              return (
+                <li>
+                  <Component
+                    href={item.href}
+                    onClick={item.onClick}
+                    class={`w-full flex items-center gap-3 px-3 py-2 rounded transition-colors text-sm ${
+                      isActive() ? "bg-blue-600/20 text-blue-400" : "text-gray-400 hover:text-white hover:bg-gray-800"
+                    }`}
+                    aria-current={isActive() ? "page" : undefined}>
+                    <Show when={item.icon}>
+                      <span class="w-5 h-5 flex items-center justify-center flex-shrink-0">{item.icon}</span>
+                    </Show>
+                    <Show when={!isCollapsed()}>
+                      <span class="truncate">{item.label}</span>
+                    </Show>
+                  </Component>
+                </li>
+              );
+            }}
+          </For>
+        </ul>
+      </nav>
+
+      {/* Footer */}
+      <Show when={local.footer}>
+        <div class="border-t border-gray-800 px-4 py-4">
+          <Show when={!isCollapsed()}>{local.footer}</Show>
+        </div>
+      </Show>
+    </aside>
+  );
+};

web/src/components/ui/Skeleton.test.tsx

···
+import { cleanup, render } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it } from "vitest";
+import { Skeleton, SkeletonAvatar, SkeletonText } from "./Skeleton";
+
+describe("Skeleton", () => {
+  afterEach(cleanup);
+
+  it("renders basic skeleton", () => {
+    render(() => <Skeleton width="100px" height="20px" />);
+    const skeleton = document.querySelector("[aria-hidden=\"true\"]");
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton).toHaveClass("animate-pulse");
+  });
+
+  it("applies rounded classes", () => {
+    render(() => <Skeleton rounded="full" />);
+    const skeleton = document.querySelector("[aria-hidden=\"true\"]");
+    expect(skeleton).toHaveClass("rounded-full");
+  });
+});
+
+describe("SkeletonText", () => {
+  afterEach(cleanup);
+
+  it("renders multiple lines", () => {
+    render(() => <SkeletonText lines={4} />);
+    const skeletons = document.querySelectorAll("[aria-hidden=\"true\"]");
+    expect(skeletons.length).toBe(4);
+  });
+});
+
+describe("SkeletonAvatar", () => {
+  afterEach(cleanup);
+
+  it("renders circular skeleton", () => {
+    render(() => <SkeletonAvatar size="lg" />);
+    const skeleton = document.querySelector("[aria-hidden=\"true\"]");
+    expect(skeleton).toHaveClass("rounded-full");
+  });
+});

web/src/components/ui/Skeleton.tsx

···
+import { For, splitProps } from "solid-js";
+import type { Component, JSX } from "solid-js";
+
+type SkeletonSize = "sm" | "md" | "lg";
+type SkeletonRounded = "none" | SkeletonSize | "full";
+
+type SkeletonProps = { width?: string; height?: string; rounded?: SkeletonRounded };
+
+const roundedClass: Record<string, string> = {
+  none: "",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full",
+};
+
+export const Skeleton: Component<JSX.HTMLAttributes<HTMLDivElement> & SkeletonProps> = (props) => {
+  const [local, others] = splitProps(props, ["width", "height", "rounded", "class"]);
+  const rounded = () => local.rounded ?? "md";
+
+  return (
+    <div
+      class={`animate-pulse bg-gray-800 ${roundedClass[rounded()]} ${local.class || ""}`}
+      style={{ width: local.width, height: local.height || "1rem" }}
+      aria-hidden="true"
+      {...others} />
+  );
+};
+
+/** Skeleton text line */
+export const SkeletonText: Component<{ lines?: number; class?: string }> = (props) => {
+  const lines = () => props.lines ?? 3;
+
+  return (
+    <div class={`space-y-2 ${props.class || ""}`}>
+      <For each={Array.from({ length: lines() })}>
+        {(line) => <Skeleton width={line === lines() - 1 ? "75%" : "100%"} height="0.875rem" />}
+      </For>
+    </div>
+  );
+};
+
+export const SkeletonAvatar: Component<{ size?: "sm" | "md" | "lg" }> = (props) => {
+  const sizes = { sm: "32px", md: "48px", lg: "64px" };
+  const size = () => sizes[props.size ?? "md"];
+  return <Skeleton width={size()} height={size()} rounded="full" />;
+};

web/src/components/ui/Tabs.test.tsx

···
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { type Tab, Tabs } from "./Tabs";
+
+const tabs: Tab[] = [{ id: "tab1", label: "First" }, { id: "tab2", label: "Second" }, {
+  id: "tab3",
+  label: "Third",
+  disabled: true,
+}];
+
+describe("Tabs", () => {
+  afterEach(cleanup);
+
+  it("renders tab list", () => {
+    render(() => <Tabs tabs={tabs} />);
+    expect(screen.getByRole("tablist")).toBeInTheDocument();
+    expect(screen.getByText("First")).toBeInTheDocument();
+    expect(screen.getByText("Second")).toBeInTheDocument();
+  });
+
+  it("selects first tab by default", () => {
+    render(() => <Tabs tabs={tabs} />);
+    const first = screen.getByText("First");
+    expect(first).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("switches tabs on click", () => {
+    const handleChange = vi.fn();
+    render(() => <Tabs tabs={tabs} onTabChange={handleChange} />);
+    fireEvent.click(screen.getByText("Second"));
+    expect(handleChange).toHaveBeenCalledWith("tab2");
+  });
+
+  it("respects disabled state", () => {
+    const handleChange = vi.fn();
+    render(() => <Tabs tabs={tabs} onTabChange={handleChange} />);
+    const disabled = screen.getByText("Third");
+    fireEvent.click(disabled);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+});

web/src/components/ui/Tabs.tsx

···
+import { createEffect, createSignal, For, Show, splitProps } from "solid-js";
+import type { Accessor, Component, JSX } from "solid-js";
+
+export type Tab = { id: string; label: string; icon?: JSX.Element; disabled?: boolean };
+
+type TabsProps = {
+  tabs: Tab[];
+  activeTab?: string;
+  onTabChange?: (tabId: string) => void;
+  variant?: "line" | "contained";
+  children?: (activeTab: Accessor<string>) => JSX.Element;
+  class?: string;
+};
+
+// type TabsContextValue = { activeTab: Accessor<string>; setActiveTab: Setter<string> };
+
+export const Tabs: Component<TabsProps> = (props) => {
+  const [local, _others] = splitProps(props, ["tabs", "activeTab", "onTabChange", "variant", "children", "class"]);
+  const variant = () => local.variant ?? "line";
+  const [internalTab, setInternalTab] = createSignal("");
+  const activeTab = () => local.activeTab ?? internalTab();
+
+  createEffect(() => {
+    if (local.tabs.length > 0) {
+      setInternalTab(local.tabs[0].id);
+    }
+  });
+
+  const selectTab = (tabId: string) => {
+    if (local.onTabChange) {
+      local.onTabChange(tabId);
+    } else {
+      setInternalTab(tabId);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent, currentIndex: number) => {
+    const enabledTabs = local.tabs.filter((t) => !t.disabled);
+    const currentEnabledIndex = enabledTabs.findIndex((t) => t.id === local.tabs[currentIndex].id);
+
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      const delta = e.key === "ArrowRight" ? 1 : -1;
+      const nextIndex = (currentEnabledIndex + delta + enabledTabs.length) % enabledTabs.length;
+      selectTab(enabledTabs[nextIndex].id);
+    }
+  };
+
+  return (
+    <div class={local.class || ""}>
+      {/* Tab List */}
+      <div
+        role="tablist"
+        class={`flex ${variant() === "line" ? "border-b border-gray-800" : "bg-gray-900 p-1 rounded-lg"}`}>
+        <For each={local.tabs}>
+          {(tab, index) => {
+            const isActive = () => activeTab() === tab.id;
+            const isDisabled = () => tab.disabled ?? false;
+
+            return (
+              <button
+                role="tab"
+                aria-selected={isActive()}
+                aria-disabled={isDisabled()}
+                tabIndex={isActive() ? 0 : -1}
+                disabled={isDisabled()}
+                onClick={() => !isDisabled() && selectTab(tab.id)}
+                onKeyDown={(e) => handleKeyDown(e, index())}
+                class={`
+                  flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset
+                  ${isDisabled() ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+                  ${
+                  variant() === "line"
+                    ? `border-b-2 -mb-px ${
+                      isActive()
+                        ? "border-blue-500 text-blue-400"
+                        : "border-transparent text-gray-400 hover:text-white hover:border-gray-600"
+                    }`
+                    : `rounded-md ${
+                      isActive() ? "bg-gray-700 text-white shadow" : "text-gray-400 hover:text-white hover:bg-gray-800"
+                    }`
+                }
+                `}>
+                <Show when={tab.icon}>
+                  <span class="w-4 h-4">{tab.icon}</span>
+                </Show>
+                {tab.label}
+              </button>
+            );
+          }}
+        </For>
+      </div>
+      {/* Tab Content */}
+      <Show when={local.children}>
+        <div role="tabpanel" class="pt-4">{local.children!(activeTab)}</div>
+      </Show>
+    </div>
+  );
+};

web/src/components/ui/Tag.test.tsx

···
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Tag } from "./Tag";
+
+describe("Tag", () => {
+  afterEach(cleanup);
+
+  it("renders label", () => {
+    render(() => <Tag label="Test Tag" />);
+    expect(screen.getByText("Test Tag")).toBeInTheDocument();
+  });
+
+  it("shows dismiss button for dismissible type", () => {
+    const handleDismiss = vi.fn();
+    render(() => <Tag label="Dismissible" type="dismissible" onDismiss={handleDismiss} />);
+    const dismissBtn = screen.getByRole("button", { name: /remove/i });
+    expect(dismissBtn).toBeInTheDocument();
+    fireEvent.click(dismissBtn);
+    expect(handleDismiss).toHaveBeenCalled();
+  });
+
+  it("supports selectable type", () => {
+    const handleSelect = vi.fn();
+    render(() => <Tag label="Selectable" type="selectable" onSelect={handleSelect} />);
+    const tag = screen.getByRole("button");
+    fireEvent.click(tag);
+    expect(handleSelect).toHaveBeenCalled();
+  });
+
+  it("shows selected state", () => {
+    render(() => <Tag label="Selected" type="selectable" selected color="blue" />);
+    const tag = screen.getByText("Selected").parentElement;
+    expect(tag).toHaveClass("bg-blue-600");
+  });
+});

web/src/components/ui/Tag.tsx

···
+import { Show, splitProps } from "solid-js";
+import type { Component, JSX } from "solid-js";
+
+export type TagType = "read-only" | "dismissible" | "selectable";
+export type TagColor = "gray" | "blue" | "green" | "red" | "yellow" | "purple";
+
+type TagProps = {
+  label: string;
+  type?: TagType;
+  color?: TagColor;
+  selected?: boolean;
+  onDismiss?: () => void;
+  onSelect?: () => void;
+  icon?: JSX.Element;
+  class?: string;
+};
+
+const colorStyles: Record<TagColor, { base: string; selected: string }> = {
+  gray: { base: "bg-gray-800 text-gray-300 border-gray-700", selected: "bg-gray-600 text-white border-gray-500" },
+  blue: { base: "bg-blue-900/40 text-blue-300 border-blue-800", selected: "bg-blue-600 text-white border-blue-500" },
+  green: {
+    base: "bg-green-900/40 text-green-300 border-green-800",
+    selected: "bg-green-600 text-white border-green-500",
+  },
+  red: { base: "bg-red-900/40 text-red-300 border-red-800", selected: "bg-red-600 text-white border-red-500" },
+  yellow: {
+    base: "bg-yellow-900/40 text-yellow-300 border-yellow-800",
+    selected: "bg-yellow-600 text-white border-yellow-500",
+  },
+  purple: {
+    base: "bg-purple-900/40 text-purple-300 border-purple-800",
+    selected: "bg-purple-600 text-white border-purple-500",
+  },
+};
+
+export const Tag: Component<TagProps> = (props) => {
+  const [local, _others] = splitProps(props, [
+    "label",
+    "type",
+    "color",
+    "selected",
+    "onDismiss",
+    "onSelect",
+    "icon",
+    "class",
+  ]);
+  const type = () => local.type ?? "read-only";
+  const color = () => local.color ?? "gray";
+
+  const baseClass = () => {
+    const c = colorStyles[color()];
+    const isSelected = local.selected && type() === "selectable";
+    return isSelected ? c.selected : c.base;
+  };
+
+  const handleClick = () => {
+    if (type() === "selectable") {
+      local.onSelect?.();
+    }
+  };
+
+  const handleDismiss = (e: MouseEvent) => {
+    e.stopPropagation();
+    local.onDismiss?.();
+  };
+
+  return (
+    <span
+      onClick={handleClick}
+      role={type() === "selectable" ? "button" : undefined}
+      tabIndex={type() === "selectable" ? 0 : undefined}
+      aria-pressed={type() === "selectable" ? local.selected : undefined}
+      class={`
+        inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium border rounded-full transition-colors
+        ${baseClass()}
+        ${type() === "selectable" ? "cursor-pointer hover:opacity-80" : ""}
+        ${local.class || ""}
+      `}>
+      <Show when={local.icon}>
+        <span class="w-3 h-3 flex items-center justify-center">{local.icon}</span>
+      </Show>
+      <span>{local.label}</span>
+      <Show when={type() === "dismissible"}>
+        <button
+          type="button"
+          onClick={handleDismiss}
+          class="w-4 h-4 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors"
+          aria-label={`Remove ${local.label}`}>
+          <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </Show>
+    </span>
+  );
+};

web/src/components/ui/Tooltip.tsx

···
+import { createSignal, onCleanup, Show, splitProps } from "solid-js";
+import type { Component, JSX } from "solid-js";
+
+type TooltipPosition = "top" | "right" | "bottom" | "left";
+
+type TooltipProps = {
+  content: string | JSX.Element;
+  position?: TooltipPosition;
+  delay?: number;
+  children: JSX.Element;
+  class?: string;
+};
+
+const positionStyles: Record<TooltipPosition, { tooltip: string; arrow: string }> = {
+  top: {
+    tooltip: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    arrow: "top-full left-1/2 -translate-x-1/2 border-t-gray-800 border-x-transparent border-b-transparent",
+  },
+  bottom: {
+    tooltip: "top-full left-1/2 -translate-x-1/2 mt-2",
+    arrow: "bottom-full left-1/2 -translate-x-1/2 border-b-gray-800 border-x-transparent border-t-transparent",
+  },
+  left: {
+    tooltip: "right-full top-1/2 -translate-y-1/2 mr-2",
+    arrow: "left-full top-1/2 -translate-y-1/2 border-l-gray-800 border-y-transparent border-r-transparent",
+  },
+  right: {
+    tooltip: "left-full top-1/2 -translate-y-1/2 ml-2",
+    arrow: "right-full top-1/2 -translate-y-1/2 border-r-gray-800 border-y-transparent border-l-transparent",
+  },
+};
+
+export const Tooltip: Component<TooltipProps> = (props) => {
+  const [local, _others] = splitProps(props, ["content", "position", "delay", "children", "class"]);
+  const position = () => local.position ?? "top";
+  const delay = () => local.delay ?? 200;
+
+  const [visible, setVisible] = createSignal(false);
+  let timeoutId: number | undefined;
+
+  const show = () => {
+    timeoutId = window.setTimeout(() => setVisible(true), delay());
+  };
+
+  const hide = () => {
+    if (timeoutId) clearTimeout(timeoutId);
+    setVisible(false);
+  };
+
+  onCleanup(() => {
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+
+  return (
+    <span
+      class={`relative inline-flex ${local.class || ""}`}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={hide}>
+      {local.children}
+      <Show when={visible()}>
+        <span
+          role="tooltip"
+          class={`absolute z-50 px-2.5 py-1.5 text-xs text-white bg-gray-800 border border-gray-700 rounded shadow-lg whitespace-nowrap ${
+            positionStyles[position()].tooltip
+          }`}>
+          {local.content}
+          <span class={`absolute w-0 h-0 border-4 ${positionStyles[position()].arrow}`} aria-hidden="true" />
+        </span>
+      </Show>
+    </span>
+  );
+};
+
+export const KeyboardHint: Component<{ keys: string[]; children: JSX.Element }> = (props) => {
+  const keysDisplay = () =>
+    props.keys.map((key) => (
+      <kbd class="px-1.5 py-0.5 bg-gray-700 border border-gray-600 rounded text-xs font-mono">{key}</kbd>
+    ));
+
+  return <Tooltip content={<span class="flex items-center gap-1">{keysDisplay()}</span>}>{props.children}</Tooltip>;
+};

web/src/components/ui/TreeView.test.tsx

···
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { type TreeNode, TreeView } from "./TreeView";
+
+const sampleNodes: TreeNode[] = [{
+  id: "1",
+  label: "Root",
+  children: [{ id: "1-1", label: "Child 1" }, { id: "1-2", label: "Child 2" }],
+}, { id: "2", label: "Sibling" }];
+
+describe("TreeView", () => {
+  afterEach(cleanup);
+
+  it("renders nodes", () => {
+    render(() => <TreeView nodes={sampleNodes} />);
+    expect(screen.getByRole("tree")).toBeInTheDocument();
+    expect(screen.getByText("Root")).toBeInTheDocument();
+    expect(screen.getByText("Sibling")).toBeInTheDocument();
+  });
+
+  it("expands children on click", () => {
+    render(() => <TreeView nodes={sampleNodes} />);
+    expect(screen.queryByText("Child 1")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText("Root"));
+    expect(screen.getByText("Child 1")).toBeInTheDocument();
+    expect(screen.getByText("Child 2")).toBeInTheDocument();
+  });
+
+  it("calls onSelect when node clicked", () => {
+    const handleSelect = vi.fn();
+    render(() => <TreeView nodes={sampleNodes} onSelect={handleSelect} />);
+    fireEvent.click(screen.getByText("Sibling"));
+    expect(handleSelect).toHaveBeenCalledWith(expect.objectContaining({ id: "2" }));
+  });
+});

web/src/components/ui/TreeView.tsx

···
+import { createSignal, For, Show, splitProps } from "solid-js";
+import type { Component, JSX } from "solid-js";
+
+export type TreeNode = { id: string; label: string; icon?: JSX.Element; children?: TreeNode[] };
+
+type TreeViewProps = { nodes: TreeNode[]; onSelect?: (node: TreeNode) => void; class?: string };
+
+type TreeNodeItemProps = { node: TreeNode; level: number; onSelect?: (node: TreeNode) => void };
+
+const ChevronIcon: Component<{ expanded: boolean }> = (props) => (
+  <svg
+    class={`w-4 h-4 transition-transform duration-200 ${props.expanded ? "rotate-90" : ""}`}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+  </svg>
+);
+
+const TreeNodeItem: Component<TreeNodeItemProps> = (props) => {
+  const [expanded, setExpanded] = createSignal(false);
+  const hasChildren = () => props.node.children && props.node.children.length > 0;
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (hasChildren()) {
+        setExpanded(!expanded());
+      }
+      props.onSelect?.(props.node);
+    } else if (e.key === "ArrowRight" && hasChildren() && !expanded()) {
+      setExpanded(true);
+    } else if (e.key === "ArrowLeft" && expanded()) {
+      setExpanded(false);
+    }
+  };
+
+  return (
+    <li role="treeitem" aria-expanded={hasChildren() ? expanded() : undefined}>
+      <div
+        class="flex items-center gap-1 px-2 py-1.5 hover:bg-gray-800 cursor-pointer text-gray-300 hover:text-white transition-colors rounded"
+        style={{ "padding-left": `${props.level * 16 + 8}px` }}
+        onClick={() => {
+          if (hasChildren()) setExpanded(!expanded());
+          props.onSelect?.(props.node);
+        }}
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        role="button">
+        <span class="w-4 h-4 flex items-center justify-center text-gray-500">
+          <Show when={hasChildren()} fallback={<span class="w-4" />}>
+            <ChevronIcon expanded={expanded()} />
+          </Show>
+        </span>
+        <Show when={props.node.icon}>
+          <span class="w-4 h-4 flex items-center justify-center">{props.node.icon}</span>
+        </Show>
+        <span class="text-sm truncate">{props.node.label}</span>
+      </div>
+      <Show when={expanded() && hasChildren()}>
+        <ul role="group" class="border-l border-gray-800 ml-4">
+          <For each={props.node.children}>
+            {(child) => <TreeNodeItem node={child} level={props.level + 1} onSelect={props.onSelect} />}
+          </For>
+        </ul>
+      </Show>
+    </li>
+  );
+};
+
+export const TreeView: Component<TreeViewProps> = (props) => {
+  const [local, others] = splitProps(props, ["nodes", "onSelect", "class"]);
+
+  return (
+    <ul role="tree" class={`text-sm ${local.class || ""}`} {...others}>
+      <For each={local.nodes}>{(node) => <TreeNodeItem node={node} level={0} onSelect={local.onSelect} />}</For>
+    </ul>
+  );
+};

web/src/lib/animations.ts

···
+/**
+ * Animation presets for solid-motionone
+ * @module animations
+ */
+import type { Options as MotionOptions } from "solid-motionone";
+
+/** Spring animation config for natural bounce */
+export const springConfig = { stiffness: 300, damping: 24 };
+
+/** Standard easing for UI animations */
+export const easeOut = [0.22, 1, 0.36, 1] as const;
+
+/** Fade in animation */
+export const fadeIn: MotionOptions = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  transition: { duration: 0.2, easing: easeOut },
+};
+
+/** Fade out animation */
+export const fadeOut: MotionOptions = {
+  initial: { opacity: 1 },
+  animate: { opacity: 0 },
+  transition: { duration: 0.15 },
+};
+
+/** Slide in from right */
+export const slideInRight: MotionOptions = {
+  initial: { opacity: 0, x: 20 },
+  animate: { opacity: 1, x: 0 },
+  transition: { duration: 0.25, easing: easeOut },
+};
+
+/** Slide in from bottom */
+export const slideInUp: MotionOptions = {
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.2, easing: easeOut },
+};
+
+/** Scale in (pop) */
+export const scaleIn: MotionOptions = {
+  initial: { opacity: 0, scale: 0.95 },
+  animate: { opacity: 1, scale: 1 },
+  transition: { duration: 0.2, easing: easeOut },
+};
+
+/** Scale out */
+export const scaleOut: MotionOptions = {
+  initial: { opacity: 1, scale: 1 },
+  animate: { opacity: 0, scale: 0.95 },
+  transition: { duration: 0.15 },
+};
+
+/** Stagger delay for list items */
+export const staggerDelay = (index: number, baseDelay = 0.05) => index * baseDelay;

web/src/pages/Landing.test.tsx

···
   it("renders hero text correctly", () => {
     renderLanding();
 
-    expect(screen.getByText(/A Learning OS/i)).toBeInTheDocument();
-    expect(screen.getByText(/for daily study/i)).toBeInTheDocument();
+    expect(screen.getByText(/Learning on/i)).toBeInTheDocument();
+    expect(screen.getByText(/the AT Protocol/i)).toBeInTheDocument();
     expect(screen.getByText(/Master complex topics/i)).toBeInTheDocument();
   });
 

web/vite.config.ts

···
     environment: "jsdom",
     ui: false,
     watch: false,
-    server: { deps: { inline: ["@solidjs/router", "solid-js"] } },
+    server: { deps: { inline: [/@solidjs/, /solid-js/, /solid-motionone/, /motion/] } },
   },
 });