diff --git a/.mcp/memory.db-wal b/.mcp/memory.db-wal
index ee8181bb9..3901427b4 100644
Binary files a/.mcp/memory.db-wal and b/.mcp/memory.db-wal differ
diff --git a/eslint.config.js b/eslint.config.js
index cbd0fffee..38629c55e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -258,6 +258,21 @@ export default [
       'no-restricted-imports': 'off',
     },
   },
+  {
+    // Web UI components can import from @ark-ui/solid directly (shadcn-style primitives)
+    files: ['packages/web/src/components/ui/**/*.{js,jsx,ts,tsx}'],
+    rules: {
+      'no-restricted-imports': 'off',
+      'corates/corates-ui-imports': 'off',
+    },
+  },
+  {
+    // Web lib/ui can import from @ark-ui/solid directly
+    files: ['packages/web/src/lib/ui/**/*.{js,jsx,ts,tsx}'],
+    rules: {
+      'no-restricted-imports': 'off',
+    },
+  },
   {
     // Test file configuration
     files: [
diff --git a/package.json b/package.json
index a4d4a5174..a3ca3482d 100644
--- a/package.json
+++ b/package.json
@@ -54,10 +54,10 @@
     "eslint-plugin-solid": "^0.14.5",
     "eslint-plugin-sonarjs": "^3.0.5",
     "eslint-plugin-unicorn": "^62.0.0",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "turbo": "^2.7.4",
-    "wrangler": "^4.59.1"
+    "turbo": "^2.7.5",
+    "wrangler": "^4.59.2"
   },
   "engines": {
     "node": ">=24.0.0",
diff --git a/packages/docs/plans/project-creation-wizard.md b/packages/docs/plans/project-creation-wizard.md
new file mode 100644
index 000000000..2d6fe9aad
--- /dev/null
+++ b/packages/docs/plans/project-creation-wizard.md
@@ -0,0 +1,487 @@
+# Plan: Project Creation Wizard
+
+**Status:** Draft
+**Created:** 2026-01-18
+**Last Updated:** 2026-01-18
+
+---
+
+## Overview
+
+Project creation uses a progressive setup flow where the project is created immediately (Step 1), then the user is guided through optional configuration steps (Team, Studies, Assignment). Each step uses the same component that appears in project management, ensuring consistent UX and no duplicated code.
+
+Users can exit the wizard at any point - the project exists and can be configured later through the standard project UI.
+
+## Architecture Principle
+
+**One component, two contexts.** Each configuration panel (Team, Studies, Assignment) is a standalone component that:
+
+- Renders identically in the wizard flow and in project settings
+- Operates on a real project (not wizard state)
+- Saves changes immediately (no "submit all at once")
+
+The wizard is simply a guided wrapper that presents these components in sequence with a stepper UI.
+
+## Prerequisites
+
+- Existing team/organization membership system
+- Study import infrastructure (PDF upload, reference parsing)
+- Google Drive integration for PDF import
+- DOI/PMID metadata lookup service
+
+## Goals
+
+1. Guide new users through complete project setup with a stepper UI
+2. Allow experienced users to skip wizard and configure manually
+3. Reuse components between wizard and project management (no duplication)
+4. Enable flexible, incremental project configuration
+5. Reduce time-to-first-review while remaining non-prescriptive
+
+## Non-Goals
+
+- Forcing users through the wizard (it's optional guidance)
+- Atomic/transactional project creation (project exists after step 1)
+- Draft projects (project is real immediately)
+- Bulk project creation or templates (future enhancement)
+
+---
+
+## User Flows
+
+### Flow A: Guided Wizard (New Users)
+
+```
+Create Project → [Project Created] → Team Panel → Studies Panel → Assignment Panel → Done
+                                         ↓             ↓               ↓
+                                    (can exit)    (can exit)      (can exit)
+```
+
+### Flow B: Manual Setup (Experienced Users)
+
+```
+Create Project → [Project Created] → Exit to Project View → Configure via Settings/Tabs
+```
+
+### Flow C: Hybrid
+
+```
+Create Project → Team Panel → Exit → (later) → Studies Tab → Add Studies
+```
+
+All flows result in the same project state - the wizard is just one path to get there.
+
+---
+
+## Component Architecture
+
+### Shared Panels
+
+These components are used in both the wizard and project management:
+
+| Component            | Wizard Context   | Management Context               |
+| -------------------- | ---------------- | -------------------------------- |
+| `TeamPanel`          | Step 2 of wizard | Project Settings > Team          |
+| `StudiesImportPanel` | Step 3 of wizard | Studies Tab > Add Studies button |
+| `AssignmentPanel`    | Step 4 of wizard | Studies Tab > Manage Assignments |
+
+Each panel:
+
+- Receives `projectId` as prop
+- Fetches/mutates project data directly
+- Has no wizard-specific logic
+- Can be used standalone or within wizard wrapper
+
+### Wizard Wrapper
+
+```tsx
+<ProjectWizard projectId={id}>
+  <WizardStep step={1} label='Basics'>
+    <ProjectBasicsForm /> {/* Only used here, creates project */}
+  </WizardStep>
+  <WizardStep step={2} label='Team'>
+    <TeamPanel projectId={id} />
+  </WizardStep>
+  <WizardStep step={3} label='Studies'>
+    <StudiesImportPanel projectId={id} />
+  </WizardStep>
+  <WizardStep step={4} label='Assignment'>
+    <AssignmentPanel projectId={id} />
+  </WizardStep>
+</ProjectWizard>
+```
+
+The wrapper provides:
+
+- Stepper UI showing progress
+- Next/Back/Skip navigation
+- "Exit to Project" option on every step
+- Completion celebration on final step
+
+---
+
+## Step Specifications
+
+### Step 1: Create Project
+
+**Purpose:** Create the project shell. This is the only wizard-specific step.
+
+**Fields:**
+
+| Field           | Type         | Required | Notes                                |
+| --------------- | ------------ | -------- | ------------------------------------ |
+| Project Name    | text         | Yes      | 3-100 characters                     |
+| Description     | textarea     | No       | Optional, supports markdown          |
+| Checklist Types | multi-select | Yes      | One or more: AMSTAR2, ROBINS-I, etc. |
+| Registration ID | text         | No       | PROSPERO or other registry ID        |
+
+**Behavior:**
+
+- On submit, project is created via API
+- User becomes Owner automatically
+- Wizard advances to Step 2 with real `projectId`
+
+**Validation:**
+
+- Name must be unique within the organization
+- At least one checklist type must be selected
+
+**UI Notes:**
+
+- Clean, focused form
+- Checklist type selector shows brief description of each option
+- No "skip" option - project must be created to proceed
+
+---
+
+### Step 2: Team Panel
+
+**Purpose:** Add team members and assign roles.
+
+**This is the same `TeamPanel` component used in Project Settings > Team.**
+
+**Roles:**
+
+| Role   | Permissions                                                        |
+| ------ | ------------------------------------------------------------------ |
+| Owner  | Full access: manage team, reconcile, edit settings, delete project |
+| Member | Can review assigned studies, view all project data                 |
+
+**Features:**
+
+1. **Add Members**
+   - Email input with role selector (Owner/Member)
+   - Autocomplete for organization members
+   - Batch add support (comma-separated)
+   - Invites sent immediately when added
+
+2. **Member List**
+   - Shows all members with role badges
+   - Pending invite indicator for non-org members
+   - Role change dropdown
+   - Remove button
+
+3. **Wizard-Specific UI**
+   - "Skip for now" button (can add members later)
+   - Helper text: "You can always add more team members later"
+
+**Validation:**
+
+- Warning if fewer than 2 members for dual-review workflow
+- Warning is non-blocking (user can proceed)
+
+---
+
+### Step 3: Studies Import Panel
+
+**Purpose:** Import studies from various sources.
+
+**This is the same `StudiesImportPanel` component used in Studies Tab > Add Studies.**
+
+#### Import Sources (Tabs)
+
+**Tab: PDF Upload**
+
+- Drag-and-drop zone for PDF files
+- Multi-file upload support
+- Extracts metadata from PDF (title, authors, DOI if available)
+- Progress indicator for uploads
+- Studies created immediately as uploads complete
+
+**Tab: DOI/PMID Lookup**
+
+- Text input for DOI or PMID (one per line or comma-separated)
+- "Lookup" button fetches metadata from CrossRef/PubMed
+- Results shown with confirm/add action
+- Option to attach PDF after lookup
+
+**Tab: Reference File**
+
+- Upload RIS, BibTeX, EndNote XML, or CSV
+- Parser extracts all references
+- Preview table before import
+- Field mapping UI for CSV
+- Bulk add to project
+
+**Tab: Google Drive**
+
+- "Connect Google Drive" button (OAuth if not connected)
+- Folder browser for selecting PDFs
+- Multi-select with "Import Selected" button
+- PDFs downloaded to CoRATES storage on import
+
+#### Deduplication
+
+- Automatic detection on import (exact DOI, fuzzy title match)
+- Warning shown before adding duplicate
+- User chooses: "Add anyway" or "Skip"
+
+#### PDF Matching
+
+- For references without PDFs, suggest matches from uploaded PDFs
+- Auto-match by DOI or title similarity
+- Manual drag-drop matching
+
+#### Primary vs Secondary PDFs
+
+- Per-study PDF list with drag to reorder
+- First position = primary (shown in viewer)
+- Secondary PDFs available as attachments
+
+**Wizard-Specific UI:**
+
+- "Skip for now" button
+- Counter showing studies added this session
+- Helper text: "You can import more studies anytime from the Studies tab"
+
+---
+
+### Step 4: Assignment Panel
+
+**Purpose:** Configure and run reviewer assignment.
+
+**This is the same `AssignmentPanel` component used in Studies Tab > Manage Assignments.**
+
+#### Assignment Strategy
+
+| Strategy    | Description                                    |
+| ----------- | ---------------------------------------------- |
+| Random      | Randomly assign members, balanced distribution |
+| Round-Robin | Cycle through members in order                 |
+| Manual      | Assign individually per study                  |
+
+#### Configuration Options
+
+| Option              | Type     | Default | Notes                                     |
+| ------------------- | -------- | ------- | ----------------------------------------- |
+| Reviewers per Study | number   | 2       | Standard dual-review; 1 for single-review |
+| Include Owners      | checkbox | true    | Whether owners are in assignment pool     |
+| Balanced Load       | checkbox | true    | Ensure equal distribution                 |
+
+#### Assignment Preview
+
+Before applying, show:
+
+**Summary Table:**
+
+```
+Member              | Assigned | Percentage
+--------------------|----------|------------
+sarah@example.com   | 12       | 50%
+michael@example.com | 12       | 50%
+```
+
+**Per-Study View:**
+
+- Table showing each study and assigned members
+- Click to manually adjust
+- "Regenerate" button to re-randomize
+
+**Actions:**
+
+- "Apply Assignments" - saves to project
+- "Clear All" - removes all assignments
+
+**Wizard-Specific UI:**
+
+- "Skip for now" button
+- Disabled state if no studies or fewer than 2 members
+- Helper text explaining why assignment is disabled (if applicable)
+
+---
+
+### Wizard Completion
+
+After Step 4 (or when user clicks "Finish" on any step):
+
+- Show completion message with summary
+- "Go to Project" button
+- Optional: brief tour of project view highlighting where to find each panel
+
+---
+
+## Technical Details
+
+### No Wizard State
+
+Since each step operates on the real project, there's no wizard-specific state to manage. The only "state" is:
+
+- Current step number (URL param or local state)
+- Project ID (from step 1 creation)
+
+```typescript
+// Wizard just tracks position, not data
+interface WizardNavState {
+  projectId: string;
+  currentStep: 1 | 2 | 3 | 4;
+}
+```
+
+### Panel Props Interface
+
+Each shared panel follows this pattern:
+
+```typescript
+interface PanelProps {
+  projectId: string;
+  // Optional wizard context
+  wizardMode?: boolean; // Enables "Skip" button, helper text
+  onComplete?: () => void; // Called when user clicks "Continue" in wizard
+}
+```
+
+### API Endpoints
+
+Panels use existing project APIs where possible:
+
+| Panel              | Endpoints Used                                                                     |
+| ------------------ | ---------------------------------------------------------------------------------- |
+| TeamPanel          | `POST /projects/:id/members`, `DELETE /projects/:id/members/:memberId`             |
+| StudiesImportPanel | `POST /projects/:id/studies`, `POST /api/lookup-doi`, `POST /api/parse-references` |
+| AssignmentPanel    | `POST /projects/:id/assignments`, `GET /projects/:id/assignment-preview`           |
+
+**New endpoints needed:**
+
+| Method | Path                               | Purpose                                    |
+| ------ | ---------------------------------- | ------------------------------------------ |
+| POST   | `/api/lookup-doi`                  | Fetch metadata for DOI/PMID batch          |
+| POST   | `/api/parse-references`            | Parse uploaded reference file              |
+| POST   | `/api/extract-pdf-metadata`        | Extract metadata from PDF                  |
+| POST   | `/projects/:id/assignment-preview` | Generate assignment preview without saving |
+
+### PDF Handling
+
+PDFs are uploaded directly to permanent storage:
+
+1. User uploads PDF
+2. PDF stored in R2: `projects/{projectId}/studies/{studyId}/{filename}`
+3. Metadata extracted and study created
+4. No temp storage needed (project exists)
+
+For Google Drive:
+
+1. User selects files
+2. Backend downloads from Drive to R2
+3. Study created with PDF reference
+
+---
+
+## UI/UX Considerations
+
+### Wizard Stepper
+
+Horizontal stepper at top:
+
+```
+[1. Create] ---- [2. Team] ---- [3. Studies] ---- [4. Assignment]
+     done           current          o                  o
+```
+
+- Completed steps show checkmark
+- Current step highlighted
+- Future steps shown but not clickable
+- "Exit to Project" link always visible
+
+### Navigation
+
+Each step has:
+
+- "Back" button (except step 1)
+- "Continue" / "Skip" buttons
+- "Exit to Project" link
+
+Browser back button navigates wizard steps (not browser history).
+
+### Empty States
+
+Each panel handles empty state gracefully:
+
+- Team: "No members yet. Add team members to enable dual-review."
+- Studies: "No studies yet. Import studies to get started."
+- Assignment: "Add studies and team members before assigning reviewers."
+
+### Responsive Design
+
+- Desktop: Full panel width, side help text
+- Tablet: Stacked layout
+- Mobile: Full-screen panels, simplified import (PDF upload + DOI primarily)
+
+---
+
+## Component Reuse Matrix
+
+| Component          | Wizard Step 2 | Wizard Step 3 | Wizard Step 4 | Project Settings | Studies Tab |
+| ------------------ | ------------- | ------------- | ------------- | ---------------- | ----------- |
+| TeamPanel          | X             |               |               | X                |             |
+| StudiesImportPanel |               | X             |               |                  | X           |
+| AssignmentPanel    |               |               | X             |                  | X           |
+
+---
+
+## Success Criteria
+
+Before considering this plan complete:
+
+- [ ] Project creation (Step 1) functional
+- [ ] TeamPanel works in both wizard and settings context
+- [ ] StudiesImportPanel works in both wizard and studies tab context
+- [ ] AssignmentPanel works in both wizard and studies tab context
+- [ ] All import methods functional (PDF, DOI, reference file, Google Drive)
+- [ ] Deduplication detection working
+- [ ] PDF matching (auto and manual) implemented
+- [ ] Assignment strategies implemented with preview
+- [ ] Wizard navigation (next/back/skip/exit) working
+- [ ] Responsive design for all panels
+- [ ] Tests for shared panel components
+- [ ] Tests for assignment algorithm
+
+---
+
+## Resolved Questions
+
+1. **Draft Projects:** No. Project is created immediately in Step 1.
+
+2. **Study Limit:** No limits for initial implementation.
+
+3. **Checklist Selection:** Multiple checklist types allowed per project.
+
+4. **Roles:** Two roles - "Owner" and "Member".
+
+5. **Post-Creation Editing:** All wizard steps map to management UI. Same components, same capabilities.
+
+6. **Google Drive:** One-time import. PDFs downloaded to CoRATES storage.
+
+7. **Reference Manager Integration:** File import only (RIS, BibTeX, EndNote). No direct API integration.
+
+8. **Invite Timing:** Invites sent immediately when members are added (project exists).
+
+9. **Wizard Flexibility:** Users can skip steps, exit early, or bypass wizard entirely. Wizard is guidance, not enforcement.
+
+---
+
+## Related Documents
+
+- [State Management Guide](../guides/state-management.md) - For panel state patterns
+- [PDF Handling](../../.cursor/rules/pdf-handling.mdc) - PDF upload and storage patterns
+- [Authentication Guide](../guides/authentication.md) - For Google OAuth (Drive integration)
+- [API Development Guide](../guides/api-development.md) - For endpoint patterns
+- [Add Studies Mocks](../../web/src/components/mocks/) - Existing UI explorations
diff --git a/packages/mcp-memory/package.json b/packages/mcp-memory/package.json
index 329c88266..4c22cc52e 100644
--- a/packages/mcp-memory/package.json
+++ b/packages/mcp-memory/package.json
@@ -21,12 +21,12 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.25.2",
     "@xenova/transformers": "^2.17.2",
-    "better-sqlite3": "^11.8.1",
+    "better-sqlite3": "^11.10.0",
     "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@types/better-sqlite3": "^7.6.12",
-    "@types/node": "^25.0.8",
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/node": "^25.0.9",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.17"
diff --git a/packages/mcp/package.json b/packages/mcp/package.json
index 8c8f30d34..0a710b018 100644
--- a/packages/mcp/package.json
+++ b/packages/mcp/package.json
@@ -24,7 +24,7 @@
     "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@types/node": "^25.0.8",
+    "@types/node": "^25.0.9",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.17"
diff --git a/packages/ui/README.md b/packages/ui/README.md
deleted file mode 100644
index aaaa600ed..000000000
--- a/packages/ui/README.md
+++ /dev/null
@@ -1,440 +0,0 @@
-# @corates/ui
-
-**Shared UI component library for CoRATES** - SolidJS components built with Ark UI, providing accessible, headless components with Tailwind CSS styling.
-
-## Purpose
-
-This package provides reusable UI components for the CoRATES frontend:
-
-- **40+ accessible components** built on Ark UI primitives
-- **Headless component architecture** with full styling control
-- **SolidJS-native** with reactive state management
-- **Tailwind CSS** styling with `cn()` utility for class merging
-- **TypeScript** type definitions for all components
-
-## Tech Stack
-
-- **Framework:** SolidJS 1.9+ (peer dependency)
-- **Primitives:** Ark UI 5.30+ (accessible headless components)
-- **Legacy:** Zag.js 1.32+ (Tour component only)
-- **Styling:** Tailwind CSS + clsx + tailwind-merge
-- **Icons:** solid-icons 1.1+ (peer dependency)
-- **Testing:** Vitest 4.0+ with SolidJS Testing Library
-
-## Installation
-
-This package is designed for use within the CoRATES monorepo:
-
-```bash
-# Add to another workspace package
-pnpm add @corates/ui --workspace
-```
-
-## Usage
-
-### Importing Components
-
-```jsx
-import { Dialog, Select, Tabs, Toast, toaster, Tooltip } from '@corates/ui';
-
-// Import primitives for custom components
-import { DialogPrimitive } from '@corates/ui';
-
-// Import utilities
-import { cn, Z_INDEX } from '@corates/ui';
-```
-
-### Basic Example
-
-```jsx
-import { Dialog, toaster } from '@corates/ui';
-
-function MyComponent() {
-  const [open, setOpen] = createSignal(false);
-
-  return (
-    <>
-      <button onClick={() => setOpen(true)}>Open Dialog</button>
-
-      <Dialog
-        open={open()}
-        onOpenChange={({ open }) => setOpen(open)}
-        title='Confirm Action'
-        description='Are you sure you want to proceed?'
-      >
-        <button
-          onClick={() => {
-            toaster.success('Action confirmed!');
-            setOpen(false);
-          }}
-        >
-          Confirm
-        </button>
-      </Dialog>
-    </>
-  );
-}
-```
-
-## Component Categories
-
-### Layout & Structure
-
-| Component       | Description                                                      |
-| --------------- | ---------------------------------------------------------------- |
-| **Accordion**   | Expandable/collapsible content sections with keyboard navigation |
-| **Collapsible** | Single collapsible content section                               |
-| **Splitter**    | Resizable split panels for layouts                               |
-| **Tabs**        | Tabbed content panels with routed or local state                 |
-
-### Forms & Input
-
-| Component         | Description                                       |
-| ----------------- | ------------------------------------------------- |
-| **Checkbox**      | Checkbox input with indeterminate state support   |
-| **Combobox**      | Searchable select with autocomplete and filtering |
-| **Editable**      | Inline editable text with submit/cancel           |
-| **FileUpload**    | File upload with drag-and-drop and previews       |
-| **NumberInput**   | Numeric input with increment/decrement buttons    |
-| **PasswordInput** | Password input with visibility toggle             |
-| **PinInput**      | OTP/PIN code input with auto-focus                |
-| **RadioGroup**    | Radio button group with keyboard navigation       |
-| **Select**        | Dropdown select with search and multi-select      |
-| **Switch**        | Toggle switch (on/off)                            |
-| **TagsInput**     | Tag/chip input with add/remove                    |
-
-### Overlays & Dialogs
-
-| Component         | Description                                         |
-| ----------------- | --------------------------------------------------- |
-| **Dialog**        | Modal dialog with backdrop and focus trap           |
-| **ConfirmDialog** | Pre-built confirmation dialog with promise API      |
-| **Drawer**        | Slide-in panel from any edge                        |
-| **FloatingPanel** | Draggable/resizable floating panel                  |
-| **Menu**          | Dropdown menu with submenus and keyboard navigation |
-| **Popover**       | Floating content panel with positioning             |
-| **Tooltip**       | Hover tooltips with delay and positioning           |
-
-### Feedback & Status
-
-| Component         | Description                                          |
-| ----------------- | ---------------------------------------------------- |
-| **Avatar**        | User avatar with fallback initials                   |
-| **Progress**      | Progress bar with percentage display                 |
-| **Spinner**       | Loading spinner with variants (button, page, inline) |
-| **Toast/Toaster** | Toast notifications (success, error, info, loading)  |
-
-### Utilities
-
-| Component       | Description                                      |
-| --------------- | ------------------------------------------------ |
-| **Clipboard**   | Copy to clipboard button with feedback           |
-| **QRCode**      | QR code generator                                |
-| **ToggleGroup** | Group of toggle buttons (single or multi-select) |
-| **Tour**        | Guided tour/onboarding with steps                |
-
-## Key Exports
-
-### Components
-
-All components export two versions:
-
-1. **High-level component** (e.g., `Dialog`) - Pre-styled, opinionated implementation
-2. **Primitive** (e.g., `DialogPrimitive`) - Headless Ark UI primitive for custom styling
-
-```jsx
-// Use high-level component for standard UI
-import { Dialog } from '@corates/ui';
-
-// Use primitive for custom implementations
-import { DialogPrimitive } from '@corates/ui';
-```
-
-### Hooks
-
-Some components also export hooks:
-
-```jsx
-import {
-  useCheckbox,
-  useCombobox,
-  useConfirmDialog,
-  usePopover,
-  useSelect,
-  useSwitch,
-  useTour,
-  useTooltip,
-  useWindowDrag,
-} from '@corates/ui';
-```
-
-### Utilities
-
-```jsx
-import { cn } from '@corates/ui'; // Class name utility (clsx + tailwind-merge)
-import { Z_INDEX } from '@corates/ui'; // z-index constants for layering
-```
-
-### Toast API
-
-```jsx
-import { toaster, showToast } from '@corates/ui';
-
-// Promise-based API
-toaster.promise(fetchData(), {
-  loading: 'Loading...',
-  success: 'Data loaded!',
-  error: 'Failed to load data',
-});
-
-// Direct API
-toaster.success('Success message');
-toaster.error('Error message');
-toaster.info('Info message');
-toaster.loading('Loading...');
-
-// Custom toast with duration
-showToast({
-  title: 'Custom Toast',
-  description: 'With custom options',
-  type: 'success',
-  duration: 5000,
-});
-```
-
-## Styling
-
-### Tailwind CSS
-
-Components use Tailwind CSS classes. Ensure your Tailwind config includes the UI package:
-
-```js
-// tailwind.config.js (Tailwind v4)
-@source "../../packages/ui/src/**/*.{ts,tsx}";
-```
-
-### Class Name Merging
-
-Use the `cn()` utility to merge Tailwind classes with proper precedence:
-
-```jsx
-import { cn } from '@corates/ui';
-
-<div
-  className={cn(
-    'bg-blue-500 text-white', // Base classes
-    isActive && 'bg-green-500', // Conditional override
-    className, // User-provided override
-  )}
-/>;
-```
-
-### Z-Index System
-
-Use centralized z-index constants for consistent layering:
-
-```jsx
-import { Z_INDEX } from '@corates/ui';
-
-// Z_INDEX.MODAL, Z_INDEX.TOOLTIP, Z_INDEX.POPOVER, etc.
-<div style={{ zIndex: Z_INDEX.MODAL }} />;
-```
-
-## Development
-
-```bash
-# Install dependencies
-pnpm install
-
-# Type check
-pnpm typecheck
-
-# Run tests
-pnpm test
-
-# Run tests in watch mode
-pnpm test:watch
-
-# Run tests with coverage
-pnpm test:coverage
-```
-
-## Testing
-
-All components have comprehensive unit tests using Vitest and SolidJS Testing Library:
-
-```bash
-# Run all tests
-pnpm test
-
-# Run specific test
-pnpm test Dialog
-
-# Watch mode
-pnpm test:watch
-```
-
-Test files are located in `src/components/__tests__/`.
-
-### Testing Example
-
-```tsx
-import { render, screen } from '@solidjs/testing-library';
-import { Dialog } from './Dialog';
-
-test('Dialog renders with title and description', () => {
-  render(() => <Dialog open={true} title='Test Title' description='Test Description' />);
-
-  expect(screen.getByText('Test Title')).toBeInTheDocument();
-  expect(screen.getByText('Test Description')).toBeInTheDocument();
-});
-```
-
-## Architecture
-
-### Component Structure
-
-Each component follows this pattern:
-
-```tsx
-// High-level styled component
-export function Dialog(props) {
-  return <DialogPrimitive.Root {...props}>{/* Pre-styled implementation */}</DialogPrimitive.Root>;
-}
-
-// Re-export primitive for custom use
-export { Dialog as DialogPrimitive } from '@ark-ui/solid';
-```
-
-### Headless Primitives
-
-Most components are built on [Ark UI](https://ark-ui.com/) primitives:
-
-- **Accessibility**: ARIA attributes, keyboard navigation, focus management
-- **State management**: Handle open/close, selection, focus, etc.
-- **No styling**: Bring your own styles with Tailwind
-
-### Legacy Components
-
-The **Tour** component still uses Zag.js (not migrated to Ark UI). This is the only remaining Zag.js dependency and may be migrated in the future.
-
-## Common Patterns
-
-### Dialog with Confirmation
-
-```jsx
-import { ConfirmDialog, useConfirmDialog } from '@corates/ui';
-
-const confirmDialog = useConfirmDialog();
-
-// Show confirmation dialog
-const confirmed = await confirmDialog.confirm({
-  title: 'Delete Project',
-  description: 'Are you sure? This cannot be undone.',
-  confirmText: 'Delete',
-  cancelText: 'Cancel',
-});
-
-if (confirmed) {
-  // Proceed with deletion
-}
-```
-
-### Select with Search
-
-```jsx
-import { Select } from '@corates/ui';
-
-<Select
-  items={[
-    { label: 'Option 1', value: '1' },
-    { label: 'Option 2', value: '2' },
-  ]}
-  value={selectedValue()}
-  onValueChange={({ value }) => setSelectedValue(value)}
-  placeholder='Select an option'
-/>;
-```
-
-### Tooltip
-
-```jsx
-import { Tooltip } from '@corates/ui';
-
-<Tooltip content='This is a helpful tooltip'>
-  <button>Hover me</button>
-</Tooltip>;
-```
-
-### File Upload
-
-```jsx
-import { FileUpload } from '@corates/ui';
-
-<FileUpload
-  accept='application/pdf'
-  maxFiles={5}
-  onFilesChange={files => {
-    console.log('Uploaded files:', files);
-  }}
-/>;
-```
-
-## Peer Dependencies
-
-This package requires:
-
-- **solid-js** ^1.9.0 - SolidJS framework
-- **solid-icons** ^1.1.0 - Icon library
-
-These are marked as peer dependencies to avoid version conflicts.
-
-## Links
-
-- **Frontend Package:** [packages/web/](../web/)
-- **Ark UI Documentation:** https://ark-ui.com/
-- **SolidJS Documentation:** https://solidjs.com/
-- **Tailwind CSS:** https://tailwindcss.com/
-
-## Migration Notes
-
-### From Zag.js to Ark UI
-
-Most components have been migrated from Zag.js to Ark UI. The API is similar but with improvements:
-
-**Old (Zag.js):**
-
-```jsx
-const [state, send] = createMachine(dialog.machine({ id: '1' }));
-const api = dialog.connect(state, send);
-```
-
-**New (Ark UI):**
-
-```jsx
-<Dialog.Root open={open()} onOpenChange={setOpen}>
-  <Dialog.Trigger />
-  <Dialog.Backdrop />
-  <Dialog.Positioner>
-    <Dialog.Content />
-  </Dialog.Positioner>
-</Dialog.Root>
-```
-
-### Custom Components
-
-If you need custom behavior, use primitives directly:
-
-```jsx
-import { SelectPrimitive } from '@corates/ui';
-
-<SelectPrimitive.Root {...props}>{/* Your custom implementation */}</SelectPrimitive.Root>;
-```
-
-## TypeScript
-
-All components are fully typed with TypeScript. Import types from components:
-
-```tsx
-import type { SpinnerProps, SpinnerSize, SpinnerVariant } from '@corates/ui';
-```
diff --git a/packages/ui/package.json b/packages/ui/package.json
deleted file mode 100644
index 9543c8329..000000000
--- a/packages/ui/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "@corates/ui",
-  "version": "0.0.1",
-  "private": true,
-  "description": "Shared UI components for Corates built with Ark UI and SolidJS",
-  "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
-    },
-    "./components.css": "./src/components.css"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
-  "dependencies": {
-    "@ark-ui/solid": "^5.30.0",
-    "@zag-js/solid": "^1.32.0",
-    "@zag-js/tour": "^1.32.0",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.4.0"
-  },
-  "devDependencies": {
-    "@solidjs/testing-library": "^0.8.10",
-    "@testing-library/jest-dom": "^6.9.1",
-    "jsdom": "^27.4.0",
-    "solid-icons": "^1.1.0",
-    "solid-js": "^1.9.10",
-    "typescript": "^5.9.3",
-    "vite-plugin-solid": "^2.11.10",
-    "vitest": "^4.0.17"
-  },
-  "peerDependencies": {
-    "solid-icons": "^1.1.0",
-    "solid-js": "^1.9.0"
-  }
-}
diff --git a/packages/ui/src/__tests__/setup.ts b/packages/ui/src/__tests__/setup.ts
deleted file mode 100644
index b6bdc6c54..000000000
--- a/packages/ui/src/__tests__/setup.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Vitest Test Setup for UI Package
- * Global configuration and utilities for testing Zag components
- */
-
-import { vi } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-
-// Mock import.meta.env for tests
-vi.stubGlobal('import.meta', {
-  env: {
-    DEV: true,
-    MODE: 'test',
-  },
-});
-
-// Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation((query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-});
-
-// Mock ResizeObserver as a proper class
-class MockResizeObserver {
-  callback: ResizeObserverCallback;
-  constructor(callback: ResizeObserverCallback) {
-    this.callback = callback;
-  }
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-global.ResizeObserver = MockResizeObserver as typeof ResizeObserver;
-
-// Mock IntersectionObserver as a proper class
-class MockIntersectionObserver {
-  callback: IntersectionObserverCallback;
-  constructor(callback: IntersectionObserverCallback) {
-    this.callback = callback;
-  }
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-  takeRecords() {
-    return [];
-  }
-  root: Element | Document | null = null;
-  rootMargin: string = '0px';
-  thresholds: ReadonlyArray<number> = [];
-}
-global.IntersectionObserver = MockIntersectionObserver as unknown as typeof IntersectionObserver;
-
-// Mock crypto.randomUUID
-if (!global.crypto) {
-  global.crypto = {} as Crypto;
-}
-global.crypto.randomUUID = vi.fn(
-  () => 'test-uuid-' + Math.random().toString(36).slice(2),
-) as () => `${string}-${string}-${string}-${string}-${string}`;
-
-// Mock requestAnimationFrame
-global.requestAnimationFrame = vi.fn((cb: FrameRequestCallback) => setTimeout(cb, 0));
-global.cancelAnimationFrame = vi.fn((id: number) => clearTimeout(id));
-
-// Mock Element.prototype methods used by Zag
-Element.prototype.scrollIntoView = vi.fn();
-// Mock HTMLElement.prototype methods (focus/blur don't exist on Element)
-HTMLElement.prototype.focus = vi.fn();
-HTMLElement.prototype.blur = vi.fn();
-
-// Mock getComputedStyle for Zag positioning
-const originalGetComputedStyle = window.getComputedStyle;
-window.getComputedStyle = vi.fn().mockImplementation((element: Element) => {
-  const styles = originalGetComputedStyle?.(element) || ({} as CSSStyleDeclaration);
-  return {
-    ...styles,
-    getPropertyValue: vi.fn().mockReturnValue(''),
-    position: 'static',
-    display: 'block',
-    visibility: 'visible',
-    overflow: 'visible',
-  } as CSSStyleDeclaration;
-});
-
-// Mock getBoundingClientRect for Zag positioning
-Element.prototype.getBoundingClientRect = vi.fn().mockReturnValue({
-  top: 0,
-  left: 0,
-  bottom: 100,
-  right: 100,
-  width: 100,
-  height: 100,
-  x: 0,
-  y: 0,
-  toJSON: vi.fn(),
-} as DOMRect);
-
-// Mock PointerEvent if not available
-if (typeof PointerEvent === 'undefined') {
-  class MockPointerEvent extends MouseEvent {
-    pointerId: number;
-    pointerType: string;
-    isPrimary: boolean;
-    constructor(type: string, props?: PointerEventInit) {
-      super(type, props);
-      this.pointerId = props?.pointerId ?? 0;
-      this.pointerType = props?.pointerType ?? 'mouse';
-      this.isPrimary = props?.isPrimary ?? true;
-    }
-  }
-  global.PointerEvent = MockPointerEvent as typeof PointerEvent;
-}
-
-// Mock clipboard API
-if (!navigator.clipboard) {
-  Object.defineProperty(navigator, 'clipboard', {
-    value: {
-      writeText: vi.fn().mockResolvedValue(undefined),
-      readText: vi.fn().mockResolvedValue(''),
-    },
-    writable: true,
-  });
-}
diff --git a/packages/ui/src/components/Accordion.tsx b/packages/ui/src/components/Accordion.tsx
deleted file mode 100644
index 251ad5704..000000000
--- a/packages/ui/src/components/Accordion.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Accordion component using Ark UI
- */
-
-import { Accordion } from '@ark-ui/solid/accordion';
-import { Component, For, splitProps, JSX } from 'solid-js';
-
-export interface AccordionItem {
-  value: string;
-  title: JSX.Element;
-  content: JSX.Element;
-  disabled?: boolean;
-}
-
-export interface AccordionProps {
-  /** Accordion items */
-  items: AccordionItem[];
-  /** Initially expanded items */
-  defaultValue?: string[];
-  /** Controlled expanded items */
-  value?: string[];
-  /** Callback when expanded items change */
-  onValueChange?: (_details: { value: string[] }) => void;
-  /** Allow multiple items expanded (default: false) */
-  multiple?: boolean;
-  /** Allow collapsing all items (default: true) */
-  collapsible?: boolean;
-  /** Disable all items */
-  disabled?: boolean;
-  /** Orientation (default: 'vertical') */
-  orientation?: 'horizontal' | 'vertical';
-  /** Additional class for root element */
-  class?: string;
-}
-
-/**
- * Accordion - Vertically stacked expandable sections
- */
-const AccordionComponent: Component<AccordionProps> = props => {
-  const [local, machineProps] = splitProps(props, ['items', 'class']);
-
-  const handleValueChange = (details: { value: string[] }) => {
-    if (machineProps.onValueChange) {
-      machineProps.onValueChange(details);
-    }
-  };
-
-  return (
-    <Accordion.Root
-      value={machineProps.value}
-      defaultValue={machineProps.defaultValue}
-      onValueChange={handleValueChange}
-      multiple={machineProps.multiple}
-      collapsible={machineProps.collapsible ?? true}
-      disabled={machineProps.disabled}
-      orientation={machineProps.orientation || 'vertical'}
-      class={`divide-y divide-gray-200 rounded-lg border border-gray-200 ${local.class || ''}`}
-    >
-      <For each={local.items}>
-        {item => (
-          <Accordion.Item value={item.value} disabled={item.disabled}>
-            <h3>
-              <Accordion.ItemTrigger class='flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'>
-                <span>{item.title}</span>
-                <Accordion.ItemIndicator class='ml-2 transition-transform duration-200 data-[state=open]:rotate-180'>
-                  <svg class='h-4 w-4' 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>
-                </Accordion.ItemIndicator>
-              </Accordion.ItemTrigger>
-            </h3>
-            <Accordion.ItemContent class='data-[state=closed]:animate-collapse data-[state=open]:animate-expand overflow-hidden transition-all duration-200'>
-              <div class='px-4 py-3 text-sm text-gray-600'>{item.content}</div>
-            </Accordion.ItemContent>
-          </Accordion.Item>
-        )}
-      </For>
-    </Accordion.Root>
-  );
-};
-
-export { AccordionComponent as Accordion };
-
-// Export raw Ark UI primitive for custom layouts
-export { Accordion as AccordionPrimitive };
diff --git a/packages/ui/src/components/Avatar.tsx b/packages/ui/src/components/Avatar.tsx
deleted file mode 100644
index 18a516e18..000000000
--- a/packages/ui/src/components/Avatar.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Avatar component using Ark UI
- */
-
-import { Avatar } from '@ark-ui/solid/avatar';
-import { Component } from 'solid-js';
-
-export interface AvatarProps {
-  /** Image source URL */
-  src?: string;
-  /** Name for generating initials fallback */
-  name?: string;
-  /** Alt text for image */
-  alt?: string;
-  /** Callback when image loading status changes */
-  onStatusChange?: (_details: { status: 'loading' | 'loaded' | 'error' }) => void;
-  /** CSS classes for fallback element */
-  fallbackClass?: string;
-  /** Additional class for root element */
-  class?: string;
-}
-
-/**
- * Avatar - User avatar with fallback support
- */
-const AvatarComponent: Component<AvatarProps> = props => {
-  const src = () => props.src;
-  const name = () => props.name;
-  const alt = () => props.alt || name() || 'Avatar';
-  const onStatusChange = () => props.onStatusChange;
-
-  const getInitials = () => {
-    const displayName = name();
-    if (!displayName) return '';
-    const parts = displayName.trim().split(' ');
-    if (parts.length === 1) return parts[0][0].toUpperCase();
-    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-  };
-
-  const fallbackClass = () =>
-    props.fallbackClass ||
-    'flex items-center justify-center w-full h-full bg-gray-200 text-gray-700 font-medium';
-
-  return (
-    <Avatar.Root onStatusChange={onStatusChange()} class={`overflow-hidden ${props.class || ''}`}>
-      <Avatar.Fallback class={fallbackClass()}>{getInitials()}</Avatar.Fallback>
-      <Avatar.Image
-        alt={alt()}
-        src={src()}
-        referrerPolicy='no-referrer'
-        class='h-full w-full object-cover'
-      />
-    </Avatar.Root>
-  );
-};
-
-export { AvatarComponent as Avatar };
-
-// Export raw Ark UI primitive for custom layouts
-export { Avatar as AvatarPrimitive };
diff --git a/packages/ui/src/components/Checkbox.tsx b/packages/ui/src/components/Checkbox.tsx
deleted file mode 100644
index b7f1f19e1..000000000
--- a/packages/ui/src/components/Checkbox.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * Checkbox component using Ark UI
- *
- * Supports both high-level convenience API and low-level composition API
- */
-
-import { Checkbox as ArkCheckbox, useCheckbox } from '@ark-ui/solid/checkbox';
-import { Component, mergeProps, splitProps, Show, createMemo } from 'solid-js';
-import { BiRegularCheck, BiRegularMinus } from 'solid-icons/bi';
-
-export interface CheckboxProps {
-  /** Controlled checked state */
-  checked?: boolean;
-  /** Default checked state (uncontrolled) */
-  defaultChecked?: boolean;
-  /** Whether checkbox is in indeterminate state */
-  indeterminate?: boolean;
-  /** Whether checkbox is disabled */
-  disabled?: boolean;
-  /** Name for form submission */
-  name?: string;
-  /** Value for form submission */
-  value?: string;
-  /** Label text */
-  label?: string;
-  /** Callback when checked state changes */
-  onChange?: (_checked: boolean) => void;
-  /** Additional CSS classes */
-  class?: string;
-  /** Callback when checked state changes (Ark UI compatible) */
-  onCheckedChange?: (_details: { checked: boolean | 'indeterminate' }) => void;
-}
-
-/**
- * Checkbox - Full description
- */
-const CheckboxComponent: Component<CheckboxProps> = props => {
-  const merged = mergeProps(
-    {
-      defaultChecked: false,
-    },
-    props,
-  );
-
-  const [local, machineProps] = splitProps(merged, ['label', 'class', 'indeterminate', 'onChange']);
-
-  const label = () => local.label;
-  const classValue = () => local.class;
-  const indeterminate = () => local.indeterminate;
-  const onChange = () => local.onChange;
-
-  const checked = () => machineProps.checked;
-  const defaultChecked = () => machineProps.defaultChecked;
-  const disabled = () => machineProps.disabled;
-  const name = () => machineProps.name;
-  const value = () => machineProps.value || 'on';
-
-  // Convert indeterminate to checked state
-  const checkedState = createMemo(() => {
-    if (indeterminate()) return 'indeterminate';
-    if (checked() !== undefined) return checked() === true;
-    return undefined;
-  });
-
-  const defaultCheckedState = createMemo(() => {
-    if (indeterminate()) return 'indeterminate';
-    return defaultChecked();
-  });
-
-  const handleCheckedChange = (details: { checked: boolean | 'indeterminate' }) => {
-    const changeHandler = onChange();
-    if (changeHandler) {
-      // When transitioning from indeterminate, treat it as checking
-      const newChecked = details.checked === true || details.checked === 'indeterminate';
-      changeHandler(newChecked);
-    }
-    if (machineProps.onCheckedChange) {
-      machineProps.onCheckedChange(details);
-    }
-  };
-
-  return (
-    <ArkCheckbox.Root
-      {...machineProps}
-      checked={checkedState()}
-      defaultChecked={defaultCheckedState()}
-      disabled={disabled()}
-      name={name()}
-      value={value()}
-      onCheckedChange={handleCheckedChange}
-      class={`inline-flex cursor-pointer items-center gap-2 select-none ${
-        disabled() ? 'cursor-not-allowed opacity-50' : ''
-      } ${classValue() || ''}`}
-    >
-      <ArkCheckbox.Control class='flex h-4 w-4 items-center justify-center rounded border-2 transition-colors data-[focus]:ring-2 data-[focus]:ring-blue-500 data-[focus]:ring-offset-1 data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=indeterminate]:border-blue-600 data-[state=indeterminate]:bg-blue-600 data-[state=unchecked]:border-gray-300 data-[state=unchecked]:bg-white data-[state=unchecked]:hover:border-blue-400'>
-        <ArkCheckbox.Indicator indeterminate class='h-3 w-3 text-white'>
-          <BiRegularMinus class='h-3 w-3 text-white' />
-        </ArkCheckbox.Indicator>
-        <ArkCheckbox.Indicator class='h-3 w-3 text-white'>
-          <BiRegularCheck class='h-3 w-3 text-white' />
-        </ArkCheckbox.Indicator>
-      </ArkCheckbox.Control>
-      <ArkCheckbox.HiddenInput />
-      <Show when={label()}>
-        <ArkCheckbox.Label class='text-sm text-gray-700'>{label()}</ArkCheckbox.Label>
-      </Show>
-    </ArkCheckbox.Root>
-  );
-};
-
-export { CheckboxComponent as Checkbox };
-
-// Export raw Ark UI primitive for custom layouts
-export { ArkCheckbox as CheckboxPrimitive };
-
-// Export hook for programmatic control
-export { useCheckbox };
diff --git a/packages/ui/src/components/Clipboard.tsx b/packages/ui/src/components/Clipboard.tsx
deleted file mode 100644
index 445c1d1b0..000000000
--- a/packages/ui/src/components/Clipboard.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * Clipboard components using Ark UI
- */
-
-import { Clipboard } from '@ark-ui/solid/clipboard';
-import { Component, Show, splitProps, createSignal, createMemo, Accessor, JSX } from 'solid-js';
-import { FiCopy, FiCheck } from 'solid-icons/fi';
-
-export interface ClipboardApi {
-  /** Current value */
-  value: string;
-  /** Whether content was copied */
-  copied: boolean;
-  /** Copy to clipboard */
-  copy: () => void;
-  /** Get root props */
-  getRootProps: () => JSX.HTMLAttributes<HTMLDivElement>;
-  /** Get label props */
-  getLabelProps: () => JSX.HTMLAttributes<HTMLLabelElement>;
-  /** Get control props */
-  getControlProps: () => JSX.HTMLAttributes<HTMLDivElement>;
-  /** Get input props */
-  getInputProps: () => JSX.HTMLAttributes<HTMLInputElement>;
-  /** Get trigger props */
-  getTriggerProps: () => JSX.HTMLAttributes<HTMLButtonElement>;
-}
-
-export interface ClipboardProps {
-  /** Value to copy to clipboard */
-  value?: string;
-  /** Initial value to copy */
-  defaultValue?: string;
-  /** Callback when value changes */
-  onValueChange?: (_details: { value: string }) => void;
-  /** Callback when copy status changes */
-  onStatusChange?: (_details: { copied: boolean }) => void;
-  /** Time in ms before resetting copied state (default: 3000) */
-  timeout?: number;
-  /** Label for the input */
-  label?: string;
-  /** Show input field (default: true) */
-  showInput?: boolean;
-  /** Render function for custom UI */
-  children?: (_api: Accessor<ClipboardApi>) => JSX.Element;
-  /** Additional class for root element */
-  class?: string;
-}
-
-/**
- * Clipboard - Copy to clipboard functionality
- */
-const ClipboardComponent: Component<ClipboardProps> = props => {
-  const [local, machineProps] = splitProps(props, ['label', 'showInput', 'children', 'class']);
-  const [copied, setCopied] = createSignal(false);
-
-  const handleStatusChange = (details: { copied: boolean }) => {
-    setCopied(details.copied);
-    if (machineProps.onStatusChange) {
-      machineProps.onStatusChange({ copied: details.copied });
-    }
-  };
-
-  const handleValueChange = (details: { value: string }) => {
-    if (machineProps.onValueChange) {
-      machineProps.onValueChange(details);
-    }
-  };
-
-  // Create API object for render prop compatibility
-  const api = createMemo(() => ({
-    get copied() {
-      return copied();
-    },
-    copy: () => {
-      // Trigger copy via the Clipboard.Trigger
-    },
-    value: machineProps.value || machineProps.defaultValue || '',
-    getRootProps: () => ({}),
-    getLabelProps: () => ({}),
-    getControlProps: () => ({}),
-    getInputProps: () => ({}),
-    getTriggerProps: () => ({}),
-  }));
-
-  const showInput = () => local.showInput !== false;
-
-  return (
-    <Show when={!local.children} fallback={local.children?.(api)}>
-      <Clipboard.Root
-        value={machineProps.value}
-        defaultValue={machineProps.defaultValue}
-        onValueChange={handleValueChange}
-        onStatusChange={handleStatusChange}
-        timeout={machineProps.timeout ?? 3000}
-        class={`w-full ${local.class || ''}`}
-      >
-        <Show when={local.label}>
-          <Clipboard.Label class='mb-1 block text-sm font-medium text-gray-700'>
-            {local.label}
-          </Clipboard.Label>
-        </Show>
-        <Clipboard.Control class='flex items-center gap-2'>
-          <Show when={showInput()}>
-            <Clipboard.Input class='flex-1 rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none' />
-          </Show>
-          <Clipboard.Trigger
-            class={`inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
-              copied() ?
-                'bg-green-100 text-green-700 hover:bg-green-200'
-              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-            }`}
-          >
-            <Clipboard.Indicator copied={<FiCheck class='h-4 w-4' />}>
-              <FiCopy class='h-4 w-4' />
-            </Clipboard.Indicator>
-            <span>{copied() ? 'Copied!' : 'Copy'}</span>
-          </Clipboard.Trigger>
-        </Clipboard.Control>
-      </Clipboard.Root>
-    </Show>
-  );
-};
-
-export interface CopyButtonProps {
-  /** Value to copy */
-  value: string;
-  /** Callback when copy status changes */
-  onStatusChange?: (_details: { copied: boolean }) => void;
-  /** Time in ms before resetting (default: 3000) */
-  timeout?: number;
-  /** Button label (default: 'Copy') */
-  label?: string;
-  /** Label when copied (default: 'Copied!') */
-  copiedLabel?: string;
-  /** Button size (default: 'md') */
-  size?: 'sm' | 'md' | 'lg';
-  /** Button variant (default: 'solid') */
-  variant?: 'solid' | 'outline' | 'ghost';
-  /** Show copy/check icon (default: true) */
-  showIcon?: boolean;
-  /** Show text label (default: true) */
-  showLabel?: boolean;
-  /** Additional class for button */
-  class?: string;
-}
-
-/**
- * CopyButton - Simple copy button without input field
- */
-export const CopyButton: Component<CopyButtonProps> = props => {
-  const [local, machineProps] = splitProps(props, [
-    'label',
-    'copiedLabel',
-    'size',
-    'variant',
-    'showIcon',
-    'showLabel',
-    'class',
-  ]);
-  const [copied, setCopied] = createSignal(false);
-
-  const handleStatusChange = (details: { copied: boolean }) => {
-    setCopied(details.copied);
-    if (machineProps.onStatusChange) {
-      machineProps.onStatusChange({ copied: details.copied });
-    }
-  };
-
-  const showIcon = () => local.showIcon !== false;
-  const showLabel = () => local.showLabel !== false;
-  const label = () => local.label || 'Copy';
-  const copiedLabel = () => local.copiedLabel || 'Copied!';
-
-  const getSizeClass = () => {
-    switch (local.size) {
-      case 'sm':
-        return 'px-2 py-1 text-xs';
-      case 'lg':
-        return 'px-4 py-2.5 text-base';
-      default:
-        return 'px-3 py-2 text-sm';
-    }
-  };
-
-  const getVariantClass = () => {
-    switch (local.variant) {
-      case 'outline':
-        return copied() ?
-            'border border-green-500 text-green-700 hover:bg-green-50'
-          : 'border border-gray-300 text-gray-700 hover:bg-gray-50';
-      case 'ghost':
-        return copied() ? 'text-green-700 hover:bg-green-100' : 'text-gray-700 hover:bg-gray-100';
-      default:
-        return copied() ?
-            'bg-green-600 text-white hover:bg-green-700'
-          : 'bg-blue-600 text-white hover:bg-blue-700';
-    }
-  };
-
-  const iconSize = () => {
-    switch (local.size) {
-      case 'sm':
-        return 'w-3 h-3';
-      case 'lg':
-        return 'w-5 h-5';
-      default:
-        return 'w-4 h-4';
-    }
-  };
-
-  return (
-    <Clipboard.Root
-      value={machineProps.value}
-      onStatusChange={handleStatusChange}
-      timeout={machineProps.timeout ?? 3000}
-    >
-      <Clipboard.Trigger
-        class={`inline-flex items-center justify-center gap-1.5 rounded-lg font-medium transition-colors ${getSizeClass()} ${getVariantClass()} ${local.class || ''}`}
-      >
-        <Show when={showIcon()}>
-          <Clipboard.Indicator copied={<FiCheck class={iconSize()} />}>
-            <FiCopy class={iconSize()} />
-          </Clipboard.Indicator>
-        </Show>
-        <Show when={showLabel()}>
-          <span>{copied() ? copiedLabel() : label()}</span>
-        </Show>
-      </Clipboard.Trigger>
-    </Clipboard.Root>
-  );
-};
-
-export { ClipboardComponent as Clipboard };
-
-// Export raw Ark UI primitive for custom layouts
-export { Clipboard as ClipboardPrimitive };
diff --git a/packages/ui/src/components/Collapsible.tsx b/packages/ui/src/components/Collapsible.tsx
deleted file mode 100644
index ffa5730fe..000000000
--- a/packages/ui/src/components/Collapsible.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * Collapsible component using Ark UI
- *
- * Supports both high-level convenience API and low-level composition API
- */
-
-import { Collapsible as ArkCollapsible, useCollapsible } from '@ark-ui/solid/collapsible';
-import { Component, Show, splitProps, createMemo, JSX, Accessor } from 'solid-js';
-
-export interface CollapsibleApi {
-  open: boolean;
-  visible: boolean;
-  setOpen: (_open: boolean) => void;
-}
-
-export interface CollapsibleProps {
-  /** Controlled open state */
-  open?: boolean;
-  /** Initial open state (uncontrolled) */
-  defaultOpen?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (_details: { open: boolean }) => void;
-  /** Disable the collapsible */
-  disabled?: boolean;
-  /** Enable lazy mounting */
-  lazyMount?: boolean;
-  /** Unmount content when closed */
-  unmountOnExit?: boolean;
-  /** Height when collapsed */
-  collapsedHeight?: string | number;
-  /** Width when collapsed */
-  collapsedWidth?: string | number;
-  /** Callback when exit animation completes */
-  onExitComplete?: () => void;
-  /** Custom IDs for root, content, trigger */
-  ids?: { root?: string; content?: string; trigger?: string };
-  /** Trigger element or render function receiving collapsible API */
-  trigger?: JSX.Element | ((_api: Accessor<CollapsibleApi>) => JSX.Element);
-  /** Indicator element or render function receiving collapsible API */
-  indicator?: JSX.Element | ((_api: Accessor<CollapsibleApi>) => JSX.Element);
-  /** Collapsible content */
-  children?: JSX.Element;
-}
-
-/**
- * Internal component for when we need programmatic API (function triggers/indicators)
- */
-function CollapsibleWithApi(props: {
-  arkProps: CollapsibleProps;
-  trigger: () => CollapsibleProps['trigger'];
-  indicator: () => CollapsibleProps['indicator'];
-  children: () => JSX.Element | undefined;
-}) {
-  const arkProps = () => props.arkProps;
-  const collapsibleApi = useCollapsible(arkProps());
-
-  const renderTrigger = () => {
-    const triggerValue = props.trigger();
-    if (!triggerValue) return null;
-
-    if (typeof triggerValue === 'function') {
-      return triggerValue(collapsibleApi);
-    }
-
-    return triggerValue;
-  };
-
-  const renderIndicator = () => {
-    const indicatorValue = props.indicator();
-    if (!indicatorValue) return null;
-
-    if (typeof indicatorValue === 'function') {
-      return indicatorValue(collapsibleApi);
-    }
-
-    return indicatorValue;
-  };
-
-  // Handle click events on trigger to prevent toggling when clicking interactive elements
-  const handleTriggerClick = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    // Check if click is on an interactive element (but not the trigger itself)
-    const interactive = target.closest(
-      'button:not([data-part="trigger"]), [role="button"]:not([data-part="trigger"]), [role="menuitem"], input, textarea, [data-editable], [data-scope="menu"], [data-scope="editable"], [data-selectable], a',
-    );
-    if (interactive) {
-      e.stopPropagation();
-      // Only prevent default for non-input elements to avoid breaking form interactions
-      if (!interactive.matches('input, textarea')) {
-        e.preventDefault();
-      }
-    }
-  };
-
-  return (
-    <ArkCollapsible.RootProvider value={collapsibleApi}>
-      <ArkCollapsible.Root {...arkProps()}>
-        <Show when={props.trigger()}>
-          <ArkCollapsible.Trigger class='w-full' onClick={handleTriggerClick}>
-            {renderTrigger() as JSX.Element}
-          </ArkCollapsible.Trigger>
-        </Show>
-        <Show when={props.indicator()}>
-          <ArkCollapsible.Indicator class='transition-transform duration-200 data-[state=open]:rotate-90'>
-            {renderIndicator() as JSX.Element}
-          </ArkCollapsible.Indicator>
-        </Show>
-        <ArkCollapsible.Content class='overflow-hidden'>{props.children()}</ArkCollapsible.Content>
-      </ArkCollapsible.Root>
-    </ArkCollapsible.RootProvider>
-  );
-}
-
-/**
- * High-level Collapsible component (convenience API)
- */
-const CollapsibleComponent: Component<CollapsibleProps> = props => {
-  // Split convenience props from Ark UI props
-  const [local, arkProps] = splitProps(props, ['trigger', 'indicator', 'children']);
-
-  const trigger = () => local.trigger;
-  const indicator = () => local.indicator;
-  const children = () => local.children;
-
-  // Check if we need the API for function triggers/indicators
-  const needsApi = createMemo(() => {
-    const triggerValue = trigger();
-    const indicatorValue = indicator();
-    return typeof triggerValue === 'function' || typeof indicatorValue === 'function';
-  });
-
-  // Handle trigger - support both JSX and function (for non-API case)
-  const renderTrigger = () => {
-    const currentTrigger = trigger();
-    if (!currentTrigger) return null;
-    return currentTrigger;
-  };
-
-  // Handle indicator - support both JSX and function (for non-API case)
-  const renderIndicator = () => {
-    const currentIndicator = indicator();
-    if (!currentIndicator) return null;
-    return currentIndicator;
-  };
-
-  // Handle click events on trigger to prevent toggling when clicking interactive elements
-  const handleTriggerClick = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    // Check if click is on an interactive element (but not the trigger itself)
-    const interactive = target.closest(
-      'button:not([data-part="trigger"]), [role="button"]:not([data-part="trigger"]), [role="menuitem"], input, textarea, [data-editable], [data-scope="menu"], [data-scope="editable"], [data-selectable], a',
-    );
-    if (interactive) {
-      e.stopPropagation();
-      // Only prevent default for non-input elements to avoid breaking form interactions
-      if (!interactive.matches('input, textarea')) {
-        e.preventDefault();
-      }
-    }
-  };
-
-  // Render - use Show to conditionally render with or without API
-  return (
-    <Show
-      when={needsApi()}
-      fallback={
-        <ArkCollapsible.Root {...arkProps}>
-          <Show when={trigger()}>
-            <ArkCollapsible.Trigger class='w-full' onClick={handleTriggerClick}>
-              {renderTrigger() as JSX.Element}
-            </ArkCollapsible.Trigger>
-          </Show>
-          <Show when={indicator()}>
-            <ArkCollapsible.Indicator class='transition-transform duration-200 data-[state=open]:rotate-90'>
-              {renderIndicator() as JSX.Element}
-            </ArkCollapsible.Indicator>
-          </Show>
-          <ArkCollapsible.Content class='overflow-hidden'>{children()}</ArkCollapsible.Content>
-        </ArkCollapsible.Root>
-      }
-    >
-      <CollapsibleWithApi
-        arkProps={arkProps}
-        trigger={trigger}
-        indicator={indicator}
-        children={children}
-      />
-    </Show>
-  );
-};
-
-export default CollapsibleComponent;
-
-// Export raw Ark UI primitive for custom layouts
-export { ArkCollapsible as CollapsiblePrimitive };
-
-// Export hook for programmatic control
-export { useCollapsible };
diff --git a/packages/ui/src/components/Combobox.tsx b/packages/ui/src/components/Combobox.tsx
deleted file mode 100644
index 2302fef77..000000000
--- a/packages/ui/src/components/Combobox.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * Combobox - Searchable select with autocomplete using Ark UI
- *
- * Supports both high-level convenience API and low-level composition API
- */
-
-import { Combobox as ArkCombobox, useCombobox, useListCollection } from '@ark-ui/solid/combobox';
-import { useFilter } from '@ark-ui/solid/locale';
-import { Portal } from 'solid-js/web';
-import { Component, mergeProps, splitProps, createMemo, createEffect, Show, Index } from 'solid-js';
-import { FiChevronDown, FiX, FiCheck } from 'solid-icons/fi';
-import { Z_INDEX } from '../constants/zIndex.js';
-
-export interface ComboboxItem {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface ComboboxProps {
-  /** Available items */
-  items: ComboboxItem[];
-  /** Input label */
-  label?: string;
-  /** Input placeholder */
-  placeholder?: string;
-  /** Controlled selected values */
-  value?: string[];
-  /** Initial selected values */
-  defaultValue?: string[];
-  /** Callback when selection changes */
-  onValueChange?: (_details: { value: string[]; items: ComboboxItem[] }) => void;
-  /** Callback when input changes */
-  onInputValueChange?: (_details: { inputValue: string }) => void;
-  /** Allow multiple selections (default: false) */
-  multiple?: boolean;
-  /** Disable the combobox */
-  disabled?: boolean;
-  /** Make combobox read-only */
-  readOnly?: boolean;
-  /** Mark as invalid */
-  invalid?: boolean;
-  /** Form field name */
-  name?: string;
-  /** Allow custom values not in the list */
-  allowCustomValue?: boolean;
-  /** Close on selection (default: true for single, false for multiple) */
-  closeOnSelect?: boolean;
-  /** Open on input click (default: true) */
-  openOnClick?: boolean;
-  /** Set to true when used inside a Dialog */
-  inDialog?: boolean;
-  /** Additional class for root element */
-  class?: string;
-  /** Additional class for input element */
-  inputClass?: string;
-}
-
-/**
- * Combobox - Searchable select with autocomplete
- */
-const ComboboxComponent: Component<ComboboxProps> = props => {
-  const merged = mergeProps(
-    {
-      openOnClick: true,
-      defaultValue: [],
-    },
-    props,
-  );
-
-  const [local, machineProps] = splitProps(merged, [
-    'items',
-    'label',
-    'placeholder',
-    'inDialog',
-    'class',
-    'inputClass',
-  ]);
-
-  const getItems = () => local.items || [];
-
-  // Use Ark UI's filter utility
-  const filterFn = useFilter({ sensitivity: 'base' });
-
-  // Create collection with filtering
-  const { collection, set } = useListCollection({
-    initialItems: getItems(),
-    filter: filterFn().contains,
-    itemToString: (item: ComboboxItem) => item.label,
-    itemToValue: (item: ComboboxItem) => item.value,
-  });
-
-  // Sync items when props.items changes
-  createEffect(() => {
-    const items = getItems();
-    set(items);
-  });
-
-  const handleValueChange = (details: { value: string[] }) => {
-    if (machineProps.onValueChange) {
-      // Find the items that match the selected values
-      const selectedItems = details.value
-        .map(val => getItems().find(item => item.value === val))
-        .filter((item): item is ComboboxItem => item !== undefined);
-      machineProps.onValueChange({ value: details.value, items: selectedItems });
-    }
-  };
-
-  // Check if there are selected items
-  const hasSelectedItems = createMemo(() => {
-    const value = machineProps.value || machineProps.defaultValue || [];
-    return value.length > 0;
-  });
-
-  const renderContent = () => (
-    <ArkCombobox.Positioner>
-      <Show when={collection().items.length > 0}>
-        <ArkCombobox.Content
-          class={`${Z_INDEX.COMBOBOX} max-h-60 overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg focus:outline-none`}
-        >
-          <ArkCombobox.ItemGroup>
-            <Index each={collection().items}>
-              {item => (
-                <ArkCombobox.Item
-                  item={item()}
-                  class='flex cursor-pointer items-center justify-between px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-gray-50'
-                >
-                  <ArkCombobox.ItemText>{item().label}</ArkCombobox.ItemText>
-                  <ArkCombobox.ItemIndicator>
-                    <FiCheck class='h-4 w-4 text-blue-600' />
-                  </ArkCombobox.ItemIndicator>
-                </ArkCombobox.Item>
-              )}
-            </Index>
-          </ArkCombobox.ItemGroup>
-        </ArkCombobox.Content>
-      </Show>
-    </ArkCombobox.Positioner>
-  );
-
-  return (
-    <ArkCombobox.Root
-      {...machineProps}
-      collection={collection()}
-      onValueChange={handleValueChange}
-      class={`w-full ${local.class || ''}`}
-    >
-      <Show when={local.label}>
-        <ArkCombobox.Label class='mb-1 block text-sm font-medium text-gray-700'>
-          {local.label}
-        </ArkCombobox.Label>
-      </Show>
-      <ArkCombobox.Control class='relative flex items-center rounded-lg border border-gray-300 bg-white data-[disabled]:cursor-not-allowed data-[disabled]:bg-gray-100 data-[focus]:border-blue-500 data-[focus]:ring-1 data-[focus]:ring-blue-500 data-[invalid]:border-red-500'>
-        <ArkCombobox.Input
-          placeholder={local.placeholder}
-          class={`flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-400 disabled:cursor-not-allowed ${local.inputClass || ''}`}
-        />
-        <Show when={hasSelectedItems()}>
-          <ArkCombobox.ClearTrigger class='mr-1 rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600'>
-            <FiX class='h-4 w-4' />
-          </ArkCombobox.ClearTrigger>
-        </Show>
-        <ArkCombobox.Trigger class='px-2 py-2 text-gray-400 transition-colors hover:text-gray-600 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'>
-          <FiChevronDown class='h-4 w-4 transition-transform data-[state=open]:rotate-180' />
-        </ArkCombobox.Trigger>
-      </ArkCombobox.Control>
-      <Show when={!local.inDialog} fallback={renderContent()}>
-        <Portal>{renderContent()}</Portal>
-      </Show>
-    </ArkCombobox.Root>
-  );
-};
-
-export { ComboboxComponent as Combobox };
-
-// Export raw Ark UI primitive for custom layouts
-export { ArkCombobox as ComboboxPrimitive };
-
-// Export hook for programmatic control
-export { useCombobox };
diff --git a/packages/ui/src/components/Dialog.tsx b/packages/ui/src/components/Dialog.tsx
deleted file mode 100644
index 623542dda..000000000
--- a/packages/ui/src/components/Dialog.tsx
+++ /dev/null
@@ -1,331 +0,0 @@
-/**
- * Dialog components using Ark UI
- */
-
-import { Dialog as ArkDialog, useDialog } from '@ark-ui/solid/dialog';
-import { Portal } from 'solid-js/web';
-import { Component, createSignal, Show, JSX } from 'solid-js';
-import { FiAlertTriangle, FiX } from 'solid-icons/fi';
-import { Z_INDEX } from '../constants/zIndex.js';
-
-export interface DialogProps {
-  /** Controlled open state */
-  open?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (_open: boolean) => void;
-  /** Dialog title */
-  title?: string;
-  /** Dialog description */
-  description?: string;
-  /** Dialog content */
-  children?: JSX.Element;
-  /** Dialog size */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-}
-
-/**
- * Dialog - A generic dialog/modal component
- */
-const DialogComponent: Component<DialogProps> = props => {
-  const open = () => props.open;
-  const size = () => props.size;
-  const title = () => props.title;
-  const description = () => props.description;
-  const children = () => props.children;
-
-  const handleOpenChange = (details: { open: boolean }) => {
-    if (props.onOpenChange) {
-      props.onOpenChange(details.open);
-    }
-  };
-
-  const getSizeClass = () => {
-    switch (size()) {
-      case 'sm':
-        return 'max-w-sm';
-      case 'lg':
-        return 'max-w-lg';
-      case 'xl':
-        return 'max-w-xl';
-      case '2xl':
-        return 'max-w-6xl';
-      default:
-        return 'max-w-md';
-    }
-  };
-
-  return (
-    <ArkDialog.Root open={open()} onOpenChange={handleOpenChange}>
-      <Show when={open()}>
-        <Portal>
-          <ArkDialog.Backdrop
-            class={`fixed inset-0 ${Z_INDEX.BACKDROP} bg-black/50 transition-opacity`}
-          />
-          <ArkDialog.Positioner
-            class={`fixed inset-0 ${Z_INDEX.DIALOG} flex items-center justify-center overflow-y-auto p-4`}
-          >
-            <ArkDialog.Content
-              class={`my-auto w-full rounded-lg bg-white shadow-xl ${getSizeClass()}`}
-            >
-              {/* Header */}
-              <div class='flex items-center justify-between border-b border-gray-200 p-4'>
-                <div>
-                  <ArkDialog.Title class='text-lg font-semibold text-gray-900'>
-                    {title()}
-                  </ArkDialog.Title>
-                  <Show when={description()}>
-                    <ArkDialog.Description class='mt-1 text-sm text-gray-500'>
-                      {description()}
-                    </ArkDialog.Description>
-                  </Show>
-                </div>
-                <ArkDialog.CloseTrigger class='rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500'>
-                  <FiX class='h-5 w-5' />
-                </ArkDialog.CloseTrigger>
-              </div>
-              {/* Body */}
-              <div class='p-4'>{children()}</div>
-            </ArkDialog.Content>
-          </ArkDialog.Positioner>
-        </Portal>
-      </Show>
-    </ArkDialog.Root>
-  );
-};
-
-export interface ConfirmDialogProps {
-  /** Controlled open state */
-  open?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (_open: boolean) => void;
-  /** Callback when user confirms */
-  onConfirm?: () => void;
-  /** Dialog title */
-  title?: string;
-  /** Dialog description/message */
-  description?: string;
-  /** Text for confirm button (default: "Confirm") */
-  confirmText?: string;
-  /** Text for cancel button (default: "Cancel") */
-  cancelText?: string;
-  /** Visual variant (default: 'danger') */
-  variant?: 'danger' | 'warning' | 'info';
-  /** Whether confirm action is in progress */
-  loading?: boolean;
-}
-
-/**
- * ConfirmDialog - A reusable confirmation dialog component
- */
-export const ConfirmDialogComponent: Component<ConfirmDialogProps> = props => {
-  const open = () => props.open;
-  const loading = () => props.loading;
-  const variant = () => props.variant || 'danger';
-  const title = () => props.title;
-  const description = () => props.description;
-  const confirmText = () => props.confirmText;
-  const cancelText = () => props.cancelText;
-
-  const handleOpenChange = (details: { open: boolean }) => {
-    if (props.onOpenChange) {
-      props.onOpenChange(details.open);
-    }
-  };
-
-  const getVariantStyles = () => {
-    switch (variant()) {
-      case 'warning':
-        return {
-          icon: 'text-amber-500',
-          iconBg: 'bg-amber-100',
-          button: 'bg-amber-600 hover:bg-amber-700 focus:ring-amber-500',
-        };
-      case 'info':
-        return {
-          icon: 'text-blue-500',
-          iconBg: 'bg-blue-100',
-          button: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500',
-        };
-      default: // danger
-        return {
-          icon: 'text-red-500',
-          iconBg: 'bg-red-100',
-          button: 'bg-red-600 hover:bg-red-700 focus:ring-red-500',
-        };
-    }
-  };
-
-  const handleConfirm = () => {
-    props.onConfirm?.();
-  };
-
-  const handleCancel = () => {
-    if (!loading()) {
-      props.onOpenChange?.(false);
-    }
-  };
-
-  return (
-    <ArkDialog.Root
-      open={open()}
-      onOpenChange={handleOpenChange}
-      role='alertdialog'
-      closeOnInteractOutside={!loading()}
-      closeOnEscape={!loading()}
-    >
-      <Show when={open()}>
-        <Portal>
-          <ArkDialog.Backdrop
-            class={`fixed inset-0 ${Z_INDEX.BACKDROP} bg-black/50 transition-opacity`}
-          />
-          <ArkDialog.Positioner
-            class={`fixed inset-0 ${Z_INDEX.DIALOG} flex items-center justify-center p-4`}
-          >
-            <ArkDialog.Content class='w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl'>
-              <div class='p-6'>
-                <div class='flex items-start gap-4'>
-                  {/* Icon */}
-                  <div class={`shrink-0 rounded-full p-2 ${getVariantStyles().iconBg}`}>
-                    <FiAlertTriangle class={`h-6 w-6 ${getVariantStyles().icon}`} />
-                  </div>
-                  {/* Text content */}
-                  <div class='min-w-0 flex-1'>
-                    <ArkDialog.Title class='text-lg font-semibold text-gray-900'>
-                      {title()}
-                    </ArkDialog.Title>
-                    <ArkDialog.Description class='mt-2 text-sm text-gray-600'>
-                      {description()}
-                    </ArkDialog.Description>
-                  </div>
-                  {/* Close button */}
-                  <ArkDialog.CloseTrigger
-                    disabled={loading()}
-                    class='shrink-0 rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500 disabled:opacity-50'
-                  >
-                    <FiX class='h-5 w-5' />
-                  </ArkDialog.CloseTrigger>
-                </div>
-              </div>
-              {/* Footer */}
-              <div class='flex justify-end gap-3 bg-gray-50 px-6 py-4'>
-                <button
-                  onClick={handleCancel}
-                  disabled={loading()}
-                  class='rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
-                >
-                  {cancelText() || 'Cancel'}
-                </button>
-                <button
-                  onClick={handleConfirm}
-                  disabled={loading()}
-                  class={`rounded-md px-4 py-2 text-sm font-medium text-white transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:opacity-50 ${getVariantStyles().button}`}
-                >
-                  {loading() ? 'Loading...' : confirmText() || 'Confirm'}
-                </button>
-              </div>
-            </ArkDialog.Content>
-          </ArkDialog.Positioner>
-        </Portal>
-      </Show>
-    </ArkDialog.Root>
-  );
-};
-
-export interface ConfirmDialogConfig {
-  title?: string;
-  description?: string;
-  confirmText?: string;
-  cancelText?: string;
-  variant?: 'danger' | 'warning' | 'info';
-}
-
-/**
- * useConfirmDialog - Hook to manage confirm dialog state
- */
-export function useConfirmDialog() {
-  const [isOpen, setIsOpen] = createSignal(false);
-  const [config, setConfig] = createSignal<ConfirmDialogConfig & { loading?: boolean }>({
-    title: '',
-    description: '',
-    confirmText: 'Confirm',
-    cancelText: 'Cancel',
-    variant: 'danger',
-  });
-  const [loading, setLoading] = createSignal(false);
-
-  let resolvePromise: ((_value: boolean) => void) | null = null;
-
-  const open = (dialogConfig: ConfirmDialogConfig) => {
-    return new Promise<boolean>(resolve => {
-      resolvePromise = resolve;
-      setConfig({
-        title: dialogConfig.title || 'Confirm',
-        description: dialogConfig.description || 'Are you sure?',
-        confirmText: dialogConfig.confirmText || 'Confirm',
-        cancelText: dialogConfig.cancelText || 'Cancel',
-        variant: dialogConfig.variant || 'danger',
-      });
-      setIsOpen(true);
-    });
-  };
-
-  const close = () => {
-    setIsOpen(false);
-    setLoading(false);
-    if (resolvePromise) {
-      resolvePromise(false);
-      resolvePromise = null;
-    }
-  };
-
-  const handleConfirm = () => {
-    if (resolvePromise) {
-      resolvePromise(true);
-      resolvePromise = null;
-    }
-    setIsOpen(false);
-    setLoading(false);
-  };
-
-  const handleOpenChange = (newOpen: boolean) => {
-    if (!newOpen) {
-      close();
-    }
-  };
-
-  // Pre-bound component that uses the hook's state
-  function ConfirmDialogHookComponent() {
-    return (
-      <ConfirmDialogComponent
-        open={isOpen()}
-        onOpenChange={handleOpenChange}
-        onConfirm={handleConfirm}
-        loading={loading()}
-        {...config()}
-      />
-    );
-  }
-
-  return {
-    isOpen,
-    open,
-    close,
-    setLoading,
-    ConfirmDialogComponent: ConfirmDialogHookComponent,
-    dialogProps: () => ({
-      open: isOpen(),
-      onOpenChange: handleOpenChange,
-      onConfirm: handleConfirm,
-      loading: loading(),
-      ...config(),
-    }),
-  };
-}
-
-export { DialogComponent as Dialog, ConfirmDialogComponent as ConfirmDialog };
-
-// Export raw Ark UI Dialog primitives for custom dialog layouts
-export { ArkDialog as DialogPrimitive };
-
-// Export hook for programmatic control
-export { useDialog };
diff --git a/packages/ui/src/components/Drawer.tsx b/packages/ui/src/components/Drawer.tsx
deleted file mode 100644
index 0da9461a9..000000000
--- a/packages/ui/src/components/Drawer.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Drawer component for sliding panels
- *
- * Provides a slide-in drawer/panel UI pattern for side panels, PDF viewers, etc.
- * Built on Ark UI Dialog with custom slide animations.
- */
-
-import { Dialog as ArkDialog } from '@ark-ui/solid/dialog';
-import { Portal } from 'solid-js/web';
-import { Component, Show, JSX } from 'solid-js';
-import { FiX } from 'solid-icons/fi';
-import { Z_INDEX } from '../constants/zIndex.js';
-
-export interface DrawerProps {
-  /** Controlled open state */
-  open?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (_open: boolean) => void;
-  /** Drawer title */
-  title?: string;
-  /** Drawer side (default: 'right') */
-  side?: 'left' | 'right';
-  /** Drawer size (default: 'md') */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  /** Show backdrop (default: true) */
-  showBackdrop?: boolean;
-  /** Close on outside click (default: true) */
-  closeOnOutsideClick?: boolean;
-  /** Drawer content */
-  children?: JSX.Element;
-}
-
-/**
- * Drawer - A sliding panel/drawer component built on Ark UI Dialog
- */
-const DrawerComponent: Component<DrawerProps> = props => {
-  const open = () => props.open ?? false;
-  const side = () => props.side ?? 'right';
-  const size = () => props.size ?? 'md';
-  const title = () => props.title;
-  const children = () => props.children;
-  const showBackdrop = () => props.showBackdrop ?? true;
-  const closeOnOutsideClick = () => props.closeOnOutsideClick ?? true;
-
-  const handleOpenChange = (details: { open: boolean }) => {
-    if (props.onOpenChange) {
-      props.onOpenChange(details.open);
-    }
-  };
-
-  const getSizeClass = () => {
-    switch (size()) {
-      case 'sm':
-        return 'w-80';
-      case 'lg':
-        return 'w-[32rem]';
-      case 'xl':
-        return 'w-[40rem]';
-      default:
-        return 'w-96';
-    }
-  };
-
-  const getSideClasses = () => {
-    const isLeft = side() === 'left';
-    const baseClasses = isLeft ? 'left-0' : 'right-0';
-    // Default to closed position, transition to open
-    const defaultTransform = isLeft ? '-translate-x-full' : 'translate-x-full';
-    if (isLeft) {
-      return `${baseClasses} ${defaultTransform} data-[state=open]:translate-x-0`;
-    } else {
-      return `${baseClasses} ${defaultTransform} data-[state=open]:translate-x-0`;
-    }
-  };
-
-  return (
-    <ArkDialog.Root
-      open={open()}
-      onOpenChange={handleOpenChange}
-      closeOnInteractOutside={closeOnOutsideClick()}
-      closeOnEscape={true}
-      lazyMount={true}
-      unmountOnExit={true}
-    >
-      <Portal>
-        {/* Backdrop */}
-        <Show when={showBackdrop()}>
-          <ArkDialog.Backdrop
-            class={`fixed inset-0 ${Z_INDEX.BACKDROP} bg-black/50 transition-opacity duration-300 data-[state=closed]:opacity-0 data-[state=open]:opacity-100`}
-          />
-        </Show>
-
-        {/* Drawer Positioner */}
-        <ArkDialog.Positioner
-          class={`fixed top-0 h-screen ${side() === 'left' ? 'left-0' : 'right-0'} ${Z_INDEX.DIALOG}`}
-        >
-          {/* Drawer Content */}
-          <ArkDialog.Content
-            class={`h-screen ${getSizeClass()} flex flex-col bg-white shadow-xl transition-transform duration-300 ease-out ${getSideClasses()}`}
-            role='dialog'
-            aria-modal='true'
-            aria-labelledby={title() ? 'drawer-title' : undefined}
-          >
-            {/* Header */}
-            <div class='flex shrink-0 items-center justify-between border-b border-gray-200 p-4'>
-              <Show when={title()}>
-                <ArkDialog.Title id='drawer-title' class='text-lg font-semibold text-gray-900'>
-                  {title()}
-                </ArkDialog.Title>
-              </Show>
-              <ArkDialog.CloseTrigger
-                class='ml-auto rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500'
-                aria-label='Close drawer'
-              >
-                <FiX class='h-5 w-5' />
-              </ArkDialog.CloseTrigger>
-            </div>
-
-            {/* Body */}
-            <div class='min-h-0 flex-1 overflow-auto'>{children()}</div>
-          </ArkDialog.Content>
-        </ArkDialog.Positioner>
-      </Portal>
-    </ArkDialog.Root>
-  );
-};
-
-export { DrawerComponent as Drawer };
-
-// Export raw Ark UI Dialog primitive for custom drawer layouts
-export { ArkDialog as DrawerPrimitive };
diff --git a/packages/ui/src/components/Editable.tsx b/packages/ui/src/components/Editable.tsx
deleted file mode 100644
index d74952f9f..000000000
--- a/packages/ui/src/components/Editable.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-/**
- * Editable - An inline editable single-line text component using Ark UI
- */
-
-import { Editable } from '@ark-ui/solid/editable';
-import { Component, Show, mergeProps } from 'solid-js';
-import { FiCheck, FiX, FiEdit2 } from 'solid-icons/fi';
-import { cn } from '../lib/cn.js';
-
-/**
- * Variant style presets for common use cases
- * Note: For autoResize to work, input/preview need minimal styles.
- * Visual styles go on the area element which wraps both.
- */
-const variants = {
-  // Default: form field with padding and focus ring
-  default: {
-    area: 'px-2 py-1 rounded transition-colors hover:bg-gray-100 focus-within:ring-1 focus-within:ring-blue-500 focus-within:border-blue-500 border border-transparent',
-    input: 'outline-none bg-transparent',
-    preview: 'cursor-pointer',
-  },
-  // Inline: minimal styling, no padding, blends into surrounding text
-  inline: {
-    area: 'border-b border-transparent focus-within:border-blue-500 transition-colors',
-    input: 'outline-none bg-transparent',
-    preview: 'cursor-pointer hover:text-blue-600 transition-colors',
-  },
-  // Heading: for titles/headings, larger text, subtle hover
-  heading: {
-    area: 'rounded transition-colors hover:bg-gray-50 focus-within:bg-gray-50',
-    input: 'outline-none bg-transparent',
-    preview: 'cursor-pointer',
-  },
-  // Field: more prominent form field with visible border
-  field: {
-    area: 'px-3 py-2 border border-gray-300 rounded-md transition-colors hover:border-gray-400 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500',
-    input: 'outline-none bg-transparent',
-    preview: 'cursor-pointer',
-  },
-} as const;
-
-export interface EditableProps {
-  /** The controlled value */
-  value?: string;
-  /** The initial value (uncontrolled) */
-  defaultValue?: string;
-  /** Placeholder text when empty */
-  placeholder?: string;
-  /** Called when value changes (on each keystroke) */
-  onChange?: (_value: string) => void;
-  /** Called when value is committed (Enter/blur/submit button) */
-  onSubmit?: (_value: string) => void;
-  /** Called when editing is cancelled */
-  onCancel?: () => void;
-  /** Whether the editable is disabled */
-  disabled?: boolean;
-  /** Whether the editable is read-only (can view but not edit) */
-  readOnly?: boolean;
-  /** Whether to auto-resize to fit content */
-  autoResize?: boolean;
-  /** How to enter edit mode (default: 'dblclick') */
-  activationMode?: 'focus' | 'dblclick' | 'click' | 'none';
-  /** What triggers submit (default: 'both') */
-  submitMode?: 'enter' | 'blur' | 'none' | 'both';
-  /** Whether to select text when focused */
-  selectOnFocus?: boolean;
-  /** Maximum characters allowed */
-  maxLength?: number;
-  /** Style preset (default: 'default') */
-  variant?: 'default' | 'inline' | 'heading' | 'field';
-  /** Additional CSS classes for the root */
-  class?: string;
-  /** Additional CSS classes for the area (input/preview container) */
-  areaClass?: string;
-  /** Additional CSS classes for the input (merged with variant) */
-  inputClass?: string;
-  /** Additional CSS classes for the preview (merged with variant) */
-  previewClass?: string;
-  /** Whether to show edit/save/cancel buttons (default: false) */
-  showControls?: boolean;
-  /** Whether to show only an edit icon trigger (no save/cancel) (default: false) */
-  showEditIcon?: boolean;
-  /** Optional label text */
-  label?: string;
-}
-
-/**
- * Editable - An inline editable single-line text component using Ark UI
- *
- * Best for: titles, names, labels - single line text that can be edited inline.
- * For multi-line text (descriptions, notes), use a manual textarea approach instead.
- */
-const EditableComponent: Component<EditableProps> = props => {
-  const merged = mergeProps(
-    {
-      placeholder: 'Click to edit...',
-      activationMode: 'dblclick',
-      submitMode: 'both',
-      selectOnFocus: true,
-      autoResize: true,
-      showControls: false,
-      showEditIcon: false,
-      variant: 'default',
-    },
-    props,
-  );
-
-  const value = () => merged.value;
-  const defaultValue = () => merged.defaultValue;
-  const placeholder = () => merged.placeholder;
-  const disabled = () => merged.disabled;
-  const readOnly = () => merged.readOnly;
-  const autoResize = () => merged.autoResize;
-  const activationMode = () =>
-    merged.activationMode as 'focus' | 'dblclick' | 'click' | 'none' | undefined;
-  const submitMode = () => merged.submitMode as 'enter' | 'blur' | 'none' | 'both' | undefined;
-  const selectOnFocus = () => merged.selectOnFocus;
-  const maxLength = () => merged.maxLength;
-  const showControls = () => merged.showControls;
-  const showEditIcon = () => merged.showEditIcon;
-  const variant = () => merged.variant;
-  const variantStyles = () => {
-    const v = variant() || 'default';
-    return variants[v as keyof typeof variants] || variants.default;
-  };
-  const classValue = () => merged.class;
-  const areaClass = () => merged.areaClass;
-  const inputClass = () => merged.inputClass;
-  const previewClass = () => merged.previewClass;
-  const label = () => merged.label;
-
-  const handleValueChange = (details: { value: string }) => {
-    if (merged.onChange) {
-      merged.onChange(details.value);
-    }
-  };
-
-  const handleValueCommit = (details: { value: string }) => {
-    if (merged.onSubmit) {
-      merged.onSubmit(details.value);
-    }
-  };
-
-  const handleValueRevert = () => {
-    if (merged.onCancel) {
-      merged.onCancel();
-    }
-  };
-
-  // Use value if provided, otherwise defaultValue, otherwise empty string
-  const editableValue = () => value() ?? defaultValue() ?? '';
-
-  return (
-    <Editable.Root
-      value={value() !== undefined ? value() : undefined}
-      defaultValue={value() === undefined ? editableValue() : undefined}
-      placeholder={placeholder()}
-      disabled={disabled()}
-      readOnly={readOnly()}
-      autoResize={autoResize()}
-      activationMode={activationMode()}
-      submitMode={submitMode()}
-      selectOnFocus={selectOnFocus()}
-      maxLength={maxLength()}
-      onValueChange={handleValueChange}
-      onValueCommit={handleValueCommit}
-      onValueRevert={handleValueRevert}
-      class={cn('group inline-block', classValue())}
-    >
-      <Editable.Context>
-        {api => (
-          <>
-            <Show when={label()}>
-              <Editable.Label class='mb-1 block text-sm font-medium text-gray-700'>
-                {label()}
-              </Editable.Label>
-            </Show>
-
-            <div class='flex items-center gap-2'>
-              <Editable.Area
-                class={cn(
-                  variantStyles().area,
-                  disabled() && 'cursor-not-allowed opacity-50',
-                  areaClass(),
-                )}
-              >
-                <Editable.Input class={cn(variantStyles().input, inputClass())} />
-                <Editable.Preview
-                  class={cn(
-                    variantStyles().preview,
-                    !api().value && 'text-gray-400',
-                    previewClass(),
-                  )}
-                >
-                  {api().value || placeholder()}
-                </Editable.Preview>
-              </Editable.Area>
-
-              {/* External controls for edit mode */}
-              <Show when={showControls()}>
-                <div class='flex items-center gap-1'>
-                  <Show
-                    when={api().editing}
-                    fallback={
-                      <Editable.EditTrigger class='rounded p-1 text-gray-400 opacity-0 transition-colors group-hover:opacity-100 hover:bg-gray-100 hover:text-gray-600'>
-                        <FiEdit2 class='h-4 w-4' />
-                      </Editable.EditTrigger>
-                    }
-                  >
-                    <Editable.SubmitTrigger class='rounded p-1 text-green-500 transition-colors hover:bg-green-50 hover:text-green-600'>
-                      <FiCheck class='h-4 w-4' />
-                    </Editable.SubmitTrigger>
-                    <Editable.CancelTrigger class='rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600'>
-                      <FiX class='h-4 w-4' />
-                    </Editable.CancelTrigger>
-                  </Show>
-                </div>
-              </Show>
-
-              {/* Edit icon only (no save/cancel) */}
-              <Show when={showEditIcon() && !showControls() && !api().editing}>
-                <Editable.EditTrigger class='rounded p-1 text-gray-400 opacity-0 transition-colors group-hover:opacity-100 hover:bg-gray-100 hover:text-gray-600'>
-                  <FiEdit2 class='h-4 w-4' />
-                </Editable.EditTrigger>
-              </Show>
-            </div>
-          </>
-        )}
-      </Editable.Context>
-    </Editable.Root>
-  );
-};
-
-export { EditableComponent as Editable };
-export default EditableComponent;
-
-// Export raw Ark UI primitive for custom layouts
-export { Editable as EditablePrimitive };
diff --git a/packages/ui/src/components/FileUpload.tsx b/packages/ui/src/components/FileUpload.tsx
deleted file mode 100644
index 7aba68c44..000000000
--- a/packages/ui/src/components/FileUpload.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * FileUpload component using Ark UI
- */
-
-import { FileUpload } from '@ark-ui/solid/file-upload';
-import { Component, Show, mergeProps, For } from 'solid-js';
-import { BiRegularCloudUpload, BiRegularTrash } from 'solid-icons/bi';
-import { CgFileDocument } from 'solid-icons/cg';
-import { useWindowDrag } from '../primitives/useWindowDrag.js';
-
-export interface FileUploadProps {
-  /** Accepted file types (e.g., 'application/pdf') */
-  accept?: string;
-  /** Allow multiple file selection (default: false) */
-  multiple?: boolean;
-  /** Callback when files change */
-  onFilesChange?: (_files: File[]) => void;
-  /** Callback when files are accepted */
-  onFileAccept?: (_details: { files: File[] }) => void;
-  /** Callback when files are rejected */
-  onFileReject?: (_details: { files: unknown[] }) => void;
-  /** Custom text for the dropzone */
-  dropzoneText?: string;
-  /** Custom text for the trigger button */
-  buttonText?: string;
-  /** Helper text below the dropzone text */
-  helpText?: string;
-  /** Whether to show the list of uploaded files (default: true) */
-  showFileList?: boolean;
-  /** Additional CSS classes for the root element */
-  class?: string;
-  /** Additional CSS classes for the dropzone */
-  dropzoneClass?: string;
-  /** Disable the file upload */
-  disabled?: boolean;
-  /** Use compact/minimal styling */
-  compact?: boolean;
-  /** Allow dropping directories (default: true for multiple) */
-  allowDirectories?: boolean;
-}
-
-/**
- * FileUpload - Reusable file upload component using Ark UI
- */
-const FileUploadComponent: Component<FileUploadProps> = props => {
-  const merged = mergeProps(
-    {
-      multiple: false,
-      showFileList: true,
-      dropzoneText: 'Drag your file(s) here',
-      buttonText: 'Choose file(s)',
-      helpText: '',
-      compact: false,
-      allowDirectories: undefined, // Will default to true if multiple is true
-    },
-    props,
-  );
-
-  // Allow directories by default when multiple files are allowed
-  const allowDirs = () => merged.allowDirectories ?? merged.multiple;
-  const showFileList = () => merged.showFileList;
-  const acceptValue = () => merged.accept;
-  const classValue = () => merged.class;
-  const compact = () => merged.compact;
-  const dropzoneClass = () => merged.dropzoneClass;
-  const helpText = () => merged.helpText;
-
-  // Detect when files are being dragged over the window (even from external sources like Finder)
-  const { isDraggingOverWindow } = useWindowDrag();
-
-  const handleFileChange = (details: { acceptedFiles: File[] }) => {
-    // Pass files to callback
-    merged.onFilesChange?.(details.acceptedFiles);
-  };
-
-  const handleFileAccept = (details: { files: File[] }) => {
-    merged.onFileAccept?.(details);
-  };
-
-  const handleFileReject = (details: { files: unknown[] }) => {
-    merged.onFileReject?.(details);
-  };
-
-  return (
-    <FileUpload.Root
-      accept={acceptValue() || undefined}
-      maxFiles={merged.multiple ? 100 : 1}
-      directory={allowDirs()}
-      disabled={merged.disabled}
-      acceptedFiles={[]}
-      onFileChange={handleFileChange}
-      onFileAccept={handleFileAccept}
-      onFileReject={handleFileReject}
-      class={classValue()}
-    >
-      <FileUpload.Context>
-        {api => {
-          const isHighlighted = () => api().dragging || isDraggingOverWindow();
-
-          return (
-            <>
-              <FileUpload.Dropzone
-                class={`rounded-lg border-2 border-dashed transition-all duration-200 ${
-                  isHighlighted() ?
-                    'border-blue-500 bg-blue-50'
-                  : 'border-gray-300 hover:border-gray-400'
-                } ${compact() ? 'p-4' : 'p-8'} ${dropzoneClass() || ''}`}
-              >
-                <FileUpload.HiddenInput />
-                <div class='flex flex-col items-center justify-center gap-2 text-center'>
-                  <BiRegularCloudUpload
-                    class={`text-gray-400 ${compact() ? 'h-8 w-8' : 'h-12 w-12'} ${
-                      isHighlighted() ? 'text-blue-500' : ''
-                    }`}
-                  />
-                  <div class={compact() ? 'text-sm' : ''}>
-                    <p class='font-medium text-gray-700'>{merged.dropzoneText}</p>
-                    <Show when={helpText()}>
-                      <p class='mt-1 text-xs text-gray-500'>{helpText()}</p>
-                    </Show>
-                  </div>
-                  <span class='text-sm text-gray-400'>or</span>
-                  <FileUpload.Trigger
-                    class={`rounded-lg border border-gray-300 bg-white px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none ${
-                      compact() ? 'px-3 py-1.5 text-sm' : ''
-                    }`}
-                  >
-                    {merged.buttonText}
-                  </FileUpload.Trigger>
-                </div>
-              </FileUpload.Dropzone>
-
-              <Show when={showFileList() && api().acceptedFiles.length > 0}>
-                <FileUpload.ItemGroup class='mt-4 space-y-2'>
-                  <For each={api().acceptedFiles}>
-                    {file => (
-                      <FileUpload.Item
-                        file={file}
-                        class='flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 p-3'
-                      >
-                        <CgFileDocument class='h-8 w-8 shrink-0 text-gray-400' />
-                        <div class='min-w-0 flex-1'>
-                          <FileUpload.ItemName class='truncate text-sm font-medium text-gray-900'>
-                            {file.name}
-                          </FileUpload.ItemName>
-                          <FileUpload.ItemSizeText class='text-xs text-gray-500' />
-                        </div>
-                        <FileUpload.ItemDeleteTrigger
-                          class='rounded p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500'
-                          title='Remove file'
-                        >
-                          <BiRegularTrash class='h-4 w-4' />
-                        </FileUpload.ItemDeleteTrigger>
-                      </FileUpload.Item>
-                    )}
-                  </For>
-                </FileUpload.ItemGroup>
-              </Show>
-            </>
-          );
-        }}
-      </FileUpload.Context>
-    </FileUpload.Root>
-  );
-};
-
-export { FileUploadComponent as FileUpload };
-
-// Export raw Ark UI primitive for custom layouts
-export { FileUpload as FileUploadPrimitive };
diff --git a/packages/ui/src/components/FloatingPanel.tsx b/packages/ui/src/components/FloatingPanel.tsx
deleted file mode 100644
index 3edd24b11..000000000
--- a/packages/ui/src/components/FloatingPanel.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-/**
- * FloatingPanel component using Ark UI
- */
-
-import { FloatingPanel } from '@ark-ui/solid/floating-panel';
-import { Component, Show, JSX } from 'solid-js';
-import { Portal } from 'solid-js/web';
-import { AiOutlineMinus, AiOutlineClose } from 'solid-icons/ai';
-import { FiMaximize2 } from 'solid-icons/fi';
-import { FaSolidWindowRestore } from 'solid-icons/fa';
-
-export interface FloatingPanelSize {
-  width: number;
-  height: number;
-}
-
-export interface FloatingPanelPosition {
-  x: number;
-  y: number;
-}
-
-export interface FloatingPanelProps {
-  /** Whether the panel is open (controlled) */
-  open?: boolean;
-  /** Initial open state (uncontrolled) */
-  defaultOpen?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (_details: { open: boolean }) => void;
-  /** Panel title */
-  title?: string;
-  /** Panel content */
-  children?: JSX.Element;
-  /** Initial size */
-  defaultSize?: FloatingPanelSize;
-  /** Initial position */
-  defaultPosition?: FloatingPanelPosition;
-  /** Controlled size */
-  size?: FloatingPanelSize;
-  /** Controlled position */
-  position?: FloatingPanelPosition;
-  /** Callback when size changes */
-  onSizeChange?: (_details: { size: FloatingPanelSize }) => void;
-  /** Callback when position changes */
-  onPositionChange?: (_details: { position: FloatingPanelPosition }) => void;
-  /** Callback when stage changes */
-  onStageChange?: (_details: { stage: 'minimized' | 'maximized' | 'default' }) => void;
-  /** Whether the panel can be resized (default: true) */
-  resizable?: boolean;
-  /** Whether the panel can be dragged (default: true) */
-  draggable?: boolean;
-  /** Minimum size constraints */
-  minSize?: FloatingPanelSize;
-  /** Maximum size constraints */
-  maxSize?: FloatingPanelSize;
-  /** Lock aspect ratio when resizing */
-  lockAspectRatio?: boolean;
-  /** Show all control buttons (default: true) */
-  showControls?: boolean;
-  /** Show minimize button (default: true, requires showControls) */
-  showMinimize?: boolean;
-  /** Show maximize button (default: true, requires showControls) */
-  showMaximize?: boolean;
-  /** Show restore button (default: true, requires showControls) */
-  showRestore?: boolean;
-  /** Show close button (default: true, requires showControls) */
-  showClose?: boolean;
-  /** Close panel on Escape key (default: true) */
-  closeOnEscape?: boolean;
-  /** Persist size/position when closed (default: false) */
-  persistRect?: boolean;
-}
-
-/**
- * FloatingPanel - A draggable and resizable floating panel component
- */
-const FloatingPanelComponent: Component<FloatingPanelProps> = props => {
-  const showControls = () => props.showControls ?? true;
-  const showMinimize = () => showControls() && (props.showMinimize ?? true);
-  const showMaximize = () => showControls() && (props.showMaximize ?? true);
-  const showRestore = () => showControls() && (props.showRestore ?? true);
-  const showClose = () => showControls() && (props.showClose ?? true);
-
-  const handleOpenChange = (details: { open: boolean }) => {
-    if (props.onOpenChange) {
-      props.onOpenChange(details);
-    }
-  };
-
-  const handleSizeChange = (details: { size: FloatingPanelSize }) => {
-    if (props.onSizeChange) {
-      props.onSizeChange(details);
-    }
-  };
-
-  const handlePositionChange = (details: { position: FloatingPanelPosition }) => {
-    if (props.onPositionChange) {
-      props.onPositionChange(details);
-    }
-  };
-
-  const handleStageChange = (details: { stage: 'minimized' | 'maximized' | 'default' }) => {
-    if (props.onStageChange) {
-      props.onStageChange(details);
-    }
-  };
-
-  const getResizeTriggerStyle = (axis: string): { width?: string; height?: string } => {
-    if (axis.length === 1) {
-      return axis === 'n' || axis === 's' ? { height: '8px' } : { width: '8px' };
-    }
-    return { width: '12px', height: '12px' };
-  };
-
-  return (
-    <FloatingPanel.Root
-      open={props.open}
-      defaultOpen={props.defaultOpen}
-      onOpenChange={handleOpenChange}
-      defaultSize={props.defaultSize ?? { width: 320, height: 240 }}
-      size={props.size}
-      onSizeChange={handleSizeChange}
-      defaultPosition={props.defaultPosition}
-      position={props.position}
-      onPositionChange={handlePositionChange}
-      onStageChange={handleStageChange}
-      resizable={props.resizable ?? true}
-      draggable={props.draggable ?? true}
-      minSize={props.minSize ?? { width: 200, height: 150 }}
-      maxSize={props.maxSize}
-      lockAspectRatio={props.lockAspectRatio ?? false}
-      closeOnEscape={props.closeOnEscape ?? true}
-      persistRect={props.persistRect ?? false}
-    >
-      <FloatingPanel.Context>
-        {api => (
-          <Show when={api().open}>
-            <Portal>
-              <FloatingPanel.Positioner>
-                <FloatingPanel.Content
-                  class='relative flex min-h-0 flex-col rounded-lg border border-gray-200 bg-white shadow-2xl'
-                  style={{ overflow: 'hidden' }}
-                >
-                  {/* Header with drag handle */}
-                  <FloatingPanel.DragTrigger class='shrink-0'>
-                    <FloatingPanel.Header class='flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-2 select-none'>
-                      <FloatingPanel.Title class='text-sm font-semibold text-gray-900'>
-                        {props.title}
-                      </FloatingPanel.Title>
-                      <Show when={showControls()}>
-                        <FloatingPanel.Control class='flex items-center gap-0.5'>
-                          <Show when={showMinimize()}>
-                            <FloatingPanel.StageTrigger
-                              stage='minimized'
-                              class='rounded p-1 text-gray-500 transition-colors hover:bg-gray-200 hover:text-gray-700'
-                              title='Minimize'
-                            >
-                              <AiOutlineMinus class='h-3.5 w-3.5' />
-                            </FloatingPanel.StageTrigger>
-                          </Show>
-                          <Show when={showMaximize()}>
-                            <FloatingPanel.StageTrigger
-                              stage='maximized'
-                              class='rounded p-1 text-gray-500 transition-colors hover:bg-gray-200 hover:text-gray-700'
-                              title='Maximize'
-                            >
-                              <FiMaximize2 class='h-3.5 w-3.5' />
-                            </FloatingPanel.StageTrigger>
-                          </Show>
-                          <Show when={showRestore()}>
-                            <FloatingPanel.StageTrigger
-                              stage='default'
-                              class='rounded p-1 text-gray-500 transition-colors hover:bg-gray-200 hover:text-gray-700'
-                              title='Restore'
-                            >
-                              <FaSolidWindowRestore class='h-3.5 w-3.5' />
-                            </FloatingPanel.StageTrigger>
-                          </Show>
-                          <Show when={showClose()}>
-                            <FloatingPanel.CloseTrigger
-                              class='rounded p-1 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600'
-                              title='Close'
-                            >
-                              <AiOutlineClose class='h-3.5 w-3.5' />
-                            </FloatingPanel.CloseTrigger>
-                          </Show>
-                        </FloatingPanel.Control>
-                      </Show>
-                    </FloatingPanel.Header>
-                  </FloatingPanel.DragTrigger>
-
-                  {/* Body */}
-                  <FloatingPanel.Body class='min-h-0 flex-1 overflow-auto p-4'>
-                    {props.children}
-                  </FloatingPanel.Body>
-
-                  {/* Resize handles */}
-                  <Show when={props.resizable ?? true}>
-                    <FloatingPanel.ResizeTrigger axis='n' style={getResizeTriggerStyle('n')} />
-                    <FloatingPanel.ResizeTrigger axis='e' style={getResizeTriggerStyle('e')} />
-                    <FloatingPanel.ResizeTrigger axis='w' style={getResizeTriggerStyle('w')} />
-                    <FloatingPanel.ResizeTrigger axis='s' style={getResizeTriggerStyle('s')} />
-                    <FloatingPanel.ResizeTrigger axis='ne' style={getResizeTriggerStyle('ne')} />
-                    <FloatingPanel.ResizeTrigger axis='se' style={getResizeTriggerStyle('se')} />
-                    <FloatingPanel.ResizeTrigger axis='sw' style={getResizeTriggerStyle('sw')} />
-                    <FloatingPanel.ResizeTrigger axis='nw' style={getResizeTriggerStyle('nw')} />
-                  </Show>
-                </FloatingPanel.Content>
-              </FloatingPanel.Positioner>
-            </Portal>
-          </Show>
-        )}
-      </FloatingPanel.Context>
-    </FloatingPanel.Root>
-  );
-};
-
-export { FloatingPanelComponent as FloatingPanel };
-
-// Export raw Ark UI primitive for custom layouts
-export { FloatingPanel as FloatingPanelPrimitive };
diff --git a/packages/ui/src/components/Menu.tsx b/packages/ui/src/components/Menu.tsx
deleted file mode 100644
index 2aca0d129..000000000
--- a/packages/ui/src/components/Menu.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Menu - Dropdown menu for actions using Ark UI
- */
-
-import { Menu } from '@ark-ui/solid/menu';
-import { Portal } from 'solid-js/web';
-import { Component, createSignal, Show, For, splitProps, JSX } from 'solid-js';
-import { Z_INDEX } from '../constants/zIndex.js';
-
-export type Placement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end';
-
-export interface MenuItem {
-  value: string;
-  label: string;
-  icon?: JSX.Element;
-  destructive?: boolean;
-  separator?: boolean;
-  groupLabel?: string;
-  disabled?: boolean;
-}
-
-export interface MenuProps {
-  /** Trigger element */
-  trigger: JSX.Element;
-  /** Menu items */
-  items: MenuItem[];
-  /** Callback when item is selected */
-  onSelect?: (_details: { value: string }) => void;
-  /** Controlled open state */
-  open?: boolean;
-  /** Initial open state */
-  defaultOpen?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (_details: { open: boolean }) => void;
-  /** Menu placement (default: 'bottom-start') */
-  placement?: Placement;
-  /** Close menu on selection (default: true) */
-  closeOnSelect?: boolean;
-  /** Set to true when used inside a Dialog */
-  inDialog?: boolean;
-  /** Hide the dropdown indicator chevron */
-  hideIndicator?: boolean;
-  /** Additional class for content */
-  class?: string;
-}
-
-/**
- * Menu - Dropdown menu for actions
- */
-const MenuComponent: Component<MenuProps> = props => {
-  const [local, machineProps] = splitProps(props, [
-    'trigger',
-    'items',
-    'inDialog',
-    'hideIndicator',
-    'placement',
-    'class',
-  ]);
-
-  const handleSelect = (details: { value: string }) => {
-    if (machineProps.onSelect) {
-      machineProps.onSelect(details);
-    }
-  };
-
-  // Track open state for conditional rendering
-  const [isOpen, setIsOpen] = createSignal(false);
-
-  const handleOpenChange = (details: { open: boolean }) => {
-    setIsOpen(details.open);
-    if (machineProps.onOpenChange) {
-      machineProps.onOpenChange(details);
-    }
-  };
-
-  const renderContent = () => (
-    <Menu.Positioner>
-      <Menu.Content
-        class={`${Z_INDEX.MENU} min-w-40 rounded-lg border border-gray-200 bg-white py-1 shadow-lg focus:outline-none ${local.class || ''}`}
-      >
-        <For each={local.items}>
-          {item => (
-            <Show
-              when={!item.separator && !item.groupLabel}
-              fallback={
-                <Show
-                  when={item.separator}
-                  fallback={
-                    <Menu.ItemGroupLabel class='px-3 py-1.5 text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                      {item.groupLabel}
-                    </Menu.ItemGroupLabel>
-                  }
-                >
-                  <Menu.Separator class='my-1 border-t border-gray-100' />
-                </Show>
-              }
-            >
-              <Menu.Item
-                value={item.value}
-                disabled={item.disabled}
-                closeOnSelect={machineProps.closeOnSelect ?? true}
-                class={`flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors ${
-                  item.destructive ?
-                    'text-red-600 hover:bg-red-50 data-highlighted:bg-red-50'
-                  : 'text-gray-700 hover:bg-gray-50 data-highlighted:bg-gray-50'
-                } ${item.disabled ? 'cursor-not-allowed opacity-50' : ''} focus:outline-none`}
-              >
-                <Show when={item.icon}>
-                  <span class='h-4 w-4 shrink-0'>{item.icon}</span>
-                </Show>
-                <Menu.ItemText>{item.label}</Menu.ItemText>
-              </Menu.Item>
-            </Show>
-          )}
-        </For>
-      </Menu.Content>
-    </Menu.Positioner>
-  );
-
-  return (
-    <Menu.Root
-      open={machineProps.open}
-      defaultOpen={machineProps.defaultOpen}
-      onOpenChange={handleOpenChange}
-      onSelect={handleSelect}
-      closeOnSelect={machineProps.closeOnSelect ?? true}
-      positioning={{ placement: local.placement || 'bottom-start' }}
-    >
-      <Menu.Trigger class='inline-flex items-center gap-1 rounded p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600'>
-        {local.trigger}
-        <Show when={!local.hideIndicator}>
-          <Menu.Indicator class='transition-transform data-[state=open]:rotate-180'>
-            <svg class='h-4 w-4' 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>
-          </Menu.Indicator>
-        </Show>
-      </Menu.Trigger>
-      <Show when={isOpen()}>
-        <Show when={!local.inDialog} fallback={renderContent()}>
-          <Portal>{renderContent()}</Portal>
-        </Show>
-      </Show>
-    </Menu.Root>
-  );
-};
-
-export { MenuComponent as Menu };
-
-// Export raw Ark UI primitive for custom layouts
-export { Menu as MenuPrimitive };
diff --git a/packages/ui/src/components/NumberInput.tsx b/packages/ui/src/components/NumberInput.tsx
deleted file mode 100644
index b95abbc8f..000000000
--- a/packages/ui/src/components/NumberInput.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * NumberInput - Numeric input with increment/decrement controls using Ark UI
- */
-
-import { NumberInput } from '@ark-ui/solid/number-input';
-import { Component, Show, splitProps, mergeProps, createMemo } from 'solid-js';
-import { FiMinus, FiPlus } from 'solid-icons/fi';
-
-export interface NumberInputProps {
-  /** Input label */
-  label?: string;
-  /** Controlled value (as string for formatting) */
-  value?: string;
-  /** Initial value */
-  defaultValue?: string;
-  /** Callback when value changes */
-  onValueChange?: (_details: { value: string; valueAsNumber: number }) => void;
-  /** Minimum value */
-  min?: number;
-  /** Maximum value */
-  max?: number;
-  /** Increment/decrement step (default: 1) */
-  step?: number;
-  /** Disable the input */
-  disabled?: boolean;
-  /** Make input read-only */
-  readOnly?: boolean;
-  /** Mark as invalid */
-  invalid?: boolean;
-  /** Mark as required */
-  required?: boolean;
-  /** Form field name */
-  name?: string;
-  /** Input placeholder */
-  placeholder?: string;
-  /** Allow mouse wheel to change value (default: false) */
-  allowMouseWheel?: boolean;
-  /** Clamp value to min/max on blur (default: true) */
-  clampValueOnBlur?: boolean;
-  /** Spin on button press and hold (default: true) */
-  spinOnPress?: boolean;
-  /** Number format options */
-  formatOptions?: Intl.NumberFormatOptions;
-  /** Show increment/decrement buttons (default: true) */
-  showControls?: boolean;
-  /** Input size (default: 'md') */
-  size?: 'sm' | 'md' | 'lg';
-  /** Additional class for root element */
-  class?: string;
-  /** Additional class for input element */
-  inputClass?: string;
-}
-
-/**
- * NumberInput - Numeric input with increment/decrement controls
- */
-const NumberInputComponent: Component<NumberInputProps> = props => {
-  const [local, machineProps] = splitProps(props, [
-    'label',
-    'placeholder',
-    'showControls',
-    'size',
-    'class',
-    'inputClass',
-  ]);
-
-  const context = mergeProps(machineProps, {
-    clampValueOnBlur: true,
-    spinOnPress: true,
-  });
-
-  const showControls = () => local.showControls !== false;
-
-  const sizes = createMemo(() => {
-    switch (local.size) {
-      case 'sm':
-        return { input: 'px-2 py-1 text-sm', button: 'px-2' };
-      case 'lg':
-        return { input: 'px-4 py-3 text-lg', button: 'px-3' };
-      default:
-        return { input: 'px-3 py-2 text-base', button: 'px-2.5' };
-    }
-  });
-
-  return (
-    <NumberInput.Root
-      value={context.value}
-      defaultValue={context.defaultValue}
-      onValueChange={context.onValueChange}
-      min={context.min}
-      max={context.max}
-      step={context.step}
-      disabled={context.disabled}
-      readOnly={context.readOnly}
-      invalid={context.invalid}
-      required={context.required}
-      name={context.name}
-      allowMouseWheel={context.allowMouseWheel}
-      clampValueOnBlur={context.clampValueOnBlur}
-      spinOnPress={context.spinOnPress}
-      formatOptions={context.formatOptions}
-      class={`w-full ${local.class || ''}`}
-    >
-      <Show when={local.label}>
-        <NumberInput.Label class='mb-1 block text-sm font-medium text-gray-700'>
-          {local.label}
-        </NumberInput.Label>
-      </Show>
-      <div class='flex'>
-        <Show when={showControls()}>
-          <NumberInput.DecrementTrigger
-            class={`${sizes().button} rounded-l-lg border border-r-0 border-gray-300 bg-gray-50 text-gray-600 transition-colors hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-inset disabled:cursor-not-allowed disabled:opacity-50`}
-          >
-            <FiMinus class='h-4 w-4' />
-          </NumberInput.DecrementTrigger>
-        </Show>
-        <NumberInput.Input
-          placeholder={local.placeholder}
-          class={`${sizes().input} flex-1 border border-gray-300 text-center ${showControls() ? '' : 'rounded-lg'} read-only:bg-gray-50 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-100 data-invalid:border-red-500 data-invalid:ring-red-500 ${local.inputClass || ''}`}
-        />
-        <Show when={showControls()}>
-          <NumberInput.IncrementTrigger
-            class={`${sizes().button} rounded-r-lg border border-l-0 border-gray-300 bg-gray-50 text-gray-600 transition-colors hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-inset disabled:cursor-not-allowed disabled:opacity-50`}
-          >
-            <FiPlus class='h-4 w-4' />
-          </NumberInput.IncrementTrigger>
-        </Show>
-      </div>
-    </NumberInput.Root>
-  );
-};
-
-export { NumberInputComponent as NumberInput };
-
-// Export raw Ark UI primitive for custom layouts
-export { NumberInput as NumberInputPrimitive };
diff --git a/packages/ui/src/components/PasswordInput.tsx b/packages/ui/src/components/PasswordInput.tsx
deleted file mode 100644
index 523422f21..000000000
--- a/packages/ui/src/components/PasswordInput.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * PasswordInput component using Ark UI
- */
-
-import { PasswordInput } from '@ark-ui/solid/password-input';
-import { Component, createSignal } from 'solid-js';
-import { FiEyeOff, FiEye } from 'solid-icons/fi';
-
-export interface PasswordInputProps {
-  /** Controlled password value */
-  password?: string;
-  /** Callback when password changes */
-  onPasswordChange?: (_value: string) => void;
-  /** Autocomplete attribute (default: 'new-password') */
-  autoComplete?: 'current-password' | 'new-password';
-  /** Whether input is required */
-  required?: boolean;
-  /** Additional class for input element */
-  inputClass?: string;
-  /** Size of visibility icon (default: 20) */
-  iconSize?: number;
-  /** Additional class for root element */
-  class?: string;
-  /** Input label (default: 'Password') */
-  label?: string;
-}
-
-/**
- * PasswordInput - Password input with visibility toggle
- */
-const PasswordInputComponent: Component<PasswordInputProps> = props => {
-  const autoComplete = () => props.autoComplete || 'new-password';
-  const password = () => props.password || '';
-  const required = () => props.required || false;
-  const inputClass = () => props.inputClass;
-  const iconSize = () => props.iconSize || 20;
-  const classValue = () => props.class;
-  const label = () => props.label || 'Password';
-
-  const [visible, setVisible] = createSignal(false);
-
-  const computedInputClass = () =>
-    inputClass() ||
-    'w-full pl-3 sm:pl-4 pr-3 sm:pr-4 py-2 text-xs sm:text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition big-placeholder';
-
-  const handleInput = (e: Event & { target: HTMLInputElement }) => {
-    props.onPasswordChange?.(e.target.value);
-  };
-
-  return (
-    <PasswordInput.Root
-      visible={visible()}
-      onVisibilityChange={(details: { visible: boolean }) => setVisible(details.visible)}
-      autoComplete={autoComplete()}
-      required={required()}
-      class={classValue()}
-    >
-      <PasswordInput.Label class='mb-1 block text-xs font-semibold text-gray-700 sm:mb-2 sm:text-sm'>
-        {label()}
-      </PasswordInput.Label>
-      <PasswordInput.Control class='relative'>
-        <PasswordInput.Input
-          value={password()}
-          onInput={handleInput}
-          placeholder='••••••••'
-          class={computedInputClass()}
-        />
-        <PasswordInput.VisibilityTrigger class='absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 sm:right-4'>
-          <PasswordInput.Indicator fallback={<FiEyeOff size={iconSize() - 2} />}>
-            <FiEye size={iconSize()} />
-          </PasswordInput.Indicator>
-        </PasswordInput.VisibilityTrigger>
-      </PasswordInput.Control>
-    </PasswordInput.Root>
-  );
-};
-
-export { PasswordInputComponent as PasswordInput };
-export default PasswordInputComponent;
-
-// Export raw Ark UI primitive for custom layouts
-export { PasswordInput as PasswordInputPrimitive };
diff --git a/packages/ui/src/components/PinInput.tsx b/packages/ui/src/components/PinInput.tsx
deleted file mode 100644
index ab76192a0..000000000
--- a/packages/ui/src/components/PinInput.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * PinInput component using Ark UI
- */
-
-import { PinInput } from '@ark-ui/solid/pin-input';
-import { Component, splitProps, Index, createMemo, mergeProps } from 'solid-js';
-
-export interface PinInputProps {
-  /** Number of input fields (default: 6) */
-  count?: number;
-  /** Whether to show error state */
-  isError?: boolean;
-  /** Callback when value changes */
-  onInput?: (_value: string) => void;
-  /** Callback when all inputs are filled */
-  onComplete?: (_value: string) => void;
-  /** Additional class for root element */
-  class?: string;
-  /** Whether input is required (default: true) */
-  required?: boolean;
-  /** Whether to use OTP mode (default: true) */
-  otp?: boolean;
-  /** Autocomplete attribute (default: 'one-time-code') */
-  autoComplete?: string;
-}
-
-/**
- * PinInput - OTP/PIN code input
- */
-const PinInputComponent: Component<PinInputProps> = props => {
-  const [local, machineProps] = splitProps(props, [
-    'count',
-    'isError',
-    'onInput',
-    'onComplete',
-    'class',
-  ]);
-
-  const mergedMachineProps = mergeProps(
-    {
-      required: true,
-      otp: true,
-    },
-    machineProps,
-  );
-
-  const count = () => local.count ?? 6;
-  const isError = () => local.isError;
-  const classValue = () => local.class;
-
-  const handleValueChange = (details: { valueAsString: string }) => {
-    if (local.onInput) {
-      local.onInput(details.valueAsString);
-    }
-  };
-
-  const handleValueComplete = (details: { valueAsString: string }) => {
-    if (local.onComplete) {
-      local.onComplete(details.valueAsString);
-    }
-  };
-
-  const inputIndices = createMemo(() => Array.from({ length: count() }, (_, i) => i));
-
-  const inputClass = () =>
-    'w-10 h-12 sm:w-14 sm:h-14 rounded-lg border-2 ' +
-    (isError() ?
-      'border-red-500 focus:border-red-600 focus:ring-red-400'
-    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-400') +
-    ' bg-gray-50 text-center text-xl font-semibold outline-none';
-
-  return (
-    <div class={`flex flex-col items-center ${classValue() || ''}`}>
-      <PinInput.Root
-        {...mergedMachineProps}
-        count={count()}
-        onValueChange={handleValueChange}
-        onValueComplete={handleValueComplete}
-        invalid={isError()}
-        class='my-6 flex justify-center gap-1 sm:gap-3'
-      >
-        <PinInput.HiddenInput />
-        <PinInput.Control>
-          <Index each={inputIndices()}>
-            {item => <PinInput.Input index={item()} class={inputClass()} />}
-          </Index>
-        </PinInput.Control>
-      </PinInput.Root>
-    </div>
-  );
-};
-
-export { PinInputComponent as PinInput };
-export default PinInputComponent;
-
-// Export raw Ark UI primitive for custom layouts
-export { PinInput as PinInputPrimitive };
diff --git a/packages/ui/src/components/Popover.tsx b/packages/ui/src/components/Popover.tsx
deleted file mode 100644
index 5771a0827..000000000
--- a/packages/ui/src/components/Popover.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * Popover component using Ark UI
- *
- * Supports both high-level convenience API and low-level composition API
- */
-
-import { Popover as ArkPopover, usePopover } from '@ark-ui/solid/popover';
-import { Component, mergeProps, splitProps, Show, JSX } from 'solid-js';
-import { FiX } from 'solid-icons/fi';
-import { Z_INDEX } from '../constants/zIndex.js';
-
-export type Placement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end';
-
-export interface PopoverProps {
-  /** The trigger element */
-  trigger: JSX.Element;
-  /** Popover content */
-  children?: JSX.Element;
-  /** Optional popover title */
-  title?: string;
-  /** Optional popover description */
-  description?: string;
-  /** Controlled open state */
-  open?: boolean;
-  /** Initial open state */
-  defaultOpen?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (_details: { open: boolean }) => void;
-  /** Popover placement (default: 'bottom') */
-  placement?: Placement;
-  /** Whether to trap focus (default: false) */
-  modal?: boolean;
-  /** Close on outside click (default: true) */
-  closeOnInteractOutside?: boolean;
-  /** Close on escape key (default: true) */
-  closeOnEscape?: boolean;
-  /** Show arrow pointing to trigger (default: false) */
-  showArrow?: boolean;
-  /** Show close button in header (default: true) */
-  showCloseButton?: boolean;
-  /** Set to true when used inside a Dialog */
-  inDialog?: boolean;
-  /** Additional class for content */
-  class?: string;
-}
-
-/**
- * Popover - Non-modal floating dialog
- */
-const PopoverComponent: Component<PopoverProps> = props => {
-  const merged = mergeProps(
-    {
-      placement: 'bottom',
-      modal: false,
-      closeOnInteractOutside: true,
-      closeOnEscape: true,
-      showArrow: false,
-      showCloseButton: true,
-    },
-    props,
-  );
-
-  const [local, machineProps] = splitProps(merged, [
-    'trigger',
-    'children',
-    'title',
-    'description',
-    'showArrow',
-    'showCloseButton',
-    'inDialog',
-    'class',
-  ]);
-
-  const trigger = () => local.trigger;
-  const children = () => local.children;
-  const title = () => local.title;
-  const description = () => local.description;
-  const showArrow = () => local.showArrow;
-  const showCloseButton = () => local.showCloseButton !== false;
-  const inDialog = () => local.inDialog;
-  const classValue = () => local.class;
-
-  const handleOpenChange = (details: { open: boolean }) => {
-    if (machineProps.onOpenChange) {
-      machineProps.onOpenChange(details);
-    }
-  };
-
-  const positioning = (): { placement: Placement } => ({
-    placement: (machineProps.placement || 'bottom') as Placement,
-  });
-
-  return (
-    <ArkPopover.Root
-      {...machineProps}
-      positioning={positioning()}
-      portalled={!inDialog()}
-      onOpenChange={handleOpenChange}
-    >
-      <ArkPopover.Trigger class='inline-flex'>{trigger()}</ArkPopover.Trigger>
-      <ArkPopover.Positioner>
-        <ArkPopover.Content
-          class={`${Z_INDEX.POPOVER} max-w-sm min-w-50 rounded-lg border border-gray-200 bg-white shadow-lg ${classValue() || ''}`}
-        >
-          <Show when={showArrow()}>
-            <ArkPopover.Arrow class='[--arrow-background:white] [--arrow-size:8px]'>
-              <ArkPopover.ArrowTip />
-            </ArkPopover.Arrow>
-          </Show>
-
-          <Show when={title() || showCloseButton()}>
-            <div class='flex items-start justify-between border-b border-gray-100 p-3'>
-              <div>
-                <Show when={title()}>
-                  <ArkPopover.Title class='text-sm font-medium text-gray-900'>
-                    {title()}
-                  </ArkPopover.Title>
-                </Show>
-                <Show when={description()}>
-                  <ArkPopover.Description class='mt-1 text-xs text-gray-500'>
-                    {description()}
-                  </ArkPopover.Description>
-                </Show>
-              </div>
-              <Show when={showCloseButton()}>
-                <ArkPopover.CloseTrigger class='-mt-1 -mr-1 rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500'>
-                  <FiX class='h-4 w-4' />
-                </ArkPopover.CloseTrigger>
-              </Show>
-            </div>
-          </Show>
-
-          <div class='p-3'>{children()}</div>
-        </ArkPopover.Content>
-      </ArkPopover.Positioner>
-    </ArkPopover.Root>
-  );
-};
-
-export { PopoverComponent as Popover };
-
-// Export raw Ark UI primitive for custom layouts
-export { ArkPopover as PopoverPrimitive };
-
-// Export hook for programmatic control
-export { usePopover };
diff --git a/packages/ui/src/components/Progress.tsx b/packages/ui/src/components/Progress.tsx
deleted file mode 100644
index 4bc508715..000000000
--- a/packages/ui/src/components/Progress.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Progress - Linear progress bar using Ark UI
- */
-
-import { Progress } from '@ark-ui/solid/progress';
-import { Component, Show, splitProps, createMemo } from 'solid-js';
-
-export interface ProgressProps {
-  /** Current progress value */
-  value?: number;
-  /** Minimum value (default: 0) */
-  min?: number;
-  /** Maximum value (default: 100) */
-  max?: number;
-  /** Accessible label */
-  label?: string;
-  /** Show percentage value (default: false) */
-  showValue?: boolean;
-  /** Bar height (default: 'md') */
-  size?: 'sm' | 'md' | 'lg';
-  /** Color variant (default: 'default') */
-  variant?: 'default' | 'success' | 'warning' | 'error';
-  /** Show indeterminate animation */
-  indeterminate?: boolean;
-  /** Additional class for root element */
-  class?: string;
-}
-
-/**
- * Progress - Linear progress bar
- */
-const ProgressComponent: Component<ProgressProps> = props => {
-  const [local, machineProps] = splitProps(props, [
-    'label',
-    'showValue',
-    'size',
-    'variant',
-    'indeterminate',
-    'class',
-  ]);
-
-  const getSizeClass = () => {
-    switch (local.size) {
-      case 'sm':
-        return 'h-1';
-      case 'lg':
-        return 'h-3';
-      default:
-        return 'h-2';
-    }
-  };
-
-  const getVariantClass = () => {
-    switch (local.variant) {
-      case 'success':
-        return 'bg-green-500';
-      case 'warning':
-        return 'bg-yellow-500';
-      case 'error':
-        return 'bg-red-500';
-      default:
-        return 'bg-blue-500';
-    }
-  };
-
-  // For indeterminate, set value to undefined
-  const progressValue = createMemo(() => {
-    if (local.indeterminate) return undefined;
-    return machineProps.value;
-  });
-
-  return (
-    <Progress.Root
-      value={progressValue()}
-      min={machineProps.min ?? 0}
-      max={machineProps.max ?? 100}
-      class={`w-full ${local.class || ''}`}
-    >
-      <Show when={local.label || local.showValue}>
-        <div class='mb-1 flex items-center justify-between'>
-          <Show when={local.label}>
-            <Progress.Label class='text-sm font-medium text-gray-700'>{local.label}</Progress.Label>
-          </Show>
-          <Show when={local.showValue && !local.indeterminate}>
-            <Progress.ValueText class='text-sm text-gray-500' />
-          </Show>
-        </div>
-      </Show>
-      <Progress.Track class={`w-full overflow-hidden rounded-full bg-gray-200 ${getSizeClass()}`}>
-        <Progress.Range
-          class={`h-full rounded-full transition-all duration-300 ${getVariantClass()} ${
-            local.indeterminate ? 'animate-progress-indeterminate' : ''
-          }`}
-          style={local.indeterminate ? { width: '30%' } : undefined}
-        />
-      </Progress.Track>
-    </Progress.Root>
-  );
-};
-
-export { ProgressComponent as Progress };
-
-// Export raw Ark UI primitive for custom layouts
-export { Progress as ProgressPrimitive };
diff --git a/packages/ui/src/components/QRCode.tsx b/packages/ui/src/components/QRCode.tsx
deleted file mode 100644
index e7973ba71..000000000
--- a/packages/ui/src/components/QRCode.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * QR Code component using Ark UI
- */
-
-import { QrCode } from '@ark-ui/solid/qr-code';
-import { Component } from 'solid-js';
-
-export interface QRCodeProps {
-  /** The data to encode in the QR code (e.g., URL, text) */
-  data: string;
-  /** Size of the QR code in pixels (default: 200) */
-  size?: number;
-  /** Additional CSS classes */
-  class?: string;
-  /** Alt text for accessibility (default: 'QR Code') */
-  alt?: string;
-  /** Error correction level (L=7%, M=15%, Q=25%, H=30%) (default: 'M') */
-  ecc?: 'L' | 'M' | 'Q' | 'H';
-}
-
-/**
- * QR Code component
- * Renders an SVG-based QR code with customizable error correction and styling.
- */
-const QRCodeComponent: Component<QRCodeProps> = props => {
-  const data = () => props.data;
-  const ecc = () => props.ecc;
-  const size = () => props.size;
-  const classValue = () => props.class;
-  const alt = () => props.alt;
-
-  // Map data to value for Ark UI compatibility
-  const value = () => data();
-  const pixelSize = () => size() || 200;
-
-  const containerSize = () => size() || 200;
-
-  return (
-    <QrCode.Root
-      value={value()}
-      pixelSize={pixelSize()}
-      encoding={{
-        ecc: ecc() || 'M',
-      }}
-      class={classValue()}
-      style={{
-        width: `${containerSize()}px`,
-        height: `${containerSize()}px`,
-      }}
-      role='img'
-      aria-label={alt() || 'QR Code'}
-    >
-      <QrCode.Frame>
-        <QrCode.Pattern />
-      </QrCode.Frame>
-    </QrCode.Root>
-  );
-};
-
-export { QRCodeComponent as QRCode };
-export default QRCodeComponent;
-
-// Export raw Ark UI primitive for custom layouts
-export { QrCode as QRCodePrimitive };
diff --git a/packages/ui/src/components/RadioGroup.tsx b/packages/ui/src/components/RadioGroup.tsx
deleted file mode 100644
index 55167f1e2..000000000
--- a/packages/ui/src/components/RadioGroup.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * RadioGroup - Radio button group for single selection using Ark UI
- */
-
-import { RadioGroup } from '@ark-ui/solid/radio-group';
-import { Component, For, splitProps, createMemo } from 'solid-js';
-
-export interface RadioGroupItem {
-  value: string;
-  label: string;
-  description?: string;
-  disabled?: boolean;
-}
-
-export interface RadioGroupProps {
-  /** Radio items */
-  items: RadioGroupItem[];
-  /** Group label */
-  label?: string;
-  /** Controlled selected value */
-  value?: string;
-  /** Initial selected value */
-  defaultValue?: string;
-  /** Callback when selection changes */
-  onValueChange?: (_details: { value: string }) => void;
-  /** Form field name */
-  name?: string;
-  /** Disable all items */
-  disabled?: boolean;
-  /** Layout orientation (default: 'vertical') */
-  orientation?: 'horizontal' | 'vertical';
-  /** Additional class for root element */
-  class?: string;
-}
-
-/**
- * RadioGroup - Radio button group for single selection
- */
-const RadioGroupComponent: Component<RadioGroupProps> = props => {
-  const [local, machineProps] = splitProps(props, ['items', 'label', 'class']);
-
-  const orientation = () => machineProps.orientation || 'vertical';
-  const isVertical = createMemo(() => orientation() === 'vertical');
-
-  const handleValueChange = (details: { value: string | null }) => {
-    if (machineProps.onValueChange && details.value !== null) {
-      machineProps.onValueChange({ value: details.value });
-    }
-  };
-
-  return (
-    <RadioGroup.Root
-      value={machineProps.value}
-      defaultValue={machineProps.defaultValue}
-      onValueChange={handleValueChange}
-      name={machineProps.name}
-      disabled={machineProps.disabled}
-      orientation={orientation()}
-      class={local.class || ''}
-    >
-      <RadioGroup.Label class='mb-2 block text-sm font-medium text-gray-700'>
-        {local.label}
-      </RadioGroup.Label>
-      <div class={`flex gap-3 ${isVertical() ? 'flex-col' : 'flex-row flex-wrap'}`}>
-        <For each={local.items}>
-          {item => (
-            <RadioGroup.Item
-              value={item.value}
-              disabled={item.disabled || machineProps.disabled}
-              class={`group relative flex cursor-pointer items-start gap-3 ${
-                item.disabled || machineProps.disabled ? 'cursor-not-allowed opacity-50' : ''
-              }`}
-            >
-              <div class='flex h-5 items-center'>
-                <RadioGroup.ItemHiddenInput />
-                <RadioGroup.ItemControl class='flex h-4 w-4 items-center justify-center rounded-full border-2 border-gray-300 transition-colors group-hover:border-gray-400 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[focus]:ring-2 data-[focus]:ring-blue-500 data-[focus]:ring-offset-2 data-[state=checked]:border-blue-500 data-[state=checked]:bg-blue-500 data-[state=checked]:group-hover:border-blue-600'>
-                  <div class='h-1.5 w-1.5 scale-0 rounded-full bg-white transition-transform data-[state=checked]:scale-100' />
-                </RadioGroup.ItemControl>
-              </div>
-              <div class='flex flex-col'>
-                <RadioGroup.ItemText class='text-sm font-medium text-gray-900'>
-                  {item.label}
-                </RadioGroup.ItemText>
-                {item.description && <span class='text-xs text-gray-500'>{item.description}</span>}
-              </div>
-            </RadioGroup.Item>
-          )}
-        </For>
-      </div>
-    </RadioGroup.Root>
-  );
-};
-
-export { RadioGroupComponent as RadioGroup };
-
-// Export raw Ark UI primitive for custom layouts
-export { RadioGroup as RadioGroupPrimitive };
diff --git a/packages/ui/src/components/Select.tsx b/packages/ui/src/components/Select.tsx
deleted file mode 100644
index 748385722..000000000
--- a/packages/ui/src/components/Select.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-/**
- * Select component using Ark UI
- *
- * Supports both high-level convenience API and low-level composition API
- */
-
-import { Select as ArkSelect, createListCollection, useSelect } from '@ark-ui/solid/select';
-import { Portal } from 'solid-js/web';
-import { Component, createMemo, Show, Index, splitProps, mergeProps } from 'solid-js';
-import { BiRegularCheck, BiRegularChevronDown } from 'solid-icons/bi';
-import { Z_INDEX } from '../constants/zIndex';
-
-export interface SelectOption {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-export interface SelectProps {
-  /** Options to display */
-  items: SelectOption[];
-  /** The selected value (controlled) */
-  value?: string;
-  /** Callback when value changes */
-  onChange?: (_value: string) => void;
-  /** Label text for the select */
-  label?: string;
-  /** Placeholder text when no value selected (default: 'Select option') */
-  placeholder?: string;
-  /** Whether the select is disabled */
-  disabled?: boolean;
-  /** Form input name */
-  name?: string;
-  /** Whether the select is in an invalid state */
-  invalid?: boolean;
-  /** Array of values that should be disabled */
-  disabledValues?: string[];
-  /** Whether the value can be cleared by clicking the selected item */
-  deselectable?: boolean;
-  /** Whether the select should close after an item is selected (default: true) */
-  closeOnSelect?: boolean;
-  /** Whether to allow multiple selection */
-  multiple?: boolean;
-  /** Positioning options for the dropdown menu */
-  positioning?: {
-    placement?: string;
-    sameWidth?: boolean;
-    [key: string]: unknown;
-  };
-  /** Set to true when used inside a Dialog or Popover */
-  inDialog?: boolean;
-  /** Additional props to pass to Select.Root (e.g., open, onOpenChange, etc.) */
-  arkProps?: Record<string, unknown>;
-}
-
-/**
- * Select - Reusable select/dropdown component using Ark UI
- */
-const SelectComponent: Component<SelectProps> = props => {
-  // Split convenience props from Ark UI props
-  const [local, arkProps] = splitProps(props, [
-    'items',
-    'value',
-    'onChange',
-    'label',
-    'placeholder',
-    'disabledValues',
-    'deselectable',
-    'closeOnSelect',
-    'multiple',
-    'positioning',
-    'inDialog',
-  ]);
-
-  // Merge default values
-  const merged = mergeProps(
-    {
-      items: [],
-      placeholder: 'Select option',
-      disabled: false,
-      disabledValues: [],
-      deselectable: false,
-      closeOnSelect: true,
-      multiple: false,
-      invalid: false,
-      inDialog: false,
-    },
-    props,
-  );
-
-  const items = () => props.items || [];
-  // Access value reactively from props to maintain reactivity
-  const value = () => props.value;
-  const disabledValues = createMemo(() => props.disabledValues || []);
-  const placeholder = () => props.placeholder || merged.placeholder;
-  const disabled = () => merged.disabled;
-  const invalid = () => merged.invalid;
-  const inDialog = () => merged.inDialog;
-
-  // Create collection from items with disabled handling
-  const collection = createMemo(() => {
-    const collectionItems = items().map(item => ({
-      ...item,
-      disabled: item.disabled || disabledValues().includes(item.value),
-    }));
-
-    return createListCollection({
-      items: collectionItems,
-      itemToString: (item: SelectOption) => item.label,
-      itemToValue: (item: SelectOption) => item.value,
-    });
-  });
-
-  // Convert single value to array for Ark UI (or use array directly for multiple)
-  // Access value reactively to ensure proper tracking
-  const selectValue = createMemo(() => {
-    const v = value();
-    if (merged.multiple) {
-      return (
-        Array.isArray(v) ? v
-        : v != null ? [v]
-        : []
-      );
-    }
-    // For single select: return empty array if value is null/undefined, otherwise [value]
-    // Empty string is valid (for "Unassigned" option)
-    return v != null ? [v] : [];
-  });
-
-  // Handle value change - convert array back to single value for single select
-  const handleValueChange = (details: { value: string[] }) => {
-    if (!local.onChange) return;
-
-    if (merged.multiple) {
-      local.onChange(details.value as unknown as string);
-    } else {
-      const newValue = details.value[0] || '';
-      // Prevent selecting disabled values
-      const currentCollection = collection();
-      const item = currentCollection.items.find(i => i.value === newValue);
-      if (item?.disabled || disabledValues().includes(newValue)) {
-        return;
-      }
-      local.onChange(newValue);
-    }
-  };
-
-  // Helper to check if a value is disabled
-  const isValueDisabled = (val: string) => {
-    const currentCollection = collection();
-    const item = currentCollection.items.find(i => i.value === val);
-    const disabledSet = new Set(disabledValues());
-    return item?.disabled || disabledSet.has(val);
-  };
-
-  // Get positioning options - use provided or default
-  const positioningOptions = (): {
-    placement?: string;
-    sameWidth?: boolean;
-    gutter?: number;
-    [key: string]: unknown;
-  } => {
-    const defaultPos = {
-      placement: 'bottom-start',
-      sameWidth: true,
-      gutter: 4,
-    };
-    if (!local.positioning) return defaultPos;
-    return {
-      ...defaultPos,
-      ...local.positioning,
-      placement: local.positioning.placement ?? defaultPos.placement,
-      sameWidth: local.positioning.sameWidth ?? defaultPos.sameWidth,
-      gutter:
-        typeof local.positioning.gutter === 'number' ? local.positioning.gutter : defaultPos.gutter,
-    };
-  };
-
-  return (
-    <ArkSelect.Root
-      collection={collection()}
-      value={selectValue()}
-      onValueChange={handleValueChange}
-      deselectable={merged.deselectable}
-      closeOnSelect={merged.closeOnSelect}
-      multiple={merged.multiple}
-      positioning={
-        positioningOptions() as unknown as Parameters<typeof ArkSelect.Root>[0]['positioning']
-      }
-      disabled={disabled()}
-      invalid={invalid()}
-      {...arkProps}
-    >
-      <Show when={local.label}>
-        <ArkSelect.Label class='mb-1.5 block text-sm leading-none font-medium text-gray-900'>
-          {local.label}
-        </ArkSelect.Label>
-      </Show>
-
-      <ArkSelect.Control>
-        <ArkSelect.Trigger
-          class={`flex h-10 w-full items-center justify-between rounded-md border bg-white px-3 py-2 text-sm text-gray-900 ring-offset-white transition-colors placeholder:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
-            disabled() ?
-              'cursor-not-allowed border-gray-200 bg-gray-100 text-gray-500'
-            : 'border-gray-300 hover:bg-gray-50'
-          } ${invalid() ? 'border-red-500 focus:ring-red-500' : ''}`}
-        >
-          <ArkSelect.ValueText placeholder={placeholder()} />
-          <ArkSelect.Indicator>
-            <BiRegularChevronDown class='h-4 w-4 text-gray-500 opacity-50 transition-transform duration-200' />
-          </ArkSelect.Indicator>
-        </ArkSelect.Trigger>
-      </ArkSelect.Control>
-
-      {inDialog() ?
-        <ArkSelect.Positioner>
-          <ArkSelect.Content
-            class={`${Z_INDEX.SELECT} max-h-96 min-w-32 overflow-hidden rounded-md border border-gray-200 bg-white p-1 text-gray-950 shadow-md focus:outline-none`}
-          >
-            <ArkSelect.ItemGroup>
-              <Index each={collection().items}>
-                {item => {
-                  const isDisabled = () => isValueDisabled(item().value);
-                  return (
-                    <ArkSelect.Item
-                      item={item()}
-                      class={`relative flex w-full cursor-default items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none hover:bg-gray-100 focus:bg-gray-100 focus:text-gray-900 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-100 ${
-                        isDisabled() ? 'pointer-events-none opacity-50' : 'text-gray-900'
-                      }`}
-                    >
-                      <ArkSelect.ItemText class='flex-1'>{item().label}</ArkSelect.ItemText>
-                      <ArkSelect.ItemIndicator class='absolute right-2 flex h-3.5 w-3.5 items-center justify-center'>
-                        <BiRegularCheck class='h-4 w-4 text-blue-600' />
-                      </ArkSelect.ItemIndicator>
-                    </ArkSelect.Item>
-                  );
-                }}
-              </Index>
-            </ArkSelect.ItemGroup>
-          </ArkSelect.Content>
-        </ArkSelect.Positioner>
-      : <Portal>
-          <ArkSelect.Positioner>
-            <ArkSelect.Content
-              class={`${Z_INDEX.SELECT} max-h-96 min-w-32 overflow-hidden rounded-md border border-gray-200 bg-white p-1 text-gray-950 shadow-md focus:outline-none`}
-            >
-              <ArkSelect.ItemGroup>
-                <Index each={collection().items}>
-                  {item => {
-                    const isDisabled = () => isValueDisabled(item().value);
-                    return (
-                      <ArkSelect.Item
-                        item={item()}
-                        class={`relative flex w-full cursor-default items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none hover:bg-gray-100 focus:bg-gray-100 focus:text-gray-900 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-100 ${
-                          isDisabled() ? 'pointer-events-none opacity-50' : 'text-gray-900'
-                        }`}
-                      >
-                        <ArkSelect.ItemText class='flex-1'>{item().label}</ArkSelect.ItemText>
-                        <ArkSelect.ItemIndicator class='absolute right-2 flex h-3.5 w-3.5 items-center justify-center'>
-                          <BiRegularCheck class='h-4 w-4 text-blue-600' />
-                        </ArkSelect.ItemIndicator>
-                      </ArkSelect.Item>
-                    );
-                  }}
-                </Index>
-              </ArkSelect.ItemGroup>
-            </ArkSelect.Content>
-          </ArkSelect.Positioner>
-        </Portal>
-      }
-
-      <ArkSelect.HiddenSelect />
-    </ArkSelect.Root>
-  );
-};
-
-export default SelectComponent;
-
-// Export hook for programmatic control
-export { useSelect };
-
-// Export raw Ark UI primitive for custom layouts
-export { ArkSelect as SelectPrimitive };
-
-// Export component
-export { SelectComponent as Select };
diff --git a/packages/ui/src/components/Spinner.tsx b/packages/ui/src/components/Spinner.tsx
deleted file mode 100644
index 8f2a08cdb..000000000
--- a/packages/ui/src/components/Spinner.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * Spinner - Loading spinner components with multiple variants
- *
- * Provides both inline icon spinners and full-page loading states.
- */
-
-import { Component, splitProps, Show, JSX } from 'solid-js';
-import { cn } from '../lib/cn';
-
-// Size mappings for the spinner
-const sizeClasses = {
-  xs: 'h-3 w-3',
-  sm: 'h-4 w-4',
-  md: 'h-6 w-6',
-  lg: 'h-8 w-8',
-  xl: 'h-12 w-12',
-} as const;
-
-// Border width mappings
-const borderWidthClasses = {
-  xs: 'border',
-  sm: 'border-2',
-  md: 'border-2',
-  lg: 'border-[3px]',
-  xl: 'border-4',
-} as const;
-
-// Color variant mappings
-const variantClasses = {
-  default: 'border-blue-600',
-  primary: 'border-blue-600',
-  secondary: 'border-gray-600',
-  success: 'border-green-600',
-  warning: 'border-yellow-600',
-  error: 'border-red-600',
-  white: 'border-white',
-} as const;
-
-// Track color mappings (lighter colors for the animated spinner track)
-const trackColorClasses = {
-  default: 'border-t-blue-200',
-  primary: 'border-t-blue-200',
-  secondary: 'border-t-gray-200',
-  success: 'border-t-green-200',
-  warning: 'border-t-yellow-200',
-  error: 'border-t-red-200',
-  white: 'border-t-gray-200',
-} as const;
-
-export type SpinnerSize = keyof typeof sizeClasses;
-export type SpinnerVariant = keyof typeof variantClasses;
-
-export interface SpinnerProps {
-  /** Size of the spinner */
-  size?: SpinnerSize;
-  /** Color variant */
-  variant?: SpinnerVariant;
-  /** Additional CSS classes */
-  class?: string;
-  /** Accessible label for screen readers */
-  label?: string;
-}
-
-/**
- * Spinner - Inline loading spinner icon
- *
- * A simple circular spinner for inline loading states.
- * Uses CSS animations for smooth, performant rotation.
- */
-export const Spinner: Component<SpinnerProps> = props => {
-  const [local] = splitProps(props, ['size', 'variant', 'class', 'label']);
-
-  const size = () => local.size ?? 'md';
-  const variant = () => local.variant ?? 'default';
-
-  return (
-    <div
-      role='status'
-      aria-label={local.label ?? 'Loading'}
-      class={cn(
-        'inline-block animate-spin rounded-full border-transparent',
-        sizeClasses[size()],
-        borderWidthClasses[size()],
-        variantClasses[variant()],
-        trackColorClasses[variant()],
-        local.class,
-      )}
-    >
-      <span class='sr-only'>{local.label ?? 'Loading'}</span>
-    </div>
-  );
-};
-
-export interface PageLoaderProps {
-  /** Size of the spinner */
-  size?: SpinnerSize;
-  /** Color variant */
-  variant?: SpinnerVariant;
-  /** Loading message to display */
-  message?: string;
-  /** Show a subtle background overlay */
-  overlay?: boolean;
-  /** Additional CSS classes for the container */
-  class?: string;
-  /** Additional CSS classes for the message */
-  messageClass?: string;
-}
-
-/**
- * PageLoader - Full-page centered loading spinner
- *
- * A centered spinner with optional message for page-level loading states.
- * Can be used as an overlay or inline content replacement.
- */
-export const PageLoader: Component<PageLoaderProps> = props => {
-  const [local] = splitProps(props, [
-    'size',
-    'variant',
-    'message',
-    'overlay',
-    'class',
-    'messageClass',
-  ]);
-
-  const size = () => local.size ?? 'xl';
-  const variant = () => local.variant ?? 'primary';
-
-  const content = (
-    <div
-      class={cn(
-        'flex flex-col items-center justify-center gap-4',
-        local.overlay && 'rounded-lg bg-white/90 p-8 shadow-lg backdrop-blur-sm',
-        local.class,
-      )}
-    >
-      <Spinner size={size()} variant={variant()} label={local.message ?? 'Loading page'} />
-      <Show when={local.message}>
-        <p class={cn('text-sm text-gray-600', local.messageClass)}>{local.message}</p>
-      </Show>
-    </div>
-  );
-
-  return (
-    <Show
-      when={local.overlay}
-      fallback={<div class='flex min-h-50 w-full items-center justify-center'>{content}</div>}
-    >
-      <div class='fixed inset-0 z-50 flex items-center justify-center bg-gray-900/20 backdrop-blur-sm'>
-        {content}
-      </div>
-    </Show>
-  );
-};
-
-export interface LoadingPlaceholderProps {
-  /** Height of the placeholder */
-  height?: string;
-  /** Additional CSS classes */
-  class?: string;
-  /** Spinner size */
-  spinnerSize?: SpinnerSize;
-  /** Color variant */
-  variant?: SpinnerVariant;
-  /** Optional message */
-  message?: string;
-}
-
-/**
- * LoadingPlaceholder - A placeholder component for content loading states
- *
- * Useful for replacing content areas while data is being fetched.
- * Maintains layout space and provides visual feedback.
- */
-export const LoadingPlaceholder: Component<LoadingPlaceholderProps> = props => {
-  const [local] = splitProps(props, ['height', 'class', 'spinnerSize', 'variant', 'message']);
-
-  return (
-    <div
-      class={cn(
-        'flex w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-50/50',
-        local.class,
-      )}
-      style={{ 'min-height': local.height ?? '120px' }}
-    >
-      <div class='flex flex-col items-center gap-2'>
-        <Spinner size={local.spinnerSize ?? 'md'} variant={local.variant ?? 'default'} />
-        <Show when={local.message}>
-          <p class='text-xs text-gray-500'>{local.message}</p>
-        </Show>
-      </div>
-    </div>
-  );
-};
-
-export interface ButtonSpinnerProps {
-  /** Show the spinner (typically based on loading state) */
-  loading?: boolean;
-  /** Content to show when not loading */
-  children: JSX.Element;
-  /** Spinner size - defaults to 'sm' for buttons */
-  size?: SpinnerSize;
-  /** Spinner color - defaults to 'white' for contrast on colored buttons */
-  variant?: SpinnerVariant;
-  /** Additional class for the wrapper */
-  class?: string;
-}
-
-/**
- * ButtonSpinner - A wrapper for button content that shows a spinner when loading
- *
- * Maintains button width by keeping children in the DOM but hidden.
- */
-export const ButtonSpinner: Component<ButtonSpinnerProps> = props => {
-  const [local] = splitProps(props, ['loading', 'children', 'size', 'variant', 'class']);
-
-  return (
-    <span class={cn('relative inline-flex items-center justify-center', local.class)}>
-      <span class={cn('transition-opacity', local.loading ? 'opacity-0' : 'opacity-100')}>
-        {local.children}
-      </span>
-      <Show when={local.loading}>
-        <span class='absolute inset-0 flex items-center justify-center'>
-          <Spinner size={local.size ?? 'sm'} variant={local.variant ?? 'white'} />
-        </span>
-      </Show>
-    </span>
-  );
-};
diff --git a/packages/ui/src/components/Splitter.tsx b/packages/ui/src/components/Splitter.tsx
deleted file mode 100644
index 6e7950217..000000000
--- a/packages/ui/src/components/Splitter.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Splitter component using Ark UI
- */
-
-import { Splitter } from '@ark-ui/solid/splitter';
-import { Component } from 'solid-js';
-
-export interface SplitterPanel {
-  id: string;
-  minSize?: number;
-  maxSize?: number;
-}
-
-export interface SplitterProps {
-  /** Default panel sizes as percentages */
-  defaultSize?: number[];
-  /** Panel configurations */
-  panels?: SplitterPanel[];
-  /** Orientation (default: 'horizontal') */
-  orientation?: 'horizontal' | 'vertical';
-  /** Additional class for root element */
-  class?: string;
-}
-
-/**
- * Splitter - Resizable panel splitter
- */
-const SplitterComponent: Component<SplitterProps> = props => {
-  return (
-    <Splitter.Root
-      panels={
-        props.panels || [
-          { id: 'a', minSize: 10 },
-          { id: 'b', minSize: 10 },
-        ]
-      }
-      defaultSize={props.defaultSize || [80, 20]}
-      orientation={props.orientation || 'horizontal'}
-      class={props.class}
-    >
-      <Splitter.Panel id='a'>
-        <p>A</p>
-      </Splitter.Panel>
-      <Splitter.ResizeTrigger id='a:b' aria-label='Resize' />
-      <Splitter.Panel id='b'>
-        <p>B</p>
-      </Splitter.Panel>
-    </Splitter.Root>
-  );
-};
-
-export { SplitterComponent as Splitter };
-
-// Export raw Ark UI primitive for custom layouts
-export { Splitter as SplitterPrimitive };
diff --git a/packages/ui/src/components/Switch.tsx b/packages/ui/src/components/Switch.tsx
deleted file mode 100644
index a5aca3ccd..000000000
--- a/packages/ui/src/components/Switch.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Switch component using Ark UI
- *
- * Supports both high-level convenience API and low-level composition API
- */
-
-import { Switch as ArkSwitch, useSwitch } from '@ark-ui/solid/switch';
-import { Component, mergeProps, splitProps } from 'solid-js';
-
-export interface SwitchProps {
-  /** Controlled checked state */
-  checked?: boolean;
-  /** Default checked state (uncontrolled) */
-  defaultChecked?: boolean;
-  /** Whether switch is disabled */
-  disabled?: boolean;
-  /** Name for form submission */
-  name?: string;
-  /** Callback when checked state changes */
-  onChange?: (_checked: boolean) => void;
-  /** Additional CSS classes */
-  class?: string;
-  /** Callback when checked state changes (Ark UI compatible) */
-  onCheckedChange?: (_details: { checked: boolean }) => void;
-}
-
-/**
- * Switch - Full description
- */
-const SwitchComponent: Component<SwitchProps> = props => {
-  const merged = mergeProps(
-    {
-      defaultChecked: false,
-    },
-    props,
-  );
-
-  const [local, machineProps] = splitProps(merged, ['class', 'onChange']);
-
-  const classValue = () => local.class;
-  const onChange = () => local.onChange;
-
-  const checked = () => machineProps.checked;
-  const defaultChecked = () => machineProps.defaultChecked;
-  const disabled = () => machineProps.disabled;
-  const name = () => machineProps.name;
-
-  const handleCheckedChange = (details: { checked: boolean }) => {
-    const changeHandler = onChange();
-    if (changeHandler) {
-      changeHandler(details.checked === true);
-    }
-    if (machineProps.onCheckedChange) {
-      machineProps.onCheckedChange(details);
-    }
-  };
-
-  return (
-    <ArkSwitch.Root
-      {...machineProps}
-      checked={checked()}
-      defaultChecked={defaultChecked()}
-      disabled={disabled()}
-      name={name()}
-      onCheckedChange={handleCheckedChange}
-      class={`inline-flex cursor-pointer items-center ${disabled() ? 'cursor-not-allowed' : ''} ${
-        classValue() || ''
-      }`}
-    >
-      <ArkSwitch.HiddenInput />
-      <ArkSwitch.Control class='relative inline-flex h-6 w-11 items-center rounded-full transition-colors data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-200'>
-        <ArkSwitch.Thumb class='inline-block h-4 w-4 transform rounded-full bg-white transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-1' />
-      </ArkSwitch.Control>
-    </ArkSwitch.Root>
-  );
-};
-
-export { SwitchComponent as Switch };
-export default SwitchComponent;
-
-// Export raw Ark UI primitive for custom layouts
-export { ArkSwitch as SwitchPrimitive };
-
-// Export hook for programmatic control
-export { useSwitch };
diff --git a/packages/ui/src/components/Tabs.tsx b/packages/ui/src/components/Tabs.tsx
deleted file mode 100644
index 7d2f1d80f..000000000
--- a/packages/ui/src/components/Tabs.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Tabs component using Ark UI
- */
-
-import { Tabs } from '@ark-ui/solid/tabs';
-import { Component, For, Show, JSX, createMemo } from 'solid-js';
-
-export interface TabDefinition {
-  value: string;
-  label: string;
-  icon?: JSX.Element;
-  count?: number;
-  getCount?: () => number;
-}
-
-export interface TabsProps {
-  /** Array of tab definitions */
-  tabs: TabDefinition[];
-  /** Default selected tab value */
-  defaultValue?: string;
-  /** Controlled tab value */
-  value?: string;
-  /** Callback when tab changes */
-  onValueChange?: (_value: string) => void;
-  /** Tab content render function */
-  children?: (_tabValue: string) => JSX.Element;
-  /** Visual variant (default: 'bordered') */
-  variant?: 'bordered' | 'underline';
-}
-
-/**
- * Reusable Tabs component
- */
-const TabsComponent: Component<TabsProps> = props => {
-  const value = () => props.value;
-  const defaultValue = () => props.defaultValue;
-  const tabsList = () => props.tabs;
-  const children = () => props.children;
-  const variant = () => props.variant || 'bordered';
-
-  const handleValueChange = (details: { value: string }) => {
-    if (props.onValueChange) {
-      props.onValueChange(details.value);
-    }
-  };
-
-  // Conditionally provide value or defaultValue (but not both)
-  // When value is provided, use controlled mode
-  // Otherwise, use defaultValue for uncontrolled mode
-  const rootProps = createMemo(() => {
-    const currentValue = value();
-    if (currentValue !== undefined && currentValue !== null) {
-      return { value: currentValue, onValueChange: handleValueChange };
-    }
-    return {
-      defaultValue: defaultValue() || tabsList()[0]?.value,
-      onValueChange: handleValueChange,
-    };
-  });
-
-  const getListClass = () => {
-    if (variant() === 'underline') {
-      return 'flex overflow-x-auto border-b rounded-t-lg border-gray-200 bg-white';
-    }
-    return 'flex overflow-x-auto rounded-t-lg border border-gray-200 bg-white';
-  };
-
-  const getContentClass = () => {
-    if (variant() === 'underline') {
-      return 'bg-white p-6';
-    }
-    return 'rounded-b-lg border border-t-0 border-gray-200 bg-white p-6';
-  };
-
-  return (
-    <Tabs.Root {...rootProps()} class='rounded-sm!'>
-      <Tabs.List class={getListClass()}>
-        <For each={tabsList()}>
-          {tab => (
-            <Tabs.Trigger
-              value={tab.value}
-              class='flex items-center gap-2 border-b-2 border-transparent px-4 py-3 text-sm font-medium whitespace-nowrap text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900'
-            >
-              <Show when={tab.icon}>
-                <span class='h-4 w-4'>{tab.icon}</span>
-              </Show>
-              {tab.label}
-              <Show when={tab.count !== undefined || tab.getCount}>
-                <span class='ml-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600'>
-                  {tab.getCount ? tab.getCount() : tab.count}
-                </span>
-              </Show>
-            </Tabs.Trigger>
-          )}
-        </For>
-        <Tabs.Indicator class='hidden' />
-      </Tabs.List>
-      <Show when={children()}>
-        <For each={tabsList()}>
-          {tab => (
-            <Tabs.Content value={tab.value} class={getContentClass()}>
-              {children()?.(tab.value)}
-            </Tabs.Content>
-          )}
-        </For>
-      </Show>
-    </Tabs.Root>
-  );
-};
-
-export { TabsComponent as Tabs };
-
-// Export raw Ark UI primitive for custom layouts
-export { Tabs as TabsPrimitive };
diff --git a/packages/ui/src/components/TagsInput.tsx b/packages/ui/src/components/TagsInput.tsx
deleted file mode 100644
index 2050b1d1e..000000000
--- a/packages/ui/src/components/TagsInput.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * TagsInput - Input for multiple tag values using Ark UI
- */
-
-import { TagsInput } from '@ark-ui/solid/tags-input';
-import { Component, splitProps, mergeProps, Index } from 'solid-js';
-import { FiX } from 'solid-icons/fi';
-
-export interface TagsInputProps {
-  /** Input label */
-  label?: string;
-  /** Input placeholder (default: 'Add tag...') */
-  placeholder?: string;
-  /** Controlled tag values */
-  value?: string[];
-  /** Initial tag values */
-  defaultValue?: string[];
-  /** Callback when tags change */
-  onValueChange?: (_details: { value: string[] }) => void;
-  /** Maximum number of tags */
-  max?: number;
-  /** Allow duplicate tags (default: false) */
-  allowDuplicates?: boolean;
-  /** Disable the input */
-  disabled?: boolean;
-  /** Make input read-only */
-  readOnly?: boolean;
-  /** Mark as invalid */
-  invalid?: boolean;
-  /** Form field name */
-  name?: string;
-  /** What to do with input on blur */
-  blurBehavior?: 'add' | 'clear';
-  /** Add tags when pasting (default: true) */
-  addOnPaste?: boolean;
-  /** Allow editing tags (default: true) */
-  editable?: boolean;
-  /** Additional class for root element */
-  class?: string;
-  /** Additional class for input element */
-  inputClass?: string;
-}
-
-/**
- * TagsInput - Input for multiple tag values
- */
-const TagsInputComponent: Component<TagsInputProps> = props => {
-  const [local, machineProps] = splitProps(props, [
-    'label',
-    'placeholder',
-    'allowDuplicates',
-    'class',
-    'inputClass',
-  ]);
-
-  const validate = (details: { values: string[]; inputValue: string }) => {
-    if (local.allowDuplicates) return true;
-    return !details.values.includes(details.inputValue);
-  };
-
-  const context = mergeProps(machineProps, {
-    addOnPaste: true,
-    editable: true,
-    validate,
-  });
-
-  const handleValueChange = (details: { value: string[] }) => {
-    if (context.onValueChange) {
-      context.onValueChange(details);
-    }
-  };
-
-  return (
-    <TagsInput.Root
-      value={context.value}
-      defaultValue={context.defaultValue}
-      onValueChange={handleValueChange}
-      max={context.max}
-      disabled={context.disabled}
-      readOnly={context.readOnly}
-      invalid={context.invalid}
-      name={context.name}
-      blurBehavior={context.blurBehavior}
-      addOnPaste={context.addOnPaste}
-      editable={context.editable}
-      class={`w-full ${local.class || ''}`}
-    >
-      <TagsInput.Context>
-        {api => (
-          <>
-            {local.label && (
-              <TagsInput.Label class='mb-1 block text-sm font-medium text-gray-700'>
-                {local.label}
-              </TagsInput.Label>
-            )}
-            <TagsInput.Control class='flex flex-wrap gap-1.5 rounded-lg border border-gray-300 bg-white p-2 transition-colors data-[disabled]:cursor-not-allowed data-[disabled]:bg-gray-100 data-[focus]:border-blue-500 data-[focus]:ring-1 data-[focus]:ring-blue-500 data-[invalid]:border-red-500 data-[invalid]:ring-red-500 data-[readonly]:bg-gray-50'>
-              <Index each={api().value}>
-                {(value, index) => (
-                  <TagsInput.Item index={index} value={value()} class='inline-flex items-center'>
-                    <TagsInput.ItemPreview class='inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-0.5 text-sm text-gray-800 data-[disabled]:opacity-50 data-[highlighted]:bg-blue-100 data-[highlighted]:text-blue-800'>
-                      <TagsInput.ItemText>{value()}</TagsInput.ItemText>
-                      <TagsInput.ItemDeleteTrigger class='rounded p-0.5 transition-colors hover:bg-gray-200 focus:ring-1 focus:ring-blue-500 focus:outline-none'>
-                        <FiX class='h-3 w-3' />
-                      </TagsInput.ItemDeleteTrigger>
-                    </TagsInput.ItemPreview>
-                    <TagsInput.ItemInput class='sr-only' />
-                  </TagsInput.Item>
-                )}
-              </Index>
-              <TagsInput.Input
-                placeholder={local.placeholder || 'Add tag...'}
-                class={`min-w-30 flex-1 bg-transparent text-sm outline-none placeholder:text-gray-400 disabled:cursor-not-allowed ${local.inputClass || ''}`}
-              />
-            </TagsInput.Control>
-          </>
-        )}
-      </TagsInput.Context>
-      <TagsInput.HiddenInput />
-    </TagsInput.Root>
-  );
-};
-
-export { TagsInputComponent as TagsInput };
-
-// Export raw Ark UI primitive for custom layouts
-export { TagsInput as TagsInputPrimitive };
diff --git a/packages/ui/src/components/Toast.tsx b/packages/ui/src/components/Toast.tsx
deleted file mode 100644
index 0c82cdb29..000000000
--- a/packages/ui/src/components/Toast.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * Toast components using Ark UI
- */
-
-import { Toast, Toaster, createToaster, type ToastPromiseOptions } from '@ark-ui/solid/toast';
-import { Component, Show } from 'solid-js';
-import { FiX, FiCheck, FiAlertCircle, FiInfo, FiLoader } from 'solid-icons/fi';
-import { Z_INDEX } from '../constants/zIndex.js';
-
-export interface ToastOptions {
-  /** Toast title */
-  title?: string;
-  /** Toast description */
-  description?: string;
-  /** Toast type */
-  type?: 'info' | 'success' | 'warning' | 'error' | 'loading';
-  /** Duration in milliseconds */
-  duration?: number;
-}
-
-/**
- * Create the toast store - this is the global toaster instance
- * Import this to create toasts from anywhere in the app
- */
-export const toaster = createToaster({
-  placement: 'top-end',
-  overlap: true,
-  gap: 12,
-});
-
-/**
- * Toaster component - renders all active toasts
- */
-const ToasterComponent: Component = () => {
-  const getIcon = (type?: string) => {
-    switch (type) {
-      case 'success':
-        return <FiCheck class='h-5 w-5 text-green-500' />;
-      case 'error':
-        return <FiAlertCircle class='h-5 w-5 text-red-500' />;
-      case 'loading':
-        return <FiLoader class='h-5 w-5 animate-spin text-blue-500' />;
-      default:
-        return <FiInfo class='h-5 w-5 text-blue-500' />;
-    }
-  };
-
-  const getStyles = (type?: string) => {
-    switch (type) {
-      case 'success':
-        return 'border-green-200 bg-green-50';
-      case 'error':
-        return 'border-red-200 bg-red-50';
-      case 'loading':
-        return 'border-blue-200 bg-blue-50';
-      default:
-        return 'border-gray-200 bg-white';
-    }
-  };
-
-  return (
-    <Toaster
-      toaster={toaster}
-      class={`pointer-events-none fixed inset-0 ${Z_INDEX.TOAST} flex flex-col items-end p-4 sm:p-6`}
-    >
-      {toast => (
-        <Toast.Root
-          class={`toast-item pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border shadow-lg ${getStyles(toast().type)}`}
-        >
-          <div class='p-4'>
-            <div class='flex items-start'>
-              <div class='shrink-0'>{getIcon(toast().type)}</div>
-              <div class='ml-3 w-0 flex-1'>
-                <Show when={toast().title}>
-                  <Toast.Title class='text-sm font-medium text-gray-900'>
-                    {toast().title}
-                  </Toast.Title>
-                </Show>
-                <Show when={toast().description}>
-                  <Toast.Description class='mt-1 text-sm text-gray-500'>
-                    {toast().description}
-                  </Toast.Description>
-                </Show>
-              </div>
-              <div class='ml-4 flex shrink-0'>
-                <Toast.CloseTrigger class='inline-flex cursor-pointer rounded-md bg-transparent p-1 text-gray-400 hover:text-gray-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none'>
-                  <span class='sr-only'>Close</span>
-                  <FiX class='h-5 w-5' />
-                </Toast.CloseTrigger>
-              </div>
-            </div>
-          </div>
-        </Toast.Root>
-      )}
-    </Toaster>
-  );
-};
-
-/**
- * Convenience methods for creating toasts
- */
-export const showToast = {
-  success: (title?: string, description?: string) =>
-    toaster.create({ title, description, type: 'success', duration: 3000 }),
-
-  error: (title?: string, description?: string) =>
-    toaster.create({ title, description, type: 'error', duration: 5000 }),
-
-  info: (title?: string, description?: string) =>
-    toaster.create({ title, description, type: 'info', duration: 3000 }),
-
-  loading: (title?: string, description?: string) =>
-    toaster.create({ title, description, type: 'loading', duration: Infinity }),
-
-  promise: <T,>(promise: Promise<T>, options: ToastPromiseOptions<T>) =>
-    toaster.promise(promise, options),
-
-  dismiss: (id: string) => toaster.dismiss(id),
-
-  update: (id: string, options: ToastOptions) => toaster.update(id, options),
-};
-
-export { ToasterComponent as Toaster };
-export type { ToastPromiseOptions };
-
-// Export raw Ark UI primitives for custom layouts
-export { Toast as ToastPrimitive, Toaster as ToasterPrimitive };
diff --git a/packages/ui/src/components/ToggleGroup.tsx b/packages/ui/src/components/ToggleGroup.tsx
deleted file mode 100644
index d756aa241..000000000
--- a/packages/ui/src/components/ToggleGroup.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * ToggleGroup - Group of toggle buttons using Ark UI
- */
-
-import { ToggleGroup } from '@ark-ui/solid/toggle-group';
-import { Component, For, splitProps, createMemo, JSX } from 'solid-js';
-
-export interface ToggleGroupItem {
-  value: string;
-  label: JSX.Element;
-  disabled?: boolean;
-}
-
-export interface ToggleGroupProps {
-  /** Toggle items */
-  items: ToggleGroupItem[];
-  /** Controlled selected values */
-  value?: string[];
-  /** Initial selected values */
-  defaultValue?: string[];
-  /** Callback when selection changes */
-  onValueChange?: (_details: { value: string[] }) => void;
-  /** Allow multiple selections (default: false) */
-  multiple?: boolean;
-  /** Disable all toggles */
-  disabled?: boolean;
-  /** Layout orientation (default: 'horizontal') */
-  orientation?: 'horizontal' | 'vertical';
-  /** Loop focus navigation (default: true) */
-  loop?: boolean;
-  /** Use roving tabindex (default: true) */
-  rovingFocus?: boolean;
-  /** Allow deselecting when single (default: true) */
-  deselectable?: boolean;
-  /** Button size (default: 'md') */
-  size?: 'sm' | 'md' | 'lg';
-  /** Additional class for root element */
-  class?: string;
-}
-
-/**
- * ToggleGroup - Group of toggle buttons
- */
-const ToggleGroupComponent: Component<ToggleGroupProps> = props => {
-  const [local, machineProps] = splitProps(props, ['items', 'size', 'class']);
-
-  const getSizeClass = () => {
-    switch (local.size) {
-      case 'sm':
-        return 'px-2 py-1 text-xs';
-      case 'lg':
-        return 'px-4 py-2.5 text-base';
-      default:
-        return 'px-3 py-1.5 text-sm';
-    }
-  };
-
-  const orientation = () => machineProps.orientation || 'horizontal';
-  const isVertical = createMemo(() => orientation() === 'vertical');
-
-  const handleValueChange = (details: { value: string[] }) => {
-    if (machineProps.onValueChange) {
-      machineProps.onValueChange(details);
-    }
-  };
-
-  return (
-    <ToggleGroup.Root
-      value={machineProps.value}
-      defaultValue={machineProps.defaultValue}
-      onValueChange={handleValueChange}
-      multiple={machineProps.multiple}
-      disabled={machineProps.disabled}
-      orientation={orientation()}
-      loopFocus={machineProps.loop ?? true}
-      rovingFocus={machineProps.rovingFocus ?? true}
-      deselectable={machineProps.deselectable ?? true}
-      class={`inline-flex ${isVertical() ? 'flex-col' : 'flex-row'} overflow-hidden rounded-lg border border-gray-200 ${local.class || ''}`}
-    >
-      <For each={local.items}>
-        {(item, index) => (
-          <ToggleGroup.Item
-            value={item.value}
-            disabled={item.disabled}
-            class={`${getSizeClass()} bg-white font-medium text-gray-700 transition-colors hover:bg-gray-50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[focus]:z-10 data-[focus]:ring-2 data-[focus]:ring-blue-500 data-[focus]:ring-inset data-[state=on]:bg-blue-50 data-[state=on]:text-blue-700 ${
-              !isVertical() && index() > 0 ? 'border-l border-gray-200' : ''
-            } ${isVertical() && index() > 0 ? 'border-t border-gray-200' : ''}`}
-          >
-            {item.label}
-          </ToggleGroup.Item>
-        )}
-      </For>
-    </ToggleGroup.Root>
-  );
-};
-
-export { ToggleGroupComponent as ToggleGroup };
-
-// Export raw Ark UI primitive for custom layouts
-export { ToggleGroup as ToggleGroupPrimitive };
diff --git a/packages/ui/src/components/Tooltip.tsx b/packages/ui/src/components/Tooltip.tsx
deleted file mode 100644
index 65528895b..000000000
--- a/packages/ui/src/components/Tooltip.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * Tooltip component using Ark UI
- *
- * Supports both high-level convenience API and low-level composition API
- */
-
-import { Tooltip as ArkTooltip, useTooltip } from '@ark-ui/solid/tooltip';
-import { Portal } from 'solid-js/web';
-import { Component, mergeProps, splitProps, createMemo, Show, JSX } from 'solid-js';
-import { Z_INDEX } from '../constants/zIndex.js';
-
-export type Placement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end';
-
-export interface TooltipProps {
-  /** Tooltip content */
-  content: string | JSX.Element;
-  /** Trigger element (will be wrapped) */
-  children: JSX.Element;
-  /** Tooltip placement (default: 'top') */
-  placement?: Placement;
-  /** Delay before opening (default: 400ms) */
-  openDelay?: number;
-  /** Delay before closing (default: 150ms) */
-  closeDelay?: number;
-  /** Allow interaction with tooltip content (default: false) */
-  interactive?: boolean;
-  /** Disable the tooltip */
-  disabled?: boolean;
-  /** Controlled open state */
-  open?: boolean;
-  /** Initial open state (uncontrolled) */
-  defaultOpen?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (_details: { open: boolean }) => void;
-  /** Show arrow pointing to trigger (default: true) */
-  showArrow?: boolean;
-  /** Enable lazy mounting (default: true) */
-  lazyMount?: boolean;
-  /** Unmount on exit (default: true) */
-  unmountOnExit?: boolean;
-  /** Close on click (default: true) */
-  closeOnClick?: boolean;
-  /** Close on scroll (default: true) */
-  closeOnScroll?: boolean;
-  /** Close on pointer down (default: true) */
-  closeOnPointerDown?: boolean;
-  /** Close on escape key (default: true) */
-  closeOnEscape?: boolean;
-  /** Custom positioning options */
-  positioning?: {
-    placement?: Placement;
-    gutter?: number;
-    strategy?: 'absolute' | 'fixed';
-    flip?: boolean;
-    boundary?: string | { x: number; y: number; width: number; height: number };
-    [key: string]: unknown;
-  };
-  /** Additional class for root element */
-  class?: string;
-  /** Additional class for content element */
-  contentClass?: string;
-}
-
-/**
- * Tooltip - High-level convenience component
- */
-const TooltipComponent: Component<TooltipProps> = props => {
-  const merged = mergeProps(
-    {
-      placement: 'top',
-      openDelay: 400,
-      closeDelay: 150,
-      interactive: false,
-      showArrow: true,
-      lazyMount: true,
-      unmountOnExit: true,
-      closeOnClick: true,
-      closeOnScroll: true,
-      closeOnPointerDown: true,
-      closeOnEscape: true,
-    },
-    props,
-  );
-
-  const [local, machineProps] = splitProps(merged, [
-    'content',
-    'children',
-    'placement',
-    'showArrow',
-    'interactive',
-    'class',
-    'contentClass',
-  ]);
-
-  const content = () => local.content;
-  const children = () => local.children;
-  const showArrow = () => local.showArrow;
-  const placement = () => local.placement;
-  const interactive = () => local.interactive;
-
-  // Calculate boundary for positioning (avoid navbar overlap)
-  const getBoundary = createMemo(() => {
-    if (typeof document === 'undefined') return 'viewport';
-    const navbar = document.querySelector('nav[class*="sticky"]');
-    if (navbar) {
-      const navbarRect = navbar.getBoundingClientRect();
-      return {
-        x: 0,
-        y: navbarRect.bottom,
-        width: window.innerWidth,
-        height: window.innerHeight - navbarRect.bottom,
-      };
-    }
-    return 'viewport';
-  });
-
-  const positioning = createMemo(
-    (): {
-      placement?: string;
-      gutter?: number;
-      strategy?: 'absolute' | 'fixed';
-      flip?: boolean;
-      boundary?: string | { x: number; y: number; width: number; height: number };
-      [key: string]: unknown;
-    } => ({
-      placement: placement(),
-      gutter: 8,
-      strategy: 'fixed' as const,
-      flip: true,
-      boundary: getBoundary(),
-      ...machineProps.positioning,
-    }),
-  );
-
-  return (
-    <ArkTooltip.Root
-      {...machineProps}
-      positioning={positioning() as unknown as Parameters<typeof ArkTooltip.Root>[0]['positioning']}
-    >
-      <ArkTooltip.Trigger>{children()}</ArkTooltip.Trigger>
-      <Portal>
-        <ArkTooltip.Positioner class={Z_INDEX.TOOLTIP}>
-          <Show when={showArrow()}>
-            <ArkTooltip.Arrow class='[--arrow-background:#111827] [--arrow-size:8px]'>
-              <ArkTooltip.ArrowTip />
-            </ArkTooltip.Arrow>
-          </Show>
-          <ArkTooltip.Content
-            class={`data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out ${interactive() ? '' : 'pointer-events-none'} max-w-xs rounded bg-gray-900 px-2 py-1 text-xs text-white shadow-lg ${local.contentClass || ''}`}
-          >
-            {content()}
-          </ArkTooltip.Content>
-        </ArkTooltip.Positioner>
-      </Portal>
-    </ArkTooltip.Root>
-  );
-};
-
-// Export high-level component
-export { TooltipComponent as Tooltip };
-
-// Export raw Ark UI primitive for custom layouts
-export { ArkTooltip as TooltipPrimitive };
-
-// Export hook for programmatic control
-export { useTooltip };
diff --git a/packages/ui/src/components/Tour.tsx b/packages/ui/src/components/Tour.tsx
deleted file mode 100644
index 9210e19c1..000000000
--- a/packages/ui/src/components/Tour.tsx
+++ /dev/null
@@ -1,277 +0,0 @@
-/**
- * Tour component - Keeping Zag.js implementation for now
- * Ark UI Tour has a different API structure that requires significant refactoring.
- * This component is not currently used in the codebase, so migration can be deferred.
- */
-
-import * as tour from '@zag-js/tour';
-import { Portal } from 'solid-js/web';
-import { normalizeProps, useMachine } from '@zag-js/solid';
-import {
-  Component,
-  createMemo,
-  createUniqueId,
-  For,
-  Show,
-  splitProps,
-  createContext,
-  useContext,
-  Accessor,
-  JSX,
-} from 'solid-js';
-import { FiX } from 'solid-icons/fi';
-import { Z_INDEX } from '../constants/zIndex';
-
-export type Placement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end';
-
-export interface TourStepAction {
-  label: string;
-  action: 'next' | 'prev' | 'dismiss';
-}
-
-export interface TourStep {
-  /** Unique step identifier */
-  id: string;
-  /** Step type */
-  type: 'tooltip' | 'dialog' | 'floating' | 'wait';
-  /** Step title */
-  title: string;
-  /** Step description */
-  description: string;
-  /** Target element for tooltip steps */
-  target?: () => Element | null;
-  /** Tooltip placement */
-  placement?: Placement;
-  /** Step actions */
-  actions?: TourStepAction[];
-  /** Show backdrop (default: true) */
-  backdrop?: boolean;
-  /** Show arrow for tooltips (default: true) */
-  arrow?: boolean;
-  /** Side effect before showing step */
-  effect?: (_ctx: {
-    next: () => void;
-    show: () => void;
-    update: () => void;
-  }) => void | (() => void);
-}
-
-export interface TourApi {
-  /** Whether tour is open */
-  open: boolean;
-  /** Current step */
-  step: TourStep | null;
-  /** Start the tour */
-  start: () => void;
-  /** Stop the tour */
-  stop: () => void;
-  /** Go to next step */
-  next: () => void;
-  /** Go to previous step */
-  prev: () => void;
-  /** Get progress text */
-  getProgressText: () => string;
-  /** Get backdrop props */
-  getBackdropProps: () => Record<string, unknown>;
-  /** Get spotlight props */
-  getSpotlightProps: () => Record<string, unknown>;
-  /** Get positioner props */
-  getPositionerProps: () => Record<string, unknown>;
-  /** Get content props */
-  getContentProps: () => Record<string, unknown>;
-  /** Get arrow props */
-  getArrowProps: () => Record<string, unknown>;
-  /** Get arrow tip props */
-  getArrowTipProps: () => Record<string, unknown>;
-  /** Get title props */
-  getTitleProps: () => Record<string, unknown>;
-  /** Get description props */
-  getDescriptionProps: () => Record<string, unknown>;
-  /** Get progress text props */
-  getProgressTextProps: () => Record<string, unknown>;
-  /** Get action trigger props */
-  getActionTriggerProps: (_options: { action: TourStepAction }) => Record<string, unknown>;
-  /** Get close trigger props */
-  getCloseTriggerProps: () => Record<string, unknown>;
-}
-
-// Context for providing tour API to children
-const TourContext = createContext<Accessor<TourApi>>();
-
-/**
- * useTour - Hook to access tour API from TourProvider context
- */
-export function useTour(): Accessor<TourApi> {
-  const context = useContext(TourContext);
-  if (!context) {
-    throw new Error('useTour must be used within a TourProvider');
-  }
-  return context;
-}
-
-export interface TourProviderProps {
-  /** Tour steps configuration */
-  steps: TourStep[];
-  /** Callback when step changes */
-  onStepChange?: (_details: { stepId: string; stepIndex: number }) => void;
-  /** Callback when tour status changes */
-  onStatusChange?: (_details: { status: 'started' | 'stopped' | 'completed' | 'skipped' }) => void;
-  /** Close on outside click (default: true) */
-  closeOnInteractOutside?: boolean;
-  /** Close on escape key (default: true) */
-  closeOnEscape?: boolean;
-  /** Allow arrow key navigation (default: true) */
-  keyboardNavigation?: boolean;
-  /** Prevent page interaction during tour */
-  preventInteraction?: boolean;
-  /** Spotlight padding offset */
-  spotlightOffset?: { x: number; y: number };
-  /** Spotlight border radius */
-  spotlightRadius?: number;
-  /** Child components */
-  children: JSX.Element;
-}
-
-/**
- * TourProvider - Provides tour functionality to children
- */
-export const TourProvider: Component<TourProviderProps> = props => {
-  const [local, machineProps] = splitProps(props, ['children']);
-
-  const service = useMachine(
-    tour.machine,
-    () =>
-      ({
-        id: createUniqueId(),
-        closeOnInteractOutside: true,
-        closeOnEscape: true,
-        keyboardNavigation: true,
-        ...machineProps,
-      }) as Parameters<typeof useMachine<typeof tour.machine>>[1] extends (
-        (..._args: any[]) => infer R
-      ) ?
-        R
-      : never,
-  );
-
-  const api = createMemo(() => tour.connect(service, normalizeProps) as unknown as TourApi);
-
-  return (
-    <TourContext.Provider value={api}>
-      {local.children}
-
-      <Show when={api().open && api().step}>
-        <Portal>
-          <Show when={api().step?.backdrop !== false}>
-            <div
-              {...api().getBackdropProps()}
-              class={`fixed inset-0 ${Z_INDEX.TOUR_BACKDROP} bg-black/50 transition-opacity`}
-            />
-          </Show>
-
-          <Show when={api().step?.type === 'tooltip' && api().step?.target}>
-            <div {...api().getSpotlightProps()} class={Z_INDEX.TOUR_SPOTLIGHT} />
-          </Show>
-
-          <div
-            {...api().getPositionerProps()}
-            class={`${Z_INDEX.TOUR_CONTENT} ${api().step?.type === 'dialog' ? 'fixed inset-0 flex items-center justify-center p-4' : ''}`}
-          >
-            <div
-              {...api().getContentProps()}
-              class={`rounded-lg bg-white shadow-xl ${api().step?.type === 'dialog' ? 'w-full max-w-md' : 'max-w-sm'}`}
-            >
-              <Show when={api().step?.arrow !== false && api().step?.type === 'tooltip'}>
-                <div
-                  {...api().getArrowProps()}
-                  class='[--arrow-background:white] [--arrow-size:8px]'
-                >
-                  <div {...api().getArrowTipProps()} />
-                </div>
-              </Show>
-
-              <div class='p-4'>
-                <div class='mb-2 flex items-start justify-between'>
-                  <h3 {...api().getTitleProps()} class='text-lg font-semibold text-gray-900'>
-                    {api().step?.title}
-                  </h3>
-                  <button
-                    {...api().getCloseTriggerProps()}
-                    class='-mt-1 -mr-1 rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500'
-                  >
-                    <FiX class='h-4 w-4' />
-                  </button>
-                </div>
-
-                <div {...api().getDescriptionProps()} class='mb-4 text-sm text-gray-600'>
-                  {api().step?.description}
-                </div>
-
-                <div class='flex items-center justify-between'>
-                  <span {...api().getProgressTextProps()} class='text-xs text-gray-500'>
-                    {api().getProgressText()}
-                  </span>
-
-                  <div class='flex items-center gap-2'>
-                    <For each={api().step?.actions}>
-                      {action => (
-                        <button
-                          {...api().getActionTriggerProps({ action })}
-                          class={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
-                            action.action === 'next' || action.action === 'dismiss' ?
-                              'bg-blue-600 text-white hover:bg-blue-700'
-                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                          }`}
-                        >
-                          {action.label}
-                        </button>
-                      )}
-                    </For>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </Portal>
-      </Show>
-    </TourContext.Provider>
-  );
-};
-
-export interface TourProps extends Omit<TourProviderProps, 'children'> {
-  /** Render function for trigger */
-  renderTrigger?: (_api: Accessor<TourApi>) => JSX.Element;
-}
-
-/**
- * Tour - Standalone tour component (alternative to TourProvider)
- */
-const TourComponent: Component<TourProps> = props => {
-  const [local, rest] = splitProps(props, ['renderTrigger']);
-
-  return (
-    <TourProvider {...rest}>
-      <TourContent renderTrigger={local.renderTrigger} />
-    </TourProvider>
-  );
-};
-
-function TourContent(props: { renderTrigger?: (_api: Accessor<TourApi>) => JSX.Element }) {
-  const api = useTour();
-
-  return <Show when={props.renderTrigger}>{props.renderTrigger?.(api)}</Show>;
-}
-
-export { TourComponent as Tour };
diff --git a/packages/ui/src/components/__tests__/Dialog.test.tsx b/packages/ui/src/components/__tests__/Dialog.test.tsx
deleted file mode 100644
index b39a961a4..000000000
--- a/packages/ui/src/components/__tests__/Dialog.test.tsx
+++ /dev/null
@@ -1,401 +0,0 @@
-/**
- * Tests for Dialog and ConfirmDialog components
- */
-
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@solidjs/testing-library';
-import { Dialog, ConfirmDialog, useConfirmDialog } from '../Dialog';
-
-describe('Dialog', () => {
-  beforeEach(() => {
-    cleanup();
-  });
-
-  describe('Rendering', () => {
-    it('should not render when closed', () => {
-      render(() => (
-        <Dialog open={false} title='Test Dialog'>
-          <p>Dialog content</p>
-        </Dialog>
-      ));
-
-      expect(screen.queryByText('Test Dialog')).not.toBeInTheDocument();
-    });
-
-    it('should render when open', () => {
-      render(() => (
-        <Dialog open={true} title='Test Dialog'>
-          <p>Dialog content</p>
-        </Dialog>
-      ));
-
-      expect(screen.getByText('Test Dialog')).toBeInTheDocument();
-      expect(screen.getByText('Dialog content')).toBeInTheDocument();
-    });
-
-    it('should render title', () => {
-      render(() => (
-        <Dialog open={true} title='My Dialog Title'>
-          <p>Content</p>
-        </Dialog>
-      ));
-
-      expect(screen.getByText('My Dialog Title')).toBeInTheDocument();
-    });
-
-    it('should render description when provided', () => {
-      render(() => (
-        <Dialog open={true} title='Title' description='This is a description'>
-          <p>Content</p>
-        </Dialog>
-      ));
-
-      expect(screen.getByText('This is a description')).toBeInTheDocument();
-    });
-
-    it('should render children content', () => {
-      render(() => (
-        <Dialog open={true} title='Title'>
-          <p>Custom content here</p>
-          <button>Action button</button>
-        </Dialog>
-      ));
-
-      expect(screen.getByText('Custom content here')).toBeInTheDocument();
-      expect(screen.getByText('Action button')).toBeInTheDocument();
-    });
-  });
-
-  describe('Open/Close behavior', () => {
-    it('should accept onOpenChange prop', () => {
-      const onOpenChange = vi.fn();
-      render(() => (
-        <Dialog open={true} title='Title' onOpenChange={onOpenChange}>
-          <p>Content</p>
-        </Dialog>
-      ));
-
-      // Component renders correctly with onOpenChange prop
-      expect(screen.getByText('Title')).toBeInTheDocument();
-    });
-
-    it('should render close button', () => {
-      render(() => (
-        <Dialog open={true} title='Title'>
-          <p>Content</p>
-        </Dialog>
-      ));
-
-      const closeButton = document.querySelector('[data-part="close-trigger"]');
-      expect(closeButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Size variants', () => {
-    it('should apply small size class', () => {
-      render(() => (
-        <Dialog open={true} title='Small Dialog' size='sm'>
-          <p>Content</p>
-        </Dialog>
-      ));
-
-      const content = document.querySelector('[data-part="content"]') as HTMLElement;
-      expect(content).not.toBeNull();
-      expect(content.className).toContain('max-w-sm');
-    });
-
-    it('should apply medium size class by default', () => {
-      render(() => (
-        <Dialog open={true} title='Medium Dialog'>
-          <p>Content</p>
-        </Dialog>
-      ));
-
-      const content = document.querySelector('[data-part="content"]') as HTMLElement;
-      expect(content).not.toBeNull();
-      expect(content.className).toContain('max-w-md');
-    });
-
-    it('should apply large size class', () => {
-      render(() => (
-        <Dialog open={true} title='Large Dialog' size='lg'>
-          <p>Content</p>
-        </Dialog>
-      ));
-
-      const content = document.querySelector('[data-part="content"]') as HTMLElement;
-      expect(content).not.toBeNull();
-      expect(content.className).toContain('max-w-lg');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have dialog role', () => {
-      render(() => (
-        <Dialog open={true} title='Accessible Dialog'>
-          <p>Content</p>
-        </Dialog>
-      ));
-
-      const dialog = screen.getByRole('dialog');
-      expect(dialog).toBeInTheDocument();
-    });
-
-    it('should have proper title attributes', () => {
-      render(() => (
-        <Dialog open={true} title='Dialog Title'>
-          <p>Content</p>
-        </Dialog>
-      ));
-
-      const title = document.querySelector('[data-part="title"]');
-      expect(title).not.toBeNull();
-      expect(title).toHaveTextContent('Dialog Title');
-    });
-  });
-});
-
-describe('ConfirmDialog', () => {
-  beforeEach(() => {
-    cleanup();
-  });
-
-  describe('Rendering', () => {
-    it('should not render when closed', () => {
-      render(() => <ConfirmDialog open={false} title='Confirm' description='Are you sure?' />);
-
-      expect(screen.queryByText('Confirm')).not.toBeInTheDocument();
-    });
-
-    it('should render when open', () => {
-      render(() => (
-        <ConfirmDialog
-          open={true}
-          title='Confirm Action'
-          description='Are you sure you want to proceed?'
-        />
-      ));
-
-      expect(screen.getByText('Confirm Action')).toBeInTheDocument();
-      expect(screen.getByText('Are you sure you want to proceed?')).toBeInTheDocument();
-    });
-
-    it('should render default button text', () => {
-      render(() => <ConfirmDialog open={true} title='Confirm Title' description='Description' />);
-
-      expect(screen.getByText('Cancel')).toBeInTheDocument();
-      // Confirm button shows "Confirm" text
-      const buttons = screen.getAllByRole('button');
-      const confirmButton = buttons.find(btn => btn.textContent === 'Confirm');
-      expect(confirmButton).toBeInTheDocument();
-    });
-
-    it('should render custom button text', () => {
-      render(() => (
-        <ConfirmDialog
-          open={true}
-          title='Delete Item'
-          description='This action cannot be undone'
-          confirmText='Delete'
-          cancelText='Keep'
-        />
-      ));
-
-      expect(screen.getByText('Delete')).toBeInTheDocument();
-      expect(screen.getByText('Keep')).toBeInTheDocument();
-    });
-  });
-
-  describe('Variants', () => {
-    it('should apply danger variant styling', () => {
-      render(() => (
-        <ConfirmDialog open={true} title='Delete' description='Are you sure?' variant='danger' />
-      ));
-
-      const iconBg = document.querySelector('.bg-red-100');
-      expect(iconBg).toBeInTheDocument();
-    });
-
-    it('should apply warning variant styling', () => {
-      render(() => (
-        <ConfirmDialog
-          open={true}
-          title='Warning'
-          description='Proceed with caution'
-          variant='warning'
-        />
-      ));
-
-      const iconBg = document.querySelector('.bg-amber-100');
-      expect(iconBg).toBeInTheDocument();
-    });
-
-    it('should apply info variant styling', () => {
-      render(() => (
-        <ConfirmDialog
-          open={true}
-          title='Info'
-          description='This is informational'
-          variant='info'
-        />
-      ));
-
-      const iconBg = document.querySelector('.bg-blue-100');
-      expect(iconBg).toBeInTheDocument();
-    });
-  });
-
-  describe('Actions', () => {
-    it('should accept onConfirm prop', () => {
-      const onConfirm = vi.fn();
-      render(() => (
-        <ConfirmDialog
-          open={true}
-          title='Confirm Action'
-          description='Proceed?'
-          onConfirm={onConfirm}
-        />
-      ));
-
-      // Component renders correctly with onConfirm prop
-      expect(screen.getByText('Confirm Action')).toBeInTheDocument();
-    });
-
-    it('should call onOpenChange with false when cancel is clicked', () => {
-      const onOpenChange = vi.fn();
-      render(() => (
-        <ConfirmDialog
-          open={true}
-          title='Confirm'
-          description='Proceed?'
-          onOpenChange={onOpenChange}
-        />
-      ));
-
-      const cancelButton = screen.getByText('Cancel');
-      fireEvent.click(cancelButton);
-
-      expect(onOpenChange).toHaveBeenCalledWith(false);
-    });
-  });
-
-  describe('Loading state', () => {
-    it('should show loading text when loading', () => {
-      render(() => (
-        <ConfirmDialog open={true} title='Confirm' description='Proceed?' loading={true} />
-      ));
-
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
-    });
-
-    it('should disable buttons when loading', () => {
-      render(() => (
-        <ConfirmDialog open={true} title='Confirm' description='Proceed?' loading={true} />
-      ));
-
-      const buttons = screen.getAllByRole('button');
-      buttons.forEach(button => {
-        expect(button).toBeDisabled();
-      });
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have alertdialog role', () => {
-      render(() => <ConfirmDialog open={true} title='Confirm' description='Are you sure?' />);
-
-      const dialog = screen.getByRole('alertdialog');
-      expect(dialog).toBeInTheDocument();
-    });
-  });
-});
-
-describe('useConfirmDialog', () => {
-  beforeEach(() => {
-    cleanup();
-  });
-
-  it('should start with dialog closed', () => {
-    const TestComponent = () => {
-      const { isOpen, ConfirmDialogComponent } = useConfirmDialog();
-      return (
-        <div>
-          <span data-testid='is-open'>{isOpen() ? 'open' : 'closed'}</span>
-          <ConfirmDialogComponent />
-        </div>
-      );
-    };
-
-    render(() => <TestComponent />);
-
-    expect(screen.getByTestId('is-open')).toHaveTextContent('closed');
-  });
-
-  it('should return open function', () => {
-    const TestComponent = () => {
-      const { open, ConfirmDialogComponent } = useConfirmDialog();
-      return (
-        <div>
-          <span data-testid='has-open'>{typeof open === 'function' ? 'yes' : 'no'}</span>
-          <ConfirmDialogComponent />
-        </div>
-      );
-    };
-
-    render(() => <TestComponent />);
-
-    expect(screen.getByTestId('has-open')).toHaveTextContent('yes');
-  });
-
-  it('should return close function', () => {
-    const TestComponent = () => {
-      const { close, ConfirmDialogComponent } = useConfirmDialog();
-      return (
-        <div>
-          <span data-testid='has-close'>{typeof close === 'function' ? 'yes' : 'no'}</span>
-          <ConfirmDialogComponent />
-        </div>
-      );
-    };
-
-    render(() => <TestComponent />);
-
-    expect(screen.getByTestId('has-close')).toHaveTextContent('yes');
-  });
-
-  it('should return setLoading function', () => {
-    const TestComponent = () => {
-      const { setLoading, ConfirmDialogComponent } = useConfirmDialog();
-      return (
-        <div>
-          <span data-testid='has-setLoading'>
-            {typeof setLoading === 'function' ? 'yes' : 'no'}
-          </span>
-          <ConfirmDialogComponent />
-        </div>
-      );
-    };
-
-    render(() => <TestComponent />);
-
-    expect(screen.getByTestId('has-setLoading')).toHaveTextContent('yes');
-  });
-
-  it('should return dialogProps function', () => {
-    const TestComponent = () => {
-      const { dialogProps, ConfirmDialogComponent } = useConfirmDialog();
-      return (
-        <div>
-          <span data-testid='has-dialogProps'>
-            {typeof dialogProps === 'function' ? 'yes' : 'no'}
-          </span>
-          <ConfirmDialogComponent />
-        </div>
-      );
-    };
-
-    render(() => <TestComponent />);
-
-    expect(screen.getByTestId('has-dialogProps')).toHaveTextContent('yes');
-  });
-});
diff --git a/packages/ui/src/components/__tests__/RadioGroup.test.tsx b/packages/ui/src/components/__tests__/RadioGroup.test.tsx
deleted file mode 100644
index 9a58f1242..000000000
--- a/packages/ui/src/components/__tests__/RadioGroup.test.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-/**
- * Tests for RadioGroup component
- */
-
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@solidjs/testing-library';
-import { RadioGroup } from '../RadioGroup';
-
-describe('RadioGroup', () => {
-  const defaultItems = [
-    { value: 'option1', label: 'Option 1' },
-    { value: 'option2', label: 'Option 2' },
-    { value: 'option3', label: 'Option 3' },
-  ];
-
-  beforeEach(() => {
-    cleanup();
-  });
-
-  describe('Rendering', () => {
-    it('should render group label', () => {
-      render(() => <RadioGroup items={defaultItems} label='Choose an option' />);
-
-      expect(screen.getByText('Choose an option')).toBeInTheDocument();
-    });
-
-    it('should render all radio items', () => {
-      render(() => <RadioGroup items={defaultItems} label='Options' />);
-
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-      expect(screen.getByText('Option 2')).toBeInTheDocument();
-      expect(screen.getByText('Option 3')).toBeInTheDocument();
-    });
-
-    it('should render item descriptions', () => {
-      const itemsWithDesc = [
-        { value: 'opt1', label: 'Option 1', description: 'First option description' },
-        { value: 'opt2', label: 'Option 2', description: 'Second option description' },
-      ];
-
-      render(() => <RadioGroup items={itemsWithDesc} label='Options' />);
-
-      expect(screen.getByText('First option description')).toBeInTheDocument();
-      expect(screen.getByText('Second option description')).toBeInTheDocument();
-    });
-
-    it('should apply custom class', () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' class='custom-class' />
-      ));
-
-      const root = container.querySelector('[data-part="root"]');
-      expect(root).toHaveClass('custom-class');
-    });
-  });
-
-  describe('Uncontrolled behavior', () => {
-    it('should select defaultValue initially', () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' defaultValue='option2' />
-      ));
-
-      const inputs = container.querySelectorAll('input[type="radio"]');
-      const option2Input = Array.from(inputs).find(
-        input => (input as HTMLInputElement).value === 'option2',
-      ) as HTMLInputElement;
-      expect(option2Input).toBeDefined();
-      expect(option2Input.checked).toBe(true);
-    });
-
-    it('should update selection on click', async () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' defaultValue='option1' />
-      ));
-
-      const option2Label = screen.getByText('Option 2').closest('label');
-      expect(option2Label).not.toBeNull();
-      await fireEvent.click(option2Label!);
-
-      const inputs = container.querySelectorAll('input[type="radio"]');
-      const option2Input = Array.from(inputs).find(
-        input => (input as HTMLInputElement).value === 'option2',
-      ) as HTMLInputElement;
-      expect(option2Input).toBeDefined();
-      expect(option2Input.checked).toBe(true);
-    });
-  });
-
-  describe('Controlled behavior', () => {
-    it('should reflect controlled value', () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' value='option3' />
-      ));
-
-      const inputs = container.querySelectorAll('input[type="radio"]');
-      const option3Input = Array.from(inputs).find(
-        input => (input as HTMLInputElement).value === 'option3',
-      ) as HTMLInputElement;
-      expect(option3Input).toBeDefined();
-      expect(option3Input.checked).toBe(true);
-    });
-
-    it('should call onValueChange when selection changes', async () => {
-      const onValueChange = vi.fn();
-      render(() => (
-        <RadioGroup
-          items={defaultItems}
-          label='Options'
-          value='option1'
-          onValueChange={onValueChange}
-        />
-      ));
-
-      const option2Label = screen.getByText('Option 2').closest('label');
-      expect(option2Label).not.toBeNull();
-      await fireEvent.click(option2Label!);
-
-      expect(onValueChange).toHaveBeenCalledWith({ value: 'option2' });
-    });
-
-    it('should accept onValueChange prop', () => {
-      const onValueChange = vi.fn();
-      const { container } = render(() => (
-        <RadioGroup
-          items={defaultItems}
-          label='Options'
-          value='option1'
-          onValueChange={onValueChange}
-        />
-      ));
-
-      // Component renders without error
-      const root = container.querySelector('[data-part="root"]');
-      expect(root).toBeInTheDocument();
-    });
-  });
-
-  describe('Disabled state', () => {
-    it('should disable all items when group is disabled', () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' disabled />
-      ));
-
-      const inputs = container.querySelectorAll('input[type="radio"]');
-      inputs.forEach(input => {
-        expect((input as HTMLInputElement).disabled).toBe(true);
-      });
-    });
-
-    it('should disable individual items', () => {
-      const itemsWithDisabled = [
-        { value: 'opt1', label: 'Option 1' },
-        { value: 'opt2', label: 'Option 2', disabled: true },
-        { value: 'opt3', label: 'Option 3' },
-      ];
-
-      const { container } = render(() => <RadioGroup items={itemsWithDisabled} label='Options' />);
-
-      const inputs = container.querySelectorAll('input[type="radio"]');
-      const opt2Input = Array.from(inputs).find(
-        input => (input as HTMLInputElement).value === 'opt2',
-      ) as HTMLInputElement;
-      expect(opt2Input).toBeDefined();
-      expect(opt2Input.disabled).toBe(true);
-    });
-
-    it('should apply disabled styling to disabled items', () => {
-      const itemsWithDisabled = [
-        { value: 'opt1', label: 'Option 1' },
-        { value: 'opt2', label: 'Option 2', disabled: true },
-      ];
-
-      render(() => <RadioGroup items={itemsWithDisabled} label='Options' />);
-
-      const opt2Label = screen.getByText('Option 2').closest('label');
-      expect(opt2Label).toHaveClass('cursor-not-allowed');
-    });
-  });
-
-  describe('Orientation', () => {
-    it('should render vertically by default', () => {
-      const { container } = render(() => <RadioGroup items={defaultItems} label='Options' />);
-
-      const itemsContainer = container.querySelector('.flex-col');
-      expect(itemsContainer).toBeInTheDocument();
-    });
-
-    it('should render horizontally when orientation is horizontal', () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' orientation='horizontal' />
-      ));
-
-      const itemsContainer = container.querySelector('.flex-row');
-      expect(itemsContainer).toBeInTheDocument();
-    });
-  });
-
-  describe('Form integration', () => {
-    it('should have name attribute on inputs', () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' name='myRadioGroup' />
-      ));
-
-      const inputs = container.querySelectorAll('input[type="radio"]');
-      inputs.forEach(input => {
-        expect((input as HTMLInputElement).name).toBe('myRadioGroup');
-      });
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have radiogroup role', () => {
-      render(() => <RadioGroup items={defaultItems} label='Options' />);
-
-      const radiogroup = screen.getByRole('radiogroup');
-      expect(radiogroup).toBeInTheDocument();
-    });
-
-    it('should have radio roles for items', () => {
-      render(() => <RadioGroup items={defaultItems} label='Options' />);
-
-      const radios = screen.getAllByRole('radio');
-      expect(radios.length).toBe(3);
-    });
-
-    it('should have checked input for selected item', () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' value='option2' />
-      ));
-
-      const inputs = container.querySelectorAll('input[type="radio"]');
-      const option2Input = Array.from(inputs).find(
-        input => (input as HTMLInputElement).value === 'option2',
-      ) as HTMLInputElement;
-      expect(option2Input).toBeDefined();
-      expect(option2Input.checked).toBe(true);
-    });
-  });
-
-  describe('Visual states', () => {
-    it('should show checked indicator on selected item', () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' value='option1' />
-      ));
-
-      const controls = container.querySelectorAll('[data-part="item-control"]');
-      const option1Control = Array.from(controls)[0];
-      expect(option1Control).toHaveAttribute('data-state', 'checked');
-    });
-
-    it('should show unchecked indicator on unselected items', () => {
-      const { container } = render(() => (
-        <RadioGroup items={defaultItems} label='Options' value='option1' />
-      ));
-
-      const controls = container.querySelectorAll('[data-part="item-control"]');
-      const option2Control = Array.from(controls)[1];
-      expect(option2Control).toHaveAttribute('data-state', 'unchecked');
-    });
-  });
-});
diff --git a/packages/ui/src/components/__tests__/checkbox.test.tsx b/packages/ui/src/components/__tests__/checkbox.test.tsx
deleted file mode 100644
index eec4a73c3..000000000
--- a/packages/ui/src/components/__tests__/checkbox.test.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-/**
- * Tests for Checkbox component
- */
-
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@solidjs/testing-library';
-import { createSignal } from 'solid-js';
-import { Checkbox } from '../Checkbox';
-
-describe('Checkbox', () => {
-  beforeEach(() => {
-    cleanup();
-  });
-
-  describe('Rendering', () => {
-    it('should render checkbox with label', () => {
-      render(() => <Checkbox label='Accept terms' />);
-
-      expect(screen.getByText('Accept terms')).toBeInTheDocument();
-    });
-
-    it('should render checkbox without label', () => {
-      const { container } = render(() => <Checkbox />);
-
-      const checkbox = container.querySelector('input[type="checkbox"]');
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    it('should apply custom class', () => {
-      const { container } = render(() => <Checkbox class='custom-class' />);
-
-      const label = container.querySelector('label') as HTMLLabelElement;
-      expect(label).not.toBeNull();
-      expect(label.className).toContain('custom-class');
-    });
-  });
-
-  describe('Uncontrolled behavior', () => {
-    it('should have hidden input element', () => {
-      const { container } = render(() => <Checkbox label='Test' />);
-
-      const input = container.querySelector('input[type="checkbox"]');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('should render control element', () => {
-      const { container } = render(() => <Checkbox label='Test' />);
-
-      const control = container.querySelector('[data-part="control"]');
-      expect(control).toBeInTheDocument();
-    });
-  });
-
-  describe('Controlled behavior', () => {
-    it('should call onChange when clicked', async () => {
-      const onChange = vi.fn();
-      const { container } = render(() => <Checkbox label='Test' onChange={onChange} />);
-
-      const label = container.querySelector('label');
-      expect(label).not.toBeNull();
-      await fireEvent.click(label!);
-
-      expect(onChange).toHaveBeenCalledWith(true);
-    });
-
-    it('should support controlled state changes', () => {
-      const TestComponent = () => {
-        const [checked, setChecked] = createSignal(false);
-        return (
-          <div>
-            <Checkbox label='Controlled' checked={checked()} onChange={setChecked} />
-            <span data-testid='state'>{checked() ? 'checked' : 'unchecked'}</span>
-          </div>
-        );
-      };
-
-      const { container } = render(() => <TestComponent />);
-
-      expect(screen.getByTestId('state')).toHaveTextContent('unchecked');
-
-      const label = container.querySelector('label');
-      expect(label).not.toBeNull();
-      fireEvent.click(label!);
-
-      expect(screen.getByTestId('state')).toHaveTextContent('checked');
-    });
-  });
-
-  describe('Disabled state', () => {
-    it('should be disabled when disabled prop is true', () => {
-      const { container } = render(() => <Checkbox label='Test' disabled />);
-
-      const input = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
-      expect(input).not.toBeNull();
-      expect(input.disabled).toBe(true);
-    });
-
-    it('should apply disabled styling', () => {
-      const { container } = render(() => <Checkbox label='Test' disabled />);
-
-      const label = container.querySelector('label') as HTMLLabelElement;
-      expect(label).not.toBeNull();
-      expect(label.className).toContain('cursor-not-allowed');
-    });
-  });
-
-  describe('Indeterminate state', () => {
-    it('should render control element when indeterminate', () => {
-      const { container } = render(() => <Checkbox label='Test' indeterminate />);
-
-      const controlDiv = container.querySelector('[data-part="control"]');
-      expect(controlDiv).toBeInTheDocument();
-    });
-  });
-
-  describe('Form integration', () => {
-    it('should have name attribute for form submission', () => {
-      const { container } = render(() => <Checkbox label='Test' name='acceptTerms' />);
-
-      const input = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
-      expect(input).not.toBeNull();
-      expect(input.name).toBe('acceptTerms');
-    });
-
-    it('should have value attribute for form submission', () => {
-      const { container } = render(() => <Checkbox label='Test' name='option' value='option1' />);
-
-      const input = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
-      expect(input).not.toBeNull();
-      expect(input.value).toBe('option1');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper control element', () => {
-      const { container } = render(() => <Checkbox label='Accept terms' />);
-
-      const control = container.querySelector('[data-part="control"]');
-      expect(control).toBeInTheDocument();
-    });
-
-    it('should have hidden input for form', () => {
-      const { container } = render(() => <Checkbox label='Test' />);
-
-      const input = container.querySelector('input[type="checkbox"]');
-      expect(input).not.toBeNull();
-    });
-  });
-});
diff --git a/packages/ui/src/components/__tests__/progress.test.tsx b/packages/ui/src/components/__tests__/progress.test.tsx
deleted file mode 100644
index ea6038524..000000000
--- a/packages/ui/src/components/__tests__/progress.test.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * Tests for Progress component
- */
-
-import { describe, it, expect, beforeEach } from 'vitest';
-import { render, screen, cleanup } from '@solidjs/testing-library';
-import { Progress } from '../Progress';
-
-describe('Progress', () => {
-  beforeEach(() => {
-    cleanup();
-  });
-
-  describe('Rendering', () => {
-    it('should render progress bar', () => {
-      const { container } = render(() => <Progress value={50} />);
-
-      const track = container.querySelector('[data-part="track"]');
-      expect(track).toBeInTheDocument();
-    });
-
-    it('should render range indicator', () => {
-      const { container } = render(() => <Progress value={50} />);
-
-      const range = container.querySelector('[data-part="range"]');
-      expect(range).toBeInTheDocument();
-    });
-
-    it('should apply custom class', () => {
-      const { container } = render(() => <Progress value={50} class='custom-class' />);
-
-      const root = container.querySelector('[data-part="root"]') as HTMLElement;
-      expect(root).not.toBeNull();
-      expect(root).toHaveClass('custom-class');
-    });
-  });
-
-  describe('Value display', () => {
-    it('should show label when provided', () => {
-      render(() => <Progress value={50} label='Loading' />);
-
-      expect(screen.getByText('Loading')).toBeInTheDocument();
-    });
-
-    it('should show percentage when showValue is true', () => {
-      render(() => <Progress value={75} showValue />);
-
-      expect(screen.getByText('75%')).toBeInTheDocument();
-    });
-
-    it('should not show percentage by default', () => {
-      render(() => <Progress value={75} />);
-
-      expect(screen.queryByText('75%')).not.toBeInTheDocument();
-    });
-
-    it('should show both label and value', () => {
-      render(() => <Progress value={50} label='Progress' showValue />);
-
-      expect(screen.getByText('Progress')).toBeInTheDocument();
-      expect(screen.getByText('50%')).toBeInTheDocument();
-    });
-  });
-
-  describe('Size variants', () => {
-    it('should apply small size class', () => {
-      const { container } = render(() => <Progress value={50} size='sm' />);
-
-      const track = container.querySelector('[data-part="track"]') as HTMLElement;
-      expect(track).not.toBeNull();
-      expect(track).toHaveClass('h-1');
-    });
-
-    it('should apply medium size class by default', () => {
-      const { container } = render(() => <Progress value={50} />);
-
-      const track = container.querySelector('[data-part="track"]') as HTMLElement;
-      expect(track).not.toBeNull();
-      expect(track).toHaveClass('h-2');
-    });
-
-    it('should apply large size class', () => {
-      const { container } = render(() => <Progress value={50} size='lg' />);
-
-      const track = container.querySelector('[data-part="track"]') as HTMLElement;
-      expect(track).not.toBeNull();
-      expect(track).toHaveClass('h-3');
-    });
-  });
-
-  describe('Color variants', () => {
-    it('should apply default (blue) color', () => {
-      const { container } = render(() => <Progress value={50} />);
-
-      const range = container.querySelector('[data-part="range"]') as HTMLElement;
-      expect(range).not.toBeNull();
-      expect(range).toHaveClass('bg-blue-500');
-    });
-
-    it('should apply success (green) color', () => {
-      const { container } = render(() => <Progress value={50} variant='success' />);
-
-      const range = container.querySelector('[data-part="range"]') as HTMLElement;
-      expect(range).not.toBeNull();
-      expect(range).toHaveClass('bg-green-500');
-    });
-
-    it('should apply warning (yellow) color', () => {
-      const { container } = render(() => <Progress value={50} variant='warning' />);
-
-      const range = container.querySelector('[data-part="range"]') as HTMLElement;
-      expect(range).not.toBeNull();
-      expect(range).toHaveClass('bg-yellow-500');
-    });
-
-    it('should apply error (red) color', () => {
-      const { container } = render(() => <Progress value={50} variant='error' />);
-
-      const range = container.querySelector('[data-part="range"]') as HTMLElement;
-      expect(range).not.toBeNull();
-      expect(range).toHaveClass('bg-red-500');
-    });
-  });
-
-  describe('Value range', () => {
-    it('should handle 0% value', () => {
-      render(() => <Progress value={0} showValue />);
-
-      expect(screen.getByText('0%')).toBeInTheDocument();
-    });
-
-    it('should handle 100% value', () => {
-      render(() => <Progress value={100} showValue />);
-
-      expect(screen.getByText('100%')).toBeInTheDocument();
-    });
-
-    it('should handle custom min/max values', () => {
-      render(() => <Progress value={50} min={0} max={200} showValue />);
-
-      expect(screen.getByText('25%')).toBeInTheDocument();
-    });
-  });
-
-  describe('Indeterminate state', () => {
-    it('should apply indeterminate animation class', () => {
-      const { container } = render(() => <Progress indeterminate />);
-
-      const range = container.querySelector('[data-part="range"]') as HTMLElement;
-      expect(range).not.toBeNull();
-      expect(range).toHaveClass('animate-progress-indeterminate');
-    });
-
-    it('should not show value when indeterminate', () => {
-      render(() => <Progress indeterminate showValue />);
-
-      // When indeterminate, value text should not be shown
-      const valueText = screen.queryByText(/%$/);
-      expect(valueText).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper ARIA attributes on root', () => {
-      const { container } = render(() => <Progress value={50} label='Loading progress' />);
-
-      const root = container.querySelector('[data-part="root"]');
-      expect(root).toBeInTheDocument();
-    });
-
-    it('should have label element with proper attributes', () => {
-      const { container } = render(() => <Progress value={50} label='Loading' />);
-
-      const label = container.querySelector('[data-part="label"]');
-      expect(label).not.toBeNull();
-      expect(label).toBeInTheDocument();
-      expect(label).toHaveTextContent('Loading');
-    });
-  });
-});
diff --git a/packages/ui/src/components/__tests__/switch.test.tsx b/packages/ui/src/components/__tests__/switch.test.tsx
deleted file mode 100644
index fbf18c46f..000000000
--- a/packages/ui/src/components/__tests__/switch.test.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Tests for Switch component
- */
-
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, cleanup } from '@solidjs/testing-library';
-import { Switch } from '../Switch';
-
-describe('Switch', () => {
-  beforeEach(() => {
-    cleanup();
-  });
-
-  describe('Rendering', () => {
-    it('should render switch control', () => {
-      const { container } = render(() => <Switch />);
-
-      const switchControl = container.querySelector('[data-part="control"]');
-      expect(switchControl).toBeInTheDocument();
-    });
-
-    it('should render hidden input', () => {
-      const { container } = render(() => <Switch />);
-
-      const input = container.querySelector('input[type="checkbox"]');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('should apply custom class', () => {
-      const { container } = render(() => <Switch class='custom-class' />);
-
-      const label = container.querySelector('label') as HTMLLabelElement;
-      expect(label).not.toBeNull();
-      expect(label.className).toContain('custom-class');
-    });
-  });
-
-  describe('Uncontrolled behavior', () => {
-    it('should start unchecked by default', () => {
-      const { container } = render(() => <Switch />);
-
-      const control = container.querySelector('[data-part="control"]');
-      expect(control).toHaveAttribute('data-state', 'unchecked');
-    });
-
-    it('should start checked when defaultChecked is true', () => {
-      const { container } = render(() => <Switch defaultChecked />);
-
-      const control = container.querySelector('[data-part="control"]');
-      expect(control).toHaveAttribute('data-state', 'checked');
-    });
-  });
-
-  describe('Controlled behavior', () => {
-    it('should reflect controlled checked state', () => {
-      const { container } = render(() => <Switch checked={true} />);
-
-      const control = container.querySelector('[data-part="control"]');
-      expect(control).toHaveAttribute('data-state', 'checked');
-    });
-
-    it('should accept onChange prop', () => {
-      const onChange = vi.fn();
-      const { container } = render(() => <Switch onChange={onChange} />);
-
-      // Component renders without error with onChange
-      const control = container.querySelector('[data-part="control"]');
-      expect(control).toBeInTheDocument();
-    });
-  });
-
-  describe('Disabled state', () => {
-    it('should be disabled when disabled prop is true', () => {
-      const { container } = render(() => <Switch disabled />);
-
-      const input = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
-      expect(input).not.toBeNull();
-      expect(input.disabled).toBe(true);
-    });
-
-    it('should apply disabled styling', () => {
-      const { container } = render(() => <Switch disabled />);
-
-      const label = container.querySelector('label') as HTMLLabelElement;
-      expect(label).not.toBeNull();
-      expect(label.className).toContain('cursor-not-allowed');
-    });
-  });
-
-  describe('Form integration', () => {
-    it('should have name attribute for form submission', () => {
-      const { container } = render(() => <Switch name='notifications' />);
-
-      const input = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
-      expect(input).not.toBeNull();
-      expect(input.name).toBe('notifications');
-    });
-  });
-
-  describe('Visual states', () => {
-    it('should show thumb in correct position when unchecked', () => {
-      const { container } = render(() => <Switch />);
-
-      const thumb = container.querySelector('[data-part="thumb"]');
-      expect(thumb).toHaveAttribute('data-state', 'unchecked');
-    });
-
-    it('should show thumb in correct position when checked', () => {
-      const { container } = render(() => <Switch checked={true} />);
-
-      const thumb = container.querySelector('[data-part="thumb"]');
-      expect(thumb).toHaveAttribute('data-state', 'checked');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper control element', () => {
-      const { container } = render(() => <Switch />);
-
-      const control = container.querySelector('[data-part="control"]');
-      expect(control).toBeInTheDocument();
-    });
-
-    it('should have hidden input for form submission', () => {
-      const { container } = render(() => <Switch name='toggle' />);
-
-      const input = container.querySelector('input[type="checkbox"]');
-      expect(input).toHaveAttribute('name', 'toggle');
-    });
-  });
-});
diff --git a/packages/ui/src/components/__tests__/tabs.test.tsx b/packages/ui/src/components/__tests__/tabs.test.tsx
deleted file mode 100644
index 085302a7d..000000000
--- a/packages/ui/src/components/__tests__/tabs.test.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-/**
- * Tests for Tabs component
- */
-
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@solidjs/testing-library';
-import { createSignal } from 'solid-js';
-import { Tabs } from '../Tabs';
-
-describe('Tabs', () => {
-  const defaultTabs = [
-    { value: 'tab1', label: 'Tab 1' },
-    { value: 'tab2', label: 'Tab 2' },
-    { value: 'tab3', label: 'Tab 3' },
-  ];
-
-  beforeEach(() => {
-    cleanup();
-  });
-
-  describe('Rendering', () => {
-    it('should render all tab triggers', () => {
-      render(() => <Tabs tabs={defaultTabs} />);
-
-      expect(screen.getByText('Tab 1')).toBeInTheDocument();
-      expect(screen.getByText('Tab 2')).toBeInTheDocument();
-      expect(screen.getByText('Tab 3')).toBeInTheDocument();
-    });
-
-    it('should render tab list container', () => {
-      const { container } = render(() => <Tabs tabs={defaultTabs} />);
-
-      const tabList = container.querySelector('[data-part="list"]');
-      expect(tabList).toBeInTheDocument();
-    });
-
-    it('should render with icons', () => {
-      const tabsWithIcons = [
-        { value: 'tab1', label: 'Tab 1', icon: <span data-testid='icon1'>📁</span> },
-        { value: 'tab2', label: 'Tab 2', icon: <span data-testid='icon2'>📄</span> },
-      ];
-
-      render(() => <Tabs tabs={tabsWithIcons} />);
-
-      expect(screen.getByTestId('icon1')).toBeInTheDocument();
-      expect(screen.getByTestId('icon2')).toBeInTheDocument();
-    });
-
-    it('should render count badges', () => {
-      const tabsWithCounts = [
-        { value: 'tab1', label: 'Tab 1', count: 5 },
-        { value: 'tab2', label: 'Tab 2', count: 10 },
-      ];
-
-      render(() => <Tabs tabs={tabsWithCounts} />);
-
-      expect(screen.getByText('5')).toBeInTheDocument();
-      expect(screen.getByText('10')).toBeInTheDocument();
-    });
-
-    it('should render dynamic count via getCount', () => {
-      const tabsWithGetCount = [{ value: 'tab1', label: 'Tab 1', getCount: () => 42 }];
-
-      render(() => <Tabs tabs={tabsWithGetCount} />);
-
-      expect(screen.getByText('42')).toBeInTheDocument();
-    });
-  });
-
-  describe('Default selection', () => {
-    it('should select first tab by default', () => {
-      const { container } = render(() => <Tabs tabs={defaultTabs} />);
-
-      const firstTrigger = container.querySelector('[data-part="trigger"]');
-      expect(firstTrigger).toHaveAttribute('data-selected');
-    });
-
-    it('should select specified defaultValue', () => {
-      render(() => <Tabs tabs={defaultTabs} defaultValue='tab2' />);
-
-      const tab2Button = screen.getByText('Tab 2').closest('button');
-      expect(tab2Button).toHaveAttribute('data-selected');
-    });
-  });
-
-  describe('Controlled behavior', () => {
-    it('should reflect controlled value', () => {
-      render(() => <Tabs tabs={defaultTabs} value='tab3' />);
-
-      const tab3Button = screen.getByText('Tab 3').closest('button');
-      expect(tab3Button).toHaveAttribute('data-selected');
-    });
-
-    it('should call onValueChange when tab is clicked', async () => {
-      const onValueChange = vi.fn();
-      render(() => <Tabs tabs={defaultTabs} onValueChange={onValueChange} />);
-
-      const tab2Button = screen.getByText('Tab 2');
-      await fireEvent.click(tab2Button);
-
-      expect(onValueChange).toHaveBeenCalledWith('tab2');
-    });
-
-    it('should update when controlled value changes', () => {
-      const TestComponent = () => {
-        const [value, setValue] = createSignal('tab1');
-        return (
-          <div>
-            <Tabs tabs={defaultTabs} value={value()} onValueChange={setValue} />
-            <button data-testid='change' onClick={() => setValue('tab3')}>
-              Change to Tab 3
-            </button>
-          </div>
-        );
-      };
-
-      render(() => <TestComponent />);
-
-      // Initially tab1 is selected
-      let tab1Button = screen.getByText('Tab 1').closest('button');
-      expect(tab1Button).toHaveAttribute('data-selected');
-
-      // Change to tab3
-      fireEvent.click(screen.getByTestId('change'));
-
-      const tab3Button = screen.getByText('Tab 3').closest('button');
-      expect(tab3Button).toHaveAttribute('data-selected');
-    });
-  });
-
-  describe('Tab content', () => {
-    it('should render content for active tab', () => {
-      render(() => (
-        <Tabs tabs={defaultTabs}>
-          {value => <div data-testid={`content-${value}`}>Content for {value}</div>}
-        </Tabs>
-      ));
-
-      // First tab content should be visible
-      const content = screen.getByTestId('content-tab1');
-      expect(content).toBeInTheDocument();
-    });
-
-    it('should switch content when tab changes', async () => {
-      render(() => (
-        <Tabs tabs={defaultTabs}>
-          {value => <div data-testid={`content-${value}`}>Content for {value}</div>}
-        </Tabs>
-      ));
-
-      // Click tab 2
-      await fireEvent.click(screen.getByText('Tab 2'));
-
-      // Tab 2 content should be rendered
-      const content = screen.getByTestId('content-tab2');
-      expect(content).toBeInTheDocument();
-    });
-  });
-
-  describe('Keyboard navigation', () => {
-    it('should have focusable tab triggers', () => {
-      render(() => <Tabs tabs={defaultTabs} />);
-
-      const triggers = screen.getAllByRole('tab');
-      expect(triggers.length).toBe(3);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper tab roles', () => {
-      render(() => <Tabs tabs={defaultTabs} />);
-
-      const triggers = screen.getAllByRole('tab');
-      expect(triggers.length).toBe(3);
-    });
-
-    it('should have tablist role', () => {
-      render(() => <Tabs tabs={defaultTabs} />);
-
-      const tablist = screen.getByRole('tablist');
-      expect(tablist).toBeInTheDocument();
-    });
-
-    it('should have aria-selected on active tab', () => {
-      render(() => <Tabs tabs={defaultTabs} value='tab2' />);
-
-      const tab2Button = screen.getByText('Tab 2').closest('button');
-      expect(tab2Button).toHaveAttribute('aria-selected', 'true');
-    });
-  });
-
-  describe('Styling', () => {
-    it('should apply selected styling to active tab', () => {
-      render(() => <Tabs tabs={defaultTabs} value='tab1' />);
-
-      const tab1Button = screen.getByText('Tab 1').closest('button');
-      expect(tab1Button).toHaveAttribute('data-selected');
-    });
-
-    it('should not apply selected styling to inactive tabs', () => {
-      render(() => <Tabs tabs={defaultTabs} value='tab1' />);
-
-      const tab2Button = screen.getByText('Tab 2').closest('button');
-      expect(tab2Button).not.toHaveAttribute('data-selected');
-    });
-  });
-});
diff --git a/packages/ui/src/components/__tests__/tooltip.test.tsx b/packages/ui/src/components/__tests__/tooltip.test.tsx
deleted file mode 100644
index 2c09ab5d4..000000000
--- a/packages/ui/src/components/__tests__/tooltip.test.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * Tests for Tooltip component
- */
-
-import { describe, it, expect, beforeEach } from 'vitest';
-import { render, screen, cleanup } from '@solidjs/testing-library';
-import { Tooltip } from '../Tooltip';
-
-describe('Tooltip', () => {
-  beforeEach(() => {
-    cleanup();
-  });
-
-  describe('Rendering', () => {
-    it('should render trigger content', () => {
-      render(() => (
-        <Tooltip content='Tooltip text'>
-          <button>Hover me</button>
-        </Tooltip>
-      ));
-
-      expect(screen.getByText('Hover me')).toBeInTheDocument();
-    });
-
-    it('should not show tooltip content initially', () => {
-      render(() => (
-        <Tooltip content='Tooltip text'>
-          <button>Hover me</button>
-        </Tooltip>
-      ));
-
-      expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Placement', () => {
-    it('should use default top placement', () => {
-      render(() => (
-        <Tooltip content='Tooltip text'>
-          <button>Hover me</button>
-        </Tooltip>
-      ));
-
-      // Tooltip is rendered, placement is set via positioning prop
-      expect(screen.getByText('Hover me')).toBeInTheDocument();
-    });
-
-    it('should accept custom placement prop', () => {
-      render(() => (
-        <Tooltip content='Tooltip text' placement='bottom'>
-          <button>Hover me</button>
-        </Tooltip>
-      ));
-
-      expect(screen.getByText('Hover me')).toBeInTheDocument();
-    });
-  });
-
-  describe('Trigger element', () => {
-    it('should wrap trigger in span', () => {
-      render(() => (
-        <Tooltip content='Tooltip text'>
-          <button>Hover me</button>
-        </Tooltip>
-      ));
-
-      // Ark UI renders trigger content - verify it's accessible
-      expect(screen.getByText('Hover me')).toBeInTheDocument();
-    });
-
-    it('should render any children as trigger', () => {
-      render(() => (
-        <Tooltip content='Help text'>
-          <span>Info icon</span>
-        </Tooltip>
-      ));
-
-      expect(screen.getByText('Info icon')).toBeInTheDocument();
-    });
-
-    it('should work with complex children', () => {
-      render(() => (
-        <Tooltip content='Complex tooltip'>
-          <div>
-            <span>First</span>
-            <span>Second</span>
-          </div>
-        </Tooltip>
-      ));
-
-      expect(screen.getByText('First')).toBeInTheDocument();
-      expect(screen.getByText('Second')).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have trigger with proper attributes', () => {
-      render(() => (
-        <Tooltip content='Tooltip text'>
-          <button>Hover me</button>
-        </Tooltip>
-      ));
-
-      // Trigger is rendered with proper attributes via Ark UI
-      expect(screen.getByText('Hover me')).toBeInTheDocument();
-    });
-  });
-
-  describe('Props', () => {
-    it('should accept openDelay prop', () => {
-      render(() => (
-        <Tooltip content='Tooltip text' openDelay={500}>
-          <button>Hover me</button>
-        </Tooltip>
-      ));
-
-      expect(screen.getByText('Hover me')).toBeInTheDocument();
-    });
-
-    it('should accept closeDelay prop', () => {
-      render(() => (
-        <Tooltip content='Tooltip text' closeDelay={300}>
-          <button>Hover me</button>
-        </Tooltip>
-      ));
-
-      expect(screen.getByText('Hover me')).toBeInTheDocument();
-    });
-
-    it('should accept interactive prop', () => {
-      render(() => (
-        <Tooltip content='Tooltip text' interactive>
-          <button>Hover me</button>
-        </Tooltip>
-      ));
-
-      expect(screen.getByText('Hover me')).toBeInTheDocument();
-    });
-  });
-});
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
deleted file mode 100644
index ea9ffb7c3..000000000
--- a/packages/ui/src/components/index.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// UI Components
-// Most components have been migrated to Ark UI, some still use Zag.js
-// Re-export all components from individual files
-
-export { Accordion, AccordionPrimitive } from './Accordion';
-export { Avatar, AvatarPrimitive } from './Avatar';
-export { Checkbox, CheckboxPrimitive, useCheckbox } from './Checkbox';
-export { Clipboard, CopyButton, ClipboardPrimitive } from './Clipboard';
-export { default as Collapsible, useCollapsible, CollapsiblePrimitive } from './Collapsible';
-export { Combobox, ComboboxPrimitive, useCombobox } from './Combobox';
-export { Dialog, ConfirmDialog, useConfirmDialog, DialogPrimitive } from './Dialog';
-export { Drawer, DrawerPrimitive } from './Drawer';
-export { default as Editable, EditablePrimitive } from './Editable';
-export { FileUpload, FileUploadPrimitive } from './FileUpload';
-export { FloatingPanel, FloatingPanelPrimitive } from './FloatingPanel';
-export { Menu, MenuPrimitive } from './Menu';
-export { NumberInput, NumberInputPrimitive } from './NumberInput';
-export { default as PasswordInput, PasswordInputPrimitive } from './PasswordInput';
-export { default as PinInput, PinInputPrimitive } from './PinInput';
-export { Popover, PopoverPrimitive, usePopover } from './Popover';
-export { Progress, ProgressPrimitive } from './Progress';
-export { default as QRCode, QRCodePrimitive } from './QRCode';
-export { RadioGroup, RadioGroupPrimitive } from './RadioGroup';
-export { default as Select, useSelect, SelectPrimitive } from './Select';
-export { Splitter, SplitterPrimitive } from './Splitter';
-export { default as Switch, SwitchPrimitive, useSwitch } from './Switch';
-export { Tabs, TabsPrimitive } from './Tabs';
-export { TagsInput, TagsInputPrimitive } from './TagsInput';
-export {
-  Toaster,
-  toaster,
-  showToast,
-  ToastPrimitive,
-  ToasterPrimitive,
-  type ToastPromiseOptions,
-} from './Toast';
-export { ToggleGroup, ToggleGroupPrimitive } from './ToggleGroup';
-export { Tooltip, TooltipPrimitive, useTooltip } from './Tooltip';
-export { Tour, TourProvider, useTour } from './Tour';
-export {
-  Spinner,
-  PageLoader,
-  LoadingPlaceholder,
-  ButtonSpinner,
-  type SpinnerProps,
-  type SpinnerSize,
-  type SpinnerVariant,
-} from './Spinner';
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
deleted file mode 100644
index 0deec369e..000000000
--- a/packages/ui/src/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// @corates/ui - Shared UI Components
-
-// Re-export all UI components (built with Ark UI and some remaining Zag.js components)
-export * from './components/index';
-
-// Re-export primitives
-export { useWindowDrag } from './primitives/useWindowDrag';
-
-// Re-export utilities
-export { cn } from './lib/cn';
-
-// Re-export constants
-export { Z_INDEX } from './constants/zIndex';
diff --git a/packages/ui/src/lib/cn.ts b/packages/ui/src/lib/cn.ts
deleted file mode 100644
index c65b80eb7..000000000
--- a/packages/ui/src/lib/cn.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-/**
- * Combines class names with Tailwind CSS conflict resolution.
- * Uses clsx for conditional classes and tailwind-merge for smart overrides.
- *
- * @example
- * cn('px-2 py-1', 'px-4')           // → 'py-1 px-4' (px-4 wins)
- * cn('p-4', props.class)            // → consumer can override padding
- * cn('text-sm', large && 'text-lg') // → conditional classes
- */
-export function cn(...inputs: (string | undefined | null | false)[]): string {
-  return twMerge(clsx(inputs));
-}
diff --git a/packages/ui/src/primitives/useWindowDrag.ts b/packages/ui/src/primitives/useWindowDrag.ts
deleted file mode 100644
index b59f749dc..000000000
--- a/packages/ui/src/primitives/useWindowDrag.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { createSignal, onCleanup, onMount } from 'solid-js';
-
-/**
- * Primitive to detect when files are being dragged over the window
- * Useful for showing a global drop indicator when dragging from external sources (like Finder)
- */
-export function useWindowDrag(options?: { onDragEnd?: () => void }): {
-  isDraggingOverWindow: () => boolean;
-} {
-  const [isDraggingOverWindow, setIsDraggingOverWindow] = createSignal(false);
-  let dragCounter = 0;
-
-  onMount(() => {
-    const handleDragEnter = (e: globalThis.DragEvent) => {
-      // Only respond to file drags
-      if (e.dataTransfer?.types?.includes('Files')) {
-        dragCounter++;
-        setIsDraggingOverWindow(true);
-      }
-    };
-
-    const handleDragLeave = () => {
-      dragCounter--;
-      if (dragCounter === 0) {
-        setIsDraggingOverWindow(false);
-      }
-    };
-
-    const handleDrop = () => {
-      dragCounter = 0;
-      // Delay state update to avoid interfering with drop handlers
-      setTimeout(() => {
-        setIsDraggingOverWindow(false);
-        options?.onDragEnd?.();
-      }, 50);
-    };
-
-    window.addEventListener('dragenter', handleDragEnter);
-    window.addEventListener('dragleave', handleDragLeave);
-    window.addEventListener('drop', handleDrop, true);
-
-    onCleanup(() => {
-      window.removeEventListener('dragenter', handleDragEnter);
-      window.removeEventListener('dragleave', handleDragLeave);
-      window.removeEventListener('drop', handleDrop, true);
-    });
-  });
-
-  return { isDraggingOverWindow };
-}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
deleted file mode 100644
index fec6ca5a2..000000000
--- a/packages/ui/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ES2022",
-    "lib": ["ES2022", "DOM"],
-    "moduleResolution": "bundler",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "preserve",
-    "jsxImportSource": "solid-js",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-      "@zag/*": ["src/zag/*"]
-    },
-    "types": ["@testing-library/jest-dom"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}
diff --git a/packages/ui/vitest.config.js b/packages/ui/vitest.config.js
deleted file mode 100644
index d725fd70f..000000000
--- a/packages/ui/vitest.config.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import solidPlugin from 'vite-plugin-solid';
-
-export default defineConfig({
-  plugins: [solidPlugin()],
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: ['./src/__tests__/setup.ts'],
-    include: ['src/**/*.{test,spec}.{js,jsx,ts,tsx}'],
-    server: {
-      deps: {
-        inline: [/solid-icons/, /@ark-ui/],
-      },
-    },
-    deps: {
-      optimizer: {
-        web: {
-          include: ['solid-js', '@ark-ui/solid', 'solid-icons'],
-        },
-      },
-    },
-    testTimeout: 10000,
-  },
-  resolve: {
-    conditions: ['development', 'browser'],
-  },
-});
diff --git a/packages/web/package.json b/packages/web/package.json
index 5c6d6804e..e93c98c24 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -17,8 +17,8 @@
     "analyze": "vite build --mode analyze && source-map-explorer dist/assets/index-*.js --no-border-checks"
   },
   "dependencies": {
+    "@ark-ui/solid": "^5.30.0",
     "@corates/shared": "workspace:*",
-    "@corates/ui": "workspace:*",
     "@embedpdf/core": "^2.2.0",
     "@embedpdf/engines": "^2.2.0",
     "@embedpdf/models": "^2.2.0",
@@ -49,10 +49,12 @@
     "@embedpdf/plugin-zoom": "^2.2.0",
     "@solid-primitives/scheduled": "^1.5.2",
     "@solidjs/router": "^0.15.4",
-    "@tanstack/solid-query": "^5.90.19",
+    "@tanstack/solid-query": "^5.90.22",
     "@tanstack/solid-table": "^8.21.3",
-    "better-auth": "^1.4.12",
+    "better-auth": "^1.4.15",
     "chart.js": "^4.5.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "d3": "^7.9.0",
     "dexie": "^4.2.1",
     "preact": "^10.28.2",
@@ -72,12 +74,13 @@
     "@vitest/ui": "^4.0.17",
     "fake-indexeddb": "^6.2.5",
     "jsdom": "^27.4.0",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.0",
     "puppeteer": "^24.35.0",
     "rollup-plugin-visualizer": "^6.0.5",
     "source-map-explorer": "^2.5.3",
     "tailwindcss": "^4.1.18",
-    "terser": "^5.44.1",
+    "terser": "^5.46.0",
+    "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-solid": "^2.11.10",
     "vitest": "^4.0.17"
diff --git a/packages/web/src/Layout.jsx b/packages/web/src/Layout.jsx
index 3a5ceb8a0..919e53918 100644
--- a/packages/web/src/Layout.jsx
+++ b/packages/web/src/Layout.jsx
@@ -2,7 +2,7 @@ import { createSignal, onMount, createMemo, Show, lazy, Suspense } from 'solid-j
 import { useLocation } from '@solidjs/router';
 import Navbar from './components/Navbar.jsx';
 import Sidebar from './components/sidebar/Sidebar.jsx';
-import { Toaster } from '@corates/ui';
+import { ToasterContainer } from '@/components/ui/toast';
 import { isImpersonating } from '@/stores/adminStore.js';
 
 // Lazy load admin components to avoid bundling admin code for non-admins
@@ -101,7 +101,7 @@ export default function Layout(props) {
         </Show>
         <main class='flex-1 overflow-auto text-gray-900'>{props.children}</main>
       </div>
-      <Toaster />
+      <ToasterContainer />
       {/* Dev Panel - global, context-aware */}
       <Show when={DEV_PANEL_ENABLED}>
         <DevPanel />
diff --git a/packages/web/src/api/account-merge.js b/packages/web/src/api/account-merge.js
index 5de71c944..3dcd926ef 100644
--- a/packages/web/src/api/account-merge.js
+++ b/packages/web/src/api/account-merge.js
@@ -60,5 +60,5 @@ export async function getMergeStatus(mergeToken) {
  * @returns {Promise<{ success: boolean }>}
  */
 export async function cancelMerge(mergeToken) {
-  return apiFetch.delete('/api/accounts/merge/cancel', { mergeToken });
+  return apiFetch.delete('/api/accounts/merge/cancel', { body: { mergeToken } });
 }
diff --git a/packages/web/src/api/google-drive.js b/packages/web/src/api/google-drive.js
index 9edc62c49..f0fd7ccd8 100644
--- a/packages/web/src/api/google-drive.js
+++ b/packages/web/src/api/google-drive.js
@@ -1,7 +1,5 @@
 /**
  * Google Drive API - Interact with user's connected Google Drive
- *
- * Import endpoint uses org-scoped route: /api/orgs/:orgId/google-drive/import
  */
 
 import { apiFetch } from '@/lib/apiFetch.js';
@@ -25,15 +23,12 @@ export async function disconnectGoogleDrive() {
 /**
  * Import a PDF from Google Drive to a project study
  * @param {string} fileId - The Google Drive file ID
- * @param {string} orgId - The organization ID
  * @param {string} projectId - The project to import into
  * @param {string} studyId - The study to import into
  * @returns {Promise<{success: boolean, file: Object}>}
  */
-export async function importFromGoogleDrive(fileId, orgId, projectId, studyId) {
-  const url = `/api/orgs/${orgId}/google-drive/import`;
-
-  return apiFetch.post(url, { fileId, projectId, studyId });
+export async function importFromGoogleDrive(fileId, projectId, studyId) {
+  return apiFetch.post('/api/google-drive/import', { fileId, projectId, studyId });
 }
 
 /**
diff --git a/packages/web/src/components/Navbar.jsx b/packages/web/src/components/Navbar.jsx
index 71bac7b3f..35f2ca3fe 100644
--- a/packages/web/src/components/Navbar.jsx
+++ b/packages/web/src/components/Navbar.jsx
@@ -4,7 +4,7 @@ import { useBetterAuth } from '@api/better-auth-store.js';
 import { FiMenu, FiWifiOff, FiChevronDown, FiX } from 'solid-icons/fi';
 import { LANDING_URL } from '@config/api.js';
 import useOnlineStatus from '@primitives/useOnlineStatus.js';
-import { Avatar } from '@corates/ui';
+import { Avatar, AvatarImage, AvatarFallback, getInitials } from '@/components/ui/avatar';
 import { isAdmin, isAdminChecked, checkAdminStatus } from '@/stores/adminStore.js';
 
 export default function Navbar(props) {
@@ -135,12 +135,12 @@ export default function Navbar(props) {
               onClick={() => setShowUserMenu(!showUserMenu())}
               class='flex h-9 items-center space-x-2 rounded px-2 font-medium transition hover:bg-blue-600'
             >
-              <Avatar
-                src={user()?.image}
-                name={user()?.name || storedName}
-                class='h-6 w-6 overflow-hidden rounded-full'
-                fallbackClass='flex items-center justify-center w-full h-full bg-white/20 text-white text-xs font-medium'
-              />
+              <Avatar class='h-6 w-6'>
+                <AvatarImage src={user()?.image} alt={user()?.name || storedName || 'User'} />
+                <AvatarFallback class='bg-white/20 text-xs text-white'>
+                  {getInitials(user()?.name || storedName)}
+                </AvatarFallback>
+              </Avatar>
               <span class='hidden sm:block'>{user()?.name || storedName || 'Loading...'}</span>
               <FiChevronDown
                 class={`h-3 w-3 transition-transform ${showUserMenu() ? 'rotate-180' : ''}`}
diff --git a/packages/web/src/components/admin/DatabaseViewer.jsx b/packages/web/src/components/admin/DatabaseViewer.jsx
index 9850c4fc9..4688551d4 100644
--- a/packages/web/src/components/admin/DatabaseViewer.jsx
+++ b/packages/web/src/components/admin/DatabaseViewer.jsx
@@ -22,7 +22,13 @@ import {
   useAdminTableRows,
   useAdminTableSchema,
 } from '@primitives/useAdminQueries.js';
-import { Spinner, TooltipPrimitive as Tooltip } from '@corates/ui';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 import { DashboardHeader } from './ui/index.js';
 
 const LIMIT_OPTIONS = [25, 50, 100];
@@ -281,29 +287,31 @@ export default function DatabaseViewer() {
                                   >
                                     <span class='flex items-center gap-1'>
                                       <Show when={schema()?.primaryKey}>
-                                        <Tooltip.Root openDelay={100}>
-                                          <Tooltip.Trigger>
-                                            <FiKey class='h-3 w-3 text-amber-500' />
-                                          </Tooltip.Trigger>
-                                          <Tooltip.Positioner>
-                                            <Tooltip.Content class='rounded bg-gray-800 px-2 py-1 text-xs text-white'>
-                                              Primary Key
-                                            </Tooltip.Content>
-                                          </Tooltip.Positioner>
-                                        </Tooltip.Root>
+                                        <Tooltip openDelay={100}>
+                                          <TooltipTrigger>
+                                            <span class='inline-flex'>
+                                              <FiKey class='h-3 w-3 text-amber-500' />
+                                            </span>
+                                          </TooltipTrigger>
+                                          <TooltipPositioner>
+                                            <TooltipContent>Primary Key</TooltipContent>
+                                          </TooltipPositioner>
+                                        </Tooltip>
                                       </Show>
                                       <Show when={schema()?.foreignKey}>
-                                        <Tooltip.Root openDelay={100}>
-                                          <Tooltip.Trigger>
-                                            <FiLink class='h-3 w-3 text-blue-500' />
-                                          </Tooltip.Trigger>
-                                          <Tooltip.Positioner>
-                                            <Tooltip.Content class='rounded bg-gray-800 px-2 py-1 text-xs text-white'>
+                                        <Tooltip openDelay={100}>
+                                          <TooltipTrigger>
+                                            <span class='inline-flex'>
+                                              <FiLink class='h-3 w-3 text-blue-500' />
+                                            </span>
+                                          </TooltipTrigger>
+                                          <TooltipPositioner>
+                                            <TooltipContent>
                                               FK: {schema().foreignKey.table}.
                                               {schema().foreignKey.column}
-                                            </Tooltip.Content>
-                                          </Tooltip.Positioner>
-                                        </Tooltip.Root>
+                                            </TooltipContent>
+                                          </TooltipPositioner>
+                                        </Tooltip>
                                       </Show>
                                       {col}
                                       <Show when={schema()?.type}>
diff --git a/packages/web/src/components/admin/GrantDialog.jsx b/packages/web/src/components/admin/GrantDialog.jsx
index 402c6182a..fb6bd0cf6 100644
--- a/packages/web/src/components/admin/GrantDialog.jsx
+++ b/packages/web/src/components/admin/GrantDialog.jsx
@@ -3,7 +3,17 @@
  * Dialog for creating grants
  */
 
-import { Dialog } from '@corates/ui';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
+import { FiX } from 'solid-icons/fi';
 
 /**
  * Grant Dialog component
@@ -29,53 +39,66 @@ export default function GrantDialog(props) {
   const expiresAt = () => props.expiresAt;
 
   return (
-    <Dialog open={open()} onOpenChange={props.onOpenChange} title='Create Grant'>
-      <div class='space-y-4'>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Type</label>
-          <select
-            value={type()}
-            onInput={e => props.onTypeChange?.(e.target.value)}
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          >
-            <option value='trial'>Trial</option>
-            <option value='single_project'>Single Project</option>
-          </select>
-        </div>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Starts At</label>
-          <input
-            type='datetime-local'
-            value={startsAt()}
-            onInput={e => props.onStartsAtChange?.(e.target.value)}
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          />
-        </div>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Expires At</label>
-          <input
-            type='datetime-local'
-            value={expiresAt()}
-            onInput={e => props.onExpiresAtChange?.(e.target.value)}
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          />
-        </div>
-        <div class='flex justify-end space-x-3'>
-          <button
-            onClick={() => props.onOpenChange?.(false)}
-            class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
-          >
-            Cancel
-          </button>
-          <button
-            onClick={() => props.onSubmit?.()}
-            disabled={loading()}
-            class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
-          >
-            {loading() ? 'Creating...' : 'Create'}
-          </button>
-        </div>
-      </div>
+    <Dialog open={open()} onOpenChange={details => props.onOpenChange?.(details.open)}>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent class='max-w-md'>
+          <DialogHeader>
+            <DialogTitle>Create Grant</DialogTitle>
+            <DialogCloseTrigger>
+              <FiX class='h-5 w-5' />
+            </DialogCloseTrigger>
+          </DialogHeader>
+          <DialogBody>
+            <div class='space-y-4'>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>Type</label>
+                <select
+                  value={type()}
+                  onInput={e => props.onTypeChange?.(e.target.value)}
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                >
+                  <option value='trial'>Trial</option>
+                  <option value='single_project'>Single Project</option>
+                </select>
+              </div>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>Starts At</label>
+                <input
+                  type='datetime-local'
+                  value={startsAt()}
+                  onInput={e => props.onStartsAtChange?.(e.target.value)}
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                />
+              </div>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>Expires At</label>
+                <input
+                  type='datetime-local'
+                  value={expiresAt()}
+                  onInput={e => props.onExpiresAtChange?.(e.target.value)}
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                />
+              </div>
+              <div class='flex justify-end space-x-3'>
+                <DialogCloseTrigger
+                  as='button'
+                  class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
+                >
+                  Cancel
+                </DialogCloseTrigger>
+                <button
+                  onClick={() => props.onSubmit?.()}
+                  disabled={loading()}
+                  class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
+                >
+                  {loading() ? 'Creating...' : 'Create'}
+                </button>
+              </div>
+            </div>
+          </DialogBody>
+        </DialogContent>
+      </DialogPositioner>
     </Dialog>
   );
 }
diff --git a/packages/web/src/components/admin/ImpersonationBanner.jsx b/packages/web/src/components/admin/ImpersonationBanner.jsx
index 095d565f5..96ab1e102 100644
--- a/packages/web/src/components/admin/ImpersonationBanner.jsx
+++ b/packages/web/src/components/admin/ImpersonationBanner.jsx
@@ -9,7 +9,7 @@ import {
   stopImpersonation,
   checkImpersonationStatus,
 } from '@/stores/adminStore.js';
-import { Z_INDEX } from '@corates/ui';
+import { Z_INDEX } from '@/components/ui/z-index';
 
 /**
  * Impersonation Banner component
diff --git a/packages/web/src/components/admin/OrgDetail.jsx b/packages/web/src/components/admin/OrgDetail.jsx
index ffa8d5472..065fb0238 100644
--- a/packages/web/src/components/admin/OrgDetail.jsx
+++ b/packages/web/src/components/admin/OrgDetail.jsx
@@ -6,7 +6,7 @@
 
 import { createSignal, Show } from 'solid-js';
 import { useParams, A } from '@solidjs/router';
-import { FiArrowLeft, FiHome, FiUsers, FiFolder, FiShield, FiLoader } from 'solid-icons/fi';
+import { FiArrowLeft, FiHome, FiUsers, FiFolder, FiShield, FiLoader, FiX } from 'solid-icons/fi';
 import { useAdminOrgDetails, useAdminOrgBilling } from '@primitives/useAdminQueries.js';
 import {
   createOrgSubscription,
@@ -19,7 +19,17 @@ import {
   isAdminChecked,
   isAdmin,
 } from '@/stores/adminStore.js';
-import { Dialog, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import { handleError } from '@/lib/error-utils.js';
 import { AdminBox } from './ui/index.js';
 import OrgBillingSummary from './OrgBillingSummary.jsx';
@@ -447,43 +457,53 @@ export default function OrgDetail() {
         />
 
         {/* Confirm Dialog */}
-        <Dialog
-          open={!!confirmDialog()}
-          onOpenChange={open => !open && setConfirmDialog(null)}
-          title={
-            confirmDialog()?.type === 'cancel-subscription' ? 'Cancel Subscription' : 'Revoke Grant'
-          }
-          role='alertdialog'
-        >
-          <div class='space-y-4'>
-            <p class='text-sm text-gray-600'>
-              {confirmDialog()?.type === 'cancel-subscription' ?
-                'Are you sure you want to cancel this subscription?'
-              : 'Are you sure you want to revoke this grant?'}
-            </p>
-            <div class='flex justify-end space-x-3'>
-              <button
-                onClick={() => setConfirmDialog(null)}
-                class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => {
-                  const dialog = confirmDialog();
-                  if (dialog?.type === 'cancel-subscription') {
-                    handleCancelSubscription(dialog.subscriptionId);
-                  } else if (dialog?.type === 'revoke-grant') {
-                    handleRevokeGrant(dialog.grantId);
-                  }
-                }}
-                disabled={loading()}
-                class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50'
-              >
-                {loading() ? 'Processing...' : 'Confirm'}
-              </button>
-            </div>
-          </div>
+        <Dialog open={!!confirmDialog()} onOpenChange={open => !open && setConfirmDialog(null)}>
+          <DialogBackdrop />
+          <DialogPositioner>
+            <DialogContent class='max-w-md'>
+              <DialogHeader>
+                <DialogTitle>
+                  {confirmDialog()?.type === 'cancel-subscription' ?
+                    'Cancel Subscription'
+                  : 'Revoke Grant'}
+                </DialogTitle>
+                <DialogCloseTrigger>
+                  <FiX class='h-5 w-5' />
+                </DialogCloseTrigger>
+              </DialogHeader>
+              <DialogBody>
+                <div class='space-y-4'>
+                  <p class='text-sm text-gray-600'>
+                    {confirmDialog()?.type === 'cancel-subscription' ?
+                      'Are you sure you want to cancel this subscription?'
+                    : 'Are you sure you want to revoke this grant?'}
+                  </p>
+                  <div class='flex justify-end space-x-3'>
+                    <button
+                      onClick={() => setConfirmDialog(null)}
+                      class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={() => {
+                        const dialog = confirmDialog();
+                        if (dialog?.type === 'cancel-subscription') {
+                          handleCancelSubscription(dialog.subscriptionId);
+                        } else if (dialog?.type === 'revoke-grant') {
+                          handleRevokeGrant(dialog.grantId);
+                        }
+                      }}
+                      disabled={loading()}
+                      class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50'
+                    >
+                      {loading() ? 'Processing...' : 'Confirm'}
+                    </button>
+                  </div>
+                </div>
+              </DialogBody>
+            </DialogContent>
+          </DialogPositioner>
         </Dialog>
       </Show>
     </Show>
diff --git a/packages/web/src/components/admin/ProjectDetail.jsx b/packages/web/src/components/admin/ProjectDetail.jsx
index 9030a263f..4ccd576a2 100644
--- a/packages/web/src/components/admin/ProjectDetail.jsx
+++ b/packages/web/src/components/admin/ProjectDetail.jsx
@@ -20,6 +20,7 @@ import {
   FiCopy,
   FiHardDrive,
   FiUserMinus,
+  FiX,
 } from 'solid-icons/fi';
 import { useAdminProjectDetails } from '@primitives/useAdminQueries.js';
 import {
@@ -28,7 +29,18 @@ import {
   isAdminChecked,
   isAdmin,
 } from '@/stores/adminStore.js';
-import { Dialog, Avatar, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import { UserAvatar } from '@/components/ui/avatar';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import { handleError } from '@/lib/error-utils.js';
 import { AdminBox } from './ui/index.js';
 import { table } from './styles/admin-tokens.js';
@@ -319,7 +331,7 @@ export default function ProjectDetail() {
                         <tr class={table.row}>
                           <td class={table.cellCompact}>
                             <div class='flex items-center space-x-3'>
-                              <Avatar
+                              <UserAvatar
                                 src={member.userAvatar}
                                 name={member.userDisplayName || member.userName}
                                 class='h-8 w-8'
@@ -507,55 +519,64 @@ export default function ProjectDetail() {
         </Show>
 
         {/* Confirm Dialog */}
-        <Dialog
-          open={!!confirmDialog()}
-          onOpenChange={open => !open && setConfirmDialog(null)}
-          title={
-            confirmDialog()?.type === 'delete-project' ? 'Delete Project'
-            : confirmDialog()?.type === 'remove-member' ?
-              'Remove Member'
-            : 'Confirm'
-          }
-          role='alertdialog'
-        >
-          <div class='space-y-4'>
-            <Show when={confirmDialog()?.type === 'delete-project'}>
-              <p class='text-sm text-gray-600'>
-                This will permanently delete the project and all associated data including files,
-                members, and invitations. This action cannot be undone.
-              </p>
-            </Show>
-            <Show when={confirmDialog()?.type === 'remove-member'}>
-              <p class='text-sm text-gray-600'>
-                Are you sure you want to remove{' '}
-                <strong>
-                  {confirmDialog()?.member?.userDisplayName ||
-                    confirmDialog()?.member?.userName ||
-                    confirmDialog()?.member?.userEmail}
-                </strong>{' '}
-                from this project?
-              </p>
-            </Show>
-            <div class='flex justify-end space-x-3'>
-              <button
-                onClick={() => setConfirmDialog(null)}
-                class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => {
-                  if (confirmDialog()?.type === 'delete-project') handleDeleteProject();
-                  else if (confirmDialog()?.type === 'remove-member')
-                    handleRemoveMember(confirmDialog().member.id);
-                }}
-                disabled={loading()}
-                class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50'
-              >
-                {loading() ? 'Processing...' : 'Confirm'}
-              </button>
-            </div>
-          </div>
+        <Dialog open={!!confirmDialog()} onOpenChange={open => !open && setConfirmDialog(null)}>
+          <DialogBackdrop />
+          <DialogPositioner>
+            <DialogContent class='max-w-md'>
+              <DialogHeader>
+                <DialogTitle>
+                  {confirmDialog()?.type === 'delete-project' ?
+                    'Delete Project'
+                  : confirmDialog()?.type === 'remove-member' ?
+                    'Remove Member'
+                  : 'Confirm'}
+                </DialogTitle>
+                <DialogCloseTrigger>
+                  <FiX class='h-5 w-5' />
+                </DialogCloseTrigger>
+              </DialogHeader>
+              <DialogBody>
+                <div class='space-y-4'>
+                  <Show when={confirmDialog()?.type === 'delete-project'}>
+                    <p class='text-sm text-gray-600'>
+                      This will permanently delete the project and all associated data including
+                      files, members, and invitations. This action cannot be undone.
+                    </p>
+                  </Show>
+                  <Show when={confirmDialog()?.type === 'remove-member'}>
+                    <p class='text-sm text-gray-600'>
+                      Are you sure you want to remove{' '}
+                      <strong>
+                        {confirmDialog()?.member?.userDisplayName ||
+                          confirmDialog()?.member?.userName ||
+                          confirmDialog()?.member?.userEmail}
+                      </strong>{' '}
+                      from this project?
+                    </p>
+                  </Show>
+                  <div class='flex justify-end space-x-3'>
+                    <button
+                      onClick={() => setConfirmDialog(null)}
+                      class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={() => {
+                        if (confirmDialog()?.type === 'delete-project') handleDeleteProject();
+                        else if (confirmDialog()?.type === 'remove-member')
+                          handleRemoveMember(confirmDialog().member.id);
+                      }}
+                      disabled={loading()}
+                      class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50'
+                    >
+                      {loading() ? 'Processing...' : 'Confirm'}
+                    </button>
+                  </div>
+                </div>
+              </DialogBody>
+            </DialogContent>
+          </DialogPositioner>
         </Dialog>
       </Show>
     </Show>
diff --git a/packages/web/src/components/admin/ProjectList.jsx b/packages/web/src/components/admin/ProjectList.jsx
index 410a97c9c..7d20dfd7e 100644
--- a/packages/web/src/components/admin/ProjectList.jsx
+++ b/packages/web/src/components/admin/ProjectList.jsx
@@ -19,7 +19,7 @@ import {
 } from 'solid-icons/fi';
 import { useAdminProjects, useAdminOrgs } from '@primitives/useAdminQueries.js';
 import { isAdminChecked, isAdmin } from '@/stores/adminStore.js';
-import { Select } from '@corates/ui';
+import { SimpleSelect } from '@/components/ui/select';
 import { DashboardHeader, AdminSection, AdminDataTable } from './ui/index.js';
 import { input } from './styles/admin-tokens.js';
 
@@ -213,9 +213,9 @@ export default function ProjectList() {
 
           {/* Org Filter */}
           <div class='w-full sm:w-64'>
-            <Select
+            <SimpleSelect
               value={selectedOrgId()}
-              onValueChange={value => handleOrgFilter(value)}
+              onChange={value => handleOrgFilter(value)}
               placeholder='All Organizations'
               items={[
                 { value: '', label: 'All Organizations' },
diff --git a/packages/web/src/components/admin/StorageManagement.jsx b/packages/web/src/components/admin/StorageManagement.jsx
index be249acdf..9b199d282 100644
--- a/packages/web/src/components/admin/StorageManagement.jsx
+++ b/packages/web/src/components/admin/StorageManagement.jsx
@@ -13,10 +13,21 @@ import {
   FiCheckSquare,
   FiSquare,
   FiLoader,
+  FiX,
 } from 'solid-icons/fi';
 import { deleteStorageDocuments } from '@/stores/adminStore.js';
 import { useStorageDocuments } from '@primitives/useAdminQueries.js';
-import { Dialog, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import { DashboardHeader, AdminSection, AdminBox } from './ui/index.js';
 import { input, table } from './styles/admin-tokens.js';
 
@@ -405,34 +416,42 @@ export default function StorageManagement() {
         </AdminBox>
       </AdminSection>
       {/* Delete Confirmation Dialog */}
-      <Dialog
-        open={!!deleteDialog()}
-        onOpenChange={open => !open && setDeleteDialog(null)}
-        title='Delete Documents'
-        role='alertdialog'
-      >
-        <div class='space-y-4'>
-          <p class='text-sm text-gray-600'>
-            Are you sure you want to delete {deleteDialog()?.length || 0} document
-            {deleteDialog()?.length === 1 ? '' : 's'}? This action cannot be undone.
-          </p>
-          <div class='flex justify-end space-x-3'>
-            <button
-              onClick={() => setDeleteDialog(null)}
-              disabled={loading()}
-              class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 disabled:opacity-50'
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleDelete}
-              disabled={loading()}
-              class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
-            >
-              {loading() ? 'Deleting...' : 'Delete'}
-            </button>
-          </div>
-        </div>
+      <Dialog open={!!deleteDialog()} onOpenChange={open => !open && setDeleteDialog(null)}>
+        <DialogBackdrop />
+        <DialogPositioner>
+          <DialogContent class='max-w-md'>
+            <DialogHeader>
+              <DialogTitle>Delete Documents</DialogTitle>
+              <DialogCloseTrigger aria-label='Close'>
+                <FiX class='h-5 w-5' />
+              </DialogCloseTrigger>
+            </DialogHeader>
+            <DialogBody>
+              <div class='space-y-4'>
+                <p class='text-sm text-gray-600'>
+                  Are you sure you want to delete {deleteDialog()?.length || 0} document
+                  {deleteDialog()?.length === 1 ? '' : 's'}? This action cannot be undone.
+                </p>
+                <div class='flex justify-end space-x-3'>
+                  <button
+                    onClick={() => setDeleteDialog(null)}
+                    disabled={loading()}
+                    class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 disabled:opacity-50'
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    disabled={loading()}
+                    class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
+                  >
+                    {loading() ? 'Deleting...' : 'Delete'}
+                  </button>
+                </div>
+              </div>
+            </DialogBody>
+          </DialogContent>
+        </DialogPositioner>
       </Dialog>
     </>
   );
diff --git a/packages/web/src/components/admin/SubscriptionDialog.jsx b/packages/web/src/components/admin/SubscriptionDialog.jsx
index e259adce4..2b49ffa2c 100644
--- a/packages/web/src/components/admin/SubscriptionDialog.jsx
+++ b/packages/web/src/components/admin/SubscriptionDialog.jsx
@@ -3,7 +3,17 @@
  * Dialog for creating and editing subscriptions
  */
 
-import { Dialog } from '@corates/ui';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
+import { FiX } from 'solid-icons/fi';
 
 /**
  * Subscription Dialog component
@@ -63,138 +73,155 @@ export default function SubscriptionDialog(props) {
   };
 
   return (
-    <Dialog
-      open={open()}
-      onOpenChange={props.onOpenChange}
-      title={isEdit() ? 'Edit Subscription' : 'Create Subscription'}
-    >
-      <div class='space-y-4'>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Plan</label>
-          <select
-            value={plan()}
-            onInput={e => props.onPlanChange?.(e.target.value)}
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          >
-            <option value='starter_team'>Starter Team</option>
-            <option value='team'>Team</option>
-            <option value='unlimited_team'>Unlimited Team</option>
-          </select>
-        </div>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Status</label>
-          <select
-            value={status()}
-            onInput={e => props.onStatusChange?.(e.target.value)}
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          >
-            <option value='active'>Active</option>
-            <option value='trialing'>Trialing</option>
-            <option value='past_due'>Past Due</option>
-            <option value='paused'>Paused</option>
-            <option value='canceled'>Canceled</option>
-            <option value='unpaid'>Unpaid</option>
-            <option value='incomplete'>Incomplete</option>
-          </select>
-        </div>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>
-            Period Start (optional)
-          </label>
-          <input
-            type='datetime-local'
-            value={periodStart()}
-            onInput={e => props.onPeriodStartChange?.(e.target.value)}
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          />
-        </div>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Period End (optional)</label>
-          <input
-            type='datetime-local'
-            value={periodEnd()}
-            onInput={e => props.onPeriodEndChange?.(e.target.value)}
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          />
-        </div>
-        <div class='flex items-center space-x-2'>
-          <input
-            type='checkbox'
-            id='cancelAtPeriodEnd'
-            checked={cancelAtPeriodEnd()}
-            onInput={e => props.onCancelAtPeriodEndChange?.(e.target.checked)}
-            class='h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500'
-          />
-          <label for='cancelAtPeriodEnd' class='text-sm font-medium text-gray-700'>
-            Cancel at period end
-          </label>
-        </div>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Canceled At (optional)</label>
-          <input
-            type='datetime-local'
-            value={canceledAt() ? formatDateInput(canceledAt()) : ''}
-            onInput={e =>
-              props.onCanceledAtChange?.(e.target.value ? new Date(e.target.value) : null)
-            }
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          />
-        </div>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Ended At (optional)</label>
-          <input
-            type='datetime-local'
-            value={endedAt() ? formatDateInput(endedAt()) : ''}
-            onInput={e => props.onEndedAtChange?.(e.target.value ? new Date(e.target.value) : null)}
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          />
-        </div>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>
-            Stripe Customer ID (optional)
-          </label>
-          <input
-            type='text'
-            value={stripeCustomerId()}
-            onInput={e => props.onStripeCustomerIdChange?.(e.target.value)}
-            placeholder='cus_...'
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          />
-        </div>
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>
-            Stripe Subscription ID (optional)
-          </label>
-          <input
-            type='text'
-            value={stripeSubscriptionId()}
-            onInput={e => props.onStripeSubscriptionIdChange?.(e.target.value)}
-            placeholder='sub_...'
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
-          />
-        </div>
-        <div class='flex justify-end space-x-3'>
-          <button
-            onClick={() => props.onOpenChange?.(false)}
-            class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
-          >
-            Cancel
-          </button>
-          <button
-            onClick={() => props.onSubmit?.()}
-            disabled={loading()}
-            class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
-          >
-            {loading() ?
-              isEdit() ?
-                'Updating...'
-              : 'Creating...'
-            : isEdit() ?
-              'Update'
-            : 'Create'}
-          </button>
-        </div>
-      </div>
+    <Dialog open={open()} onOpenChange={props.onOpenChange}>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent class='max-w-lg'>
+          <DialogHeader>
+            <DialogTitle>{isEdit() ? 'Edit Subscription' : 'Create Subscription'}</DialogTitle>
+            <DialogCloseTrigger>
+              <FiX class='h-5 w-5' />
+            </DialogCloseTrigger>
+          </DialogHeader>
+          <DialogBody>
+            <div class='space-y-4'>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>Plan</label>
+                <select
+                  value={plan()}
+                  onInput={e => props.onPlanChange?.(e.target.value)}
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                >
+                  <option value='starter_team'>Starter Team</option>
+                  <option value='team'>Team</option>
+                  <option value='unlimited_team'>Unlimited Team</option>
+                </select>
+              </div>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>Status</label>
+                <select
+                  value={status()}
+                  onInput={e => props.onStatusChange?.(e.target.value)}
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                >
+                  <option value='active'>Active</option>
+                  <option value='trialing'>Trialing</option>
+                  <option value='past_due'>Past Due</option>
+                  <option value='paused'>Paused</option>
+                  <option value='canceled'>Canceled</option>
+                  <option value='unpaid'>Unpaid</option>
+                  <option value='incomplete'>Incomplete</option>
+                </select>
+              </div>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>
+                  Period Start (optional)
+                </label>
+                <input
+                  type='datetime-local'
+                  value={periodStart()}
+                  onInput={e => props.onPeriodStartChange?.(e.target.value)}
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                />
+              </div>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>
+                  Period End (optional)
+                </label>
+                <input
+                  type='datetime-local'
+                  value={periodEnd()}
+                  onInput={e => props.onPeriodEndChange?.(e.target.value)}
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                />
+              </div>
+              <div class='flex items-center space-x-2'>
+                <input
+                  type='checkbox'
+                  id='cancelAtPeriodEnd'
+                  checked={cancelAtPeriodEnd()}
+                  onInput={e => props.onCancelAtPeriodEndChange?.(e.target.checked)}
+                  class='h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500'
+                />
+                <label for='cancelAtPeriodEnd' class='text-sm font-medium text-gray-700'>
+                  Cancel at period end
+                </label>
+              </div>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>
+                  Canceled At (optional)
+                </label>
+                <input
+                  type='datetime-local'
+                  value={canceledAt() ? formatDateInput(canceledAt()) : ''}
+                  onInput={e =>
+                    props.onCanceledAtChange?.(e.target.value ? new Date(e.target.value) : null)
+                  }
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                />
+              </div>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>
+                  Ended At (optional)
+                </label>
+                <input
+                  type='datetime-local'
+                  value={endedAt() ? formatDateInput(endedAt()) : ''}
+                  onInput={e =>
+                    props.onEndedAtChange?.(e.target.value ? new Date(e.target.value) : null)
+                  }
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                />
+              </div>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>
+                  Stripe Customer ID (optional)
+                </label>
+                <input
+                  type='text'
+                  value={stripeCustomerId()}
+                  onInput={e => props.onStripeCustomerIdChange?.(e.target.value)}
+                  placeholder='cus_...'
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                />
+              </div>
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>
+                  Stripe Subscription ID (optional)
+                </label>
+                <input
+                  type='text'
+                  value={stripeSubscriptionId()}
+                  onInput={e => props.onStripeSubscriptionIdChange?.(e.target.value)}
+                  placeholder='sub_...'
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                />
+              </div>
+              <div class='flex justify-end space-x-3 border-t border-gray-200 pt-4'>
+                <button
+                  onClick={() => props.onOpenChange?.(false)}
+                  class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => props.onSubmit?.()}
+                  disabled={loading()}
+                  class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
+                >
+                  {loading() ?
+                    isEdit() ?
+                      'Updating...'
+                    : 'Creating...'
+                  : isEdit() ?
+                    'Update'
+                  : 'Create'}
+                </button>
+              </div>
+            </div>
+          </DialogBody>
+        </DialogContent>
+      </DialogPositioner>
     </Dialog>
   );
 }
diff --git a/packages/web/src/components/admin/SubscriptionList.jsx b/packages/web/src/components/admin/SubscriptionList.jsx
index 1ca0da154..d82483602 100644
--- a/packages/web/src/components/admin/SubscriptionList.jsx
+++ b/packages/web/src/components/admin/SubscriptionList.jsx
@@ -6,7 +6,7 @@
 import { Show, For } from 'solid-js';
 import { FiLoader, FiTrash2, FiEdit, FiCopy, FiCheck } from 'solid-icons/fi';
 import { createSignal } from 'solid-js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 
 /**
  * Subscription List component for admin dashboard
diff --git a/packages/web/src/components/admin/UserDetail.jsx b/packages/web/src/components/admin/UserDetail.jsx
index beaf3d7ed..0d4f67940 100644
--- a/packages/web/src/components/admin/UserDetail.jsx
+++ b/packages/web/src/components/admin/UserDetail.jsx
@@ -24,6 +24,7 @@ import {
   FiCheckCircle,
   FiCopy,
   FiExternalLink,
+  FiX,
 } from 'solid-icons/fi';
 import { useAdminUserDetails } from '@primitives/useAdminQueries.js';
 import {
@@ -36,7 +37,18 @@ import {
   isAdminChecked,
   isAdmin,
 } from '@/stores/adminStore.js';
-import { Dialog, Avatar, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import { UserAvatar } from '@/components/ui/avatar';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import { handleError } from '@/lib/error-utils.js';
 import { AdminBox } from './ui/index.js';
 import { table } from './styles/admin-tokens.js';
@@ -255,10 +267,10 @@ export default function UserDetail() {
           {/* Header */}
           <div class='mb-8 flex items-start justify-between'>
             <div class='flex items-center space-x-4'>
-              <Avatar
+              <UserAvatar
                 src={userData().user.avatarUrl || userData().user.image}
                 name={userData().user.displayName || userData().user.name}
-                class='h-16 w-16'
+                class='h-16 w-16 text-xl'
               />
               <div>
                 <h1 class='text-2xl font-bold text-gray-900'>
@@ -631,77 +643,101 @@ export default function UserDetail() {
         </Show>
 
         {/* Ban Dialog */}
-        <Dialog open={banDialog()} onOpenChange={setBanDialog} title='Ban User'>
-          <div class='space-y-4'>
-            <p class='text-sm text-gray-600'>
-              This will ban the user and revoke all their sessions.
-            </p>
-            <div>
-              <label class='mb-1 block text-sm font-medium text-gray-700'>Ban Reason</label>
-              <textarea
-                value={banReason()}
-                onInput={e => setBanReason(e.target.value)}
-                placeholder='Enter reason for ban...'
-                class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:outline-none'
-                rows={3}
-              />
-            </div>
-            <div class='flex justify-end space-x-3'>
-              <button
-                onClick={() => setBanDialog(false)}
-                class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleBan}
-                disabled={loading()}
-                class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50'
-              >
-                {loading() ? 'Banning...' : 'Ban User'}
-              </button>
-            </div>
-          </div>
+        <Dialog open={banDialog()} onOpenChange={setBanDialog}>
+          <DialogBackdrop />
+          <DialogPositioner>
+            <DialogContent class='max-w-md'>
+              <DialogHeader>
+                <DialogTitle>Ban User</DialogTitle>
+                <DialogCloseTrigger>
+                  <FiX class='h-5 w-5' />
+                </DialogCloseTrigger>
+              </DialogHeader>
+              <DialogBody>
+                <div class='space-y-4'>
+                  <p class='text-sm text-gray-600'>
+                    This will ban the user and revoke all their sessions.
+                  </p>
+                  <div>
+                    <label class='mb-1 block text-sm font-medium text-gray-700'>Ban Reason</label>
+                    <textarea
+                      value={banReason()}
+                      onInput={e => setBanReason(e.target.value)}
+                      placeholder='Enter reason for ban...'
+                      class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:outline-none'
+                      rows={3}
+                    />
+                  </div>
+                  <div class='flex justify-end space-x-3'>
+                    <button
+                      onClick={() => setBanDialog(false)}
+                      class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleBan}
+                      disabled={loading()}
+                      class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50'
+                    >
+                      {loading() ? 'Banning...' : 'Ban User'}
+                    </button>
+                  </div>
+                </div>
+              </DialogBody>
+            </DialogContent>
+          </DialogPositioner>
         </Dialog>
 
         {/* Confirm Dialog */}
-        <Dialog
-          open={!!confirmDialog()}
-          onOpenChange={open => !open && setConfirmDialog(null)}
-          title={confirmDialog()?.type === 'delete' ? 'Delete User' : 'Revoke All Sessions'}
-          role='alertdialog'
-        >
-          <div class='space-y-4'>
-            <Show when={confirmDialog()?.type === 'delete'}>
-              <p class='text-sm text-gray-600'>
-                This will permanently delete the user and all their data. This action cannot be
-                undone.
-              </p>
-            </Show>
-            <Show when={confirmDialog()?.type === 'revoke-all'}>
-              <p class='text-sm text-gray-600'>
-                This will revoke all active sessions for this user. They will need to sign in again.
-              </p>
-            </Show>
-            <div class='flex justify-end space-x-3'>
-              <button
-                onClick={() => setConfirmDialog(null)}
-                class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => {
-                  if (confirmDialog()?.type === 'delete') handleDeleteUser();
-                  else if (confirmDialog()?.type === 'revoke-all') handleRevokeAllSessions();
-                }}
-                disabled={loading()}
-                class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50'
-              >
-                {loading() ? 'Processing...' : 'Confirm'}
-              </button>
-            </div>
-          </div>
+        <Dialog open={!!confirmDialog()} onOpenChange={open => !open && setConfirmDialog(null)}>
+          <DialogBackdrop />
+          <DialogPositioner>
+            <DialogContent class='max-w-md'>
+              <DialogHeader>
+                <DialogTitle>
+                  {confirmDialog()?.type === 'delete' ? 'Delete User' : 'Revoke All Sessions'}
+                </DialogTitle>
+                <DialogCloseTrigger>
+                  <FiX class='h-5 w-5' />
+                </DialogCloseTrigger>
+              </DialogHeader>
+              <DialogBody>
+                <div class='space-y-4'>
+                  <Show when={confirmDialog()?.type === 'delete'}>
+                    <p class='text-sm text-gray-600'>
+                      This will permanently delete the user and all their data. This action cannot
+                      be undone.
+                    </p>
+                  </Show>
+                  <Show when={confirmDialog()?.type === 'revoke-all'}>
+                    <p class='text-sm text-gray-600'>
+                      This will revoke all active sessions for this user. They will need to sign in
+                      again.
+                    </p>
+                  </Show>
+                  <div class='flex justify-end space-x-3'>
+                    <button
+                      onClick={() => setConfirmDialog(null)}
+                      class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200'
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={() => {
+                        if (confirmDialog()?.type === 'delete') handleDeleteUser();
+                        else if (confirmDialog()?.type === 'revoke-all') handleRevokeAllSessions();
+                      }}
+                      disabled={loading()}
+                      class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50'
+                    >
+                      {loading() ? 'Processing...' : 'Confirm'}
+                    </button>
+                  </div>
+                </div>
+              </DialogBody>
+            </DialogContent>
+          </DialogPositioner>
         </Dialog>
       </Show>
     </Show>
diff --git a/packages/web/src/components/admin/UserTable.jsx b/packages/web/src/components/admin/UserTable.jsx
index 6217bbe91..b7b420c4f 100644
--- a/packages/web/src/components/admin/UserTable.jsx
+++ b/packages/web/src/components/admin/UserTable.jsx
@@ -6,7 +6,13 @@
 import { Show, For } from 'solid-js';
 import { A, useNavigate } from '@solidjs/router';
 import { FiCheckCircle, FiMail } from 'solid-icons/fi';
-import { Avatar, Tooltip } from '@corates/ui';
+import { UserAvatar } from '@/components/ui/avatar';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 import { AdminDataTable } from './ui/index.js';
 import { getStatusBadgeClass } from './styles/admin-tokens.js';
 
@@ -46,7 +52,7 @@ export default function UserTable(props) {
         const user = info.row.original;
         return (
           <div class='flex items-center space-x-3'>
-            <Avatar
+            <UserAvatar
               src={user.avatarUrl || user.image}
               name={user.displayName || user.name}
               class='h-8 w-8'
@@ -93,20 +99,25 @@ export default function UserTable(props) {
               {provider => {
                 const providerInfo = PROVIDER_INFO[provider];
                 return (
-                  <Tooltip content={providerInfo?.name || provider}>
-                    <div class='flex h-5 w-5 items-center justify-center'>
-                      <Show
-                        when={providerInfo?.icon}
-                        fallback={<FiMail class='h-4 w-4 text-gray-500' />}
-                      >
-                        <img
-                          src={providerInfo?.icon}
-                          alt={providerInfo?.name || provider}
-                          title={providerInfo?.name || provider}
-                          class='h-4 w-4'
-                        />
-                      </Show>
-                    </div>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <div class='flex h-5 w-5 items-center justify-center'>
+                        <Show
+                          when={providerInfo?.icon}
+                          fallback={<FiMail class='h-4 w-4 text-gray-500' />}
+                        >
+                          <img
+                            src={providerInfo?.icon}
+                            alt={providerInfo?.name || provider}
+                            title={providerInfo?.name || provider}
+                            class='h-4 w-4'
+                          />
+                        </Show>
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipPositioner>
+                      <TooltipContent>{providerInfo?.name || provider}</TooltipContent>
+                    </TooltipPositioner>
                   </Tooltip>
                 );
               }}
diff --git a/packages/web/src/components/admin/billing-observability/AdminBillingLedgerPage.jsx b/packages/web/src/components/admin/billing-observability/AdminBillingLedgerPage.jsx
index ba0f63223..de08f3c7f 100644
--- a/packages/web/src/components/admin/billing-observability/AdminBillingLedgerPage.jsx
+++ b/packages/web/src/components/admin/billing-observability/AdminBillingLedgerPage.jsx
@@ -9,7 +9,7 @@ import { A } from '@solidjs/router';
 import { FiLoader, FiAlertCircle, FiCopy, FiCheck, FiExternalLink, FiFilter } from 'solid-icons/fi';
 import { isAdmin, isAdminChecked } from '@/stores/adminStore.js';
 import { useAdminBillingLedger } from '@primitives/useAdminQueries.js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import { DashboardHeader, AdminBox, AdminDataTable } from '../ui/index.js';
 import { input } from '../styles/admin-tokens.js';
 
diff --git a/packages/web/src/components/admin/billing-observability/StripeToolsPage.jsx b/packages/web/src/components/admin/billing-observability/StripeToolsPage.jsx
index c9279117b..91b460e67 100644
--- a/packages/web/src/components/admin/billing-observability/StripeToolsPage.jsx
+++ b/packages/web/src/components/admin/billing-observability/StripeToolsPage.jsx
@@ -20,7 +20,7 @@ import {
 } from 'solid-icons/fi';
 import { isAdminChecked, isAdmin } from '@/stores/adminStore.js';
 import { apiFetch } from '@/lib/apiFetch.js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import { handleError } from '@/lib/error-utils.js';
 import { DashboardHeader, AdminBox } from '../ui/index.js';
 import { input } from '../styles/admin-tokens.js';
diff --git a/packages/web/src/components/auth/CompleteProfile.jsx b/packages/web/src/components/auth/CompleteProfile.jsx
index 548a2e7a4..3e2de972e 100644
--- a/packages/web/src/components/auth/CompleteProfile.jsx
+++ b/packages/web/src/components/auth/CompleteProfile.jsx
@@ -1,24 +1,75 @@
-import { createSignal, createEffect, onMount, Show } from 'solid-js';
+import { createSignal, createEffect, onMount, Show, For, createMemo } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
+import {
+  Steps,
+  StepsList,
+  StepsItem,
+  StepsTrigger,
+  StepsIndicator,
+  StepsSeparator,
+  StepsContent,
+  StepsPrevTrigger,
+  StepsCompletedContent,
+} from '@/components/ui/steps';
+import {
+  Select,
+  SelectControl,
+  SelectTrigger,
+  SelectValueText,
+  SelectIndicator,
+  SelectPositioner,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectItemIndicator,
+  createListCollection,
+} from '@/components/ui/select';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import ErrorMessage from './ErrorMessage.jsx';
 import { PrimaryButton } from './AuthButtons.jsx';
-import RoleSelector from './RoleSelector.jsx';
-import StepIndicator from './StepIndicator.jsx';
-import { FiChevronLeft } from 'solid-icons/fi';
+import RoleSelector, { TITLE_OPTIONS } from './RoleSelector.jsx';
+import { FiCheck } from 'solid-icons/fi';
 import { handleError } from '@/lib/error-utils.js';
 import { apiFetch } from '@lib/apiFetch.js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+
+const STEPS = [
+  { title: 'Your Name', description: 'Basic information' },
+  { title: 'Institution', description: 'Academic details' },
+  { title: 'Role', description: 'Your background' },
+];
 
 /**
  * Complete Profile page - shown after email verification or OAuth signup
- * Step 1: first name, last name (required)
- * Step 2: persona selection (optional, can skip)
+ * Step 1: first name, last name, title (required: name)
+ * Step 2: institution, department (optional, can skip)
+ * Step 3: persona selection (optional, can skip)
  */
+const titleCollection = createListCollection({
+  items: TITLE_OPTIONS,
+  itemToString: item => item.label,
+  itemToValue: item => item.value,
+});
+
 export default function CompleteProfile() {
-  const [step, setStep] = createSignal(1);
+  const [currentStep, setCurrentStep] = createSignal(0);
   const [firstName, setFirstName] = createSignal('');
   const [lastName, setLastName] = createSignal('');
+  const [titleSelection, setTitleSelection] = createSignal([]);
+  const [customTitle, setCustomTitle] = createSignal('');
+  const [institution, setInstitution] = createSignal('');
+  const [department, setDepartment] = createSignal('');
+
+  // Compute the actual title value (either selected or custom)
+  const title = createMemo(() => {
+    const selected = titleSelection()[0];
+    if (selected === 'other') {
+      return customTitle().trim();
+    }
+    return selected || '';
+  });
+
+  const isCustomTitle = createMemo(() => titleSelection()[0] === 'other');
   const [hasEditedName, setHasEditedName] = createSignal(false);
   const [hasAutofilledName, setHasAutofilledName] = createSignal(false);
   const [persona, setPersona] = createSignal('');
@@ -95,24 +146,40 @@ export default function CompleteProfile() {
   });
 
   // Validate step 1 and proceed to step 2
-  function handleNextStep(e) {
-    e.preventDefault();
+  function validateStep1() {
     setError('');
-
     if (!firstName().trim() || !lastName().trim()) {
       setError('Please enter your first and last name');
-      return;
+      return false;
+    }
+    return true;
+  }
+
+  function handleStep1Next(e) {
+    e.preventDefault();
+    if (validateStep1()) {
+      setCurrentStep(1);
     }
+  }
 
-    setStep(2);
+  function handleStep2Next(e) {
+    e.preventDefault();
+    setError('');
+    setCurrentStep(2);
   }
 
-  function handleBack() {
-    setStep(1);
+  function handleStepChange(details) {
+    // When going forward from step 1, validate
+    if (details.step > currentStep() && currentStep() === 0) {
+      if (!validateStep1()) {
+        return;
+      }
+    }
     setError('');
+    setCurrentStep(details.step);
   }
 
-  // Final submit - save profile (role is optional)
+  // Final submit - save profile (persona is optional)
   async function handleSubmit(selectedPersona = persona()) {
     setLoading(true);
     setError('');
@@ -125,9 +192,11 @@ export default function CompleteProfile() {
 
       await updateProfile({
         name: fullName,
-        // persona is optional, but we store a default when skipped
         persona: selectedPersona || 'other',
         profileCompletedAt: Math.floor(Date.now() / 1000),
+        title: title() || null,
+        institution: institution().trim() || null,
+        department: department().trim() || null,
       });
 
       // Clear the signup flags
@@ -210,113 +279,272 @@ export default function CompleteProfile() {
             <img src='/logo.svg' alt='CoRATES' class='h-6 w-auto sm:h-7' />
           </a>
 
-          <StepIndicator currentStep={step()} totalSteps={2} />
+          <Steps count={STEPS.length} step={currentStep()} onStepChange={handleStepChange} linear>
+            {/* Step Indicator */}
+            <StepsList class='mb-6 flex items-center justify-center pt-4'>
+              <For each={STEPS}>
+                {(stepInfo, index) => (
+                  <StepsItem index={index()} class='flex items-center'>
+                    <StepsTrigger
+                      class='group flex flex-col items-center focus:outline-none'
+                      disabled={index() > currentStep() + 1}
+                    >
+                      <StepsIndicator class='flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition-colors data-complete:bg-blue-600 data-complete:text-white data-current:bg-blue-600 data-current:text-white data-incomplete:bg-gray-200 data-incomplete:text-gray-500 group-hover:data-incomplete:bg-gray-300'>
+                        <Show when={index() < currentStep()} fallback={index() + 1}>
+                          <FiCheck class='h-4 w-4' />
+                        </Show>
+                      </StepsIndicator>
+                      <span class='mt-1 hidden text-xs text-gray-500 sm:block'>
+                        {stepInfo.title}
+                      </span>
+                    </StepsTrigger>
+                    <Show when={index() < STEPS.length - 1}>
+                      <StepsSeparator class='mx-2 h-0.5 w-8 transition-colors data-complete:bg-blue-600 data-current:bg-gray-200 data-incomplete:bg-gray-200 sm:w-12' />
+                    </Show>
+                  </StepsItem>
+                )}
+              </For>
+            </StepsList>
+
+            {/* Step 1: Name and Title */}
+            <StepsContent index={0}>
+              <div class='mb-5 text-center'>
+                <h2 class='mb-1 text-xl font-bold text-gray-900 sm:text-2xl'>
+                  Complete Your Profile
+                </h2>
+                <p class='text-xs text-gray-500 sm:text-sm'>
+                  Just a few details to get you started
+                </p>
+              </div>
+
+              <form onSubmit={handleStep1Next} class='space-y-4' autocomplete='off'>
+                {/* Name fields - side by side */}
+                <div class='grid grid-cols-2 gap-3'>
+                  <div>
+                    <label
+                      class='mb-1 block text-xs font-semibold text-gray-700 sm:text-sm'
+                      for='first-name-input'
+                    >
+                      First Name
+                    </label>
+                    <input
+                      type='text'
+                      autoComplete='given-name'
+                      autocapitalize='words'
+                      spellcheck='false'
+                      value={firstName()}
+                      onInput={e => {
+                        setHasEditedName(true);
+                        setFirstName(e.target.value);
+                      }}
+                      class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                      required
+                      id='first-name-input'
+                      placeholder='First'
+                    />
+                  </div>
+                  <div>
+                    <label
+                      class='mb-1 block text-xs font-semibold text-gray-700 sm:text-sm'
+                      for='last-name-input'
+                    >
+                      Last Name
+                    </label>
+                    <input
+                      type='text'
+                      autoComplete='family-name'
+                      autocapitalize='words'
+                      spellcheck='false'
+                      value={lastName()}
+                      onInput={e => {
+                        setHasEditedName(true);
+                        setLastName(e.target.value);
+                      }}
+                      class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                      required
+                      id='last-name-input'
+                      placeholder='Last'
+                    />
+                  </div>
+                </div>
+
+                {/* Title dropdown */}
+                <div class='space-y-2'>
+                  <label class='mb-1 block text-xs font-semibold text-gray-700 sm:text-sm'>
+                    Title
+                  </label>
+                  <Select
+                    collection={titleCollection}
+                    value={titleSelection()}
+                    onValueChange={details => setTitleSelection(details.value)}
+                  >
+                    <SelectControl>
+                      <SelectTrigger class='w-full'>
+                        <SelectValueText placeholder='Select a title (optional)' />
+                        <SelectIndicator />
+                      </SelectTrigger>
+                    </SelectControl>
+                    <SelectPositioner>
+                      <SelectContent>
+                        <For each={TITLE_OPTIONS}>
+                          {option => (
+                            <SelectItem item={option}>
+                              <SelectItemText>{option.label}</SelectItemText>
+                              <SelectItemIndicator />
+                            </SelectItem>
+                          )}
+                        </For>
+                      </SelectContent>
+                    </SelectPositioner>
+                  </Select>
+                  <Show when={isCustomTitle()}>
+                    <input
+                      type='text'
+                      value={customTitle()}
+                      onInput={e => setCustomTitle(e.target.value)}
+                      class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                      placeholder='Enter your title'
+                      maxLength={50}
+                    />
+                  </Show>
+                </div>
 
-          {/* Step 1: Name */}
-          <Show when={step() === 1}>
-            <div class='mb-5 text-center'>
-              <h2 class='mb-1 text-xl font-bold text-gray-900 sm:text-2xl'>
-                Complete Your Profile
-              </h2>
-              <p class='text-xs text-gray-500 sm:text-sm'>Just a few details to get you started</p>
-            </div>
+                <ErrorMessage displayError={displayError} />
+
+                <PrimaryButton loading={false}>Next</PrimaryButton>
+              </form>
+            </StepsContent>
+
+            {/* Step 2: Institution Details */}
+            <StepsContent index={1}>
+              <div class='mb-5 text-center'>
+                <h2 class='mb-1 text-xl font-bold text-gray-900 sm:text-2xl'>
+                  Institution Details
+                </h2>
+                <p class='text-xs text-gray-500 sm:text-sm'>
+                  Optional - helps us understand your background
+                </p>
+              </div>
 
-            <form onSubmit={handleNextStep} class='space-y-4' autocomplete='off'>
-              {/* Name fields - side by side */}
-              <div class='grid grid-cols-2 gap-3'>
+              <form onSubmit={handleStep2Next} class='space-y-4' autocomplete='off'>
+                {/* Institution */}
                 <div>
                   <label
                     class='mb-1 block text-xs font-semibold text-gray-700 sm:text-sm'
-                    for='first-name-input'
+                    for='institution-input'
                   >
-                    First Name
+                    University / Institution
                   </label>
                   <input
                     type='text'
-                    autoComplete='given-name'
-                    autocapitalize='words'
-                    spellcheck='false'
-                    value={firstName()}
-                    onInput={e => {
-                      setHasEditedName(true);
-                      setFirstName(e.target.value);
-                    }}
+                    id='institution-input'
+                    autoComplete='organization'
+                    value={institution()}
+                    onInput={e => setInstitution(e.target.value)}
                     class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                    required
-                    id='first-name-input'
-                    placeholder='First'
+                    placeholder='e.g., University of Oxford'
+                    maxLength={200}
                   />
                 </div>
+
+                {/* Department */}
                 <div>
                   <label
                     class='mb-1 block text-xs font-semibold text-gray-700 sm:text-sm'
-                    for='last-name-input'
+                    for='department-input'
                   >
-                    Last Name
+                    Department / Faculty
                   </label>
                   <input
                     type='text'
-                    autoComplete='family-name'
-                    autocapitalize='words'
-                    spellcheck='false'
-                    value={lastName()}
-                    onInput={e => {
-                      setHasEditedName(true);
-                      setLastName(e.target.value);
-                    }}
+                    id='department-input'
+                    value={department()}
+                    onInput={e => setDepartment(e.target.value)}
                     class='w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                    required
-                    id='last-name-input'
-                    placeholder='Last'
+                    placeholder='e.g., Department of Medicine'
+                    maxLength={200}
                   />
                 </div>
+
+                <ErrorMessage displayError={displayError} />
+
+                <div class='flex gap-3'>
+                  <StepsPrevTrigger
+                    type='button'
+                    class='flex-1 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                  >
+                    Back
+                  </StepsPrevTrigger>
+                  <button
+                    type='submit'
+                    class='flex-1 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                  >
+                    Next
+                  </button>
+                </div>
+
+                <button
+                  type='button'
+                  onClick={() => setCurrentStep(2)}
+                  class='w-full py-2 text-sm text-gray-500 transition hover:text-gray-700'
+                >
+                  Skip for now
+                </button>
+              </form>
+            </StepsContent>
+
+            {/* Step 3: Persona Selection */}
+            <StepsContent index={2}>
+              <div class='mb-5 text-center'>
+                <h2 class='mb-1 text-xl font-bold text-gray-900 sm:text-2xl'>
+                  What best describes you?
+                </h2>
+                <p class='text-xs text-gray-500 sm:text-sm'>This helps us tailor your experience</p>
               </div>
 
-              <ErrorMessage displayError={displayError} />
-
-              <PrimaryButton loading={false}>Next</PrimaryButton>
-            </form>
-          </Show>
-
-          {/* Step 2: Persona Selection */}
-          <Show when={step() === 2}>
-            <div class='mb-3'>
-              <button
-                type='button'
-                onClick={handleBack}
-                class='flex items-center text-sm text-gray-500 hover:text-gray-700'
-              >
-                <FiChevronLeft class='mr-1 h-4 w-4' />
-                Back
-              </button>
-            </div>
-
-            <div class='mb-5 text-center'>
-              <h2 class='mb-1 text-xl font-bold text-gray-900 sm:text-2xl'>
-                What best describes you?
-              </h2>
-              <p class='text-xs text-gray-500 sm:text-sm'>This helps us tailor your experience</p>
-            </div>
-
-            <form onSubmit={handleFinish} class='space-y-4'>
-              <RoleSelector selectedRole={persona()} onSelect={handleRoleSelect} />
-
-              <ErrorMessage displayError={displayError} />
-
-              <PrimaryButton loading={loading()} loadingText='Finishing...' disabled={!persona()}>
-                Finish Setup
-              </PrimaryButton>
-
-              <button
-                type='button'
-                onClick={handleSkip}
-                disabled={loading()}
-                class='w-full py-2 text-sm text-gray-500 transition hover:text-gray-700 disabled:opacity-50'
-              >
-                Skip for now
-              </button>
-            </form>
-          </Show>
+              <form onSubmit={handleFinish} class='space-y-4'>
+                <RoleSelector selectedRole={persona()} onSelect={handleRoleSelect} />
+
+                <ErrorMessage displayError={displayError} />
+
+                <div class='flex gap-3'>
+                  <StepsPrevTrigger
+                    type='button'
+                    class='flex-1 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                  >
+                    Back
+                  </StepsPrevTrigger>
+                  <PrimaryButton
+                    loading={loading()}
+                    loadingText='Finishing...'
+                    disabled={!persona()}
+                  >
+                    Finish Setup
+                  </PrimaryButton>
+                </div>
+
+                <button
+                  type='button'
+                  onClick={handleSkip}
+                  disabled={loading()}
+                  class='w-full py-2 text-sm text-gray-500 transition hover:text-gray-700 disabled:opacity-50'
+                >
+                  Skip for now
+                </button>
+              </form>
+            </StepsContent>
+
+            {/* Completed Content (shows after all steps) */}
+            <StepsCompletedContent>
+              <div class='flex flex-col items-center justify-center py-8'>
+                <div class='mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100'>
+                  <FiCheck class='h-8 w-8 text-green-600' />
+                </div>
+                <h2 class='mb-2 text-xl font-bold text-gray-900'>All Done!</h2>
+                <p class='text-sm text-gray-500'>Redirecting to your dashboard...</p>
+              </div>
+            </StepsCompletedContent>
+          </Steps>
         </div>
       </Show>
     </div>
diff --git a/packages/web/src/components/auth/ProtectedGuard.jsx b/packages/web/src/components/auth/ProtectedGuard.jsx
index a8e685df0..385ac58a7 100644
--- a/packages/web/src/components/auth/ProtectedGuard.jsx
+++ b/packages/web/src/components/auth/ProtectedGuard.jsx
@@ -1,7 +1,7 @@
 import { createEffect, Show } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 import { useBetterAuth } from '@api/better-auth-store.js';
-import { PageLoader } from '@corates/ui';
+import { PageLoader } from '@/components/ui/spinner';
 
 /**
  * ProtectedGuard - For authenticated pages (profile, settings, admin, etc.)
diff --git a/packages/web/src/components/auth/RoleSelector.jsx b/packages/web/src/components/auth/RoleSelector.jsx
index 483092a8a..1de134d92 100644
--- a/packages/web/src/components/auth/RoleSelector.jsx
+++ b/packages/web/src/components/auth/RoleSelector.jsx
@@ -1,6 +1,18 @@
 import { For } from 'solid-js';
 import { FiUser, FiBook, FiBookOpen, FiUsers } from 'solid-icons/fi';
 
+export const TITLE_OPTIONS = [
+  { value: '', label: 'None' },
+  { value: 'Dr.', label: 'Dr.' },
+  { value: 'Prof.', label: 'Prof.' },
+  { value: 'other', label: 'Other' },
+];
+
+export function getTitleLabel(titleValue) {
+  if (titleValue == null) return null;
+  return TITLE_OPTIONS.find(t => t.value === titleValue)?.label || titleValue;
+}
+
 export const ROLES = [
   {
     id: 'researcher',
diff --git a/packages/web/src/components/auth/SignIn.jsx b/packages/web/src/components/auth/SignIn.jsx
index 9f740f8cc..20582475b 100644
--- a/packages/web/src/components/auth/SignIn.jsx
+++ b/packages/web/src/components/auth/SignIn.jsx
@@ -1,7 +1,12 @@
 import { createSignal, onCleanup, onMount, Show } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 import { useBetterAuth } from '@api/better-auth-store.js';
-import { PasswordInput } from '@corates/ui';
+import {
+  PasswordInput,
+  PasswordInputControl,
+  PasswordInputField,
+  PasswordInputVisibilityTrigger,
+} from '@/components/ui/password-input';
 import ErrorMessage from './ErrorMessage.jsx';
 import { PrimaryButton, AuthLink } from './AuthButtons.jsx';
 import {
@@ -228,13 +233,16 @@ export default function SignIn() {
                 </div>
 
                 <div>
-                  <PasswordInput
-                    password={password()}
-                    onPasswordChange={setPassword}
-                    autoComplete='current-password'
-                    required
-                    disabled={loading()}
-                  />
+                  <PasswordInput autoComplete='current-password' disabled={loading()} required>
+                    <PasswordInputControl>
+                      <PasswordInputField
+                        value={password()}
+                        onInput={e => setPassword(e.target.value)}
+                        placeholder='Password'
+                      />
+                      <PasswordInputVisibilityTrigger />
+                    </PasswordInputControl>
+                  </PasswordInput>
                 </div>
 
                 <ErrorMessage displayError={displayError} />
diff --git a/packages/web/src/components/billing/PricingTable.jsx b/packages/web/src/components/billing/PricingTable.jsx
index 748013a16..e2e25e737 100644
--- a/packages/web/src/components/billing/PricingTable.jsx
+++ b/packages/web/src/components/billing/PricingTable.jsx
@@ -4,9 +4,17 @@
  */
 
 import { createSignal, For, Show, onMount } from 'solid-js';
-import { Portal } from 'solid-js/web';
 import { FiCheck, FiStar, FiZap, FiAlertCircle, FiArrowDown } from 'solid-icons/fi';
-import { showToast, DialogPrimitive as Dialog } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import {
   redirectToCheckout,
   redirectToSingleProjectCheckout,
@@ -357,120 +365,112 @@ export default function PricingTable(props) {
       </div>
 
       {/* Validation Error Dialog */}
-      <Dialog.Root
+      <Dialog
         open={validationError() !== null}
-        onOpenChange={details => {
-          if (!details.open) setValidationError(null);
+        onOpenChange={open => {
+          if (!open) setValidationError(null);
         }}
       >
-        <Portal>
-          <Dialog.Backdrop class='fixed inset-0 z-40 bg-black/50' />
-          <Dialog.Positioner class='fixed inset-0 z-50 flex items-center justify-center p-4'>
-            <Dialog.Content class='w-full max-w-md rounded-2xl bg-white p-6 shadow-xl'>
-              <div class='mb-4 flex items-start gap-3'>
-                <div class='flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-100'>
-                  <FiAlertCircle class='h-5 w-5 text-red-600' />
-                </div>
-                <div>
-                  <Dialog.Title class='text-lg font-semibold text-gray-900'>
-                    Cannot Change Plan
-                  </Dialog.Title>
-                  <Dialog.Description class='mt-1 text-sm text-gray-500'>
-                    Your current usage exceeds the limits of the selected plan.
-                  </Dialog.Description>
-                </div>
+        <DialogBackdrop />
+        <DialogPositioner>
+          <DialogContent class='max-w-md rounded-2xl p-6'>
+            <div class='mb-4 flex items-start gap-3'>
+              <div class='flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-100'>
+                <FiAlertCircle class='h-5 w-5 text-red-600' />
               </div>
+              <div>
+                <DialogTitle>Cannot Change Plan</DialogTitle>
+                <DialogDescription class='mt-1'>
+                  Your current usage exceeds the limits of the selected plan.
+                </DialogDescription>
+              </div>
+            </div>
 
-              <Show when={validationError()}>
-                <div class='mb-6 space-y-3'>
-                  <For each={validationError().violations}>
-                    {violation => (
-                      <div class='rounded-lg border border-red-200 bg-red-50 p-3'>
-                        <p class='text-sm font-medium text-red-800'>{violation.message}</p>
-                        <p class='mt-1 text-xs text-red-600'>
-                          Current: {violation.current} / Limit: {violation.limit}
-                        </p>
-                      </div>
-                    )}
-                  </For>
-                </div>
+            <Show when={validationError()}>
+              <div class='mb-6 space-y-3'>
+                <For each={validationError().violations}>
+                  {violation => (
+                    <div class='rounded-lg border border-red-200 bg-red-50 p-3'>
+                      <p class='text-sm font-medium text-red-800'>{violation.message}</p>
+                      <p class='mt-1 text-xs text-red-600'>
+                        Current: {violation.current} / Limit: {violation.limit}
+                      </p>
+                    </div>
+                  )}
+                </For>
+              </div>
 
-                <p class='mb-4 text-sm text-gray-600'>
-                  To switch to {validationError().targetPlan?.name}, you'll need to reduce your
-                  usage first.
-                </p>
-              </Show>
+              <p class='mb-4 text-sm text-gray-600'>
+                To switch to {validationError().targetPlan?.name}, you'll need to reduce your usage
+                first.
+              </p>
+            </Show>
 
-              <div class='flex justify-end'>
-                <Dialog.CloseTrigger class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'>
-                  Got it
-                </Dialog.CloseTrigger>
-              </div>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
+            <div class='flex justify-end'>
+              <DialogCloseTrigger class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'>
+                Got it
+              </DialogCloseTrigger>
+            </div>
+          </DialogContent>
+        </DialogPositioner>
+      </Dialog>
 
       {/* Downgrade Confirmation Dialog */}
-      <Dialog.Root
+      <Dialog
         open={pendingDowngrade() !== null}
-        onOpenChange={details => {
-          if (!details.open) setPendingDowngrade(null);
+        onOpenChange={open => {
+          if (!open) setPendingDowngrade(null);
         }}
       >
-        <Portal>
-          <Dialog.Backdrop class='fixed inset-0 z-40 bg-black/50' />
-          <Dialog.Positioner class='fixed inset-0 z-50 flex items-center justify-center p-4'>
-            <Dialog.Content class='w-full max-w-md rounded-2xl bg-white p-6 shadow-xl'>
-              <div class='mb-4 flex items-start gap-3'>
-                <div class='flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-100'>
-                  <FiArrowDown class='h-5 w-5 text-amber-600' />
-                </div>
-                <div>
-                  <Dialog.Title class='text-lg font-semibold text-gray-900'>
-                    Confirm Downgrade
-                  </Dialog.Title>
-                  <Dialog.Description class='mt-1 text-sm text-gray-500'>
-                    Are you sure you want to downgrade your plan?
-                  </Dialog.Description>
-                </div>
+        <DialogBackdrop />
+        <DialogPositioner>
+          <DialogContent class='max-w-md rounded-2xl p-6'>
+            <div class='mb-4 flex items-start gap-3'>
+              <div class='flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-100'>
+                <FiArrowDown class='h-5 w-5 text-amber-600' />
+              </div>
+              <div>
+                <DialogTitle>Confirm Downgrade</DialogTitle>
+                <DialogDescription class='mt-1'>
+                  Are you sure you want to downgrade your plan?
+                </DialogDescription>
               </div>
+            </div>
 
-              <Show when={pendingDowngrade()}>
-                <div class='mb-6 rounded-lg border border-amber-200 bg-amber-50 p-4'>
-                  <p class='text-sm text-amber-800'>
-                    You're switching from <span class='font-semibold'>{currentTier()}</span> to{' '}
-                    <span class='font-semibold'>{pendingDowngrade()?.name}</span>.
-                  </p>
-                  <p class='mt-2 text-sm text-amber-700'>
-                    Your new plan will take effect at the end of your current billing period. You'll
-                    keep access to your current features until then.
-                  </p>
-                </div>
-              </Show>
-
-              <div class='flex justify-end gap-3'>
-                <Dialog.CloseTrigger class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'>
-                  Cancel
-                </Dialog.CloseTrigger>
-                <button
-                  type='button'
-                  class='rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-amber-700'
-                  onClick={async () => {
-                    const plan = pendingDowngrade();
-                    setPendingDowngrade(null);
-                    if (plan) {
-                      await proceedWithPlanChange(plan);
-                    }
-                  }}
-                >
-                  Confirm Downgrade
-                </button>
+            <Show when={pendingDowngrade()}>
+              <div class='mb-6 rounded-lg border border-amber-200 bg-amber-50 p-4'>
+                <p class='text-sm text-amber-800'>
+                  You're switching from <span class='font-semibold'>{currentTier()}</span> to{' '}
+                  <span class='font-semibold'>{pendingDowngrade()?.name}</span>.
+                </p>
+                <p class='mt-2 text-sm text-amber-700'>
+                  Your new plan will take effect at the end of your current billing period. You'll
+                  keep access to your current features until then.
+                </p>
               </div>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
+            </Show>
+
+            <div class='flex justify-end gap-3'>
+              <DialogCloseTrigger class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'>
+                Cancel
+              </DialogCloseTrigger>
+              <button
+                type='button'
+                class='rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-amber-700'
+                onClick={async () => {
+                  const plan = pendingDowngrade();
+                  setPendingDowngrade(null);
+                  if (plan) {
+                    await proceedWithPlanChange(plan);
+                  }
+                }}
+              >
+                Confirm Downgrade
+              </button>
+            </div>
+          </DialogContent>
+        </DialogPositioner>
+      </Dialog>
     </div>
   );
 }
diff --git a/packages/web/src/components/billing/UsageCard.jsx b/packages/web/src/components/billing/UsageCard.jsx
index d29b7f742..95acc591f 100644
--- a/packages/web/src/components/billing/UsageCard.jsx
+++ b/packages/web/src/components/billing/UsageCard.jsx
@@ -4,7 +4,7 @@
  */
 
 import { Show, For } from 'solid-js';
-import { Progress } from '@corates/ui';
+import { Progress, ProgressTrack, ProgressRange } from '@/components/ui/progress';
 import { FiUsers, FiFolder, FiTrendingUp } from 'solid-icons/fi';
 
 /**
@@ -46,7 +46,18 @@ function UsageMetric(props) {
         </span>
       </div>
       <Show when={!isUnlimited()}>
-        <Progress value={percentage()} variant={variant()} />
+        <Progress value={percentage()}>
+          <ProgressTrack>
+            <ProgressRange
+              class={
+                variant() === 'error' ? 'bg-red-500'
+                : variant() === 'warning' ?
+                  'bg-amber-500'
+                : 'bg-blue-600'
+              }
+            />
+          </ProgressTrack>
+        </Progress>
       </Show>
       <Show when={isUnlimited()}>
         <div class='h-2 w-full rounded-full bg-linear-to-r from-green-100 to-green-200' />
diff --git a/packages/web/src/components/charts/ChartSettingsModal.jsx b/packages/web/src/components/charts/ChartSettingsModal.jsx
index 3734ffe6e..1c784d128 100644
--- a/packages/web/src/components/charts/ChartSettingsModal.jsx
+++ b/packages/web/src/components/charts/ChartSettingsModal.jsx
@@ -1,6 +1,6 @@
 import { Show, Index, createSignal } from 'solid-js';
 import { BiRegularX } from 'solid-icons/bi';
-import { Z_INDEX } from '@corates/ui';
+import { Z_INDEX } from '@/components/ui/z-index';
 
 /**
  * ChartSettingsModal - Modal for editing chart settings like labels
diff --git a/packages/web/src/components/checklist/AMSTAR2Checklist/AMSTAR2Checklist.jsx b/packages/web/src/components/checklist/AMSTAR2Checklist/AMSTAR2Checklist.jsx
index d0de57f3d..f78360a82 100644
--- a/packages/web/src/components/checklist/AMSTAR2Checklist/AMSTAR2Checklist.jsx
+++ b/packages/web/src/components/checklist/AMSTAR2Checklist/AMSTAR2Checklist.jsx
@@ -2,7 +2,12 @@ import { createSignal, createEffect, Show, For } from 'solid-js';
 import { AMSTAR_CHECKLIST } from './checklist-map.js';
 import { createChecklist as createAMSTAR2Checklist } from './checklist.js';
 import { FaSolidCircleInfo } from 'solid-icons/fa';
-import { Tooltip } from '@corates/ui';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 import NoteEditor from '@/components/checklist/common/NoteEditor.jsx';
 
 export function Question1(props) {
@@ -339,7 +344,10 @@ export function Question9(props) {
   let containerRef;
 
   return (
-    <div class='relative rounded-lg bg-white p-8 text-sm shadow-md' ref={el => (containerRef = el)}>
+    <div
+      class='relative rounded-lg bg-white p-7 pb-3 text-sm shadow-md'
+      ref={el => (containerRef = el)}
+    >
       <QuestionInfo question={question} containerRef={containerRef} />
       <div class='flex'>
         <h3 class='font-semibold text-gray-900'>{question.text}</h3>
@@ -466,7 +474,10 @@ export function Question11(props) {
   let containerRef;
 
   return (
-    <div class='relative rounded-lg bg-white p-8 text-sm shadow-md' ref={el => (containerRef = el)}>
+    <div
+      class='relative rounded-lg bg-white p-7 pb-3 text-sm shadow-md'
+      ref={el => (containerRef = el)}
+    >
       <QuestionInfo question={question} containerRef={containerRef} />
       <div class='flex'>
         <h3 class='font-semibold text-gray-900'>{question.text}</h3>
@@ -698,10 +709,15 @@ function QuestionInfo(props) {
   return (
     <>
       <div class='absolute top-1.5 right-1.5'>
-        <Tooltip content={props.question.info} placement='top' openDelay={200}>
-          <div class='inline-flex items-center justify-center rounded-full p-1.5 opacity-70 hover:opacity-100 focus:opacity-100 focus:ring-2 focus:ring-blue-500 focus:outline-none'>
-            <FaSolidCircleInfo size={12} />
-          </div>
+        <Tooltip openDelay={200} positioning={{ placement: 'top' }}>
+          <TooltipTrigger>
+            <div class='inline-flex items-center justify-center rounded-full p-1.5 opacity-70 hover:opacity-100 focus:opacity-100 focus:ring-2 focus:ring-blue-500 focus:outline-none'>
+              <FaSolidCircleInfo size={12} />
+            </div>
+          </TooltipTrigger>
+          <TooltipPositioner>
+            <TooltipContent>{props.question.info}</TooltipContent>
+          </TooltipPositioner>
         </Tooltip>
       </div>
     </>
diff --git a/packages/web/src/components/checklist/ChecklistYjsWrapper.jsx b/packages/web/src/components/checklist/ChecklistYjsWrapper.jsx
index dccb0a539..41cc901a0 100644
--- a/packages/web/src/components/checklist/ChecklistYjsWrapper.jsx
+++ b/packages/web/src/components/checklist/ChecklistYjsWrapper.jsx
@@ -14,7 +14,20 @@ import { CHECKLIST_STATUS, isEditable } from '@/constants/checklist-status.js';
 import { getNextStatusForCompletion } from '@/lib/checklist-domain.js';
 import { downloadPdf, uploadPdf, deletePdf, getPdfUrl } from '@api/pdf-api.js';
 import { getCachedPdf, cachePdf } from '@primitives/pdfCache.js';
-import { showToast, useConfirmDialog } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { getChecklistTypeFromState, scoreChecklistOfType } from '@/checklist-registry';
 import { IoChevronBack } from 'solid-icons/io';
@@ -28,7 +41,9 @@ export default function ChecklistYjsWrapper() {
   const navigate = useNavigate();
   const location = useLocation();
   const { user } = useBetterAuth();
-  const confirmDialog = useConfirmDialog();
+
+  // Complete confirmation dialog state
+  const [completeDialogOpen, setCompleteDialogOpen] = createSignal(false);
 
   // Get project context from parent ProjectView
   const { orgId, projectOps } = useProjectContext();
@@ -323,17 +338,12 @@ export default function ChecklistYjsWrapper() {
     }
 
     // Show confirmation dialog before marking complete
-    const confirmed = await confirmDialog.open({
-      title: 'Mark Appraisal as Complete?',
-      description:
-        'Once marked complete, this appraisal will be locked and cannot be edited. Are you sure you want to proceed?',
-      confirmText: 'Mark Complete',
-      cancelText: 'Cancel',
-      variant: 'warning',
-    });
-
-    if (!confirmed) return;
+    setCompleteDialogOpen(true);
+  }
 
+  // Executes completion after confirmation
+  const confirmMarkComplete = () => {
+    const study = currentStudy();
     // Determine the appropriate status based on reviewer count
     const nextStatus = getNextStatusForCompletion(study);
     updateChecklist(params.studyId, params.checklistId, { status: nextStatus });
@@ -344,7 +354,8 @@ export default function ChecklistYjsWrapper() {
       'Appraisal Completed',
       `This appraisal has been marked as ${statusLabel} and is now locked.`,
     );
-  }
+    setCompleteDialogOpen(false);
+  };
 
   // Get the checklist type from metadata or detect from state
   const checklistType = createMemo(() => {
@@ -408,7 +419,30 @@ export default function ChecklistYjsWrapper() {
   // Header content for the split screen toolbar (left side)
   const headerContent = (
     <>
-      <confirmDialog.ConfirmDialogComponent />
+      {/* Complete confirmation dialog */}
+      <AlertDialog open={completeDialogOpen()} onOpenChange={setCompleteDialogOpen}>
+        <AlertDialogBackdrop />
+        <AlertDialogPositioner>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIcon variant='warning' />
+              <div>
+                <AlertDialogTitle>Mark Appraisal as Complete?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Once marked complete, this appraisal will be locked and cannot be edited. Are you
+                  sure you want to proceed?
+                </AlertDialogDescription>
+              </div>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction variant='warning' onClick={confirmMarkComplete}>
+                Mark Complete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogPositioner>
+      </AlertDialog>
       <button
         onClick={() => navigate(getBackPath())}
         class='text-gray-400 transition-colors hover:text-gray-700'
diff --git a/packages/web/src/components/checklist/CreateLocalChecklist.jsx b/packages/web/src/components/checklist/CreateLocalChecklist.jsx
index 8b53a74c6..308b77831 100644
--- a/packages/web/src/components/checklist/CreateLocalChecklist.jsx
+++ b/packages/web/src/components/checklist/CreateLocalChecklist.jsx
@@ -5,9 +5,9 @@
 
 import { createSignal, Show, For } from 'solid-js';
 import { useNavigate, useSearchParams } from '@solidjs/router';
-import { FiFileText, FiX } from 'solid-icons/fi';
+import { FiFileText, FiX, FiUploadCloud } from 'solid-icons/fi';
 import localChecklistsStore from '@/stores/localChecklistsStore';
-import { FileUpload } from '@corates/ui';
+import { FileUpload, FileUploadDropzone, FileUploadHiddenInput } from '@/components/ui/file-upload';
 import { LANDING_URL } from '@config/api.js';
 import { getChecklistTypeOptions, DEFAULT_CHECKLIST_TYPE } from '@/checklist-registry';
 import { validatePdfFile } from '@/lib/pdfValidation.js';
@@ -145,11 +145,20 @@ export default function CreateLocalChecklist() {
                 when={pdfFile()}
                 fallback={
                   <FileUpload
-                    accept='application/pdf,.pdf'
-                    helpText='PDF files only'
-                    showFileList={false}
-                    onFilesChange={handleFilesChange}
-                  />
+                    accept={['application/pdf', '.pdf']}
+                    maxFiles={1}
+                    onFileAccept={details => handleFilesChange(details.files)}
+                  >
+                    <FileUploadDropzone>
+                      <FiUploadCloud class='h-8 w-8 text-gray-400' />
+                      <p class='mt-2 text-center text-sm text-gray-600'>
+                        <span class='font-medium text-blue-600'>Click to upload</span> or drag and
+                        drop
+                      </p>
+                      <p class='mt-1 text-xs text-gray-400'>PDF files only</p>
+                    </FileUploadDropzone>
+                    <FileUploadHiddenInput />
+                  </FileUpload>
                 }
               >
                 <div class='flex items-center gap-3 rounded-lg border border-blue-200 bg-blue-50 p-4'>
diff --git a/packages/web/src/components/checklist/LocalAppraisalsPanel.jsx b/packages/web/src/components/checklist/LocalAppraisalsPanel.jsx
index c95bd6e18..6e3e71465 100644
--- a/packages/web/src/components/checklist/LocalAppraisalsPanel.jsx
+++ b/packages/web/src/components/checklist/LocalAppraisalsPanel.jsx
@@ -7,13 +7,25 @@
  *  - showSignInPrompt: boolean - Show sign-in prompt (default: false when compact)
  */
 
-import { For, Show } from 'solid-js';
+import { For, Show, createSignal } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 import localChecklistsStore from '@/stores/localChecklistsStore';
-import { useConfirmDialog } from '@corates/ui';
 import { getChecklistMetadata } from '@/checklist-registry';
 import { FiTrash2 } from 'solid-icons/fi';
-import { Editable } from '@corates/ui';
+import { SimpleEditable } from '@/components/ui/editable';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 
 export default function LocalAppraisalsPanel(props) {
   const navigate = useNavigate();
@@ -23,24 +35,27 @@ export default function LocalAppraisalsPanel(props) {
 
   const { checklists, loading, deleteChecklist, updateChecklist } = localChecklistsStore;
 
-  // Confirm dialog for delete actions
-  const confirmDialog = useConfirmDialog();
+  // Delete confirmation dialog state
+  const [deleteDialogOpen, setDeleteDialogOpen] = createSignal(false);
+  const [pendingDeleteId, setPendingDeleteId] = createSignal(null);
 
   const openChecklist = checklistId => {
     navigate(`/checklist/${checklistId}`);
   };
 
-  const handleDelete = async (e, checklistId) => {
+  const handleDelete = (e, checklistId) => {
     e.stopPropagation();
-    const confirmed = await confirmDialog.open({
-      title: 'Delete Appraisal',
-      description: 'Are you sure you want to delete this appraisal? This cannot be undone.',
-      confirmText: 'Delete',
-      variant: 'danger',
-    });
-    if (confirmed) {
+    setPendingDeleteId(checklistId);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    const checklistId = pendingDeleteId();
+    if (checklistId) {
       await deleteChecklist(checklistId);
     }
+    setDeleteDialogOpen(false);
+    setPendingDeleteId(null);
   };
 
   return (
@@ -109,7 +124,7 @@ export default function LocalAppraisalsPanel(props) {
                   </span>
                 </div>
                 <div class='mb-4'>
-                  <Editable
+                  <SimpleEditable
                     activationMode='click'
                     variant='heading'
                     class='text-lg font-semibold text-gray-900'
@@ -148,7 +163,29 @@ export default function LocalAppraisalsPanel(props) {
         </Show>
       </div>
 
-      <confirmDialog.ConfirmDialogComponent />
+      {/* Delete confirmation dialog */}
+      <AlertDialog open={deleteDialogOpen()} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogBackdrop />
+        <AlertDialogPositioner>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIcon variant='danger' />
+              <div>
+                <AlertDialogTitle>Delete Appraisal</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Are you sure you want to delete this appraisal? This cannot be undone.
+                </AlertDialogDescription>
+              </div>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction variant='danger' onClick={confirmDelete}>
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogPositioner>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/packages/web/src/components/checklist/ROB2Checklist/ScoringSummary.jsx b/packages/web/src/components/checklist/ROB2Checklist/ScoringSummary.jsx
index 4e8213e6d..68cb74b14 100644
--- a/packages/web/src/components/checklist/ROB2Checklist/ScoringSummary.jsx
+++ b/packages/web/src/components/checklist/ROB2Checklist/ScoringSummary.jsx
@@ -1,8 +1,14 @@
 import { For, createMemo, createSignal } from 'solid-js';
-import { Portal } from 'solid-js/web';
 import { ROB2_CHECKLIST, getActiveDomainKeys } from './checklist-map.js';
 import { getSmartScoring } from './checklist.js';
-import { DialogPrimitive as Dialog } from '@corates/ui';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
 import { FiExternalLink, FiInfo } from 'solid-icons/fi';
 
 /**
@@ -154,61 +160,57 @@ export function ScoringSummary(props) {
  */
 function ResourcesDialog(props) {
   return (
-    <Dialog.Root open={props.open} onOpenChange={details => !details.open && props.onClose()}>
-      <Portal>
-        <Dialog.Backdrop class='fixed inset-0 z-40 bg-black/50' />
-        <Dialog.Positioner class='fixed inset-0 z-50 flex items-center justify-center p-4'>
-          <Dialog.Content class='max-h-[85vh] w-full max-w-md overflow-auto rounded-lg bg-white shadow-xl'>
-            <div class='border-b border-gray-200 px-6 py-4'>
-              <Dialog.Title class='text-lg font-semibold text-gray-900'>
-                ROB-2 Resources
-              </Dialog.Title>
-              <Dialog.Description class='mt-1 text-sm text-gray-500'>
-                Official guidance and documentation for the RoB 2 assessment tool.
-              </Dialog.Description>
-            </div>
+    <Dialog open={props.open} onOpenChange={open => !open && props.onClose?.()}>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent class='max-h-[85vh] max-w-md overflow-auto'>
+          <div class='border-b border-gray-200 px-6 py-4'>
+            <DialogTitle>ROB-2 Resources</DialogTitle>
+            <DialogDescription class='mt-1'>
+              Official guidance and documentation for the RoB 2 assessment tool.
+            </DialogDescription>
+          </div>
 
-            <div class='space-y-4 px-6 py-4'>
-              <ResourceLink
-                title='RoB 2 Tool (Official)'
-                description='Risk of Bias 2 - Assessing risk of bias in randomized trials'
-                url='https://www.riskofbias.info/welcome/rob-2-0-tool'
-              />
-
-              <ResourceLink
-                title='Detailed Guidance Document'
-                description='Comprehensive guidance for making judgements'
-                url='https://drive.google.com/file/d/19R9savfPdCHC8XLz2iiMvL_71lPJERWK/view'
-              />
-
-              <ResourceLink
-                title='Cochrane Handbook Chapter'
-                description='Chapter 8: Assessing risk of bias in included studies'
-                url='https://training.cochrane.org/handbook/current/chapter-08'
-              />
-
-              <div class='rounded-lg bg-gray-50 p-3'>
-                <h4 class='text-sm font-medium text-gray-700'>About Auto Scoring</h4>
-                <p class='mt-1 text-xs text-gray-600'>
-                  This tool automatically calculates domain judgements based on your signalling
-                  question responses, following the official RoB 2 decision algorithms.
-                </p>
-              </div>
+          <div class='space-y-4 px-6 py-4'>
+            <ResourceLink
+              title='RoB 2 Tool (Official)'
+              description='Risk of Bias 2 - Assessing risk of bias in randomized trials'
+              url='https://www.riskofbias.info/welcome/rob-2-0-tool'
+            />
+
+            <ResourceLink
+              title='Detailed Guidance Document'
+              description='Comprehensive guidance for making judgements'
+              url='https://drive.google.com/file/d/19R9savfPdCHC8XLz2iiMvL_71lPJERWK/view'
+            />
+
+            <ResourceLink
+              title='Cochrane Handbook Chapter'
+              description='Chapter 8: Assessing risk of bias in included studies'
+              url='https://training.cochrane.org/handbook/current/chapter-08'
+            />
+
+            <div class='rounded-lg bg-gray-50 p-3'>
+              <h4 class='text-sm font-medium text-gray-700'>About Auto Scoring</h4>
+              <p class='mt-1 text-xs text-gray-600'>
+                This tool automatically calculates domain judgements based on your signalling
+                question responses, following the official RoB 2 decision algorithms.
+              </p>
             </div>
+          </div>
 
-            <div class='border-t border-gray-200 px-6 py-3'>
-              <button
-                type='button'
-                onClick={() => props.onClose()}
-                class='w-full rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
-              >
-                Close
-              </button>
-            </div>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>
+          <div class='border-t border-gray-200 px-6 py-3'>
+            <button
+              type='button'
+              onClick={() => props.onClose()}
+              class='w-full rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
+            >
+              Close
+            </button>
+          </div>
+        </DialogContent>
+      </DialogPositioner>
+    </Dialog>
   );
 }
 
diff --git a/packages/web/src/components/checklist/ROBINSIChecklist/ScoringSummary.jsx b/packages/web/src/components/checklist/ROBINSIChecklist/ScoringSummary.jsx
index 7d14652db..d4b3cf11e 100644
--- a/packages/web/src/components/checklist/ROBINSIChecklist/ScoringSummary.jsx
+++ b/packages/web/src/components/checklist/ROBINSIChecklist/ScoringSummary.jsx
@@ -1,8 +1,14 @@
 import { For, Show, createMemo, createSignal } from 'solid-js';
-import { Portal } from 'solid-js/web';
 import { ROBINS_I_CHECKLIST, getActiveDomainKeys } from './checklist-map.js';
 import { getSmartScoring } from './checklist.js';
-import { DialogPrimitive as Dialog } from '@corates/ui';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
 import { FiExternalLink, FiInfo } from 'solid-icons/fi';
 
 /**
@@ -187,62 +193,58 @@ export function ScoringSummary(props) {
  */
 function ResourcesDialog(props) {
   return (
-    <Dialog.Root open={props.open} onOpenChange={details => !details.open && props.onClose()}>
-      <Portal>
-        <Dialog.Backdrop class='fixed inset-0 z-40 bg-black/50' />
-        <Dialog.Positioner class='fixed inset-0 z-50 flex items-center justify-center p-4'>
-          <Dialog.Content class='max-h-[85vh] w-full max-w-md overflow-auto rounded-lg bg-white shadow-xl'>
-            <div class='border-b border-gray-200 px-6 py-4'>
-              <Dialog.Title class='text-lg font-semibold text-gray-900'>
-                ROBINS-I V2 Resources
-              </Dialog.Title>
-              <Dialog.Description class='mt-1 text-sm text-gray-500'>
-                Official guidance and documentation for the ROBINS-I assessment tool.
-              </Dialog.Description>
-            </div>
+    <Dialog open={props.open} onOpenChange={open => !open && props.onClose()}>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent class='max-h-[85vh] max-w-md overflow-auto'>
+          <div class='border-b border-gray-200 px-6 py-4'>
+            <DialogTitle>ROBINS-I V2 Resources</DialogTitle>
+            <DialogDescription class='mt-1'>
+              Official guidance and documentation for the ROBINS-I assessment tool.
+            </DialogDescription>
+          </div>
 
-            <div class='space-y-4 px-6 py-4'>
-              <ResourceLink
-                title='ROBINS-I Tool (Official)'
-                description='Risk Of Bias In Non-randomized Studies of Interventions'
-                url='https://www.riskofbias.info/welcome/robins-i-v2'
-              />
+          <div class='space-y-4 px-6 py-4'>
+            <ResourceLink
+              title='ROBINS-I Tool (Official)'
+              description='Risk Of Bias In Non-randomized Studies of Interventions'
+              url='https://www.riskofbias.info/welcome/robins-i-v2'
+            />
 
-              <ResourceLink
-                title='Detailed Guidance Document'
-                description='Comprehensive guidance for making judgements'
-                url='https://drive.google.com/file/d/1zs85KZKFdwGcYwahvldNY_lARNv7Nqsr/view'
-              />
+            <ResourceLink
+              title='Detailed Guidance Document'
+              description='Comprehensive guidance for making judgements'
+              url='https://drive.google.com/file/d/1zs85KZKFdwGcYwahvldNY_lARNv7Nqsr/view'
+            />
 
-              <ResourceLink
-                title='Cochrane Handbook Chapter'
-                description='Chapter 25: Assessing risk of bias in non-randomized studies'
-                url='https://training.cochrane.org/handbook/current/chapter-25'
-              />
+            <ResourceLink
+              title='Cochrane Handbook Chapter'
+              description='Chapter 25: Assessing risk of bias in non-randomized studies'
+              url='https://training.cochrane.org/handbook/current/chapter-25'
+            />
 
-              <div class='rounded-lg bg-gray-50 p-3'>
-                <h4 class='text-sm font-medium text-gray-700'>About Auto Scoring</h4>
-                <p class='mt-1 text-xs text-gray-600'>
-                  This tool automatically calculates domain judgements based on your signalling
-                  question responses, following the official ROBINS-I decision algorithms. You can
-                  override any automatic judgement if needed.
-                </p>
-              </div>
+            <div class='rounded-lg bg-gray-50 p-3'>
+              <h4 class='text-sm font-medium text-gray-700'>About Auto Scoring</h4>
+              <p class='mt-1 text-xs text-gray-600'>
+                This tool automatically calculates domain judgements based on your signalling
+                question responses, following the official ROBINS-I decision algorithms. You can
+                override any automatic judgement if needed.
+              </p>
             </div>
+          </div>
 
-            <div class='border-t border-gray-200 px-6 py-3'>
-              <button
-                type='button'
-                onClick={() => props.onClose()}
-                class='w-full rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
-              >
-                Close
-              </button>
-            </div>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>
+          <div class='border-t border-gray-200 px-6 py-3'>
+            <button
+              type='button'
+              onClick={() => props.onClose()}
+              class='w-full rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
+            >
+              Close
+            </button>
+          </div>
+        </DialogContent>
+      </DialogPositioner>
+    </Dialog>
   );
 }
 
diff --git a/packages/web/src/components/checklist/ScoreTag.jsx b/packages/web/src/components/checklist/ScoreTag.jsx
index 2c982cf1d..59c53f328 100644
--- a/packages/web/src/components/checklist/ScoreTag.jsx
+++ b/packages/web/src/components/checklist/ScoreTag.jsx
@@ -1,6 +1,11 @@
 import { Show, createMemo } from 'solid-js';
 import { FaSolidCircleInfo } from 'solid-icons/fa';
-import { Tooltip } from '@corates/ui';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 import { getChecklistMetadata, DEFAULT_CHECKLIST_TYPE } from '@/checklist-registry';
 
 /**
@@ -73,16 +78,21 @@ export function ScoreTooltip(props) {
   const tooltipContent = createMemo(() => getTooltipContent(props.checklistType));
 
   return (
-    <Tooltip content={tooltipContent()} placement='bottom' openDelay={200}>
-      <a
-        href={infoUrl()}
-        target='_blank'
-        rel='noreferrer'
-        class='mt-0.5 inline-flex items-center justify-center rounded-full p-0.5 opacity-70 hover:opacity-100 focus:opacity-100 focus:ring-2 focus:ring-blue-500 focus:outline-none'
-        aria-label={`Open ${getChecklistMetadata(props.checklistType).name} guidance in a new tab`}
-      >
-        <FaSolidCircleInfo size={12} />
-      </a>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <a
+          href={infoUrl()}
+          target='_blank'
+          rel='noreferrer noopener'
+          class='mt-0.5 inline-flex items-center justify-center rounded-full p-0.5 opacity-70 hover:opacity-100 focus:opacity-100 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+          aria-label={`Open ${getChecklistMetadata(props.checklistType).name} guidance in a new tab`}
+        >
+          <FaSolidCircleInfo size={12} />
+        </a>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>{tooltipContent()}</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
diff --git a/packages/web/src/components/checklist/common/NoteEditor.jsx b/packages/web/src/components/checklist/common/NoteEditor.jsx
index 47d6e192e..80ab7f9c8 100644
--- a/packages/web/src/components/checklist/common/NoteEditor.jsx
+++ b/packages/web/src/components/checklist/common/NoteEditor.jsx
@@ -7,7 +7,7 @@
 import { createSignal, createEffect, onCleanup, Show } from 'solid-js';
 import { BiRegularChevronRight } from 'solid-icons/bi';
 import { BsJournalText } from 'solid-icons/bs';
-import { Collapsible } from '@corates/ui';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 
 const MAX_HEIGHT = 300;
 
@@ -132,24 +132,19 @@ export default function NoteEditor(props) {
       when={props.inline}
       fallback={
         <div class='mt-3 border-t border-gray-100 pt-2'>
-          <Collapsible
-            open={expanded()}
-            onOpenChange={({ open }) => {
-              setExpanded(open);
-            }}
-            trigger={
-              <div
-                class={`flex cursor-pointer items-center gap-1.5 py-1 text-xs select-none ${hasContent() ? 'text-blue-600 hover:text-blue-700' : 'text-gray-500 hover:text-gray-700'} `}
-              >
-                <BiRegularChevronRight
-                  class={`h-4 w-4 shrink-0 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
-                />
-                <BsJournalText class='h-3 w-3 shrink-0' />
-                <span class='font-medium'>{props.label || 'Notes'}</span>
-              </div>
-            }
-          >
-            <div class='px-0.5 pt-2 pb-0.5'>{textareaContent}</div>
+          <Collapsible open={expanded()} onOpenChange={setExpanded}>
+            <CollapsibleTrigger
+              class={`flex cursor-pointer items-center gap-1.5 py-1 text-xs select-none ${hasContent() ? 'text-blue-600 hover:text-blue-700' : 'text-gray-500 hover:text-gray-700'} `}
+            >
+              <BiRegularChevronRight
+                class={`h-4 w-4 shrink-0 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
+              />
+              <BsJournalText class='h-3 w-3 shrink-0' />
+              <span class='font-medium'>{props.label || 'Notes'}</span>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div class='px-0.5 pt-2 pb-0.5'>{textareaContent}</div>
+            </CollapsibleContent>
           </Collapsible>
         </div>
       }
diff --git a/packages/web/src/components/dashboard/LocalAppraisalCard.jsx b/packages/web/src/components/dashboard/LocalAppraisalCard.jsx
index 121f323c6..7f933a7ce 100644
--- a/packages/web/src/components/dashboard/LocalAppraisalCard.jsx
+++ b/packages/web/src/components/dashboard/LocalAppraisalCard.jsx
@@ -11,7 +11,7 @@
 
 import { Show, createMemo } from 'solid-js';
 import { FiFileText, FiChevronRight, FiTrash2 } from 'solid-icons/fi';
-import { Editable } from '@corates/ui';
+import { SimpleEditable } from '@/components/ui/editable';
 import { getChecklistMetadata } from '@/checklist-registry';
 
 /**
@@ -73,7 +73,7 @@ export function LocalAppraisalCard(props) {
             <h4 class='truncate text-sm font-medium text-stone-800'>{props.checklist?.name}</h4>
           }
         >
-          <Editable
+          <SimpleEditable
             activationMode='click'
             variant='inline'
             class='truncate text-sm font-medium text-stone-800'
diff --git a/packages/web/src/components/dashboard/LocalAppraisalsSection.jsx b/packages/web/src/components/dashboard/LocalAppraisalsSection.jsx
index e0df0c009..2c7c48a1d 100644
--- a/packages/web/src/components/dashboard/LocalAppraisalsSection.jsx
+++ b/packages/web/src/components/dashboard/LocalAppraisalsSection.jsx
@@ -9,9 +9,21 @@
  * - Sign-in prompt for logged-out users
  */
 
-import { Show, For, useContext } from 'solid-js';
+import { Show, For, useContext, createSignal } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
-import { useConfirmDialog } from '@corates/ui';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 import { FiPlus, FiFileText, FiLogIn } from 'solid-icons/fi';
 
 import { AnimationContext } from './Dashboard.jsx';
@@ -78,24 +90,29 @@ function SignInPrompt(props) {
  */
 export function LocalAppraisalsSection(props) {
   const navigate = useNavigate();
-  const confirmDialog = useConfirmDialog();
 
   const { checklists, deleteChecklist, updateChecklist } = localChecklistsStore;
 
+  // Delete confirmation dialog state
+  const [deleteDialogOpen, setDeleteDialogOpen] = createSignal(false);
+  const [pendingDeleteId, setPendingDeleteId] = createSignal(null);
+
   const handleOpen = checklistId => {
     navigate(`/checklist/${checklistId}`);
   };
 
-  const handleDelete = async checklistId => {
-    const confirmed = await confirmDialog.open({
-      title: 'Delete Appraisal',
-      description: 'Are you sure you want to delete this appraisal? This cannot be undone.',
-      confirmText: 'Delete',
-      variant: 'danger',
-    });
-    if (confirmed) {
+  const handleDelete = checklistId => {
+    setPendingDeleteId(checklistId);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    const checklistId = pendingDeleteId();
+    if (checklistId) {
       await deleteChecklist(checklistId);
     }
+    setDeleteDialogOpen(false);
+    setPendingDeleteId(null);
   };
 
   const handleRename = async (checklistId, newName) => {
@@ -163,7 +180,29 @@ export function LocalAppraisalsSection(props) {
         </For>
       </div>
 
-      <confirmDialog.ConfirmDialogComponent />
+      {/* Delete confirmation dialog */}
+      <AlertDialog open={deleteDialogOpen()} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogBackdrop />
+        <AlertDialogPositioner>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIcon variant='danger' />
+              <div>
+                <AlertDialogTitle>Delete Appraisal</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Are you sure you want to delete this appraisal? This cannot be undone.
+                </AlertDialogDescription>
+              </div>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction variant='danger' onClick={confirmDelete}>
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogPositioner>
+      </AlertDialog>
     </section>
   );
 }
diff --git a/packages/web/src/components/dashboard/ProjectsSection.jsx b/packages/web/src/components/dashboard/ProjectsSection.jsx
index a840874e8..87a022dcc 100644
--- a/packages/web/src/components/dashboard/ProjectsSection.jsx
+++ b/packages/web/src/components/dashboard/ProjectsSection.jsx
@@ -5,10 +5,23 @@
  * handles create form, empty states, and loading states.
  */
 
-import { Show, For, useContext } from 'solid-js';
+import { Show, For, useContext, createSignal } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 import { useQueryClient } from '@tanstack/solid-query';
-import { useConfirmDialog, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 import { FiPlus, FiFolder } from 'solid-icons/fi';
 
 import { AnimationContext } from './Dashboard.jsx';
@@ -61,9 +74,13 @@ function EmptyProjectsState(props) {
 export function ProjectsSection(props) {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const confirmDialog = useConfirmDialog();
   const { isOnline } = useBetterAuth();
 
+  // Delete confirmation dialog state
+  const [deleteDialogOpen, setDeleteDialogOpen] = createSignal(false);
+  const [pendingDeleteId, setPendingDeleteId] = createSignal(null);
+  const [deleteLoading, setDeleteLoading] = createSignal(false);
+
   // Projects data
   const projectListQuery = useMyProjectsList();
   const projects = () => projectListQuery.projects();
@@ -113,22 +130,23 @@ export function ProjectsSection(props) {
     navigate(`/projects/${projectId}`);
   };
 
-  const handleDeleteProject = async targetProjectId => {
-    const confirmed = await confirmDialog.open({
-      title: 'Delete Project',
-      description:
-        'Are you sure you want to delete this entire project? This action cannot be undone.',
-      confirmText: 'Delete Project',
-      variant: 'danger',
-    });
-    if (!confirmed) return;
+  // Opens delete confirmation dialog
+  const handleDeleteProject = targetProjectId => {
+    setPendingDeleteId(targetProjectId);
+    setDeleteDialogOpen(true);
+  };
 
+  // Executes delete after confirmation
+  const confirmDeleteProject = async () => {
+    const targetProjectId = pendingDeleteId();
     const project = projects()?.find(p => p.id === targetProjectId);
     if (!project?.orgId) {
       showToast.error('Error', 'Unable to find project organization');
+      setDeleteDialogOpen(false);
       return;
     }
 
+    setDeleteLoading(true);
     try {
       const { apiFetch } = await import('@/lib/apiFetch.js');
       await apiFetch(`/api/orgs/${project.orgId}/projects/${targetProjectId}`, {
@@ -138,9 +156,12 @@ export function ProjectsSection(props) {
 
       queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
       showToast.success('Project Deleted', 'The project has been deleted successfully');
+      setDeleteDialogOpen(false);
     } catch (err) {
       const { handleError } = await import('@/lib/error-utils.js');
       await handleError(err, { toastTitle: 'Delete Failed', showToast: false });
+    } finally {
+      setDeleteLoading(false);
     }
   };
 
@@ -158,25 +179,24 @@ export function ProjectsSection(props) {
 
   return (
     <section style={animation.fadeUp(200)}>
+      {/* Contact prompt for users who can't create projects */}
+      <Show when={!subscriptionLoading() && !canCreateProject()}>
+        <div class='mb-4'>
+          <ContactPrompt
+            restrictionType={restrictionType()}
+            projectCount={projectCount()}
+            quotaLimit={quotas()?.['projects.max']}
+          />
+        </div>
+      </Show>
+
       {/* Header */}
       <Show when={props.showHeader !== false}>
         <div class='mb-4 flex items-center justify-between'>
           <h2 class='text-sm font-semibold tracking-wide text-stone-500 uppercase'>
             Your Projects
           </h2>
-          <Show
-            when={canCreateProject() && hasProjects()}
-            fallback={
-              <Show when={!canCreateProject() && canCreateProject() !== null}>
-                <ContactPrompt
-                  restrictionType={restrictionType()}
-                  projectCount={projectCount()}
-                  quotaLimit={quotas()?.['projects.max']}
-                  compact
-                />
-              </Show>
-            }
-          >
+          <Show when={canCreateProject() && hasProjects()}>
             <button
               type='button'
               onClick={handleCreateClick}
@@ -225,7 +245,33 @@ export function ProjectsSection(props) {
         </For>
       </div>
 
-      <confirmDialog.ConfirmDialogComponent />
+      {/* Delete confirmation dialog */}
+      <AlertDialog open={deleteDialogOpen()} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogBackdrop />
+        <AlertDialogPositioner>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIcon variant='danger' />
+              <div>
+                <AlertDialogTitle>Delete Project</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Are you sure you want to delete this entire project? This action cannot be undone.
+                </AlertDialogDescription>
+              </div>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={deleteLoading()}>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                variant='danger'
+                disabled={deleteLoading()}
+                onClick={confirmDeleteProject}
+              >
+                {deleteLoading() ? 'Deleting...' : 'Delete Project'}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogPositioner>
+      </AlertDialog>
     </section>
   );
 }
diff --git a/packages/web/src/components/dev/DevImportProject.jsx b/packages/web/src/components/dev/DevImportProject.jsx
index 94c5ef72c..72a6fda41 100644
--- a/packages/web/src/components/dev/DevImportProject.jsx
+++ b/packages/web/src/components/dev/DevImportProject.jsx
@@ -12,7 +12,7 @@ import { useQueryClient } from '@tanstack/solid-query';
 import { API_BASE } from '@config/api.js';
 import { useOrgs } from '@primitives/useOrgs.js';
 import { queryKeys } from '@lib/queryKeys.js';
-import { Select } from '@corates/ui';
+import { SimpleSelect } from '@/components/ui/select';
 
 export default function DevImportProject() {
   const navigate = useNavigate();
@@ -133,10 +133,10 @@ export default function DevImportProject() {
       <Show when={!orgsLoading() && orgs().length > 1}>
         <div>
           <label class='mb-1 block text-xs text-gray-500'>Organization</label>
-          <Select
+          <SimpleSelect
             value={selectedOrgId()}
             onChange={setSelectedOrgId}
-            options={orgs().map(org => ({ value: org.id, label: org.name }))}
+            items={orgs().map(org => ({ value: org.id, label: org.name }))}
             placeholder='Select organization'
           />
         </div>
diff --git a/packages/web/src/components/mocks/MockIndex.jsx b/packages/web/src/components/mocks/MockIndex.jsx
index 151e91380..0071eeb1b 100644
--- a/packages/web/src/components/mocks/MockIndex.jsx
+++ b/packages/web/src/components/mocks/MockIndex.jsx
@@ -22,6 +22,35 @@ export default function MockIndex() {
         <div>
           <h2 class='mb-3 text-lg font-semibold text-gray-700'>Featured</h2>
           <div class='grid gap-4'>
+            <A
+              href='/mocks/project-wizard'
+              class='block rounded-lg border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-white p-6 shadow-sm transition-all hover:border-blue-300 hover:shadow-md'
+            >
+              <div class='flex items-start justify-between'>
+                <div>
+                  <h3 class='mb-2 text-lg font-semibold text-gray-900'>Project Creation Wizard</h3>
+                  <p class='mb-3 text-sm text-gray-600'>
+                    Multi-step wizard for creating systematic review projects. Material + Apple HIG
+                    blend with blue palette. Includes project basics, team, studies import, and
+                    reviewer assignment steps.
+                  </p>
+                  <div class='flex flex-wrap gap-2'>
+                    <span class='inline-block rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700'>
+                      Light Theme
+                    </span>
+                    <span class='inline-block rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700'>
+                      Material + Apple
+                    </span>
+                    <span class='inline-block rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700'>
+                      4 Steps
+                    </span>
+                  </div>
+                </div>
+                <span class='rounded-full bg-blue-600 px-3 py-1 text-xs font-medium text-white'>
+                  New
+                </span>
+              </div>
+            </A>
             <A
               href='/mocks/dashboard'
               class='block rounded-lg border-2 border-teal-200 bg-gradient-to-br from-teal-50 to-white p-6 shadow-sm transition-all hover:border-teal-300 hover:shadow-md'
@@ -48,7 +77,35 @@ export default function MockIndex() {
                     </span>
                   </div>
                 </div>
-                <span class='rounded-full bg-teal-600 px-3 py-1 text-xs font-medium text-white'>
+              </div>
+            </A>
+            <A
+              href='/mocks/project-view-v2'
+              class='block rounded-lg border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-white p-6 shadow-sm transition-all hover:border-blue-300 hover:shadow-md'
+            >
+              <div class='flex items-start justify-between'>
+                <div>
+                  <h3 class='mb-2 text-lg font-semibold text-gray-900'>
+                    ProjectView V2 - Modern Dashboard
+                  </h3>
+                  <p class='mb-3 text-sm text-gray-600'>
+                    Refreshed design with blue palette, URL-persisted tabs, Overview dashboard,
+                    improved table styling, and consistent design tokens matching the Project
+                    Wizard.
+                  </p>
+                  <div class='flex flex-wrap gap-2'>
+                    <span class='inline-block rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700'>
+                      Blue Theme
+                    </span>
+                    <span class='inline-block rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700'>
+                      URL State
+                    </span>
+                    <span class='inline-block rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700'>
+                      7 Tabs
+                    </span>
+                  </div>
+                </div>
+                <span class='rounded-full bg-blue-600 px-3 py-1 text-xs font-medium text-white'>
                   New
                 </span>
               </div>
@@ -79,9 +136,6 @@ export default function MockIndex() {
                     </span>
                   </div>
                 </div>
-                <span class='rounded-full bg-violet-600 px-3 py-1 text-xs font-medium text-white'>
-                  Recommended
-                </span>
               </div>
             </A>
           </div>
diff --git a/packages/web/src/components/mocks/MockRoutes.jsx b/packages/web/src/components/mocks/MockRoutes.jsx
index 45f421f48..be627a860 100644
--- a/packages/web/src/components/mocks/MockRoutes.jsx
+++ b/packages/web/src/components/mocks/MockRoutes.jsx
@@ -17,6 +17,8 @@ const SettingsMockMinimal = lazy(() => import('./SettingsMockMinimal.jsx'));
 const SettingsMockCombined = lazy(() => import('./SettingsMockCombined.jsx'));
 const DashboardMock = lazy(() => import('./DashboardMock.jsx'));
 const ReactivePropsDemo = lazy(() => import('./ReactivePropsDemo.jsx'));
+const ProjectWizardMock = lazy(() => import('./ProjectWizardMock.jsx'));
+const ProjectViewV2 = lazy(() => import('./ProjectViewV2.jsx'));
 
 /**
  * Mock routes - returns Route elements for the /mocks/* path.
@@ -38,6 +40,8 @@ export default function MockRoutes() {
       <Route path='/settings-combined' component={SettingsMockCombined} />
       <Route path='/dashboard' component={DashboardMock} />
       <Route path='/reactivity-example' component={ReactivePropsDemo} />
+      <Route path='/project-wizard' component={ProjectWizardMock} />
+      <Route path='/project-view-v2' component={ProjectViewV2} />
     </Route>
   );
 }
diff --git a/packages/web/src/components/mocks/ProjectViewComplete.jsx b/packages/web/src/components/mocks/ProjectViewComplete.jsx
index 014093efc..7ecfab679 100644
--- a/packages/web/src/components/mocks/ProjectViewComplete.jsx
+++ b/packages/web/src/components/mocks/ProjectViewComplete.jsx
@@ -637,7 +637,7 @@ function CompletedTab() {
   );
 }
 
-function ChartsTab() {
+function FiguresTab() {
   return (
     <div class='space-y-6'>
       {/* Summary Stats */}
@@ -760,16 +760,9 @@ export default function ProjectViewComplete() {
     { id: 'todo', label: 'To Do', icon: FiClipboard, count: mockTodoItems.length },
     { id: 'reconcile', label: 'Reconcile', icon: FiGitMerge, count: mockReconcileItems.length },
     { id: 'completed', label: 'Completed', icon: FiCheckCircle, count: mockCompletedItems.length },
-    { id: 'charts', label: 'Charts', icon: FiBarChart2, count: null },
+    { id: 'figures', label: 'Figures', icon: FiBarChart2, count: null },
   ];
 
-  const stats = {
-    total: mockStudies.length,
-    completed: mockStudies.filter(s => s.status === 'completed').length,
-    inProgress: mockStudies.filter(s => s.status === 'in-review').length,
-    reconciling: mockStudies.filter(s => s.status === 'reconcile').length,
-  };
-
   return (
     <div class='min-h-screen bg-slate-50'>
       {/* Header */}
@@ -786,17 +779,9 @@ export default function ProjectViewComplete() {
               </div>
             </div>
             <div class='flex items-center gap-3'>
-              {/* Team Avatars */}
+              {/* Online team members - powered by Yjs awareness, only shows users currently viewing this project */}
               <div class='flex -space-x-2'>
-                <For each={mockMembers}>
-                  {member => (
-                    <Avatar
-                      name={member.name}
-                      initials={member.avatar}
-                      class='h-8 w-8 border-2 border-white text-xs'
-                    />
-                  )}
-                </For>
+                {/* In production, this would filter by awareness state from useProject() */}
               </div>
               <button class='flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition-colors hover:bg-slate-50 hover:text-slate-700'>
                 <FiSettings class='h-4 w-4' />
@@ -805,42 +790,6 @@ export default function ProjectViewComplete() {
           </div>
         </div>
 
-        {/* Progress Bar */}
-        <div class='mx-auto max-w-7xl px-6 pb-4'>
-          <div class='flex items-center gap-4'>
-            <div class='h-2 flex-1 overflow-hidden rounded-full bg-slate-100'>
-              <div class='flex h-full'>
-                <div
-                  class='bg-emerald-500 transition-all'
-                  style={`width: ${(stats.completed / stats.total) * 100}%`}
-                />
-                <div
-                  class='bg-blue-500 transition-all'
-                  style={`width: ${(stats.inProgress / stats.total) * 100}%`}
-                />
-                <div
-                  class='bg-amber-500 transition-all'
-                  style={`width: ${(stats.reconciling / stats.total) * 100}%`}
-                />
-              </div>
-            </div>
-            <div class='flex items-center gap-4 text-xs'>
-              <div class='flex items-center gap-1.5'>
-                <div class='h-2 w-2 rounded-full bg-emerald-500' />
-                <span class='text-slate-600'>{stats.completed} done</span>
-              </div>
-              <div class='flex items-center gap-1.5'>
-                <div class='h-2 w-2 rounded-full bg-blue-500' />
-                <span class='text-slate-600'>{stats.inProgress} reviewing</span>
-              </div>
-              <div class='flex items-center gap-1.5'>
-                <div class='h-2 w-2 rounded-full bg-amber-500' />
-                <span class='text-slate-600'>{stats.reconciling} reconciling</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
         {/* Tabs */}
         <div class='mx-auto max-w-7xl px-6'>
           <nav class='-mb-px flex gap-1'>
@@ -893,8 +842,8 @@ export default function ProjectViewComplete() {
         <Show when={activeTab() === 'completed'}>
           <CompletedTab />
         </Show>
-        <Show when={activeTab() === 'charts'}>
-          <ChartsTab />
+        <Show when={activeTab() === 'figures'}>
+          <FiguresTab />
         </Show>
       </main>
 
diff --git a/packages/web/src/components/mocks/ProjectViewV2.jsx b/packages/web/src/components/mocks/ProjectViewV2.jsx
new file mode 100644
index 000000000..58642462a
--- /dev/null
+++ b/packages/web/src/components/mocks/ProjectViewV2.jsx
@@ -0,0 +1,2960 @@
+/**
+ * ProjectView V2 Mock
+ *
+ * Design Direction: Clean, modern dashboard with blue palette
+ * - Consistent with Project Wizard design language
+ * - URL-persisted tab state
+ * - Improved table styling (no harsh dividers)
+ * - Refined assignment UI
+ */
+
+import { For, Show, createSignal, createMemo } from 'solid-js';
+import { useSearchParams } from '@solidjs/router';
+import {
+  FiArrowLeft,
+  FiSearch,
+  FiSettings,
+  FiMoreHorizontal,
+  FiUsers,
+  FiBook,
+  FiClipboard,
+  FiGitMerge,
+  FiCheckCircle,
+  FiBarChart2,
+  FiUpload,
+  FiLink,
+  FiFile,
+  FiFileText,
+  FiFolder,
+  FiUserPlus,
+  FiX,
+  FiChevronRight,
+  FiChevronDown,
+  FiChevronUp,
+  FiAlertCircle,
+  FiEdit3,
+  FiDownload,
+  FiExternalLink,
+  FiSliders,
+  FiCopy,
+  FiCheck,
+  FiInfo,
+  FiPlus,
+  FiShuffle,
+} from 'solid-icons/fi';
+
+// ============================================================================
+// DESIGN TOKENS (matching wizard)
+// ============================================================================
+
+const tokens = {
+  // Primary blue palette
+  blue50: '#eff6ff',
+  blue100: '#dbeafe',
+  blue200: '#bfdbfe',
+  blue300: '#93c5fd',
+  blue500: '#3b82f6',
+  blue600: '#2563eb',
+  blue700: '#1d4ed8',
+  blue900: '#1e3a8a',
+
+  // Neutral slate
+  slate50: '#f8fafc',
+  slate100: '#f1f5f9',
+  slate200: '#e2e8f0',
+  slate300: '#cbd5e1',
+  slate400: '#94a3b8',
+  slate500: '#64748b',
+  slate600: '#475569',
+  slate700: '#334155',
+  slate800: '#1e293b',
+  slate900: '#0f172a',
+
+  // Semantic colors
+  success: '#059669',
+  successLight: '#d1fae5',
+  warning: '#d97706',
+  warningLight: '#fef3c7',
+  danger: '#dc2626',
+  dangerLight: '#fee2e2',
+};
+
+// ============================================================================
+// MOCK DATA
+// ============================================================================
+
+const mockProject = {
+  name: 'Mindfulness Interventions for Chronic Pain',
+  description:
+    'Systematic review examining RCTs of mindfulness-based interventions for chronic pain management',
+  checklistTypes: ['AMSTAR2'],
+};
+
+const mockMembers = [
+  { id: '1', name: 'Dr. Sarah Chen', email: 'sarah.chen@university.edu', role: 'Owner' },
+  { id: '2', name: 'Dr. Michael Torres', email: 'm.torres@research.org', role: 'Member' },
+  { id: '3', name: 'Dr. Emily Watson', email: 'e.watson@institute.edu', role: 'Member' },
+];
+
+const mockStudies = [
+  {
+    id: '1',
+    title:
+      'Mindfulness-Based Stress Reduction for Chronic Low Back Pain: A Randomized Controlled Trial',
+    authors: 'Cherkin DC, Sherman KJ, Balderson BH, et al.',
+    firstAuthor: 'Cherkin DC',
+    journal: 'JAMA',
+    year: 2016,
+    assignedTo: ['1', '2'],
+    status: 'completed',
+    rating: 'High',
+    checklistType: 'AMSTAR2',
+    pdfs: [
+      { id: 'pdf1', name: 'Cherkin_2016_JAMA.pdf', tag: 'primary', size: '1.2 MB' },
+      { id: 'pdf2', name: 'Cherkin_2016_Protocol.pdf', tag: 'protocol', size: '450 KB' },
+    ],
+  },
+  {
+    id: '2',
+    title:
+      'Effects of Mindfulness-Based Cognitive Therapy on Body Awareness in Patients with Chronic Pain',
+    authors: 'de Jong M, Lazar SW, Hug K, et al.',
+    firstAuthor: 'de Jong M',
+    journal: 'Frontiers in Psychology',
+    year: 2016,
+    assignedTo: ['3', '1'],
+    status: 'reconcile',
+    disagreements: 3,
+    resolved: 1,
+    checklistType: 'AMSTAR2',
+    pdfs: [{ id: 'pdf3', name: 'deJong_2016_FrontPsych.pdf', tag: 'primary', size: '890 KB' }],
+  },
+  {
+    id: '3',
+    title: 'A Pilot Study of Mindfulness Meditation for Pediatric Chronic Pain',
+    authors: 'Jastrowski Mano KE, Salamon KS, Hainsworth KR, et al.',
+    firstAuthor: 'Jastrowski Mano KE',
+    journal: 'Children',
+    year: 2019,
+    assignedTo: ['2'],
+    status: 'in-review',
+    progress: 65,
+    checklistType: 'AMSTAR2',
+    pdfs: [
+      { id: 'pdf4', name: 'Jastrowski_2019_Children.pdf', tag: 'primary', size: '1.1 MB' },
+      { id: 'pdf5', name: 'Supplementary_Materials.pdf', tag: 'secondary', size: '2.3 MB' },
+    ],
+  },
+  {
+    id: '4',
+    title: 'Mindfulness-Based Intervention for Fibromyalgia: Impact on Pain and Quality of Life',
+    authors: 'Schmidt S, Grossman P, Schwarzer B, et al.',
+    firstAuthor: 'Schmidt S',
+    journal: 'Pain Medicine',
+    year: 2020,
+    assignedTo: [],
+    status: 'unassigned',
+    pdfs: [{ id: 'pdf6', name: 'Schmidt_2020_PainMed.pdf', tag: 'primary', size: '750 KB' }],
+  },
+  {
+    id: '5',
+    title: 'Online Mindfulness Training for Chronic Pain Management',
+    authors: 'Gardner-Nix J, Backman S, Barbati J, et al.',
+    firstAuthor: 'Gardner-Nix J',
+    journal: 'Journal of Pain Research',
+    year: 2021,
+    assignedTo: [],
+    status: 'unassigned',
+    pdfs: [],
+  },
+];
+
+// Helper to get studies by status
+const getStudiesByStatus = status => mockStudies.filter(s => s.status === status);
+
+// Get member name by ID
+const getMemberName = id => mockMembers.find(m => m.id === id)?.name || 'Unknown';
+
+// ============================================================================
+// HELPER COMPONENTS
+// ============================================================================
+
+function Avatar(props) {
+  const getInitials = name =>
+    name
+      ?.split(' ')
+      .map(n => n[0])
+      .join('')
+      .slice(0, 2) || '?';
+
+  const getColor = name => {
+    const colors = [
+      { bg: '#dbeafe', text: '#1d4ed8' },
+      { bg: '#d1fae5', text: '#047857' },
+      { bg: '#fef3c7', text: '#b45309' },
+      { bg: '#fce7f3', text: '#be185d' },
+      { bg: '#e0e7ff', text: '#4338ca' },
+    ];
+    const index = name ? name.charCodeAt(0) % colors.length : 0;
+    return colors[index];
+  };
+
+  const color = () => getColor(props.name);
+  const size = () => props.size || '32px';
+  const fontSize = () => props.fontSize || '11px';
+
+  return (
+    <div
+      class='flex shrink-0 items-center justify-center rounded-full font-semibold'
+      style={{
+        width: size(),
+        height: size(),
+        'font-size': fontSize(),
+        background: color().bg,
+        color: color().text,
+      }}
+    >
+      {getInitials(props.name)}
+    </div>
+  );
+}
+
+function Badge(props) {
+  const variants = {
+    success: { bg: tokens.successLight, text: tokens.success, border: '#a7f3d0' },
+    warning: { bg: tokens.warningLight, text: tokens.warning, border: '#fcd34d' },
+    danger: { bg: tokens.dangerLight, text: tokens.danger, border: '#fca5a5' },
+    info: { bg: tokens.blue50, text: tokens.blue700, border: tokens.blue200 },
+    neutral: { bg: tokens.slate100, text: tokens.slate600, border: tokens.slate200 },
+  };
+
+  const style = () => variants[props.variant || 'neutral'];
+
+  return (
+    <span
+      class='inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium'
+      style={{
+        background: style().bg,
+        color: style().text,
+        'border-color': style().border,
+      }}
+    >
+      {props.children}
+    </span>
+  );
+}
+
+function ProgressBar(props) {
+  return (
+    <div class='h-1.5 w-full overflow-hidden rounded-full' style={{ background: tokens.slate200 }}>
+      <div
+        class='h-full rounded-full transition-all duration-300'
+        style={{
+          width: `${props.value}%`,
+          background: `linear-gradient(90deg, ${tokens.blue500}, ${tokens.blue600})`,
+        }}
+      />
+    </div>
+  );
+}
+
+function EmptyState(props) {
+  return (
+    <div class='flex flex-col items-center justify-center py-12 text-center'>
+      <div
+        class='mb-4 flex h-12 w-12 items-center justify-center rounded-xl'
+        style={{ background: tokens.slate100, color: tokens.slate400 }}
+      >
+        {props.icon}
+      </div>
+      <h3 class='mb-1 text-sm font-medium' style={{ color: tokens.slate900 }}>
+        {props.title}
+      </h3>
+      <p class='mb-4 max-w-sm text-sm' style={{ color: tokens.slate500 }}>
+        {props.description}
+      </p>
+      <Show when={props.action}>
+        <button
+          class='flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors'
+          style={{ background: tokens.blue600 }}
+        >
+          {props.actionIcon}
+          {props.action}
+        </button>
+      </Show>
+    </div>
+  );
+}
+
+function Card(props) {
+  return (
+    <div
+      class='rounded-xl border'
+      style={{
+        background: 'white',
+        'border-color': props.borderColor || tokens.slate200,
+      }}
+    >
+      <Show when={props.header}>
+        <div
+          class='flex items-center justify-between border-b px-5 py-4'
+          style={{ 'border-color': tokens.slate100 }}
+        >
+          {props.header}
+        </div>
+      </Show>
+      <div class={props.noPadding ? '' : 'p-5'}>{props.children}</div>
+    </div>
+  );
+}
+
+/**
+ * PdfListItem - Individual PDF row in expanded section
+ */
+function PdfListItem(props) {
+  const tagColors = {
+    primary: { bg: tokens.blue50, text: tokens.blue700 },
+    protocol: { bg: '#f0fdf4', text: '#15803d' },
+    secondary: { bg: tokens.slate100, text: tokens.slate600 },
+  };
+  const tagStyle = () => tagColors[props.pdf.tag] || tagColors.secondary;
+
+  return (
+    <div
+      class='flex items-center gap-3 rounded-lg px-3 py-2 transition-colors'
+      style={{ background: tokens.slate50 }}
+    >
+      <FiFile class='h-4 w-4 shrink-0' style={{ color: tokens.slate400 }} />
+      <div class='min-w-0 flex-1'>
+        <p class='truncate text-sm font-medium' style={{ color: tokens.slate700 }}>
+          {props.pdf.name}
+        </p>
+        <div class='mt-0.5 flex items-center gap-2'>
+          <span
+            class='rounded px-1.5 py-0.5 text-xs font-medium capitalize'
+            style={{ background: tagStyle().bg, color: tagStyle().text }}
+          >
+            {props.pdf.tag}
+          </span>
+          <Show when={props.pdf.size}>
+            <span class='text-xs' style={{ color: tokens.slate400 }}>
+              {props.pdf.size}
+            </span>
+          </Show>
+        </div>
+      </div>
+      <div class='flex items-center gap-1'>
+        <button
+          class='rounded-lg p-1.5 transition-colors hover:bg-white'
+          style={{ color: tokens.slate400 }}
+          title='View PDF'
+        >
+          <FiExternalLink class='h-4 w-4' />
+        </button>
+        <button
+          class='rounded-lg p-1.5 transition-colors hover:bg-white'
+          style={{ color: tokens.slate400 }}
+          title='Download PDF'
+        >
+          <FiDownload class='h-4 w-4' />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StudyRow - Collapsible study card matching real implementation pattern
+ * Used across Todo, Reconcile, and Completed tabs
+ */
+function StudyRow(props) {
+  // props.study: Study object with pdfs array
+  // props.expanded: boolean (controlled)
+  // props.onToggle: () => void
+  // props.badges: JSX for badges section
+  // props.actions: JSX for action buttons
+  // props.children: Additional content below header (e.g., reconciliation info)
+
+  const study = () => props.study;
+  const hasPdfs = () => (study().pdfs || []).length > 0;
+
+  // Citation line: author (year)
+  const citationLine = () => {
+    const author = study().firstAuthor;
+    const year = study().year;
+    if (!author && !year) return null;
+    return `${author || 'Unknown'}${year ? ` (${year})` : ''}`;
+  };
+
+  // Handle header click - toggle unless clicking interactive elements
+  const handleHeaderClick = e => {
+    if (!hasPdfs()) return;
+    const target = e.target;
+    const interactive = target.closest('button, [role="button"], [data-selectable], input');
+    if (interactive) return;
+    props.onToggle?.();
+  };
+
+  return (
+    <div
+      class='overflow-hidden rounded-lg border transition-colors'
+      style={{
+        background: 'white',
+        'border-color': tokens.slate200,
+      }}
+    >
+      {/* Header row */}
+      <div
+        class={`flex items-center gap-3 px-4 py-3 ${hasPdfs() ? 'cursor-pointer' : ''}`}
+        style={{ userSelect: 'none' }}
+        onClick={handleHeaderClick}
+      >
+        {/* Chevron (only if has PDFs) */}
+        <Show when={hasPdfs()}>
+          <div class='-ml-1 shrink-0 p-1'>
+            <FiChevronRight
+              class='h-5 w-5 transition-transform duration-200'
+              style={{
+                color: tokens.slate400,
+                transform: props.expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+              }}
+            />
+          </div>
+        </Show>
+
+        {/* Study info */}
+        <div class='min-w-0 flex-1'>
+          <p class='truncate font-medium' style={{ color: tokens.slate900 }}>
+            {study().title}
+          </p>
+          <Show when={citationLine()}>
+            <p
+              class='mt-0.5 w-fit truncate text-xs'
+              style={{ color: tokens.slate500, cursor: 'text', userSelect: 'text' }}
+              data-selectable
+            >
+              {citationLine()}
+              <Show when={hasPdfs()}>
+                <span style={{ color: tokens.slate400 }}> - {study().pdfs.length} PDFs</span>
+              </Show>
+            </p>
+          </Show>
+        </div>
+
+        {/* Badges section */}
+        <Show when={props.badges}>
+          <div class='flex shrink-0 items-center gap-2'>{props.badges}</div>
+        </Show>
+
+        {/* Actions section */}
+        <Show when={props.actions}>
+          <div class='flex shrink-0 items-center gap-2'>{props.actions}</div>
+        </Show>
+      </div>
+
+      {/* Additional content (e.g., reviewer info for reconcile) */}
+      <Show when={props.children}>{props.children}</Show>
+
+      {/* Expanded PDF section */}
+      <Show when={props.expanded && hasPdfs()}>
+        <div class='space-y-2 border-t px-4 py-3' style={{ 'border-color': tokens.slate100 }}>
+          <For each={study().pdfs}>{pdf => <PdfListItem pdf={pdf} />}</For>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+// ============================================================================
+// ADD STUDIES COMPONENTS (from wizard)
+// ============================================================================
+
+/**
+ * Tab button for import sources
+ */
+function ImportTab(props) {
+  return (
+    <button
+      type='button'
+      onClick={props.onClick}
+      class='flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-all duration-200'
+      style={{
+        'border-color': props.active ? tokens.blue600 : 'transparent',
+        color: props.active ? tokens.blue700 : tokens.slate500,
+        background: props.active ? tokens.blue50 : 'transparent',
+      }}
+    >
+      {props.icon}
+      {props.label}
+    </button>
+  );
+}
+
+/**
+ * PDF Upload Tab Content
+ */
+function PdfUploadContent(props) {
+  const [isDragging, setIsDragging] = createSignal(false);
+
+  return (
+    <div class='space-y-4'>
+      <div
+        class='relative rounded-xl border-2 border-dashed p-8 text-center transition-all duration-200'
+        style={{
+          'border-color': isDragging() ? tokens.blue500 : tokens.slate200,
+          background: isDragging() ? tokens.blue50 : tokens.slate50,
+        }}
+        onDragOver={e => {
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={e => {
+          e.preventDefault();
+          setIsDragging(false);
+          props.onUpload?.();
+        }}
+      >
+        <div
+          class='mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full'
+          style={{ background: tokens.blue100, color: tokens.blue600 }}
+        >
+          <FiUpload class='h-6 w-6' />
+        </div>
+        <p class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+          Drag and drop PDF files here
+        </p>
+        <p class='mt-1 text-xs' style={{ color: tokens.slate500 }}>
+          or click to browse
+        </p>
+        <input
+          type='file'
+          accept='.pdf'
+          multiple
+          class='absolute inset-0 cursor-pointer opacity-0'
+          onChange={() => props.onUpload?.()}
+        />
+      </div>
+      <p class='text-center text-xs' style={{ color: tokens.slate400 }}>
+        Metadata will be automatically extracted from uploaded PDFs
+      </p>
+    </div>
+  );
+}
+
+/**
+ * DOI/PMID Lookup Tab Content
+ */
+function DoiLookupContent(props) {
+  const [input, setInput] = createSignal('');
+  const [isLoading, setIsLoading] = createSignal(false);
+
+  const handleLookup = () => {
+    if (!input()) return;
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      props.onLookup?.(input());
+      setInput('');
+    }, 800);
+  };
+
+  return (
+    <div class='space-y-4'>
+      <div>
+        <label class='mb-1.5 block text-sm font-medium' style={{ color: tokens.slate700 }}>
+          Enter DOIs or PMIDs
+        </label>
+        <textarea
+          value={input()}
+          onInput={e => setInput(e.target.value)}
+          placeholder='10.1001/jama.2016.0086&#10;10.3389/fpsyg.2016.00578&#10;PMID: 27002445'
+          rows={4}
+          class='w-full resize-none rounded-lg border px-3 py-2.5 text-sm transition-all duration-200 outline-none'
+          style={{
+            'border-color': tokens.slate200,
+            background: 'white',
+            color: tokens.slate900,
+          }}
+        />
+        <p class='mt-1.5 text-xs' style={{ color: tokens.slate500 }}>
+          One identifier per line. Supports DOI (10.xxxx/...) and PMID formats.
+        </p>
+      </div>
+
+      <button
+        onClick={handleLookup}
+        disabled={!input() || isLoading()}
+        class='flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200'
+        style={{
+          background: input() && !isLoading() ? tokens.blue600 : tokens.slate100,
+          color: input() && !isLoading() ? 'white' : tokens.slate400,
+          cursor: input() && !isLoading() ? 'pointer' : 'not-allowed',
+        }}
+      >
+        <Show when={isLoading()} fallback={<FiSearch class='h-4 w-4' />}>
+          <div
+            class='h-4 w-4 animate-spin rounded-full border-2'
+            style={{ 'border-color': `${tokens.slate300} transparent transparent transparent` }}
+          />
+        </Show>
+        {isLoading() ? 'Looking up...' : 'Look up metadata'}
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Reference File Import Tab Content
+ */
+function ReferenceFileContent(props) {
+  return (
+    <div class='space-y-4'>
+      <div
+        class='relative rounded-xl border-2 border-dashed p-6 text-center transition-all duration-200'
+        style={{
+          'border-color': tokens.slate200,
+          background: tokens.slate50,
+        }}
+      >
+        <div
+          class='mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full'
+          style={{ background: tokens.slate200, color: tokens.slate500 }}
+        >
+          <FiFileText class='h-5 w-5' />
+        </div>
+        <p class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+          Upload reference file
+        </p>
+        <p class='mt-1 text-xs' style={{ color: tokens.slate500 }}>
+          RIS, BibTeX, EndNote XML, or CSV
+        </p>
+        <input
+          type='file'
+          accept='.ris,.bib,.xml,.csv'
+          class='absolute inset-0 cursor-pointer opacity-0'
+          onChange={() => props.onUpload?.()}
+        />
+      </div>
+
+      <div class='flex items-center gap-3'>
+        <div class='h-px flex-1' style={{ background: tokens.slate200 }} />
+        <span class='text-xs' style={{ color: tokens.slate400 }}>
+          Supported formats
+        </span>
+        <div class='h-px flex-1' style={{ background: tokens.slate200 }} />
+      </div>
+
+      <div class='grid grid-cols-4 gap-2'>
+        {[
+          { name: 'RIS', desc: 'Research Info Systems' },
+          { name: 'BibTeX', desc: 'LaTeX bibliography' },
+          { name: 'EndNote', desc: 'XML export' },
+          { name: 'CSV', desc: 'Spreadsheet' },
+        ].map(format => (
+          <div
+            class='rounded-lg border p-3 text-center'
+            style={{ 'border-color': tokens.slate200, background: 'white' }}
+          >
+            <p class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+              {format.name}
+            </p>
+            <p class='mt-0.5 text-xs' style={{ color: tokens.slate400 }}>
+              {format.desc}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Google Drive Tab Content
+ */
+function GoogleDriveContent(props) {
+  const [isConnected, setIsConnected] = createSignal(false);
+
+  return (
+    <div class='space-y-4'>
+      <Show
+        when={isConnected()}
+        fallback={
+          <div
+            class='rounded-xl border p-6 text-center'
+            style={{ 'border-color': tokens.slate200 }}
+          >
+            <div
+              class='mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full'
+              style={{ background: '#fef3c7', color: '#b45309' }}
+            >
+              <FiFolder class='h-6 w-6' />
+            </div>
+            <p class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+              Connect Google Drive
+            </p>
+            <p class='mx-auto mt-1 max-w-xs text-xs' style={{ color: tokens.slate500 }}>
+              Import PDFs directly from your Google Drive folders
+            </p>
+            <button
+              onClick={() => setIsConnected(true)}
+              class='mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200'
+              style={{ background: tokens.blue600, color: 'white' }}
+            >
+              <FiExternalLink class='h-4 w-4' />
+              Connect Drive
+            </button>
+          </div>
+        }
+      >
+        <div class='rounded-xl border' style={{ 'border-color': tokens.slate200 }}>
+          <div
+            class='flex items-center justify-between border-b px-4 py-3'
+            style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+          >
+            <div class='flex items-center gap-2'>
+              <FiFolder class='h-4 w-4' style={{ color: tokens.slate500 }} />
+              <span class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+                My Drive / Research Papers
+              </span>
+            </div>
+            <button
+              class='text-xs'
+              style={{ color: tokens.blue600 }}
+              onClick={() => setIsConnected(false)}
+            >
+              Disconnect
+            </button>
+          </div>
+          <div class='divide-y' style={{ 'border-color': tokens.slate100 }}>
+            {[
+              { name: 'Cherkin_2016_JAMA.pdf', selected: true },
+              { name: 'deJong_2016_FrontPsych.pdf', selected: true },
+              { name: 'Schmidt_2020_PainMed.pdf', selected: false },
+              { name: 'Gardner_2021_JPainRes.pdf', selected: false },
+            ].map(file => (
+              <div
+                class='flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors'
+                style={{ background: file.selected ? tokens.blue50 : 'white' }}
+              >
+                <input
+                  type='checkbox'
+                  checked={file.selected}
+                  class='h-4 w-4 rounded'
+                  style={{ accentColor: tokens.blue600 }}
+                />
+                <FiFile class='h-4 w-4' style={{ color: tokens.slate400 }} />
+                <span class='text-sm' style={{ color: tokens.slate700 }}>
+                  {file.name}
+                </span>
+              </div>
+            ))}
+          </div>
+          <div
+            class='flex items-center justify-between border-t px-4 py-3'
+            style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+          >
+            <span class='text-xs' style={{ color: tokens.slate500 }}>
+              2 files selected
+            </span>
+            <button
+              class='rounded-lg px-3 py-1.5 text-sm font-medium'
+              style={{ background: tokens.blue600, color: 'white' }}
+              onClick={() => props.onImport?.()}
+            >
+              Import Selected
+            </button>
+          </div>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+/**
+ * Staged Study Card
+ */
+function StagedStudyCard(props) {
+  return (
+    <div
+      class='group flex items-start gap-3 rounded-lg border p-4 transition-all duration-150'
+      style={{
+        background: 'white',
+        'border-color': props.duplicate ? '#fcd34d' : tokens.slate200,
+      }}
+    >
+      <div
+        class='mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg'
+        style={{
+          background: props.study.hasPdf ? tokens.blue50 : tokens.slate100,
+          color: props.study.hasPdf ? tokens.blue600 : tokens.slate400,
+        }}
+      >
+        <Show when={props.study.hasPdf} fallback={<FiFileText class='h-5 w-5' />}>
+          <FiFile class='h-5 w-5' />
+        </Show>
+      </div>
+
+      <div class='min-w-0 flex-1'>
+        <p class='text-sm leading-snug font-medium' style={{ color: tokens.slate900 }}>
+          {props.study.title}
+        </p>
+        <p class='mt-1 truncate text-xs' style={{ color: tokens.slate500 }}>
+          {props.study.authors}
+        </p>
+        <div class='mt-2 flex flex-wrap items-center gap-2'>
+          <Show when={props.study.journal}>
+            <span class='text-xs' style={{ color: tokens.slate400 }}>
+              {props.study.journal}
+            </span>
+          </Show>
+          <Show when={props.study.year}>
+            <span class='text-xs' style={{ color: tokens.slate400 }}>
+              ({props.study.year})
+            </span>
+          </Show>
+          <Show when={props.study.hasPdf}>
+            <span
+              class='inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs'
+              style={{ background: tokens.blue50, color: tokens.blue700 }}
+            >
+              <FiFile class='h-3 w-3' />
+              PDF
+            </span>
+          </Show>
+          <Show when={props.duplicate}>
+            <span
+              class='inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs'
+              style={{ background: '#fef3c7', color: '#b45309' }}
+            >
+              <FiAlertCircle class='h-3 w-3' />
+              Possible duplicate
+            </span>
+          </Show>
+        </div>
+      </div>
+
+      <button
+        class='shrink-0 rounded-lg p-1.5 opacity-0 transition-all duration-150 group-hover:opacity-100'
+        style={{ color: tokens.slate400 }}
+        onClick={() => props.onRemove?.()}
+      >
+        <FiX class='h-4 w-4' />
+      </button>
+    </div>
+  );
+}
+
+// ============================================================================
+// ASSIGNMENT COMPONENTS (from wizard)
+// ============================================================================
+
+const PERCENT_PRESETS = [0, 25, 33, 50, 75, 100];
+
+function PresetButton(props) {
+  return (
+    <button
+      type='button'
+      onClick={props.onClick}
+      class='rounded-md px-2 py-1 text-xs font-medium transition-all'
+      style={{
+        background: props.active ? tokens.blue600 : tokens.slate100,
+        color: props.active ? 'white' : tokens.slate600,
+      }}
+    >
+      {props.value}%
+    </button>
+  );
+}
+
+function MemberPercentRow(props) {
+  return (
+    <div
+      class='flex items-center gap-3 rounded-lg border p-3'
+      style={{ background: 'white', 'border-color': tokens.slate200 }}
+    >
+      <Avatar name={props.member.name} size='32px' fontSize='11px' />
+      <div class='min-w-0 flex-1'>
+        <p class='truncate text-sm font-medium' style={{ color: tokens.slate700 }}>
+          {props.member.name}
+        </p>
+      </div>
+      <div class='flex items-center gap-1'>
+        <For each={PERCENT_PRESETS}>
+          {preset => (
+            <PresetButton
+              value={preset}
+              active={props.percent === preset}
+              onClick={() => props.onChange(preset)}
+            />
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}
+
+function AssignmentPreviewRow(props) {
+  const hasConflict = () => props.assignment.reviewer1?.id === props.assignment.reviewer2?.id;
+  const isEven = () => props.index % 2 === 0;
+
+  const rowBg = () => {
+    if (hasConflict()) return '#fef2f2';
+    if (isEven()) return tokens.slate50;
+    return 'white';
+  };
+
+  return (
+    <tr style={{ background: rowBg() }}>
+      <td class='max-w-xs truncate py-2.5 pr-4 pl-4 text-sm' style={{ color: tokens.slate700 }}>
+        {props.assignment.title}
+      </td>
+      <td class='py-2.5 pr-4'>
+        <Show when={props.assignment.reviewer1}>
+          <div class='flex items-center gap-2'>
+            <Avatar name={props.assignment.reviewer1.name} size='22px' fontSize='8px' />
+            <span class='text-sm' style={{ color: tokens.slate600 }}>
+              {props.assignment.reviewer1.name}
+            </span>
+          </div>
+        </Show>
+      </td>
+      <td class='py-2.5 pr-4'>
+        <Show when={props.assignment.reviewer2}>
+          <div class='flex items-center gap-2'>
+            <Avatar name={props.assignment.reviewer2.name} size='22px' fontSize='8px' />
+            <span class='text-sm' style={{ color: hasConflict() ? '#dc2626' : tokens.slate600 }}>
+              {props.assignment.reviewer2.name}
+              {hasConflict() && ' (conflict)'}
+            </span>
+          </div>
+        </Show>
+      </td>
+    </tr>
+  );
+}
+
+// ============================================================================
+// TAB CONTENT COMPONENTS
+// ============================================================================
+
+function OverviewTab() {
+  const todoStudies = () => getStudiesByStatus('in-review');
+  const reconcileStudies = () => getStudiesByStatus('reconcile');
+  const completedStudies = () => getStudiesByStatus('completed');
+
+  const stats = createMemo(() => ({
+    total: mockStudies.length,
+    completed: completedStudies().length,
+    inReview: todoStudies().length,
+    needsReconcile: reconcileStudies().length,
+    unassigned: mockStudies.filter(s => s.status === 'unassigned').length,
+  }));
+
+  const progress = () => Math.round((stats().completed / stats().total) * 100) || 0;
+
+  // Mock inter-rater reliability data
+  const reliability = {
+    cohensKappa: 0.72,
+    percentAgreement: 84,
+    interpretation: 'Substantial Agreement',
+  };
+
+  return (
+    <div class='space-y-6'>
+      {/* Progress Overview - simplified */}
+      <Card>
+        <div class='flex items-center justify-between'>
+          <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+            Project Progress
+          </h3>
+          <span class='text-2xl font-bold' style={{ color: tokens.blue600 }}>
+            {progress()}%
+          </span>
+        </div>
+        <div class='mt-3 h-3 overflow-hidden rounded-full' style={{ background: tokens.slate100 }}>
+          <div
+            class='h-full rounded-full transition-all duration-500'
+            style={{
+              width: `${progress()}%`,
+              background: `linear-gradient(90deg, ${tokens.blue500}, ${tokens.blue600})`,
+            }}
+          />
+        </div>
+      </Card>
+
+      {/* Inter-rater Reliability */}
+      <Card
+        header={
+          <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+            Inter-rater Reliability
+          </h3>
+        }
+      >
+        <div class='grid grid-cols-3 gap-6'>
+          <div class='text-center'>
+            <p class='text-3xl font-bold' style={{ color: tokens.blue600 }}>
+              {reliability.cohensKappa.toFixed(2)}
+            </p>
+            <p class='mt-1 text-sm' style={{ color: tokens.slate500 }}>
+              Cohen's Kappa
+            </p>
+          </div>
+          <div class='text-center'>
+            <p class='text-3xl font-bold' style={{ color: tokens.success }}>
+              {reliability.percentAgreement}%
+            </p>
+            <p class='mt-1 text-sm' style={{ color: tokens.slate500 }}>
+              Percent Agreement
+            </p>
+          </div>
+          <div class='text-center'>
+            <span
+              class='inline-block rounded-full px-3 py-1 text-sm font-medium'
+              style={{ background: tokens.successLight, color: tokens.success }}
+            >
+              {reliability.interpretation}
+            </span>
+            <p class='mt-2 text-sm' style={{ color: tokens.slate500 }}>
+              Interpretation
+            </p>
+          </div>
+        </div>
+        <p class='mt-4 text-center text-xs' style={{ color: tokens.slate400 }}>
+          Based on {stats().completed} completed studies with dual-reviewer assessment
+        </p>
+      </Card>
+
+      {/* Team Members */}
+      <Card
+        header={
+          <>
+            <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+              Team Members ({mockMembers.length})
+            </h3>
+            <button
+              class='flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors'
+              style={{ background: tokens.blue600 }}
+            >
+              <FiUserPlus class='h-4 w-4' />
+              Invite
+            </button>
+          </>
+        }
+      >
+        <div class='space-y-2'>
+          <For each={mockMembers}>
+            {(member, index) => (
+              <div
+                class='flex items-center justify-between rounded-lg p-3 transition-colors'
+                style={{ background: index() % 2 === 0 ? tokens.slate50 : 'transparent' }}
+              >
+                <div class='flex items-center gap-3'>
+                  <Avatar name={member.name} />
+                  <div>
+                    <p class='font-medium' style={{ color: tokens.slate900 }}>
+                      {member.name}
+                    </p>
+                    <p class='text-sm' style={{ color: tokens.slate500 }}>
+                      {member.email}
+                    </p>
+                  </div>
+                </div>
+                <Badge variant={member.role === 'Owner' ? 'info' : 'neutral'}>{member.role}</Badge>
+              </div>
+            )}
+          </For>
+        </div>
+      </Card>
+
+      {/* Recent Activity */}
+      <Card
+        header={
+          <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+            Recent Activity
+          </h3>
+        }
+      >
+        <div class='space-y-4'>
+          {[
+            {
+              action: 'Completed review',
+              study: 'MBSR for Chronic Low Back Pain',
+              user: 'Dr. Sarah Chen',
+              time: '2 hours ago',
+            },
+            {
+              action: 'Started review',
+              study: 'Mindfulness Meditation for Pediatric Chronic Pain',
+              user: 'Dr. Michael Torres',
+              time: '5 hours ago',
+            },
+            {
+              action: 'Added study',
+              study: 'Online Mindfulness Training for Chronic Pain',
+              user: 'Dr. Emily Watson',
+              time: '1 day ago',
+            },
+          ].map((item, index) => (
+            <div
+              class='flex items-center gap-4 rounded-lg p-3'
+              style={{ background: index % 2 === 0 ? tokens.slate50 : 'transparent' }}
+            >
+              <Avatar name={item.user} size='28px' fontSize='10px' />
+              <div class='min-w-0 flex-1'>
+                <p class='text-sm' style={{ color: tokens.slate700 }}>
+                  <span class='font-medium'>{item.user}</span>{' '}
+                  <span style={{ color: tokens.slate500 }}>{item.action}</span>
+                </p>
+                <p class='truncate text-sm' style={{ color: tokens.slate500 }}>
+                  {item.study}
+                </p>
+              </div>
+              <span class='shrink-0 text-xs' style={{ color: tokens.slate400 }}>
+                {item.time}
+              </span>
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+function TeamTab() {
+  const [showInvite, setShowInvite] = createSignal(false);
+
+  return (
+    <div class='space-y-6'>
+      <Card
+        header={
+          <>
+            <div>
+              <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+                Team Members
+              </h3>
+              <p class='text-sm' style={{ color: tokens.slate500 }}>
+                {mockMembers.length} members
+              </p>
+            </div>
+            <button
+              class='flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors'
+              style={{ background: tokens.blue600 }}
+              onClick={() => setShowInvite(true)}
+            >
+              <FiUserPlus class='h-4 w-4' />
+              Invite
+            </button>
+          </>
+        }
+      >
+        <Show when={showInvite()}>
+          <div
+            class='mb-4 rounded-lg border p-4'
+            style={{ background: tokens.blue50, 'border-color': tokens.blue200 }}
+          >
+            <div class='flex items-center gap-3'>
+              <input
+                type='email'
+                placeholder='colleague@university.edu'
+                class='flex-1 rounded-lg border bg-white px-3 py-2 text-sm focus:outline-none'
+                style={{ 'border-color': tokens.slate200 }}
+              />
+              <select
+                class='rounded-lg border bg-white px-3 py-2 text-sm'
+                style={{ 'border-color': tokens.slate200 }}
+              >
+                <option>Member</option>
+                <option>Owner</option>
+              </select>
+              <button
+                class='rounded-lg px-4 py-2 text-sm font-medium text-white'
+                style={{ background: tokens.blue600 }}
+              >
+                Send
+              </button>
+              <button
+                class='rounded-lg p-2 transition-colors'
+                style={{ color: tokens.slate400 }}
+                onClick={() => setShowInvite(false)}
+              >
+                <FiX class='h-4 w-4' />
+              </button>
+            </div>
+          </div>
+        </Show>
+
+        <div class='space-y-2'>
+          <For each={mockMembers}>
+            {(member, index) => (
+              <div
+                class='flex items-center justify-between rounded-lg p-3 transition-colors'
+                style={{ background: index() % 2 === 0 ? tokens.slate50 : 'transparent' }}
+              >
+                <div class='flex items-center gap-3'>
+                  <Avatar name={member.name} />
+                  <div>
+                    <p class='font-medium' style={{ color: tokens.slate900 }}>
+                      {member.name}
+                    </p>
+                    <p class='text-sm' style={{ color: tokens.slate500 }}>
+                      {member.email}
+                    </p>
+                  </div>
+                </div>
+                <div class='flex items-center gap-3'>
+                  <Badge variant={member.role === 'Owner' ? 'info' : 'neutral'}>
+                    {member.role}
+                  </Badge>
+                  <button
+                    class='rounded p-1.5 transition-colors'
+                    style={{ color: tokens.slate400 }}
+                  >
+                    <FiMoreHorizontal class='h-4 w-4' />
+                  </button>
+                </div>
+              </div>
+            )}
+          </For>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+function StudiesTab() {
+  const unassignedStudies = createMemo(() => mockStudies.filter(s => s.assignedTo.length === 0));
+
+  // Add Studies panel state
+  const [addStudiesExpanded, setAddStudiesExpanded] = createSignal(false);
+  const [activeImportTab, setActiveImportTab] = createSignal('pdf');
+  const [stagedStudies, setStagedStudies] = createSignal([]);
+
+  // Assignment panel state
+  const [showAssignmentPanel, setShowAssignmentPanel] = createSignal(false);
+  const [showCustomize, setShowCustomize] = createSignal(false);
+  const [pool1Percents, setPool1Percents] = createSignal(null);
+  const [pool2Percents, setPool2Percents] = createSignal(null);
+  const [previewAssignments, setPreviewAssignments] = createSignal([]);
+
+  // All Studies expand state
+  const [allStudiesExpanded, setAllStudiesExpanded] = createSignal(new Set());
+  const toggleAllStudiesExpanded = studyId => {
+    setAllStudiesExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(studyId)) {
+        next.delete(studyId);
+      } else {
+        next.add(studyId);
+      }
+      return next;
+    });
+  };
+
+  // Mock add studies
+  const addMockStudies = () => {
+    const newStudies = [
+      {
+        id: Date.now().toString(),
+        title: 'Mindfulness-Based Stress Reduction for Chronic Low Back Pain',
+        authors: 'Cherkin DC, Sherman KJ, Balderson BH, et al.',
+        journal: 'JAMA',
+        year: 2016,
+        hasPdf: true,
+      },
+      {
+        id: (Date.now() + 1).toString(),
+        title: 'Effects of Mindfulness-Based Cognitive Therapy on Body Awareness',
+        authors: 'de Jong M, Lazar SW, Hug K, et al.',
+        journal: 'Frontiers in Psychology',
+        year: 2016,
+        hasPdf: true,
+      },
+    ];
+    setStagedStudies([...stagedStudies(), ...newStudies]);
+  };
+
+  const addDoiStudy = () => {
+    const newStudy = {
+      id: Date.now().toString(),
+      title: 'A Pilot Study of Mindfulness Meditation for Pediatric Chronic Pain',
+      authors: 'Jastrowski Mano KE, Salamon KS, Hainsworth KR, et al.',
+      journal: 'Children',
+      year: 2019,
+      hasPdf: false,
+    };
+    setStagedStudies([...stagedStudies(), newStudy]);
+  };
+
+  const removeStudy = id => {
+    setStagedStudies(stagedStudies().filter(s => s.id !== id));
+  };
+
+  // Quick action button handler - expands and switches to tab
+  const handleQuickAction = tabId => {
+    setAddStudiesExpanded(true);
+    setActiveImportTab(tabId);
+  };
+
+  // Assignment helpers
+  const getEvenPercents = () => {
+    const each = Math.floor(100 / mockMembers.length);
+    const remainder = 100 - each * mockMembers.length;
+    const result = {};
+    mockMembers.forEach((m, i) => {
+      result[m.id] = each + (i < remainder ? 1 : 0);
+    });
+    return result;
+  };
+
+  const getPool1Percents = () => pool1Percents() || getEvenPercents();
+  const getPool2Percents = () => pool2Percents() || getEvenPercents();
+
+  const updatePool1Percent = (id, value) => {
+    const current = pool1Percents() || getEvenPercents();
+    setPool1Percents({ ...current, [id]: value });
+  };
+
+  const updatePool2Percent = (id, value) => {
+    const current = pool2Percents() || getEvenPercents();
+    setPool2Percents({ ...current, [id]: value });
+  };
+
+  const pool1Total = () => Object.values(getPool1Percents()).reduce((a, b) => a + b, 0);
+  const pool2Total = () => Object.values(getPool2Percents()).reduce((a, b) => a + b, 0);
+  const isPoolValid = total => total >= 99 && total <= 100;
+  const isCustomValid = () => isPoolValid(pool1Total()) && isPoolValid(pool2Total());
+
+  const shuffleArray = arr => {
+    const shuffled = [...arr];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+  };
+
+  const generateAssignments = () => {
+    const studiesToAssign = unassignedStudies();
+    const totalStudies = studiesToAssign.length;
+    const p1Percents = getPool1Percents();
+    const p2Percents = getPool2Percents();
+
+    const pool1Assignments = [];
+    const pool2Assignments = [];
+
+    const p1Members = mockMembers.filter(m => (p1Percents[m.id] || 0) > 0);
+    const p2Members = mockMembers.filter(m => (p2Percents[m.id] || 0) > 0);
+
+    let remaining1 = totalStudies;
+    p1Members.forEach((m, i) => {
+      const percent = p1Percents[m.id] || 0;
+      const count =
+        i === p1Members.length - 1 ? remaining1 : Math.round((percent / 100) * totalStudies);
+      remaining1 -= count;
+      for (let j = 0; j < count; j++) pool1Assignments.push(m);
+    });
+
+    let remaining2 = totalStudies;
+    p2Members.forEach((m, i) => {
+      const percent = p2Percents[m.id] || 0;
+      const count =
+        i === p2Members.length - 1 ? remaining2 : Math.round((percent / 100) * totalStudies);
+      remaining2 -= count;
+      for (let j = 0; j < count; j++) pool2Assignments.push(m);
+    });
+
+    const shuffled1 = shuffleArray(pool1Assignments);
+    const shuffled2 = shuffleArray(pool2Assignments);
+    const shuffledStudies = shuffleArray(studiesToAssign);
+
+    const assignments = shuffledStudies.map((study, i) => ({
+      ...study,
+      reviewer1: shuffled1[i],
+      reviewer2: shuffled2[i],
+    }));
+
+    // Resolve conflicts
+    for (let i = 0; i < assignments.length; i++) {
+      if (assignments[i].reviewer1?.id === assignments[i].reviewer2?.id) {
+        for (let j = 0; j < assignments.length; j++) {
+          if (i !== j && assignments[j].reviewer1?.id !== assignments[j].reviewer2?.id) {
+            const canSwap =
+              assignments[j].reviewer2?.id !== assignments[i].reviewer1?.id &&
+              assignments[i].reviewer2?.id !== assignments[j].reviewer1?.id;
+            if (canSwap) {
+              const temp = assignments[i].reviewer2;
+              assignments[i].reviewer2 = assignments[j].reviewer2;
+              assignments[j].reviewer2 = temp;
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    setPreviewAssignments(assignments);
+  };
+
+  const hasAssignments = () => previewAssignments().length > 0;
+  const hasConflicts = createMemo(() =>
+    previewAssignments().some(a => a.reviewer1?.id === a.reviewer2?.id),
+  );
+  const conflictCount = createMemo(
+    () => previewAssignments().filter(a => a.reviewer1?.id === a.reviewer2?.id).length,
+  );
+
+  const pool1MembersWithPercent = createMemo(() =>
+    mockMembers.map(m => ({ ...m, percent: getPool1Percents()[m.id] || 0 })),
+  );
+  const pool2MembersWithPercent = createMemo(() =>
+    mockMembers.map(m => ({ ...m, percent: getPool2Percents()[m.id] || 0 })),
+  );
+
+  return (
+    <div class='space-y-6'>
+      {/* Add Studies - Inline Expandable */}
+      <Card
+        header={
+          <>
+            <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+              Add Studies
+            </h3>
+            <Show when={addStudiesExpanded()}>
+              <button
+                onClick={() => setAddStudiesExpanded(false)}
+                class='flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors'
+                style={{ color: tokens.slate500 }}
+              >
+                <FiX class='h-4 w-4' />
+                Close
+              </button>
+            </Show>
+          </>
+        }
+      >
+        {/* Collapsed: Compact button row */}
+        <Show when={!addStudiesExpanded()}>
+          <div class='flex items-center gap-2'>
+            {[
+              { id: 'pdf', icon: FiUpload, label: 'Upload PDFs' },
+              { id: 'doi', icon: FiLink, label: 'DOI/PMID' },
+              { id: 'reference', icon: FiFileText, label: 'Reference File' },
+              { id: 'drive', icon: FiFolder, label: 'Google Drive' },
+            ].map(source => (
+              <button
+                onClick={() => handleQuickAction(source.id)}
+                class='flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-all'
+                style={{
+                  'border-color': tokens.slate200,
+                  color: tokens.slate600,
+                }}
+              >
+                <source.icon class='h-4 w-4' />
+                {source.label}
+              </button>
+            ))}
+          </div>
+        </Show>
+
+        {/* Expanded: Full import interface */}
+        <Show when={addStudiesExpanded()}>
+          <div
+            class='rounded-lg border'
+            style={{ background: tokens.slate50, 'border-color': tokens.slate200 }}
+          >
+            {/* Tabs */}
+            <div
+              class='flex border-b'
+              style={{ 'border-color': tokens.slate200, background: 'white' }}
+            >
+              <ImportTab
+                label='PDF Upload'
+                icon={<FiUpload class='h-4 w-4' />}
+                active={activeImportTab() === 'pdf'}
+                onClick={() => setActiveImportTab('pdf')}
+              />
+              <ImportTab
+                label='DOI / PMID'
+                icon={<FiSearch class='h-4 w-4' />}
+                active={activeImportTab() === 'doi'}
+                onClick={() => setActiveImportTab('doi')}
+              />
+              <ImportTab
+                label='Reference File'
+                icon={<FiFileText class='h-4 w-4' />}
+                active={activeImportTab() === 'reference'}
+                onClick={() => setActiveImportTab('reference')}
+              />
+              <ImportTab
+                label='Google Drive'
+                icon={<FiFolder class='h-4 w-4' />}
+                active={activeImportTab() === 'drive'}
+                onClick={() => setActiveImportTab('drive')}
+              />
+            </div>
+
+            {/* Tab content */}
+            <div class='p-6'>
+              <Show when={activeImportTab() === 'pdf'}>
+                <PdfUploadContent onUpload={addMockStudies} />
+              </Show>
+              <Show when={activeImportTab() === 'doi'}>
+                <DoiLookupContent onLookup={addDoiStudy} />
+              </Show>
+              <Show when={activeImportTab() === 'reference'}>
+                <ReferenceFileContent onUpload={addMockStudies} />
+              </Show>
+              <Show when={activeImportTab() === 'drive'}>
+                <GoogleDriveContent onImport={addMockStudies} />
+              </Show>
+            </div>
+          </div>
+
+          {/* Staged studies */}
+          <Show when={stagedStudies().length > 0}>
+            <div class='mt-4 border-t pt-4' style={{ 'border-color': tokens.slate200 }}>
+              <div class='mb-3 flex items-center justify-between'>
+                <h4 class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+                  Staged Studies ({stagedStudies().length})
+                </h4>
+                <button
+                  class='flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium'
+                  style={{ background: tokens.blue600, color: 'white' }}
+                >
+                  <FiPlus class='h-4 w-4' />
+                  Add to Project
+                </button>
+              </div>
+              <div class='space-y-2'>
+                <For each={stagedStudies()}>
+                  {study => (
+                    <StagedStudyCard study={study} onRemove={() => removeStudy(study.id)} />
+                  )}
+                </For>
+              </div>
+            </div>
+          </Show>
+        </Show>
+      </Card>
+
+      {/* Reviewer Assignment Panel */}
+      <Show when={unassignedStudies().length > 0}>
+        <Card borderColor={tokens.blue200}>
+          {/* Header */}
+          <div class='flex items-center justify-between'>
+            <div class='flex items-center gap-3'>
+              <div
+                class='flex h-10 w-10 items-center justify-center rounded-lg'
+                style={{ background: tokens.blue100, color: tokens.blue600 }}
+              >
+                <FiUsers class='h-5 w-5' />
+              </div>
+              <div>
+                <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+                  Assign Reviewers
+                </h3>
+                <p class='text-sm' style={{ color: tokens.slate500 }}>
+                  {unassignedStudies().length} studies need assignment
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={() => setShowAssignmentPanel(!showAssignmentPanel())}
+              class='flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors'
+              style={{
+                background: showAssignmentPanel() ? tokens.blue600 : tokens.blue50,
+                color: showAssignmentPanel() ? 'white' : tokens.blue700,
+              }}
+            >
+              <Show when={showAssignmentPanel()} fallback={<FiChevronDown class='h-4 w-4' />}>
+                <FiChevronUp class='h-4 w-4' />
+              </Show>
+              {showAssignmentPanel() ? 'Hide' : 'Show Assignment Tool'}
+            </button>
+          </div>
+
+          <Show when={showAssignmentPanel()}>
+            <div class='mt-6 border-t pt-6' style={{ 'border-color': tokens.slate200 }}>
+              {/* Summary stats */}
+              <div
+                class='flex items-center justify-between rounded-lg px-4 py-3'
+                style={{ background: tokens.slate100 }}
+              >
+                <p class='text-sm' style={{ color: tokens.slate600 }}>
+                  <span class='font-semibold' style={{ color: tokens.slate900 }}>
+                    {unassignedStudies().length}
+                  </span>{' '}
+                  unassigned studies
+                </p>
+                <p class='text-sm' style={{ color: tokens.slate600 }}>
+                  <span class='font-semibold' style={{ color: tokens.slate900 }}>
+                    {mockMembers.length}
+                  </span>{' '}
+                  reviewers
+                </p>
+                <p class='text-sm' style={{ color: tokens.slate600 }}>
+                  <span class='font-semibold' style={{ color: tokens.slate900 }}>
+                    {Math.round(100 / mockMembers.length)}%
+                  </span>{' '}
+                  each (even split)
+                </p>
+              </div>
+
+              {/* Customize toggle */}
+              <button
+                onClick={() => setShowCustomize(!showCustomize())}
+                class='mt-4 flex w-full items-center justify-between rounded-lg border px-4 py-3 text-sm font-medium transition-all'
+                style={{
+                  'border-color': showCustomize() ? tokens.blue300 : tokens.slate200,
+                  background: showCustomize() ? tokens.blue50 : 'white',
+                  color: showCustomize() ? tokens.blue700 : tokens.slate700,
+                }}
+              >
+                <div class='flex items-center gap-2'>
+                  <FiSliders class='h-4 w-4' />
+                  <span>Customize distribution</span>
+                </div>
+                <div class='flex items-center gap-2'>
+                  <span class='text-xs' style={{ color: tokens.slate400 }}>
+                    {showCustomize() ? 'Hide' : 'Adjust percentages per reviewer'}
+                  </span>
+                  <FiChevronRight
+                    class='h-4 w-4 transition-transform'
+                    style={{ transform: showCustomize() ? 'rotate(90deg)' : 'rotate(0deg)' }}
+                  />
+                </div>
+              </button>
+
+              {/* Customization panels */}
+              <Show when={showCustomize()}>
+                <div class='mt-4 space-y-4'>
+                  {/* Pool 1 */}
+                  <div
+                    class='rounded-xl border p-4'
+                    style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+                  >
+                    <div class='mb-3 flex items-center justify-between'>
+                      <h4 class='text-sm font-semibold' style={{ color: tokens.slate700 }}>
+                        1st Reviewer Pool
+                      </h4>
+                      <span
+                        class='text-xs font-medium'
+                        style={{ color: isPoolValid(pool1Total()) ? tokens.success : '#b45309' }}
+                      >
+                        Total: {pool1Total()}%{pool1Total() === 99 && ' (OK)'}
+                      </span>
+                    </div>
+                    <div class='space-y-2'>
+                      <For each={pool1MembersWithPercent()}>
+                        {member => (
+                          <MemberPercentRow
+                            member={member}
+                            percent={member.percent}
+                            onChange={val => updatePool1Percent(member.id, val)}
+                          />
+                        )}
+                      </For>
+                    </div>
+                  </div>
+
+                  {/* Pool 2 */}
+                  <div
+                    class='rounded-xl border p-4'
+                    style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+                  >
+                    <div class='mb-3 flex items-center justify-between'>
+                      <h4 class='text-sm font-semibold' style={{ color: tokens.slate700 }}>
+                        2nd Reviewer Pool
+                      </h4>
+                      <span
+                        class='text-xs font-medium'
+                        style={{ color: isPoolValid(pool2Total()) ? tokens.success : '#b45309' }}
+                      >
+                        Total: {pool2Total()}%{pool2Total() === 99 && ' (OK)'}
+                      </span>
+                    </div>
+                    <div class='space-y-2'>
+                      <For each={pool2MembersWithPercent()}>
+                        {member => (
+                          <MemberPercentRow
+                            member={member}
+                            percent={member.percent}
+                            onChange={val => updatePool2Percent(member.id, val)}
+                          />
+                        )}
+                      </For>
+                    </div>
+                  </div>
+
+                  <Show when={!isCustomValid()}>
+                    <p class='text-center text-xs' style={{ color: '#b45309' }}>
+                      Each pool must total 99-100% to generate assignments
+                    </p>
+                  </Show>
+                </div>
+              </Show>
+
+              {/* Action button */}
+              <div class='mt-4'>
+                <button
+                  onClick={generateAssignments}
+                  disabled={showCustomize() && !isCustomValid()}
+                  class='flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium transition-all duration-200'
+                  style={{
+                    background:
+                      showCustomize() && !isCustomValid() ? tokens.slate200 : tokens.blue600,
+                    color: showCustomize() && !isCustomValid() ? tokens.slate400 : 'white',
+                    cursor: showCustomize() && !isCustomValid() ? 'not-allowed' : 'pointer',
+                  }}
+                >
+                  <Show when={hasAssignments()} fallback={<FiShuffle class='h-4 w-4' />}>
+                    <FiShuffle class='h-4 w-4' />
+                  </Show>
+                  {hasAssignments() ? 'Reshuffle' : 'Assign Randomly (Even Split)'}
+                </button>
+              </div>
+
+              {/* Preview section */}
+              <Show when={hasAssignments()}>
+                <div class='mt-4'>
+                  <div
+                    class='overflow-hidden rounded-xl border'
+                    style={{ 'border-color': hasConflicts() ? '#fca5a5' : tokens.blue200 }}
+                  >
+                    <div
+                      class='flex items-center justify-between border-b px-4 py-3'
+                      style={{
+                        'border-color': hasConflicts() ? '#fca5a5' : tokens.blue200,
+                        background: hasConflicts() ? '#fef2f2' : tokens.blue50,
+                      }}
+                    >
+                      <div>
+                        <h4
+                          class='text-sm font-semibold'
+                          style={{ color: hasConflicts() ? '#991b1b' : tokens.blue900 }}
+                        >
+                          Assignment Preview
+                        </h4>
+                        <Show when={hasConflicts()}>
+                          <p class='text-xs' style={{ color: '#dc2626' }}>
+                            {conflictCount()} conflict{conflictCount() !== 1 && 's'} - click
+                            Reshuffle
+                          </p>
+                        </Show>
+                      </div>
+                      <span class='text-xs' style={{ color: tokens.slate500 }}>
+                        {unassignedStudies().length} studies assigned
+                      </span>
+                    </div>
+
+                    <div class='max-h-64 overflow-y-auto'>
+                      <table class='w-full text-left'>
+                        <thead class='sticky top-0' style={{ background: tokens.slate50 }}>
+                          <tr>
+                            <th
+                              class='py-2 pr-4 pl-4 text-xs font-medium'
+                              style={{ color: tokens.slate500 }}
+                            >
+                              Study
+                            </th>
+                            <th
+                              class='py-2 pr-4 text-xs font-medium'
+                              style={{ color: tokens.slate500 }}
+                            >
+                              1st Reviewer
+                            </th>
+                            <th
+                              class='py-2 pr-4 text-xs font-medium'
+                              style={{ color: tokens.slate500 }}
+                            >
+                              2nd Reviewer
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <For each={previewAssignments()}>
+                            {(assignment, index) => (
+                              <AssignmentPreviewRow assignment={assignment} index={index()} />
+                            )}
+                          </For>
+                        </tbody>
+                      </table>
+                    </div>
+
+                    {/* Apply button */}
+                    <div
+                      class='flex items-center justify-end border-t px-4 py-3'
+                      style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+                    >
+                      <button
+                        disabled={hasConflicts()}
+                        class='flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium'
+                        style={{
+                          background: hasConflicts() ? tokens.slate200 : tokens.success,
+                          color: hasConflicts() ? tokens.slate400 : 'white',
+                          cursor: hasConflicts() ? 'not-allowed' : 'pointer',
+                        }}
+                      >
+                        <FiCheck class='h-4 w-4' />
+                        Apply Assignments
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </Show>
+            </div>
+          </Show>
+        </Card>
+      </Show>
+
+      {/* All Studies - using collapsible card pattern */}
+      <div>
+        <div class='mb-3 flex items-center justify-between'>
+          <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+            All Studies ({mockStudies.length})
+          </h3>
+          <div class='relative'>
+            <FiSearch
+              class='absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2'
+              style={{ color: tokens.slate400 }}
+            />
+            <input
+              type='text'
+              placeholder='Search studies...'
+              class='w-64 rounded-lg border py-2 pr-3 pl-9 text-sm focus:outline-none'
+              style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+            />
+          </div>
+        </div>
+        <div class='space-y-2'>
+          <For each={mockStudies}>
+            {study => (
+              <AllStudiesStudyRow
+                study={study}
+                expanded={allStudiesExpanded().has(study.id)}
+                onToggle={() => toggleAllStudiesExpanded(study.id)}
+              />
+            )}
+          </For>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * AllStudiesStudyRow - Study card for All Studies tab with actions menu
+ */
+function AllStudiesStudyRow(props) {
+  const study = () => props.study;
+  const hasPdfs = () => (study().pdfs || []).length > 0;
+  const [showMenu, setShowMenu] = createSignal(false);
+
+  const citationLine = () => {
+    const author = study().firstAuthor;
+    const year = study().year;
+    if (!author && !year) return null;
+    return `${author || 'Unknown'}${year ? ` (${year})` : ''}`;
+  };
+
+  const handleHeaderClick = e => {
+    if (!hasPdfs()) return;
+    const target = e.target;
+    const interactive = target.closest(
+      'button, [role="button"], [data-selectable], input, [data-menu]',
+    );
+    if (interactive) return;
+    props.onToggle?.();
+  };
+
+  // Status badge helper
+  const getStatusBadge = () => {
+    const status = study().status;
+    switch (status) {
+      case 'completed':
+        return { variant: 'success', icon: FiCheckCircle, label: study().rating };
+      case 'reconcile':
+        return { variant: 'warning', icon: FiGitMerge, label: 'Reconcile' };
+      case 'in-review':
+        return { variant: 'info', icon: FiClipboard, label: 'In Review' };
+      case 'unassigned':
+        return { variant: 'neutral', icon: null, label: 'Unassigned' };
+      default:
+        return { variant: 'neutral', icon: null, label: status };
+    }
+  };
+
+  return (
+    <div
+      class='overflow-hidden rounded-lg border transition-colors hover:border-gray-300'
+      style={{
+        background: 'white',
+        'border-color': tokens.slate200,
+      }}
+    >
+      {/* Header row */}
+      <div
+        class={`flex items-center gap-3 px-4 py-3 ${hasPdfs() ? 'cursor-pointer' : ''}`}
+        style={{ userSelect: 'none' }}
+        onClick={handleHeaderClick}
+      >
+        {/* Chevron (only if has PDFs) */}
+        <Show when={hasPdfs()}>
+          <div class='-ml-1 shrink-0 p-1'>
+            <FiChevronRight
+              class='h-5 w-5 transition-transform duration-200'
+              style={{
+                color: tokens.slate400,
+                transform: props.expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+              }}
+            />
+          </div>
+        </Show>
+
+        {/* Study info */}
+        <div class='min-w-0 flex-1'>
+          <p class='truncate font-medium' style={{ color: tokens.slate900 }}>
+            {study().title}
+          </p>
+          <Show when={citationLine()}>
+            <p
+              class='mt-0.5 w-fit truncate text-xs'
+              style={{ color: tokens.slate500, cursor: 'text', userSelect: 'text' }}
+              data-selectable
+            >
+              {citationLine()}
+              <Show when={study().journal}>
+                <span style={{ color: tokens.slate400 }}> - {study().journal}</span>
+              </Show>
+            </p>
+          </Show>
+        </div>
+
+        {/* Status badge */}
+        <Badge variant={getStatusBadge().variant}>
+          {(() => {
+            const IconComponent = getStatusBadge().icon;
+            return IconComponent ? <IconComponent class='h-3 w-3' /> : null;
+          })()}
+          {getStatusBadge().label}
+        </Badge>
+
+        {/* Reviewer avatars */}
+        <Show when={study().assignedTo?.length > 0}>
+          <div class='flex -space-x-2'>
+            <For each={study().assignedTo.slice(0, 2)}>
+              {memberId => {
+                const member = mockMembers.find(m => m.id === memberId);
+                return member ? <Avatar name={member.name} size='26px' fontSize='9px' /> : null;
+              }}
+            </For>
+          </div>
+        </Show>
+        <Show when={!study().assignedTo?.length}>
+          <span class='text-xs italic' style={{ color: tokens.slate400 }}>
+            No reviewers
+          </span>
+        </Show>
+
+        {/* Actions menu */}
+        <div class='relative' data-menu>
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              setShowMenu(!showMenu());
+            }}
+            class='rounded-lg p-1.5 transition-colors hover:bg-gray-100'
+            style={{ color: tokens.slate400 }}
+          >
+            <FiMoreHorizontal class='h-4 w-4' />
+          </button>
+          <Show when={showMenu()}>
+            <div
+              class='absolute top-full right-0 z-10 mt-1 w-48 rounded-lg border bg-white py-1 shadow-lg'
+              style={{ 'border-color': tokens.slate200 }}
+            >
+              <button
+                class='flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-gray-50'
+                style={{ color: tokens.slate700 }}
+                onClick={() => setShowMenu(false)}
+              >
+                <FiUsers class='h-4 w-4' />
+                Assign Reviewers
+              </button>
+              <button
+                class='flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-gray-50'
+                style={{ color: tokens.slate700 }}
+                onClick={() => setShowMenu(false)}
+              >
+                <FiEdit3 class='h-4 w-4' />
+                Edit Study
+              </button>
+              <button
+                class='flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-gray-50'
+                style={{ color: tokens.slate700 }}
+                onClick={() => setShowMenu(false)}
+              >
+                <FiUpload class='h-4 w-4' />
+                Add PDF
+              </button>
+              <div class='my-1 border-t' style={{ 'border-color': tokens.slate100 }} />
+              <button
+                class='flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-red-50'
+                style={{ color: tokens.danger }}
+                onClick={() => setShowMenu(false)}
+              >
+                <FiX class='h-4 w-4' />
+                Delete Study
+              </button>
+            </div>
+          </Show>
+        </div>
+      </div>
+
+      {/* Expanded PDF section */}
+      <Show when={props.expanded && hasPdfs()}>
+        <div class='space-y-2 border-t px-4 py-3' style={{ 'border-color': tokens.slate100 }}>
+          <For each={study().pdfs}>{pdf => <PdfListItem pdf={pdf} />}</For>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+function TodoTab() {
+  const todoStudies = () => getStudiesByStatus('in-review');
+  const [expandedStudies, setExpandedStudies] = createSignal(new Set());
+
+  const toggleExpanded = studyId => {
+    setExpandedStudies(prev => {
+      const next = new Set(prev);
+      if (next.has(studyId)) {
+        next.delete(studyId);
+      } else {
+        next.add(studyId);
+      }
+      return next;
+    });
+  };
+
+  // Status badge styling
+  const getStatusStyle = status => {
+    switch (status) {
+      case 'in-progress':
+        return { bg: tokens.blue50, text: tokens.blue700 };
+      case 'not-started':
+        return { bg: tokens.slate100, text: tokens.slate600 };
+      default:
+        return { bg: tokens.blue50, text: tokens.blue700 };
+    }
+  };
+
+  return (
+    <div class='space-y-2'>
+      <Show
+        when={todoStudies().length > 0}
+        fallback={
+          <EmptyState
+            icon={<FiClipboard class='h-6 w-6' />}
+            title='No tasks assigned to you'
+            description='Studies assigned to you for review will appear here.'
+          />
+        }
+      >
+        <For each={todoStudies()}>
+          {study => (
+            <StudyRow
+              study={study}
+              expanded={expandedStudies().has(study.id)}
+              onToggle={() => toggleExpanded(study.id)}
+              badges={
+                <>
+                  {/* Checklist type badge */}
+                  <span
+                    class='rounded-full px-2 py-1 text-xs font-medium'
+                    style={{ background: tokens.slate100, color: tokens.slate700 }}
+                  >
+                    {study.checklistType}
+                  </span>
+                  {/* Status badge */}
+                  <span
+                    class='rounded-full px-2.5 py-1 text-xs font-medium'
+                    style={{
+                      background: getStatusStyle('in-progress').bg,
+                      color: getStatusStyle('in-progress').text,
+                    }}
+                  >
+                    In Progress
+                  </span>
+                </>
+              }
+              actions={
+                <button
+                  class='rounded-lg px-4 py-1.5 text-sm font-medium text-white transition-colors'
+                  style={{ background: tokens.blue600 }}
+                >
+                  Open
+                </button>
+              }
+            />
+          )}
+        </For>
+      </Show>
+    </div>
+  );
+}
+
+function ReconcileTab() {
+  const reconcileStudies = () => getStudiesByStatus('reconcile');
+  const [expandedStudies, setExpandedStudies] = createSignal(new Set());
+
+  const toggleExpanded = studyId => {
+    setExpandedStudies(prev => {
+      const next = new Set(prev);
+      if (next.has(studyId)) {
+        next.delete(studyId);
+      } else {
+        next.add(studyId);
+      }
+      return next;
+    });
+  };
+
+  // Get reviewer names for a study
+  const getReviewerNames = study => {
+    return study.assignedTo.map(id => getMemberName(id));
+  };
+
+  // Check if ready for reconciliation (both reviewers completed)
+  const isReady = study => study.assignedTo.length >= 2;
+
+  return (
+    <div class='space-y-2'>
+      <Show
+        when={reconcileStudies().length > 0}
+        fallback={
+          <EmptyState
+            icon={<FiGitMerge class='h-6 w-6' />}
+            title='No studies to reconcile'
+            description="When reviewers complete assessments with disagreements, they'll appear here."
+          />
+        }
+      >
+        <For each={reconcileStudies()}>
+          {study => (
+            <StudyRow
+              study={study}
+              expanded={expandedStudies().has(study.id)}
+              onToggle={() => toggleExpanded(study.id)}
+              badges={
+                <>
+                  {/* Reconciliation status badge */}
+                  <Show
+                    when={isReady(study)}
+                    fallback={
+                      <span
+                        class='rounded-full px-2.5 py-1 text-xs font-medium'
+                        style={{ background: tokens.warningLight, color: tokens.warning }}
+                      >
+                        Waiting for reviewers
+                      </span>
+                    }
+                  >
+                    <span
+                      class='rounded-full px-2.5 py-1 text-xs font-medium'
+                      style={{ background: tokens.successLight, color: tokens.success }}
+                    >
+                      Ready
+                    </span>
+                  </Show>
+                  {/* Reviewer names */}
+                  <Show when={isReady(study)}>
+                    <div class='flex items-center gap-2 text-sm' style={{ color: tokens.slate600 }}>
+                      <span>{getReviewerNames(study)[0]}</span>
+                      <span style={{ color: tokens.slate400 }}>vs</span>
+                      <span>{getReviewerNames(study)[1]}</span>
+                    </div>
+                  </Show>
+                </>
+              }
+              actions={
+                <button
+                  disabled={!isReady(study)}
+                  class='flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors'
+                  style={{
+                    background: isReady(study) ? tokens.blue600 : tokens.slate200,
+                    color: isReady(study) ? 'white' : tokens.slate500,
+                    cursor: isReady(study) ? 'pointer' : 'not-allowed',
+                  }}
+                >
+                  <FiGitMerge class='h-4 w-4' />
+                  Reconcile
+                </button>
+              }
+            />
+          )}
+        </For>
+      </Show>
+    </div>
+  );
+}
+
+function CompletedTab() {
+  const completedStudies = () => getStudiesByStatus('completed');
+  const [expandedStudies, setExpandedStudies] = createSignal(new Set());
+  const [showPreviousReviewers, setShowPreviousReviewers] = createSignal(null);
+
+  const toggleExpanded = studyId => {
+    setExpandedStudies(prev => {
+      const next = new Set(prev);
+      if (next.has(studyId)) {
+        next.delete(studyId);
+      } else {
+        next.add(studyId);
+      }
+      return next;
+    });
+  };
+
+  // Get reviewer names for a study
+  const getReviewerNames = study => {
+    return study.assignedTo.map(id => getMemberName(id));
+  };
+
+  // Confidence rating colors
+  const getRatingStyle = rating => {
+    switch (rating) {
+      case 'High':
+        return { bg: tokens.successLight, text: tokens.success };
+      case 'Moderate':
+        return { bg: tokens.warningLight, text: tokens.warning };
+      case 'Low':
+        return { bg: '#ffedd5', text: '#c2410c' };
+      case 'Critically Low':
+        return { bg: tokens.dangerLight, text: tokens.danger };
+      default:
+        return { bg: tokens.slate100, text: tokens.slate600 };
+    }
+  };
+
+  return (
+    <div class='space-y-2'>
+      <Show
+        when={completedStudies().length > 0}
+        fallback={
+          <EmptyState
+            icon={<FiCheckCircle class='h-6 w-6' />}
+            title='No completed reviews'
+            description='Studies that have been fully reviewed will appear here.'
+          />
+        }
+      >
+        <For each={completedStudies()}>
+          {study => (
+            <StudyRow
+              study={study}
+              expanded={expandedStudies().has(study.id)}
+              onToggle={() => toggleExpanded(study.id)}
+              badges={
+                <>
+                  {/* Checklist type badge */}
+                  <span
+                    class='rounded-full px-2 py-1 text-xs font-medium'
+                    style={{ background: tokens.slate100, color: tokens.slate700 }}
+                  >
+                    {study.checklistType}
+                  </span>
+                  {/* Rating badge */}
+                  <span
+                    class='rounded-full px-2.5 py-1 text-xs font-medium'
+                    style={{
+                      background: getRatingStyle(study.rating).bg,
+                      color: getRatingStyle(study.rating).text,
+                    }}
+                  >
+                    {study.rating} Confidence
+                  </span>
+                </>
+              }
+              actions={
+                <>
+                  {/* View Previous Reviewers (for dual-reviewer) */}
+                  <Show when={study.assignedTo.length >= 2}>
+                    <button
+                      onClick={e => {
+                        e.stopPropagation();
+                        setShowPreviousReviewers(study.id);
+                      }}
+                      class='rounded-lg px-3 py-1.5 text-sm font-medium transition-colors'
+                      style={{ background: tokens.slate100, color: tokens.slate700 }}
+                    >
+                      View Previous
+                    </button>
+                  </Show>
+                  {/* Open button */}
+                  <button
+                    class='rounded-lg px-4 py-1.5 text-sm font-medium text-white transition-colors'
+                    style={{ background: tokens.blue600 }}
+                  >
+                    Open
+                  </button>
+                </>
+              }
+            />
+          )}
+        </For>
+      </Show>
+
+      {/* Previous Reviewers Modal (simple inline implementation) */}
+      <Show when={showPreviousReviewers()}>
+        {studyId => {
+          const study = () => completedStudies().find(s => s.id === studyId());
+          return (
+            <div
+              class='fixed inset-0 z-50 flex items-center justify-center bg-black/50'
+              onClick={() => setShowPreviousReviewers(null)}
+            >
+              <div
+                class='w-full max-w-lg rounded-xl bg-white p-6 shadow-xl'
+                onClick={e => e.stopPropagation()}
+              >
+                <div class='mb-4 flex items-center justify-between'>
+                  <h3 class='text-lg font-semibold' style={{ color: tokens.slate900 }}>
+                    Previous Reviewer Assessments
+                  </h3>
+                  <button
+                    onClick={() => setShowPreviousReviewers(null)}
+                    class='rounded-lg p-2 transition-colors hover:bg-gray-100'
+                    style={{ color: tokens.slate400 }}
+                  >
+                    <FiX class='h-5 w-5' />
+                  </button>
+                </div>
+                <p class='mb-4 text-sm' style={{ color: tokens.slate500 }}>
+                  {study()?.title}
+                </p>
+                <div class='space-y-3'>
+                  <For each={getReviewerNames(study())}>
+                    {(name, index) => (
+                      <div
+                        class='flex items-center justify-between rounded-lg border p-4'
+                        style={{ 'border-color': tokens.slate200 }}
+                      >
+                        <div class='flex items-center gap-3'>
+                          <Avatar name={name} size='36px' fontSize='12px' />
+                          <div>
+                            <p class='font-medium' style={{ color: tokens.slate900 }}>
+                              {name}
+                            </p>
+                            <p class='text-xs' style={{ color: tokens.slate500 }}>
+                              Reviewer {index() + 1}
+                            </p>
+                          </div>
+                        </div>
+                        <button
+                          class='rounded-lg px-3 py-1.5 text-sm font-medium'
+                          style={{ background: tokens.blue50, color: tokens.blue700 }}
+                        >
+                          View Checklist
+                        </button>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </div>
+            </div>
+          );
+        }}
+      </Show>
+    </div>
+  );
+}
+
+/**
+ * MiniRobvisCell - Individual cell in the mini robvis traffic light grid
+ */
+function MiniRobvisCell(props) {
+  const colors = {
+    yes: tokens.success,
+    'partial-yes': '#fbbf24',
+    no: tokens.danger,
+    'no-ma': tokens.slate300,
+  };
+  return (
+    <div
+      class='h-4 w-4 rounded-sm'
+      style={{ background: colors[props.value] || tokens.slate200 }}
+      title={props.title}
+    />
+  );
+}
+
+/**
+ * MiniRobvisChart - Compact traffic light grid preview
+ */
+function MiniRobvisChart(props) {
+  // Mock data for 5 studies x 16 questions
+  const mockRobvisData = [
+    {
+      study: 'Cherkin 2016',
+      responses: [
+        'yes',
+        'yes',
+        'partial-yes',
+        'yes',
+        'no',
+        'yes',
+        'yes',
+        'partial-yes',
+        'yes',
+        'yes',
+        'no-ma',
+        'yes',
+        'yes',
+        'partial-yes',
+        'yes',
+        'yes',
+      ],
+    },
+    {
+      study: 'de Jong 2016',
+      responses: [
+        'yes',
+        'partial-yes',
+        'yes',
+        'yes',
+        'yes',
+        'no',
+        'yes',
+        'yes',
+        'partial-yes',
+        'yes',
+        'yes',
+        'no',
+        'yes',
+        'yes',
+        'yes',
+        'partial-yes',
+      ],
+    },
+    {
+      study: 'Jastrowski 2019',
+      responses: [
+        'partial-yes',
+        'yes',
+        'no',
+        'yes',
+        'yes',
+        'yes',
+        'partial-yes',
+        'yes',
+        'yes',
+        'no',
+        'yes',
+        'yes',
+        'no-ma',
+        'yes',
+        'partial-yes',
+        'yes',
+      ],
+    },
+    {
+      study: 'Schmidt 2020',
+      responses: [
+        'yes',
+        'yes',
+        'yes',
+        'partial-yes',
+        'yes',
+        'yes',
+        'yes',
+        'no',
+        'yes',
+        'yes',
+        'yes',
+        'partial-yes',
+        'yes',
+        'yes',
+        'yes',
+        'yes',
+      ],
+    },
+    {
+      study: 'Gardner-Nix 2021',
+      responses: [
+        'no',
+        'yes',
+        'yes',
+        'yes',
+        'partial-yes',
+        'yes',
+        'yes',
+        'yes',
+        'yes',
+        'yes',
+        'yes',
+        'yes',
+        'no',
+        'partial-yes',
+        'yes',
+        'yes',
+      ],
+    },
+  ];
+
+  return (
+    <div class='overflow-x-auto'>
+      {/* Header row with question numbers */}
+      <div class='mb-1 flex items-center gap-0.5'>
+        <div class='w-28 shrink-0' /> {/* Spacer for study names */}
+        <For each={Array.from({ length: 16 }, (_, i) => i + 1)}>
+          {q => (
+            <div
+              class='flex h-4 w-4 items-center justify-center text-[8px] font-medium'
+              style={{ color: tokens.slate400 }}
+            >
+              {q}
+            </div>
+          )}
+        </For>
+      </div>
+      {/* Data rows */}
+      <div class='space-y-0.5'>
+        <For each={mockRobvisData}>
+          {row => (
+            <div class='flex items-center gap-0.5'>
+              <div class='w-28 shrink-0 truncate text-xs' style={{ color: tokens.slate600 }}>
+                {row.study}
+              </div>
+              <For each={row.responses}>
+                {(value, i) => <MiniRobvisCell value={value} title={`Q${i() + 1}: ${value}`} />}
+              </For>
+            </div>
+          )}
+        </For>
+      </div>
+      {/* Legend */}
+      <div class='mt-3 flex items-center gap-4'>
+        {[
+          { label: 'Yes', color: tokens.success },
+          { label: 'Partial Yes', color: '#fbbf24' },
+          { label: 'No', color: tokens.danger },
+          { label: 'No MA', color: tokens.slate300 },
+        ].map(item => (
+          <div class='flex items-center gap-1.5'>
+            <div class='h-3 w-3 rounded-sm' style={{ background: item.color }} />
+            <span class='text-xs' style={{ color: tokens.slate500 }}>
+              {item.label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * MiniDistributionChart - Compact stacked bar distribution preview
+ */
+function MiniDistributionChart() {
+  const mockDistribution = [
+    { q: 1, yes: 80, partialYes: 15, no: 5, noMa: 0 },
+    { q: 2, yes: 70, partialYes: 20, no: 10, noMa: 0 },
+    { q: 3, yes: 50, partialYes: 25, no: 20, noMa: 5 },
+    { q: 4, yes: 85, partialYes: 10, no: 5, noMa: 0 },
+    { q: 5, yes: 60, partialYes: 20, no: 15, noMa: 5 },
+    { q: 6, yes: 75, partialYes: 15, no: 10, noMa: 0 },
+    { q: 7, yes: 65, partialYes: 25, no: 10, noMa: 0 },
+  ];
+
+  return (
+    <div class='space-y-2'>
+      <For each={mockDistribution}>
+        {item => (
+          <div class='flex items-center gap-2'>
+            <span class='w-6 text-xs font-medium' style={{ color: tokens.slate500 }}>
+              Q{item.q}
+            </span>
+            <div class='flex h-5 flex-1 overflow-hidden rounded'>
+              <div style={{ width: `${item.yes}%`, background: tokens.success }} />
+              <div style={{ width: `${item.partialYes}%`, background: '#fbbf24' }} />
+              <div style={{ width: `${item.no}%`, background: tokens.danger }} />
+              <div style={{ width: `${item.noMa}%`, background: tokens.slate300 }} />
+            </div>
+          </div>
+        )}
+      </For>
+      <p class='text-center text-xs italic' style={{ color: tokens.slate400 }}>
+        Showing questions 1-7 of 16
+      </p>
+    </div>
+  );
+}
+
+function FiguresTab() {
+  const completedStudies = () => getStudiesByStatus('completed');
+
+  return (
+    <div class='space-y-6'>
+      {/* Summary Stats */}
+      <div class='grid grid-cols-4 gap-4'>
+        {[
+          { label: 'Total Studies', value: mockStudies.length, sub: 'All studies' },
+          {
+            label: 'High Confidence',
+            value: 1,
+            sub: `${Math.round((1 / mockStudies.length) * 100)}%`,
+          },
+          { label: 'Moderate', value: 0, sub: '0%' },
+          { label: 'Low/Critically Low', value: 0, sub: '0%' },
+        ].map(stat => (
+          <Card>
+            <p class='text-sm' style={{ color: tokens.slate500 }}>
+              {stat.label}
+            </p>
+            <div class='mt-1 flex items-end justify-between'>
+              <span class='text-2xl font-bold' style={{ color: tokens.slate900 }}>
+                {stat.value}
+              </span>
+              <span class='text-xs' style={{ color: tokens.slate400 }}>
+                {stat.sub}
+              </span>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* Robvis Traffic Light Chart */}
+      <Card
+        header={
+          <>
+            <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+              AMSTAR2 Traffic Light (Robvis)
+            </h3>
+            <div class='flex items-center gap-2'>
+              <button
+                class='flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors'
+                style={{ 'border-color': tokens.slate200, color: tokens.slate600 }}
+              >
+                <FiSettings class='h-4 w-4' />
+                Settings
+              </button>
+              <button
+                class='flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-white'
+                style={{ background: tokens.blue600 }}
+              >
+                <FiDownload class='h-4 w-4' />
+                Export
+              </button>
+            </div>
+          </>
+        }
+      >
+        <MiniRobvisChart />
+      </Card>
+
+      {/* Charts side by side */}
+      <div class='grid grid-cols-2 gap-6'>
+        {/* Distribution Chart */}
+        <Card
+          header={
+            <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+              Response Distribution
+            </h3>
+          }
+        >
+          <MiniDistributionChart />
+        </Card>
+
+        {/* Confidence Ratings Bar */}
+        <Card
+          header={
+            <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+              AMSTAR2 Confidence Ratings
+            </h3>
+          }
+        >
+          <div class='space-y-3'>
+            {[
+              { label: 'High', value: 1, max: 5, color: tokens.success },
+              { label: 'Moderate', value: 0, max: 5, color: tokens.warning },
+              { label: 'Low', value: 0, max: 5, color: '#f97316' },
+              { label: 'Critically Low', value: 0, max: 5, color: tokens.danger },
+            ].map(item => (
+              <div class='flex items-center gap-4'>
+                <span class='w-28 text-sm' style={{ color: tokens.slate600 }}>
+                  {item.label}
+                </span>
+                <div
+                  class='h-8 flex-1 overflow-hidden rounded-lg'
+                  style={{ background: tokens.slate100 }}
+                >
+                  <Show when={item.value > 0}>
+                    <div
+                      class='flex h-full items-center justify-end pr-2 text-xs font-medium text-white'
+                      style={{
+                        width: `${Math.max((item.value / item.max) * 100, 15)}%`,
+                        background: item.color,
+                      }}
+                    >
+                      {item.value}
+                    </div>
+                  </Show>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+
+      {/* Critical Domains Summary */}
+      <Card
+        header={
+          <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+            Critical Domains Summary
+          </h3>
+        }
+      >
+        <div class='flex flex-wrap gap-3'>
+          {[2, 4, 7, 9, 11, 13, 15].map(domain => (
+            <div
+              class='flex flex-col items-center rounded-lg border px-4 py-3'
+              style={{ 'border-color': tokens.slate100 }}
+            >
+              <span class='mb-2 text-xs font-medium' style={{ color: tokens.slate600 }}>
+                Domain {domain}
+              </span>
+              <div class='flex items-center gap-1'>
+                <span
+                  class='h-3 w-3 rounded-full'
+                  style={{ background: tokens.success }}
+                  title='Yes'
+                />
+                <span
+                  class='h-3 w-3 rounded-full'
+                  style={{ background: tokens.success }}
+                  title='Yes'
+                />
+                <span
+                  class='h-3 w-3 rounded-full'
+                  style={{ background: '#fbbf24' }}
+                  title='Partial Yes'
+                />
+                <span
+                  class='h-3 w-3 rounded-full'
+                  style={{ background: tokens.slate300 }}
+                  title='No MA'
+                />
+                <span
+                  class='h-3 w-3 rounded-full'
+                  style={{ background: tokens.danger }}
+                  title='No'
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      {/* Export */}
+      <Card
+        header={
+          <h3 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+            Export & Share
+          </h3>
+        }
+      >
+        <div class='grid grid-cols-3 gap-4'>
+          {[
+            {
+              icon: FiDownload,
+              label: 'Download CSV',
+              desc: 'Full data export',
+              color: tokens.success,
+            },
+            {
+              icon: FiBarChart2,
+              label: 'Export Charts',
+              desc: 'PNG or SVG',
+              color: tokens.blue600,
+            },
+            {
+              icon: FiExternalLink,
+              label: 'Share Report',
+              desc: 'Generate link',
+              color: tokens.blue600,
+            },
+          ].map(item => (
+            <button
+              class='flex items-center gap-3 rounded-lg border p-4 text-left transition-all hover:border-gray-300'
+              style={{ 'border-color': tokens.slate200 }}
+            >
+              <div
+                class='flex h-10 w-10 items-center justify-center rounded-lg'
+                style={{ background: tokens.blue50, color: item.color }}
+              >
+                <item.icon class='h-5 w-5' />
+              </div>
+              <div>
+                <p class='font-medium' style={{ color: tokens.slate900 }}>
+                  {item.label}
+                </p>
+                <p class='text-xs' style={{ color: tokens.slate500 }}>
+                  {item.desc}
+                </p>
+              </div>
+            </button>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+export default function ProjectViewV2() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Calculate counts from studies data
+  const todoCount = () => mockStudies.filter(s => s.status === 'in-review').length;
+  const reconcileCount = () => mockStudies.filter(s => s.status === 'reconcile').length;
+  const completedCount = () => mockStudies.filter(s => s.status === 'completed').length;
+
+  const tabs = [
+    { id: 'overview', label: 'Overview', icon: FiBarChart2 },
+    { id: 'studies', label: 'Studies', icon: FiBook, count: mockStudies.length },
+    { id: 'todo', label: 'To Do', icon: FiClipboard, count: todoCount() },
+    { id: 'reconcile', label: 'Reconcile', icon: FiGitMerge, count: reconcileCount() },
+    { id: 'completed', label: 'Completed', icon: FiCheckCircle, count: completedCount() },
+    { id: 'figures', label: 'Figures', icon: FiBarChart2 },
+  ];
+
+  const getInitialTab = () => {
+    const tabParam = searchParams.tab;
+    return tabs.some(t => t.id === tabParam) ? tabParam : 'overview';
+  };
+
+  const [activeTab, setActiveTab] = createSignal(getInitialTab());
+
+  const updateTab = tab => {
+    setActiveTab(tab);
+    setSearchParams({ tab });
+  };
+
+  return (
+    <div
+      class='min-h-screen'
+      style={{
+        background: tokens.slate50,
+        'font-family': "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+      }}
+    >
+      {/* Header */}
+      <header
+        class='sticky top-0 z-20 border-b'
+        style={{ background: 'white', 'border-color': tokens.slate200 }}
+      >
+        <div class='mx-auto max-w-7xl px-6 py-4'>
+          <div class='flex items-center justify-between'>
+            <div class='flex items-center gap-4'>
+              <button
+                class='flex h-9 w-9 items-center justify-center rounded-lg border transition-colors'
+                style={{ 'border-color': tokens.slate200, color: tokens.slate500 }}
+              >
+                <FiArrowLeft class='h-4 w-4' />
+              </button>
+              <div>
+                <h1 class='text-lg font-semibold' style={{ color: tokens.slate900 }}>
+                  {mockProject.name}
+                </h1>
+                <p class='text-sm' style={{ color: tokens.slate500 }}>
+                  {mockProject.description}
+                </p>
+              </div>
+            </div>
+            <div class='flex items-center gap-3'>
+              <div class='flex -space-x-2'>
+                <For each={mockMembers.slice(0, 3)}>
+                  {member => <Avatar name={member.name} size='32px' fontSize='11px' />}
+                </For>
+              </div>
+              <button
+                class='flex h-9 w-9 items-center justify-center rounded-lg border transition-colors'
+                style={{ 'border-color': tokens.slate200, color: tokens.slate500 }}
+              >
+                <FiSettings class='h-4 w-4' />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div class='mx-auto max-w-7xl px-6'>
+          <nav class='-mb-px flex gap-1'>
+            <For each={tabs}>
+              {tab => {
+                const Icon = tab.icon;
+                const isActive = () => activeTab() === tab.id;
+                return (
+                  <button
+                    class='flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors'
+                    style={{
+                      'border-color': isActive() ? tokens.blue600 : 'transparent',
+                      color: isActive() ? tokens.blue700 : tokens.slate500,
+                    }}
+                    onClick={() => updateTab(tab.id)}
+                  >
+                    <Icon class='h-4 w-4' />
+                    {tab.label}
+                    <Show when={tab.count !== undefined && tab.count > 0}>
+                      <span
+                        class='rounded-full px-2 py-0.5 text-xs'
+                        style={{
+                          background: isActive() ? tokens.blue100 : tokens.slate100,
+                          color: isActive() ? tokens.blue700 : tokens.slate500,
+                        }}
+                      >
+                        {tab.count}
+                      </span>
+                    </Show>
+                  </button>
+                );
+              }}
+            </For>
+          </nav>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main class='mx-auto max-w-7xl px-6 py-6'>
+        <Show when={activeTab() === 'overview'}>
+          <OverviewTab />
+        </Show>
+        <Show when={activeTab() === 'studies'}>
+          <StudiesTab />
+        </Show>
+        <Show when={activeTab() === 'todo'}>
+          <TodoTab />
+        </Show>
+        <Show when={activeTab() === 'reconcile'}>
+          <ReconcileTab />
+        </Show>
+        <Show when={activeTab() === 'completed'}>
+          <CompletedTab />
+        </Show>
+        <Show when={activeTab() === 'figures'}>
+          <FiguresTab />
+        </Show>
+      </main>
+
+      {/* Load Inter font */}
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+      `}</style>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/mocks/ProjectWizardMock.jsx b/packages/web/src/components/mocks/ProjectWizardMock.jsx
new file mode 100644
index 000000000..b7e246c70
--- /dev/null
+++ b/packages/web/src/components/mocks/ProjectWizardMock.jsx
@@ -0,0 +1,2235 @@
+/**
+ * Project Creation Wizard Mock
+ *
+ * Design Direction: Material + Apple HIG blend for researchers
+ * - Blue-oriented palette (trustworthy, calm, professional)
+ * - Inter typography with clear hierarchy
+ * - Generous whitespace, refined surfaces
+ * - Subtle depth through shadows and layering
+ * - Academic sensibility without being stuffy
+ */
+
+import { For, Show, createSignal, createMemo } from 'solid-js';
+import { useSearchParams } from '@solidjs/router';
+import {
+  FiCheck,
+  FiChevronRight,
+  FiChevronLeft,
+  FiInfo,
+  FiX,
+  FiExternalLink,
+  FiUserPlus,
+  FiMail,
+  FiMoreHorizontal,
+  FiTrash2,
+  FiAlertCircle,
+  FiUpload,
+  FiSearch,
+  FiFile,
+  FiFileText,
+  FiLink,
+  FiFolder,
+  FiCheckCircle,
+  FiCopy,
+  FiSliders,
+} from 'solid-icons/fi';
+
+// ============================================================================
+// DESIGN TOKENS
+// ============================================================================
+
+// These would normally be CSS variables, inline here for mock isolation
+const tokens = {
+  // Primary blue palette - trustworthy, professional
+  blue50: '#eff6ff',
+  blue100: '#dbeafe',
+  blue200: '#bfdbfe',
+  blue300: '#93c5fd',
+  blue500: '#3b82f6',
+  blue600: '#2563eb',
+  blue700: '#1d4ed8',
+  blue900: '#1e3a8a',
+
+  // Neutral slate - warm enough to not feel clinical
+  slate50: '#f8fafc',
+  slate100: '#f1f5f9',
+  slate200: '#e2e8f0',
+  slate300: '#cbd5e1',
+  slate400: '#94a3b8',
+  slate500: '#64748b',
+  slate600: '#475569',
+  slate700: '#334155',
+  slate800: '#1e293b',
+  slate900: '#0f172a',
+
+  // Semantic colors
+  success: '#059669',
+  successLight: '#d1fae5',
+};
+
+// ============================================================================
+// STEP CONFIGURATION
+// ============================================================================
+
+const steps = [
+  { id: 1, label: 'Project Details', description: 'Name and configuration' },
+  { id: 2, label: 'Team', description: 'Invite collaborators' },
+  { id: 3, label: 'Studies', description: 'Import your corpus' },
+  { id: 4, label: 'Assignment', description: 'Distribute reviews' },
+];
+
+const checklistOptions = [
+  {
+    id: 'amstar2',
+    name: 'AMSTAR 2',
+    description: 'Assessment of systematic reviews of interventions',
+    domains: 16,
+  },
+  {
+    id: 'robins-i',
+    name: 'ROBINS-I',
+    description: 'Risk of bias in non-randomized studies of interventions',
+    domains: 7,
+  },
+  {
+    id: 'rob2',
+    name: 'RoB 2',
+    description: 'Risk of bias in randomized trials',
+    domains: 5,
+  },
+  {
+    id: 'robis',
+    name: 'ROBIS',
+    description: 'Risk of bias in systematic reviews',
+    domains: 4,
+  },
+];
+
+// Mock organization members for autocomplete
+const orgMembers = [
+  { id: '1', name: 'Dr. Sarah Chen', email: 'sarah.chen@university.edu' },
+  { id: '2', name: 'Dr. Michael Torres', email: 'm.torres@research.org' },
+  { id: '3', name: 'Dr. Emily Watson', email: 'e.watson@institute.edu' },
+  { id: '4', name: 'Dr. James Liu', email: 'j.liu@university.edu' },
+  { id: '5', name: 'Dr. Anna Kowalski', email: 'a.kowalski@medical.edu' },
+];
+
+// ============================================================================
+// COMPONENTS
+// ============================================================================
+
+/**
+ * Horizontal stepper with connected line
+ * Apple-inspired minimal design with Material's clear affordances
+ */
+function Stepper(props) {
+  return (
+    <nav class='relative'>
+      {/* Connection line */}
+      <div
+        class='absolute top-5 right-0 left-0 h-px'
+        style={{ background: tokens.slate200, 'margin-left': '40px', 'margin-right': '40px' }}
+      />
+
+      <ol class='relative flex justify-between'>
+        <For each={steps}>
+          {(step, index) => {
+            const isComplete = () => step.id < props.currentStep;
+            const isCurrent = () => step.id === props.currentStep;
+            const isFuture = () => step.id > props.currentStep;
+
+            return (
+              <li class='flex flex-col items-center' style={{ 'min-width': '120px' }}>
+                {/* Step indicator */}
+                <div
+                  class='relative z-10 flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-all duration-300'
+                  style={{
+                    background:
+                      isComplete() ? tokens.blue600
+                      : isCurrent() ? tokens.blue600
+                      : tokens.slate100,
+                    color: isComplete() || isCurrent() ? 'white' : tokens.slate400,
+                    'box-shadow': isCurrent() ? `0 0 0 4px ${tokens.blue100}` : 'none',
+                  }}
+                >
+                  <Show when={isComplete()} fallback={step.id}>
+                    <FiCheck class='h-5 w-5' />
+                  </Show>
+                </div>
+
+                {/* Label */}
+                <div class='mt-3 text-center'>
+                  <p
+                    class='text-sm font-medium transition-colors duration-200'
+                    style={{
+                      color:
+                        isCurrent() ? tokens.slate900
+                        : isComplete() ? tokens.slate700
+                        : tokens.slate400,
+                    }}
+                  >
+                    {step.label}
+                  </p>
+                  <p
+                    class='mt-0.5 text-xs transition-colors duration-200'
+                    style={{ color: isCurrent() ? tokens.slate500 : tokens.slate400 }}
+                  >
+                    {step.description}
+                  </p>
+                </div>
+              </li>
+            );
+          }}
+        </For>
+      </ol>
+    </nav>
+  );
+}
+
+/**
+ * Checklist type selection card
+ * Material-inspired card with Apple's attention to touch targets
+ */
+function ChecklistCard(props) {
+  const isSelected = () => props.selected?.includes(props.checklist.id);
+
+  return (
+    <button
+      type='button'
+      onClick={() => props.onToggle(props.checklist.id)}
+      class='group relative w-full rounded-xl border-2 p-4 text-left transition-all duration-200'
+      style={{
+        background: isSelected() ? tokens.blue50 : 'white',
+        'border-color': isSelected() ? tokens.blue500 : tokens.slate200,
+        'box-shadow': isSelected() ? `0 0 0 1px ${tokens.blue500}` : '0 1px 2px rgba(0,0,0,0.05)',
+      }}
+    >
+      {/* Selection indicator */}
+      <div
+        class='absolute top-4 right-4 flex h-5 w-5 items-center justify-center rounded-full transition-all duration-200'
+        style={{
+          background: isSelected() ? tokens.blue600 : tokens.slate100,
+          color: isSelected() ? 'white' : 'transparent',
+        }}
+      >
+        <FiCheck class='h-3 w-3' />
+      </div>
+
+      <h4 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+        {props.checklist.name}
+      </h4>
+
+      <p class='mt-1 text-sm leading-relaxed' style={{ color: tokens.slate600 }}>
+        {props.checklist.description}
+      </p>
+
+      <p class='mt-2 text-xs' style={{ color: tokens.slate400 }}>
+        {props.checklist.domains} domains
+      </p>
+    </button>
+  );
+}
+
+/**
+ * Form field wrapper with label
+ * Clean, accessible form pattern
+ */
+function FormField(props) {
+  return (
+    <div class={props.class}>
+      <label class='mb-1.5 block text-sm font-medium' style={{ color: tokens.slate700 }}>
+        {props.label}
+        <Show when={props.required}>
+          <span style={{ color: tokens.blue600 }}> *</span>
+        </Show>
+      </label>
+      {props.children}
+      <Show when={props.hint}>
+        <p class='mt-1.5 text-xs' style={{ color: tokens.slate500 }}>
+          {props.hint}
+        </p>
+      </Show>
+    </div>
+  );
+}
+
+/**
+ * Text input with consistent styling
+ */
+function TextInput(props) {
+  return (
+    <input
+      type={props.type || 'text'}
+      value={props.value}
+      onInput={e => props.onInput?.(e.target.value)}
+      placeholder={props.placeholder}
+      class='w-full rounded-lg border px-3 py-2.5 text-sm transition-all duration-200 outline-none'
+      style={{
+        'border-color': tokens.slate200,
+        background: 'white',
+        color: tokens.slate900,
+      }}
+      onFocus={e => {
+        e.target.style.borderColor = tokens.blue500;
+        e.target.style.boxShadow = `0 0 0 3px ${tokens.blue100}`;
+      }}
+      onBlur={e => {
+        e.target.style.borderColor = tokens.slate200;
+        e.target.style.boxShadow = 'none';
+      }}
+    />
+  );
+}
+
+/**
+ * Textarea with consistent styling
+ */
+function TextArea(props) {
+  return (
+    <textarea
+      value={props.value}
+      onInput={e => props.onInput?.(e.target.value)}
+      placeholder={props.placeholder}
+      rows={props.rows || 3}
+      class='w-full resize-none rounded-lg border px-3 py-2.5 text-sm transition-all duration-200 outline-none'
+      style={{
+        'border-color': tokens.slate200,
+        background: 'white',
+        color: tokens.slate900,
+      }}
+      onFocus={e => {
+        e.target.style.borderColor = tokens.blue500;
+        e.target.style.boxShadow = `0 0 0 3px ${tokens.blue100}`;
+      }}
+      onBlur={e => {
+        e.target.style.borderColor = tokens.slate200;
+        e.target.style.boxShadow = 'none';
+      }}
+    />
+  );
+}
+
+/**
+ * Primary action button
+ */
+function PrimaryButton(props) {
+  return (
+    <button
+      type={props.type || 'button'}
+      onClick={props.onClick}
+      disabled={props.disabled}
+      class='inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium transition-all duration-200'
+      style={{
+        background: props.disabled ? tokens.slate200 : tokens.blue600,
+        color: props.disabled ? tokens.slate400 : 'white',
+        cursor: props.disabled ? 'not-allowed' : 'pointer',
+      }}
+      onMouseEnter={e => {
+        if (!props.disabled) e.target.style.background = tokens.blue700;
+      }}
+      onMouseLeave={e => {
+        if (!props.disabled) e.target.style.background = tokens.blue600;
+      }}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+/**
+ * Secondary/ghost button
+ */
+function SecondaryButton(props) {
+  return (
+    <button
+      type='button'
+      onClick={props.onClick}
+      class='inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200'
+      style={{
+        background: 'transparent',
+        color: tokens.slate600,
+      }}
+      onMouseEnter={e => {
+        e.target.style.background = tokens.slate100;
+      }}
+      onMouseLeave={e => {
+        e.target.style.background = 'transparent';
+      }}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+// ============================================================================
+// STEP 1: PROJECT DETAILS FORM
+// ============================================================================
+
+function ProjectDetailsStep(props) {
+  const [name, setName] = createSignal('');
+  const [description, setDescription] = createSignal('');
+  const [selectedChecklists, setSelectedChecklists] = createSignal(['amstar2']);
+
+  const toggleChecklist = id => {
+    const current = selectedChecklists();
+    if (current.includes(id)) {
+      // Don't allow deselecting last one
+      if (current.length > 1) {
+        setSelectedChecklists(current.filter(c => c !== id));
+      }
+    } else {
+      setSelectedChecklists([...current, id]);
+    }
+  };
+
+  const isValid = () => name().trim().length >= 3 && selectedChecklists().length > 0;
+
+  return (
+    <div class='mx-auto max-w-3xl'>
+      {/* Section: Basic Info */}
+      <section>
+        <h2 class='text-lg font-semibold' style={{ color: tokens.slate900 }}>
+          Basic Information
+        </h2>
+        <p class='mt-1 text-sm' style={{ color: tokens.slate500 }}>
+          Give your project a name and optional description.
+        </p>
+
+        <div class='mt-6 space-y-5'>
+          <FormField label='Project Name' required>
+            <TextInput
+              value={name()}
+              onInput={setName}
+              placeholder='e.g., Mindfulness Interventions for Chronic Pain'
+            />
+          </FormField>
+
+          <FormField
+            label='Description'
+            hint='Optional. Briefly describe the scope or research question.'
+          >
+            <TextArea
+              value={description()}
+              onInput={setDescription}
+              placeholder='Examining randomized controlled trials of mindfulness-based interventions for chronic pain management...'
+              rows={3}
+            />
+          </FormField>
+        </div>
+      </section>
+
+      {/* Divider */}
+      <div class='my-8 h-px' style={{ background: tokens.slate200 }} />
+
+      {/* Section: Checklist Selection */}
+      <section>
+        <h2 class='text-lg font-semibold' style={{ color: tokens.slate900 }}>
+          Quality Assessment Tools
+        </h2>
+        <p class='mt-1 text-sm' style={{ color: tokens.slate500 }}>
+          Select one or more checklists for your reviewers to complete. You can add more later.
+        </p>
+
+        <div class='mt-6 grid grid-cols-2 gap-4'>
+          <For each={checklistOptions}>
+            {checklist => (
+              <ChecklistCard
+                checklist={checklist}
+                selected={selectedChecklists()}
+                onToggle={toggleChecklist}
+              />
+            )}
+          </For>
+        </div>
+
+        {/* Info callout */}
+        <div
+          class='mt-4 flex items-start gap-3 rounded-lg p-3'
+          style={{ background: tokens.blue50 }}
+        >
+          <FiInfo class='mt-0.5 h-4 w-4 shrink-0' style={{ color: tokens.blue600 }} />
+          <p class='text-sm' style={{ color: tokens.blue700 }}>
+            Each study in your review can be assessed using any of the selected checklists.
+            Reviewers will see only the tools relevant to their assigned studies.
+          </p>
+        </div>
+      </section>
+
+      {/* Navigation */}
+      <div
+        class='mt-10 flex items-center justify-between border-t pt-6'
+        style={{ 'border-color': tokens.slate200 }}
+      >
+        <SecondaryButton onClick={props.onCancel}>Cancel</SecondaryButton>
+
+        <PrimaryButton onClick={() => props.onNext?.()} disabled={!isValid()}>
+          Create Project
+          <FiChevronRight class='h-4 w-4' />
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// STEP 2: TEAM PANEL
+// ============================================================================
+
+/**
+ * Avatar component with initials
+ */
+function Avatar(props) {
+  const initials = () => {
+    if (props.name) {
+      return props.name
+        .split(' ')
+        .map(n => n[0])
+        .join('')
+        .slice(0, 2);
+    }
+    return props.email?.[0]?.toUpperCase() || '?';
+  };
+
+  // Generate consistent color based on email
+  const colorIndex = () => {
+    const str = props.email || props.name || '';
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return Math.abs(hash) % 5;
+  };
+
+  const colors = [
+    { bg: '#dbeafe', text: '#1d4ed8' }, // blue
+    { bg: '#d1fae5', text: '#047857' }, // green
+    { bg: '#fef3c7', text: '#b45309' }, // amber
+    { bg: '#fce7f3', text: '#be185d' }, // pink
+    { bg: '#e0e7ff', text: '#4338ca' }, // indigo
+  ];
+
+  const color = () => colors[colorIndex()];
+
+  return (
+    <div
+      class='flex items-center justify-center rounded-full font-medium'
+      style={{
+        width: props.size || '36px',
+        height: props.size || '36px',
+        'font-size': props.fontSize || '13px',
+        background: color().bg,
+        color: color().text,
+      }}
+    >
+      {initials()}
+    </div>
+  );
+}
+
+/**
+ * Role badge component
+ */
+function RoleBadge(props) {
+  const isOwner = () => props.role === 'owner';
+
+  return (
+    <span
+      class='inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium'
+      style={{
+        background: isOwner() ? tokens.blue100 : tokens.slate100,
+        color: isOwner() ? tokens.blue700 : tokens.slate600,
+      }}
+    >
+      {isOwner() ? 'Owner' : 'Member'}
+    </span>
+  );
+}
+
+/**
+ * Member row in the team list
+ */
+function MemberRow(props) {
+  const [showMenu, setShowMenu] = createSignal(false);
+
+  return (
+    <div
+      class='flex items-center justify-between rounded-lg border p-4 transition-colors duration-150'
+      style={{
+        background: 'white',
+        'border-color': tokens.slate200,
+      }}
+      onMouseEnter={e => {
+        e.currentTarget.style.borderColor = tokens.slate300;
+      }}
+      onMouseLeave={e => {
+        e.currentTarget.style.borderColor = tokens.slate200;
+      }}
+    >
+      <div class='flex items-center gap-3'>
+        <Avatar name={props.member.name} email={props.member.email} />
+        <div>
+          <p class='text-sm font-medium' style={{ color: tokens.slate900 }}>
+            {props.member.name || props.member.email}
+          </p>
+          <Show when={props.member.name}>
+            <p class='text-xs' style={{ color: tokens.slate500 }}>
+              {props.member.email}
+            </p>
+          </Show>
+          <Show when={props.member.pending}>
+            <p class='mt-0.5 text-xs' style={{ color: tokens.success }}>
+              Invite sent
+            </p>
+          </Show>
+        </div>
+      </div>
+
+      <div class='flex items-center gap-2'>
+        <RoleBadge role={props.member.role} />
+
+        <Show when={!props.member.isCurrentUser}>
+          <div class='relative'>
+            <button
+              class='flex h-8 w-8 items-center justify-center rounded-lg transition-colors duration-150'
+              style={{ color: tokens.slate400 }}
+              onClick={() => setShowMenu(!showMenu())}
+              onMouseEnter={e => {
+                e.currentTarget.style.background = tokens.slate100;
+                e.currentTarget.style.color = tokens.slate600;
+              }}
+              onMouseLeave={e => {
+                e.currentTarget.style.background = 'transparent';
+                e.currentTarget.style.color = tokens.slate400;
+              }}
+            >
+              <FiMoreHorizontal class='h-4 w-4' />
+            </button>
+
+            {/* Dropdown menu */}
+            <Show when={showMenu()}>
+              <div
+                class='absolute right-0 z-10 mt-1 w-48 rounded-lg border py-1 shadow-lg'
+                style={{
+                  background: 'white',
+                  'border-color': tokens.slate200,
+                }}
+              >
+                <button
+                  class='flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors'
+                  style={{ color: tokens.slate700 }}
+                  onMouseEnter={e => {
+                    e.currentTarget.style.background = tokens.slate50;
+                  }}
+                  onMouseLeave={e => {
+                    e.currentTarget.style.background = 'transparent';
+                  }}
+                  onClick={() => {
+                    props.onRoleChange?.(props.member.role === 'owner' ? 'member' : 'owner');
+                    setShowMenu(false);
+                  }}
+                >
+                  Change to {props.member.role === 'owner' ? 'Member' : 'Owner'}
+                </button>
+                <button
+                  class='flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors'
+                  style={{ color: '#dc2626' }}
+                  onMouseEnter={e => {
+                    e.currentTarget.style.background = '#fef2f2';
+                  }}
+                  onMouseLeave={e => {
+                    e.currentTarget.style.background = 'transparent';
+                  }}
+                  onClick={() => {
+                    props.onRemove?.();
+                    setShowMenu(false);
+                  }}
+                >
+                  <FiTrash2 class='h-4 w-4' />
+                  Remove
+                </button>
+              </div>
+            </Show>
+          </div>
+        </Show>
+
+        <Show when={props.member.isCurrentUser}>
+          <span class='text-xs' style={{ color: tokens.slate400 }}>
+            (You)
+          </span>
+        </Show>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Team Panel - Step 2
+ * Reusable component for both wizard and project settings
+ */
+function TeamStep(props) {
+  const [emailInput, setEmailInput] = createSignal('');
+  const [selectedRole, setSelectedRole] = createSignal('member');
+  const [showSuggestions, setShowSuggestions] = createSignal(false);
+  const [members, setMembers] = createSignal([
+    // Current user is always first member as owner
+    {
+      id: 'current',
+      name: 'You',
+      email: 'you@example.com',
+      role: 'owner',
+      isCurrentUser: true,
+    },
+  ]);
+
+  // Filter org members based on input
+  const suggestions = createMemo(() => {
+    const input = emailInput().toLowerCase();
+    if (!input) return [];
+
+    const existingEmails = members().map(m => m.email.toLowerCase());
+
+    return orgMembers.filter(
+      m =>
+        !existingEmails.includes(m.email.toLowerCase()) &&
+        (m.email.toLowerCase().includes(input) || m.name.toLowerCase().includes(input)),
+    );
+  });
+
+  const addMember = (email, name = null) => {
+    if (!email) return;
+
+    const existing = members().find(m => m.email.toLowerCase() === email.toLowerCase());
+    if (existing) return;
+
+    // Check if this is an org member
+    const orgMember = orgMembers.find(m => m.email.toLowerCase() === email.toLowerCase());
+
+    setMembers([
+      ...members(),
+      {
+        id: Date.now().toString(),
+        name: name || orgMember?.name || null,
+        email: email,
+        role: selectedRole(),
+        pending: true,
+      },
+    ]);
+
+    setEmailInput('');
+    setShowSuggestions(false);
+  };
+
+  const removeMember = id => {
+    setMembers(members().filter(m => m.id !== id));
+  };
+
+  const changeRole = (id, newRole) => {
+    setMembers(members().map(m => (m.id === id ? { ...m, role: newRole } : m)));
+  };
+
+  const memberCount = createMemo(() => members().length);
+  const hasEnoughForDualReview = createMemo(() => memberCount() >= 2);
+
+  return (
+    <div class='mx-auto max-w-3xl'>
+      {/* Header */}
+      <section>
+        <h2 class='text-lg font-semibold' style={{ color: tokens.slate900 }}>
+          Team Members
+        </h2>
+        <p class='mt-1 text-sm' style={{ color: tokens.slate500 }}>
+          Add collaborators to your project. Invites are sent immediately when you add members.
+        </p>
+      </section>
+
+      {/* Add member form */}
+      <div class='mt-6'>
+        <div class='flex gap-3'>
+          <div class='relative flex-1'>
+            <div class='pointer-events-none absolute top-1/2 left-3 -translate-y-1/2'>
+              <FiMail class='h-4 w-4' style={{ color: tokens.slate400 }} />
+            </div>
+            <input
+              type='email'
+              value={emailInput()}
+              onInput={e => {
+                setEmailInput(e.target.value);
+                setShowSuggestions(true);
+              }}
+              onFocus={() => setShowSuggestions(true)}
+              onKeyDown={e => {
+                if (e.key === 'Enter' && emailInput()) {
+                  e.preventDefault();
+                  addMember(emailInput());
+                }
+              }}
+              placeholder='Email address or name'
+              class='w-full rounded-lg border py-2.5 pr-3 pl-10 text-sm transition-all duration-200 outline-none'
+              style={{
+                'border-color': tokens.slate200,
+                background: 'white',
+                color: tokens.slate900,
+              }}
+              onFocus={e => {
+                e.target.style.borderColor = tokens.blue500;
+                e.target.style.boxShadow = `0 0 0 3px ${tokens.blue100}`;
+              }}
+              onBlur={e => {
+                e.target.style.borderColor = tokens.slate200;
+                e.target.style.boxShadow = 'none';
+                // Delay hiding suggestions to allow click
+                setTimeout(() => setShowSuggestions(false), 150);
+              }}
+            />
+
+            {/* Autocomplete suggestions */}
+            <Show when={showSuggestions() && suggestions().length > 0}>
+              <div
+                class='absolute top-full right-0 left-0 z-20 mt-1 rounded-lg border shadow-lg'
+                style={{ background: 'white', 'border-color': tokens.slate200 }}
+              >
+                <For each={suggestions()}>
+                  {member => (
+                    <button
+                      class='flex w-full items-center gap-3 px-3 py-2 text-left transition-colors first:rounded-t-lg last:rounded-b-lg'
+                      style={{ color: tokens.slate700 }}
+                      onMouseEnter={e => {
+                        e.currentTarget.style.background = tokens.slate50;
+                      }}
+                      onMouseLeave={e => {
+                        e.currentTarget.style.background = 'transparent';
+                      }}
+                      onMouseDown={e => {
+                        e.preventDefault();
+                        addMember(member.email, member.name);
+                      }}
+                    >
+                      <Avatar name={member.name} email={member.email} size='32px' fontSize='11px' />
+                      <div>
+                        <p class='text-sm font-medium'>{member.name}</p>
+                        <p class='text-xs' style={{ color: tokens.slate500 }}>
+                          {member.email}
+                        </p>
+                      </div>
+                    </button>
+                  )}
+                </For>
+              </div>
+            </Show>
+          </div>
+
+          {/* Role selector */}
+          <select
+            value={selectedRole()}
+            onChange={e => setSelectedRole(e.target.value)}
+            class='rounded-lg border px-3 py-2.5 text-sm transition-all duration-200 outline-none'
+            style={{
+              'border-color': tokens.slate200,
+              background: 'white',
+              color: tokens.slate700,
+              cursor: 'pointer',
+            }}
+            onFocus={e => {
+              e.target.style.borderColor = tokens.blue500;
+              e.target.style.boxShadow = `0 0 0 3px ${tokens.blue100}`;
+            }}
+            onBlur={e => {
+              e.target.style.borderColor = tokens.slate200;
+              e.target.style.boxShadow = 'none';
+            }}
+          >
+            <option value='member'>Member</option>
+            <option value='owner'>Owner</option>
+          </select>
+
+          {/* Add button */}
+          <button
+            onClick={() => addMember(emailInput())}
+            disabled={!emailInput()}
+            class='flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200'
+            style={{
+              background: emailInput() ? tokens.blue600 : tokens.slate100,
+              color: emailInput() ? 'white' : tokens.slate400,
+              cursor: emailInput() ? 'pointer' : 'not-allowed',
+            }}
+            onMouseEnter={e => {
+              if (emailInput()) e.currentTarget.style.background = tokens.blue700;
+            }}
+            onMouseLeave={e => {
+              if (emailInput()) e.currentTarget.style.background = tokens.blue600;
+            }}
+          >
+            <FiUserPlus class='h-4 w-4' />
+            Add
+          </button>
+        </div>
+      </div>
+
+      {/* Warning for single reviewer */}
+      <Show when={!hasEnoughForDualReview()}>
+        <div
+          class='mt-4 flex items-start gap-3 rounded-lg border p-3'
+          style={{ background: '#fffbeb', 'border-color': '#fcd34d' }}
+        >
+          <FiAlertCircle class='mt-0.5 h-4 w-4 shrink-0' style={{ color: '#b45309' }} />
+          <p class='text-sm' style={{ color: '#92400e' }}>
+            Dual-review requires at least 2 team members. Add another member to enable independent
+            review.
+          </p>
+        </div>
+      </Show>
+
+      {/* Member list */}
+      <div class='mt-6 space-y-2'>
+        <div class='flex items-center justify-between'>
+          <h3 class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+            Team ({memberCount()})
+          </h3>
+        </div>
+
+        <div class='space-y-2'>
+          <For each={members()}>
+            {member => (
+              <MemberRow
+                member={member}
+                onRemove={() => removeMember(member.id)}
+                onRoleChange={newRole => changeRole(member.id, newRole)}
+              />
+            )}
+          </For>
+        </div>
+      </div>
+
+      {/* Info callout */}
+      <div class='mt-6 flex items-start gap-3 rounded-lg p-3' style={{ background: tokens.blue50 }}>
+        <FiInfo class='mt-0.5 h-4 w-4 shrink-0' style={{ color: tokens.blue600 }} />
+        <p class='text-sm' style={{ color: tokens.blue700 }}>
+          You can add more team members at any time from the project settings.
+        </p>
+      </div>
+
+      {/* Navigation */}
+      <div
+        class='mt-10 flex items-center justify-between border-t pt-6'
+        style={{ 'border-color': tokens.slate200 }}
+      >
+        <SecondaryButton onClick={props.onBack}>
+          <FiChevronLeft class='h-4 w-4' />
+          Back
+        </SecondaryButton>
+
+        <div class='flex items-center gap-3'>
+          <SecondaryButton onClick={props.onSkip}>Skip for now</SecondaryButton>
+
+          <PrimaryButton onClick={props.onNext}>
+            Continue
+            <FiChevronRight class='h-4 w-4' />
+          </PrimaryButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// STEP 3: STUDIES IMPORT PANEL
+// ============================================================================
+
+/**
+ * Tab button for import sources
+ */
+function ImportTab(props) {
+  return (
+    <button
+      type='button'
+      onClick={props.onClick}
+      class='flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-all duration-200'
+      style={{
+        'border-color': props.active ? tokens.blue600 : 'transparent',
+        color: props.active ? tokens.blue700 : tokens.slate500,
+        background: props.active ? tokens.blue50 : 'transparent',
+      }}
+      onMouseEnter={e => {
+        if (!props.active) {
+          e.currentTarget.style.color = tokens.slate700;
+          e.currentTarget.style.background = tokens.slate50;
+        }
+      }}
+      onMouseLeave={e => {
+        if (!props.active) {
+          e.currentTarget.style.color = tokens.slate500;
+          e.currentTarget.style.background = 'transparent';
+        }
+      }}
+    >
+      {props.icon}
+      {props.label}
+    </button>
+  );
+}
+
+/**
+ * Study card in the staging area
+ */
+function StudyCard(props) {
+  return (
+    <div
+      class='group flex items-start gap-3 rounded-lg border p-4 transition-all duration-150'
+      style={{
+        background: 'white',
+        'border-color': props.duplicate ? '#fcd34d' : tokens.slate200,
+      }}
+      onMouseEnter={e => {
+        e.currentTarget.style.borderColor = props.duplicate ? '#f59e0b' : tokens.slate300;
+      }}
+      onMouseLeave={e => {
+        e.currentTarget.style.borderColor = props.duplicate ? '#fcd34d' : tokens.slate200;
+      }}
+    >
+      {/* PDF indicator */}
+      <div
+        class='mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg'
+        style={{
+          background: props.study.hasPdf ? tokens.blue50 : tokens.slate100,
+          color: props.study.hasPdf ? tokens.blue600 : tokens.slate400,
+        }}
+      >
+        <Show when={props.study.hasPdf} fallback={<FiFileText class='h-5 w-5' />}>
+          <FiFile class='h-5 w-5' />
+        </Show>
+      </div>
+
+      {/* Study info */}
+      <div class='min-w-0 flex-1'>
+        <p class='text-sm leading-snug font-medium' style={{ color: tokens.slate900 }}>
+          {props.study.title}
+        </p>
+        <p class='mt-1 truncate text-xs' style={{ color: tokens.slate500 }}>
+          {props.study.authors}
+        </p>
+        <div class='mt-2 flex flex-wrap items-center gap-2'>
+          <Show when={props.study.journal}>
+            <span class='text-xs' style={{ color: tokens.slate400 }}>
+              {props.study.journal}
+            </span>
+          </Show>
+          <Show when={props.study.year}>
+            <span class='text-xs' style={{ color: tokens.slate400 }}>
+              ({props.study.year})
+            </span>
+          </Show>
+          <Show when={props.study.doi}>
+            <span
+              class='inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs'
+              style={{ background: tokens.slate100, color: tokens.slate600 }}
+            >
+              DOI
+            </span>
+          </Show>
+          <Show when={props.study.hasPdf}>
+            <span
+              class='inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs'
+              style={{ background: tokens.blue50, color: tokens.blue700 }}
+            >
+              <FiFile class='h-3 w-3' />
+              PDF
+            </span>
+          </Show>
+          <Show when={props.duplicate}>
+            <span
+              class='inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs'
+              style={{ background: '#fef3c7', color: '#b45309' }}
+            >
+              <FiAlertCircle class='h-3 w-3' />
+              Possible duplicate
+            </span>
+          </Show>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <button
+        class='shrink-0 rounded-lg p-1.5 opacity-0 transition-all duration-150 group-hover:opacity-100'
+        style={{ color: tokens.slate400 }}
+        onClick={() => props.onRemove?.()}
+        onMouseEnter={e => {
+          e.currentTarget.style.background = '#fef2f2';
+          e.currentTarget.style.color = '#dc2626';
+        }}
+        onMouseLeave={e => {
+          e.currentTarget.style.background = 'transparent';
+          e.currentTarget.style.color = tokens.slate400;
+        }}
+      >
+        <FiX class='h-4 w-4' />
+      </button>
+    </div>
+  );
+}
+
+/**
+ * PDF Upload Tab Content
+ */
+function PdfUploadTab(props) {
+  const [isDragging, setIsDragging] = createSignal(false);
+
+  return (
+    <div class='space-y-4'>
+      {/* Drop zone */}
+      <div
+        class='relative rounded-xl border-2 border-dashed p-8 text-center transition-all duration-200'
+        style={{
+          'border-color': isDragging() ? tokens.blue500 : tokens.slate200,
+          background: isDragging() ? tokens.blue50 : tokens.slate50,
+        }}
+        onDragOver={e => {
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={e => {
+          e.preventDefault();
+          setIsDragging(false);
+          // Mock: simulate adding files
+          props.onUpload?.();
+        }}
+      >
+        <div
+          class='mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full'
+          style={{ background: tokens.blue100, color: tokens.blue600 }}
+        >
+          <FiUpload class='h-6 w-6' />
+        </div>
+        <p class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+          Drag and drop PDF files here
+        </p>
+        <p class='mt-1 text-xs' style={{ color: tokens.slate500 }}>
+          or click to browse
+        </p>
+        <input
+          type='file'
+          accept='.pdf'
+          multiple
+          class='absolute inset-0 cursor-pointer opacity-0'
+          onChange={() => props.onUpload?.()}
+        />
+      </div>
+
+      <p class='text-center text-xs' style={{ color: tokens.slate400 }}>
+        Metadata will be automatically extracted from uploaded PDFs
+      </p>
+    </div>
+  );
+}
+
+/**
+ * DOI/PMID Lookup Tab Content
+ */
+function DoiLookupTab(props) {
+  const [input, setInput] = createSignal('');
+  const [isLoading, setIsLoading] = createSignal(false);
+
+  const handleLookup = () => {
+    if (!input()) return;
+    setIsLoading(true);
+    // Mock: simulate lookup delay
+    setTimeout(() => {
+      setIsLoading(false);
+      props.onLookup?.(input());
+      setInput('');
+    }, 800);
+  };
+
+  return (
+    <div class='space-y-4'>
+      <div>
+        <label class='mb-1.5 block text-sm font-medium' style={{ color: tokens.slate700 }}>
+          Enter DOIs or PMIDs
+        </label>
+        <textarea
+          value={input()}
+          onInput={e => setInput(e.target.value)}
+          placeholder='10.1001/jama.2016.0086&#10;10.3389/fpsyg.2016.00578&#10;PMID: 27002445'
+          rows={4}
+          class='w-full resize-none rounded-lg border px-3 py-2.5 text-sm transition-all duration-200 outline-none'
+          style={{
+            'border-color': tokens.slate200,
+            background: 'white',
+            color: tokens.slate900,
+          }}
+          onFocus={e => {
+            e.target.style.borderColor = tokens.blue500;
+            e.target.style.boxShadow = `0 0 0 3px ${tokens.blue100}`;
+          }}
+          onBlur={e => {
+            e.target.style.borderColor = tokens.slate200;
+            e.target.style.boxShadow = 'none';
+          }}
+        />
+        <p class='mt-1.5 text-xs' style={{ color: tokens.slate500 }}>
+          One identifier per line. Supports DOI (10.xxxx/...) and PMID formats.
+        </p>
+      </div>
+
+      <button
+        onClick={handleLookup}
+        disabled={!input() || isLoading()}
+        class='flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200'
+        style={{
+          background: input() && !isLoading() ? tokens.blue600 : tokens.slate100,
+          color: input() && !isLoading() ? 'white' : tokens.slate400,
+          cursor: input() && !isLoading() ? 'pointer' : 'not-allowed',
+        }}
+      >
+        <Show when={isLoading()} fallback={<FiSearch class='h-4 w-4' />}>
+          <div
+            class='h-4 w-4 animate-spin rounded-full border-2'
+            style={{ 'border-color': `${tokens.slate300} transparent transparent transparent` }}
+          />
+        </Show>
+        {isLoading() ? 'Looking up...' : 'Look up metadata'}
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Reference File Import Tab Content
+ */
+function ReferenceFileTab(props) {
+  return (
+    <div class='space-y-4'>
+      <div
+        class='relative rounded-xl border-2 border-dashed p-6 text-center transition-all duration-200'
+        style={{
+          'border-color': tokens.slate200,
+          background: tokens.slate50,
+        }}
+      >
+        <div
+          class='mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full'
+          style={{ background: tokens.slate200, color: tokens.slate500 }}
+        >
+          <FiFileText class='h-5 w-5' />
+        </div>
+        <p class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+          Upload reference file
+        </p>
+        <p class='mt-1 text-xs' style={{ color: tokens.slate500 }}>
+          RIS, BibTeX, EndNote XML, or CSV
+        </p>
+        <input
+          type='file'
+          accept='.ris,.bib,.xml,.csv'
+          class='absolute inset-0 cursor-pointer opacity-0'
+          onChange={() => props.onUpload?.()}
+        />
+      </div>
+
+      <div class='flex items-center gap-3'>
+        <div class='h-px flex-1' style={{ background: tokens.slate200 }} />
+        <span class='text-xs' style={{ color: tokens.slate400 }}>
+          Supported formats
+        </span>
+        <div class='h-px flex-1' style={{ background: tokens.slate200 }} />
+      </div>
+
+      <div class='grid grid-cols-4 gap-2'>
+        {[
+          { name: 'RIS', desc: 'Research Info Systems' },
+          { name: 'BibTeX', desc: 'LaTeX bibliography' },
+          { name: 'EndNote', desc: 'XML export' },
+          { name: 'CSV', desc: 'Spreadsheet' },
+        ].map(format => (
+          <div
+            class='rounded-lg border p-3 text-center'
+            style={{ 'border-color': tokens.slate200, background: 'white' }}
+          >
+            <p class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+              {format.name}
+            </p>
+            <p class='mt-0.5 text-xs' style={{ color: tokens.slate400 }}>
+              {format.desc}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Google Drive Tab Content
+ */
+function GoogleDriveTab(props) {
+  const [isConnected, setIsConnected] = createSignal(false);
+
+  return (
+    <div class='space-y-4'>
+      <Show
+        when={isConnected()}
+        fallback={
+          <div
+            class='rounded-xl border p-6 text-center'
+            style={{ 'border-color': tokens.slate200 }}
+          >
+            <div
+              class='mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full'
+              style={{ background: '#fef3c7', color: '#b45309' }}
+            >
+              <FiFolder class='h-6 w-6' />
+            </div>
+            <p class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+              Connect Google Drive
+            </p>
+            <p class='mx-auto mt-1 max-w-xs text-xs' style={{ color: tokens.slate500 }}>
+              Import PDFs directly from your Google Drive folders
+            </p>
+            <button
+              onClick={() => setIsConnected(true)}
+              class='mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200'
+              style={{ background: tokens.blue600, color: 'white' }}
+              onMouseEnter={e => {
+                e.currentTarget.style.background = tokens.blue700;
+              }}
+              onMouseLeave={e => {
+                e.currentTarget.style.background = tokens.blue600;
+              }}
+            >
+              <FiExternalLink class='h-4 w-4' />
+              Connect Drive
+            </button>
+          </div>
+        }
+      >
+        {/* Connected state - file browser mock */}
+        <div class='rounded-xl border' style={{ 'border-color': tokens.slate200 }}>
+          <div
+            class='flex items-center justify-between border-b px-4 py-3'
+            style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+          >
+            <div class='flex items-center gap-2'>
+              <FiFolder class='h-4 w-4' style={{ color: tokens.slate500 }} />
+              <span class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+                My Drive / Research Papers
+              </span>
+            </div>
+            <button
+              class='text-xs'
+              style={{ color: tokens.blue600 }}
+              onClick={() => setIsConnected(false)}
+            >
+              Disconnect
+            </button>
+          </div>
+          <div class='divide-y' style={{ 'border-color': tokens.slate100 }}>
+            {[
+              { name: 'Cherkin_2016_JAMA.pdf', selected: true },
+              { name: 'deJong_2016_FrontPsych.pdf', selected: true },
+              { name: 'Schmidt_2020_PainMed.pdf', selected: false },
+              { name: 'Gardner_2021_JPainRes.pdf', selected: false },
+            ].map(file => (
+              <div
+                class='flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors'
+                style={{ background: file.selected ? tokens.blue50 : 'white' }}
+              >
+                <input
+                  type='checkbox'
+                  checked={file.selected}
+                  class='h-4 w-4 rounded'
+                  style={{ accentColor: tokens.blue600 }}
+                />
+                <FiFile class='h-4 w-4' style={{ color: tokens.slate400 }} />
+                <span class='text-sm' style={{ color: tokens.slate700 }}>
+                  {file.name}
+                </span>
+              </div>
+            ))}
+          </div>
+          <div
+            class='flex items-center justify-between border-t px-4 py-3'
+            style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+          >
+            <span class='text-xs' style={{ color: tokens.slate500 }}>
+              2 files selected
+            </span>
+            <button
+              class='rounded-lg px-3 py-1.5 text-sm font-medium'
+              style={{ background: tokens.blue600, color: 'white' }}
+              onClick={() => props.onImport?.()}
+            >
+              Import Selected
+            </button>
+          </div>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+/**
+ * Studies Import Panel - Step 3
+ * Reusable component for both wizard and studies tab
+ */
+function StudiesStep(props) {
+  const [activeTab, setActiveTab] = createSignal('pdf');
+  const [studies, setStudies] = createSignal([]);
+
+  // Mock: add sample studies
+  const addMockStudies = () => {
+    const newStudies = [
+      {
+        id: Date.now().toString(),
+        title:
+          'Mindfulness-Based Stress Reduction for Chronic Low Back Pain: A Randomized Controlled Trial',
+        authors: 'Cherkin DC, Sherman KJ, Balderson BH, et al.',
+        journal: 'JAMA',
+        year: 2016,
+        doi: '10.1001/jama.2016.0086',
+        hasPdf: true,
+      },
+      {
+        id: (Date.now() + 1).toString(),
+        title:
+          'Effects of Mindfulness-Based Cognitive Therapy on Body Awareness in Patients with Chronic Pain',
+        authors: 'de Jong M, Lazar SW, Hug K, et al.',
+        journal: 'Frontiers in Psychology',
+        year: 2016,
+        doi: '10.3389/fpsyg.2016.00578',
+        hasPdf: true,
+      },
+    ];
+    setStudies([...studies(), ...newStudies]);
+  };
+
+  const addDoiStudy = () => {
+    const newStudy = {
+      id: Date.now().toString(),
+      title: 'A Pilot Study of Mindfulness Meditation for Pediatric Chronic Pain',
+      authors: 'Jastrowski Mano KE, Salamon KS, Hainsworth KR, et al.',
+      journal: 'Children',
+      year: 2019,
+      doi: '10.3390/children6010007',
+      hasPdf: false,
+    };
+    setStudies([...studies(), newStudy]);
+  };
+
+  const removeStudy = id => {
+    setStudies(studies().filter(s => s.id !== id));
+  };
+
+  const studyCount = createMemo(() => studies().length);
+  const pdfCount = createMemo(() => studies().filter(s => s.hasPdf).length);
+
+  // Check for duplicates (mock: just check by title similarity)
+  const isDuplicate = study => {
+    const otherStudies = studies().filter(s => s.id !== study.id);
+    return otherStudies.some(s =>
+      s.title.toLowerCase().includes(study.title.split(':')[0].toLowerCase().trim()),
+    );
+  };
+
+  return (
+    <div class='mx-auto max-w-3xl'>
+      {/* Header */}
+      <section>
+        <h2 class='text-lg font-semibold' style={{ color: tokens.slate900 }}>
+          Import Studies
+        </h2>
+        <p class='mt-1 text-sm' style={{ color: tokens.slate500 }}>
+          Add studies from PDFs, identifiers, reference files, or Google Drive.
+        </p>
+      </section>
+
+      {/* Import tabs */}
+      <div class='mt-6'>
+        <div class='flex border-b' style={{ 'border-color': tokens.slate200 }}>
+          <ImportTab
+            label='PDF Upload'
+            icon={<FiUpload class='h-4 w-4' />}
+            active={activeTab() === 'pdf'}
+            onClick={() => setActiveTab('pdf')}
+          />
+          <ImportTab
+            label='DOI / PMID'
+            icon={<FiSearch class='h-4 w-4' />}
+            active={activeTab() === 'doi'}
+            onClick={() => setActiveTab('doi')}
+          />
+          <ImportTab
+            label='Reference File'
+            icon={<FiFileText class='h-4 w-4' />}
+            active={activeTab() === 'reference'}
+            onClick={() => setActiveTab('reference')}
+          />
+          <ImportTab
+            label='Google Drive'
+            icon={<FiFolder class='h-4 w-4' />}
+            active={activeTab() === 'drive'}
+            onClick={() => setActiveTab('drive')}
+          />
+        </div>
+
+        <div class='py-6'>
+          <Show when={activeTab() === 'pdf'}>
+            <PdfUploadTab onUpload={addMockStudies} />
+          </Show>
+          <Show when={activeTab() === 'doi'}>
+            <DoiLookupTab onLookup={addDoiStudy} />
+          </Show>
+          <Show when={activeTab() === 'reference'}>
+            <ReferenceFileTab onUpload={addMockStudies} />
+          </Show>
+          <Show when={activeTab() === 'drive'}>
+            <GoogleDriveTab onImport={addMockStudies} />
+          </Show>
+        </div>
+      </div>
+
+      {/* Staging area */}
+      <Show when={studies().length > 0}>
+        <section class='mt-2'>
+          <div class='mb-3 flex items-center justify-between'>
+            <h3 class='text-sm font-medium' style={{ color: tokens.slate700 }}>
+              Imported Studies ({studyCount()})
+            </h3>
+            <div class='flex items-center gap-3'>
+              <span class='text-xs' style={{ color: tokens.slate500 }}>
+                {pdfCount()} with PDF
+              </span>
+              <Show when={studyCount() - pdfCount() > 0}>
+                <span class='text-xs' style={{ color: '#b45309' }}>
+                  {studyCount() - pdfCount()} missing PDF
+                </span>
+              </Show>
+            </div>
+          </div>
+
+          <div class='space-y-2'>
+            <For each={studies()}>
+              {study => (
+                <StudyCard
+                  study={study}
+                  duplicate={isDuplicate(study)}
+                  onRemove={() => removeStudy(study.id)}
+                />
+              )}
+            </For>
+          </div>
+        </section>
+      </Show>
+
+      {/* Empty state */}
+      <Show when={studies().length === 0}>
+        <div
+          class='mt-2 rounded-xl border-2 border-dashed p-8 text-center'
+          style={{ 'border-color': tokens.slate200 }}
+        >
+          <div
+            class='mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full'
+            style={{ background: tokens.slate100, color: tokens.slate400 }}
+          >
+            <FiFileText class='h-5 w-5' />
+          </div>
+          <p class='text-sm font-medium' style={{ color: tokens.slate600 }}>
+            No studies imported yet
+          </p>
+          <p class='mt-1 text-xs' style={{ color: tokens.slate400 }}>
+            Use the tabs above to add studies to your project
+          </p>
+        </div>
+      </Show>
+
+      {/* Info callout */}
+      <div class='mt-6 flex items-start gap-3 rounded-lg p-3' style={{ background: tokens.blue50 }}>
+        <FiInfo class='mt-0.5 h-4 w-4 shrink-0' style={{ color: tokens.blue600 }} />
+        <p class='text-sm' style={{ color: tokens.blue700 }}>
+          You can import more studies at any time from the Studies tab.
+        </p>
+      </div>
+
+      {/* Navigation */}
+      <div
+        class='mt-10 flex items-center justify-between border-t pt-6'
+        style={{ 'border-color': tokens.slate200 }}
+      >
+        <SecondaryButton onClick={props.onBack}>
+          <FiChevronLeft class='h-4 w-4' />
+          Back
+        </SecondaryButton>
+
+        <div class='flex items-center gap-3'>
+          <SecondaryButton onClick={props.onSkip}>Skip for now</SecondaryButton>
+
+          <PrimaryButton onClick={props.onNext}>
+            Continue
+            <FiChevronRight class='h-4 w-4' />
+          </PrimaryButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// STEP 4: ASSIGNMENT PANEL
+// ============================================================================
+
+const PERCENT_PRESETS = [0, 25, 33, 50, 75, 100];
+
+/**
+ * Preset button for percentage selection
+ */
+function PresetButton(props) {
+  return (
+    <button
+      type='button'
+      onClick={props.onClick}
+      class='rounded-md px-2 py-1 text-xs font-medium transition-all'
+      style={{
+        background: props.active ? tokens.blue600 : tokens.slate100,
+        color: props.active ? 'white' : tokens.slate600,
+      }}
+      onMouseEnter={e => {
+        if (!props.active) e.currentTarget.style.background = tokens.slate200;
+      }}
+      onMouseLeave={e => {
+        if (!props.active) e.currentTarget.style.background = tokens.slate100;
+      }}
+    >
+      {props.value}%
+    </button>
+  );
+}
+
+/**
+ * Member row with percentage presets for customization
+ */
+function MemberPercentRow(props) {
+  return (
+    <div
+      class='flex items-center gap-3 rounded-lg border p-3'
+      style={{ background: 'white', 'border-color': tokens.slate200 }}
+    >
+      <Avatar name={props.member.name} email={props.member.email} size='32px' fontSize='11px' />
+      <div class='min-w-0 flex-1'>
+        <p class='truncate text-sm font-medium' style={{ color: tokens.slate700 }}>
+          {props.member.name}
+        </p>
+      </div>
+      <div class='flex items-center gap-1'>
+        <For each={PERCENT_PRESETS}>
+          {preset => (
+            <PresetButton
+              value={preset}
+              active={props.percent === preset}
+              onClick={() => props.onChange(preset)}
+            />
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Assignment preview table row
+ */
+function PreviewRow(props) {
+  const hasConflict = () => props.assignment.reviewer1?.id === props.assignment.reviewer2?.id;
+  const isEven = () => props.index % 2 === 0;
+
+  // Background: conflict (red) > even row (light gray) > transparent
+  const rowBg = () => {
+    if (hasConflict()) return '#fef2f2';
+    if (isEven()) return tokens.slate50;
+    return 'white';
+  };
+
+  return (
+    <tr style={{ background: rowBg() }}>
+      <td class='max-w-xs truncate py-2.5 pr-4 pl-4 text-sm' style={{ color: tokens.slate700 }}>
+        {props.assignment.title}
+      </td>
+      <td class='py-2.5 pr-4'>
+        <Show when={props.assignment.reviewer1}>
+          <div class='flex items-center gap-2'>
+            <Avatar
+              name={props.assignment.reviewer1.name}
+              email={props.assignment.reviewer1.email}
+              size='22px'
+              fontSize='8px'
+            />
+            <span class='text-sm' style={{ color: tokens.slate600 }}>
+              {props.assignment.reviewer1.name}
+            </span>
+          </div>
+        </Show>
+      </td>
+      <td class='py-2.5 pr-4'>
+        <Show when={props.assignment.reviewer2}>
+          <div class='flex items-center gap-2'>
+            <Avatar
+              name={props.assignment.reviewer2.name}
+              email={props.assignment.reviewer2.email}
+              size='22px'
+              fontSize='8px'
+            />
+            <span class='text-sm' style={{ color: hasConflict() ? '#dc2626' : tokens.slate600 }}>
+              {props.assignment.reviewer2.name}
+              {hasConflict() && ' (conflict)'}
+            </span>
+          </div>
+        </Show>
+      </td>
+    </tr>
+  );
+}
+
+/**
+ * Assignment Panel - Step 4
+ * Simple one-click assignment with optional customization
+ */
+function AssignmentStep(props) {
+  // Mock team members
+  const allMembers = [
+    { id: '1', name: 'You', email: 'you@example.com' },
+    { id: '2', name: 'Dr. Sarah Chen', email: 'sarah.chen@university.edu' },
+    { id: '3', name: 'Dr. Michael Torres', email: 'm.torres@research.org' },
+    { id: '4', name: 'Dr. Emily Watson', email: 'e.watson@institute.edu' },
+  ];
+
+  // Mock studies
+  const studies = [
+    { id: '1', title: 'Mindfulness-Based Stress Reduction for Chronic Low Back Pain' },
+    { id: '2', title: 'Effects of Mindfulness-Based Cognitive Therapy on Body Awareness' },
+    { id: '3', title: 'A Pilot Study of Mindfulness Meditation for Pediatric Chronic Pain' },
+    { id: '4', title: 'Mindfulness Training for Coping with Chronic Pain' },
+    { id: '5', title: 'Acceptance-Based Interventions for Fibromyalgia' },
+    { id: '6', title: 'Yoga as a Treatment for Chronic Low Back Pain' },
+  ];
+
+  // Custom percentages per member per pool (null = use even split)
+  const [pool1Percents, setPool1Percents] = createSignal(null);
+  const [pool2Percents, setPool2Percents] = createSignal(null);
+
+  // UI state
+  const [showCustomize, setShowCustomize] = createSignal(false);
+  const [previewAssignments, setPreviewAssignments] = createSignal([]);
+
+  const hasAssignments = () => previewAssignments().length > 0;
+
+  // Get effective percentages
+  const getEvenPercents = () => {
+    const each = Math.floor(100 / allMembers.length);
+    const remainder = 100 - each * allMembers.length;
+    const result = {};
+    allMembers.forEach((m, i) => {
+      result[m.id] = each + (i < remainder ? 1 : 0);
+    });
+    return result;
+  };
+
+  const getPool1Percents = () => pool1Percents() || getEvenPercents();
+  const getPool2Percents = () => pool2Percents() || getEvenPercents();
+
+  // Update custom percentage
+  const updatePool1Percent = (id, value) => {
+    const current = pool1Percents() || getEvenPercents();
+    setPool1Percents({ ...current, [id]: value });
+  };
+
+  const updatePool2Percent = (id, value) => {
+    const current = pool2Percents() || getEvenPercents();
+    setPool2Percents({ ...current, [id]: value });
+  };
+
+  // Totals for validation (allow 99-100% for rounding cases like 3x33%)
+  const pool1Total = () => Object.values(getPool1Percents()).reduce((a, b) => a + b, 0);
+  const pool2Total = () => Object.values(getPool2Percents()).reduce((a, b) => a + b, 0);
+  const isPoolValid = total => total >= 99 && total <= 100;
+  const isCustomValid = () => isPoolValid(pool1Total()) && isPoolValid(pool2Total());
+
+  // Shuffle array
+  const shuffleArray = arr => {
+    const shuffled = [...arr];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+  };
+
+  // Generate assignments
+  const generateAssignments = () => {
+    const totalStudies = studies.length;
+    const p1Percents = getPool1Percents();
+    const p2Percents = getPool2Percents();
+
+    // Build assignment arrays based on percentages
+    const pool1Assignments = [];
+    const pool2Assignments = [];
+
+    // Only include members with > 0%
+    const p1Members = allMembers.filter(m => (p1Percents[m.id] || 0) > 0);
+    const p2Members = allMembers.filter(m => (p2Percents[m.id] || 0) > 0);
+
+    let remaining1 = totalStudies;
+    p1Members.forEach((m, i) => {
+      const percent = p1Percents[m.id] || 0;
+      const count =
+        i === p1Members.length - 1 ? remaining1 : Math.round((percent / 100) * totalStudies);
+      remaining1 -= count;
+      for (let j = 0; j < count; j++) pool1Assignments.push(m);
+    });
+
+    let remaining2 = totalStudies;
+    p2Members.forEach((m, i) => {
+      const percent = p2Percents[m.id] || 0;
+      const count =
+        i === p2Members.length - 1 ? remaining2 : Math.round((percent / 100) * totalStudies);
+      remaining2 -= count;
+      for (let j = 0; j < count; j++) pool2Assignments.push(m);
+    });
+
+    // Shuffle and assign
+    const shuffled1 = shuffleArray(pool1Assignments);
+    const shuffled2 = shuffleArray(pool2Assignments);
+    const shuffledStudies = shuffleArray(studies);
+
+    const assignments = shuffledStudies.map((study, i) => ({
+      ...study,
+      reviewer1: shuffled1[i],
+      reviewer2: shuffled2[i],
+    }));
+
+    // Resolve conflicts by swapping
+    for (let i = 0; i < assignments.length; i++) {
+      if (assignments[i].reviewer1?.id === assignments[i].reviewer2?.id) {
+        for (let j = 0; j < assignments.length; j++) {
+          if (i !== j && assignments[j].reviewer1?.id !== assignments[j].reviewer2?.id) {
+            const canSwap =
+              assignments[j].reviewer2?.id !== assignments[i].reviewer1?.id &&
+              assignments[i].reviewer2?.id !== assignments[j].reviewer1?.id;
+            if (canSwap) {
+              const temp = assignments[i].reviewer2;
+              assignments[i].reviewer2 = assignments[j].reviewer2;
+              assignments[j].reviewer2 = temp;
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    setPreviewAssignments(assignments);
+  };
+
+  const hasConflicts = createMemo(() =>
+    previewAssignments().some(a => a.reviewer1?.id === a.reviewer2?.id),
+  );
+
+  const conflictCount = createMemo(
+    () => previewAssignments().filter(a => a.reviewer1?.id === a.reviewer2?.id).length,
+  );
+
+  // Get member data with current percentages
+  const pool1MembersWithPercent = createMemo(() =>
+    allMembers.map(m => ({ ...m, percent: getPool1Percents()[m.id] || 0 })),
+  );
+
+  const pool2MembersWithPercent = createMemo(() =>
+    allMembers.map(m => ({ ...m, percent: getPool2Percents()[m.id] || 0 })),
+  );
+
+  return (
+    <div class='mx-auto max-w-3xl'>
+      {/* Header */}
+      <section>
+        <h2 class='text-lg font-semibold' style={{ color: tokens.slate900 }}>
+          Reviewer Assignment
+        </h2>
+        <p class='mt-1 text-sm' style={{ color: tokens.slate500 }}>
+          Randomly assign studies to reviewers. By default, work is split evenly among all team
+          members.
+        </p>
+      </section>
+
+      {/* Summary */}
+      <div
+        class='mt-4 flex items-center justify-between rounded-lg px-4 py-3'
+        style={{ background: tokens.slate100 }}
+      >
+        <p class='text-sm' style={{ color: tokens.slate600 }}>
+          <span class='font-semibold' style={{ color: tokens.slate900 }}>
+            {studies.length}
+          </span>{' '}
+          studies
+        </p>
+        <p class='text-sm' style={{ color: tokens.slate600 }}>
+          <span class='font-semibold' style={{ color: tokens.slate900 }}>
+            {allMembers.length}
+          </span>{' '}
+          reviewers
+        </p>
+        <p class='text-sm' style={{ color: tokens.slate600 }}>
+          <span class='font-semibold' style={{ color: tokens.slate900 }}>
+            {Math.round(100 / allMembers.length)}%
+          </span>{' '}
+          each (even split)
+        </p>
+      </div>
+
+      {/* Customize toggle */}
+      <button
+        onClick={() => setShowCustomize(!showCustomize())}
+        class='mt-6 flex w-full items-center justify-between rounded-lg border px-4 py-3 text-sm font-medium transition-all'
+        style={{
+          'border-color': showCustomize() ? tokens.blue300 : tokens.slate200,
+          background: showCustomize() ? tokens.blue50 : 'white',
+          color: showCustomize() ? tokens.blue700 : tokens.slate700,
+        }}
+        onMouseEnter={e => {
+          if (!showCustomize()) {
+            e.currentTarget.style.borderColor = tokens.slate300;
+            e.currentTarget.style.background = tokens.slate50;
+          }
+        }}
+        onMouseLeave={e => {
+          if (!showCustomize()) {
+            e.currentTarget.style.borderColor = tokens.slate200;
+            e.currentTarget.style.background = 'white';
+          }
+        }}
+      >
+        <div class='flex items-center gap-2'>
+          <FiSliders class='h-4 w-4' />
+          <span>Customize distribution</span>
+        </div>
+        <div class='flex items-center gap-2'>
+          <span class='text-xs' style={{ color: tokens.slate400 }}>
+            {showCustomize() ? 'Hide' : 'Adjust percentages per reviewer'}
+          </span>
+          <FiChevronRight
+            class='h-4 w-4 transition-transform'
+            style={{ transform: showCustomize() ? 'rotate(90deg)' : 'rotate(0deg)' }}
+          />
+        </div>
+      </button>
+
+      {/* Customization panels */}
+      <Show when={showCustomize()}>
+        <div class='mt-4 space-y-4'>
+          {/* Pool 1 */}
+          <div
+            class='rounded-xl border p-4'
+            style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+          >
+            <div class='mb-3 flex items-center justify-between'>
+              <h4 class='text-sm font-semibold' style={{ color: tokens.slate700 }}>
+                1st Reviewer Pool
+              </h4>
+              <span
+                class='text-xs font-medium'
+                style={{ color: isPoolValid(pool1Total()) ? tokens.success : '#b45309' }}
+              >
+                Total: {pool1Total()}%{pool1Total() === 99 && ' (OK)'}
+              </span>
+            </div>
+            <div class='space-y-2'>
+              <For each={pool1MembersWithPercent()}>
+                {member => (
+                  <MemberPercentRow
+                    member={member}
+                    percent={member.percent}
+                    onChange={val => updatePool1Percent(member.id, val)}
+                  />
+                )}
+              </For>
+            </div>
+          </div>
+
+          {/* Pool 2 */}
+          <div
+            class='rounded-xl border p-4'
+            style={{ 'border-color': tokens.slate200, background: tokens.slate50 }}
+          >
+            <div class='mb-3 flex items-center justify-between'>
+              <h4 class='text-sm font-semibold' style={{ color: tokens.slate700 }}>
+                2nd Reviewer Pool
+              </h4>
+              <span
+                class='text-xs font-medium'
+                style={{ color: isPoolValid(pool2Total()) ? tokens.success : '#b45309' }}
+              >
+                Total: {pool2Total()}%{pool2Total() === 99 && ' (OK)'}
+              </span>
+            </div>
+            <div class='space-y-2'>
+              <For each={pool2MembersWithPercent()}>
+                {member => (
+                  <MemberPercentRow
+                    member={member}
+                    percent={member.percent}
+                    onChange={val => updatePool2Percent(member.id, val)}
+                  />
+                )}
+              </For>
+            </div>
+          </div>
+
+          <Show when={!isCustomValid()}>
+            <p class='text-center text-xs' style={{ color: '#b45309' }}>
+              Each pool must total 99-100% to generate assignments
+            </p>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Action button - below customize */}
+      <div class='mt-6'>
+        <button
+          onClick={generateAssignments}
+          disabled={showCustomize() && !isCustomValid()}
+          class='flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium transition-all duration-200'
+          style={{
+            background: showCustomize() && !isCustomValid() ? tokens.slate200 : tokens.blue600,
+            color: showCustomize() && !isCustomValid() ? tokens.slate400 : 'white',
+            cursor: showCustomize() && !isCustomValid() ? 'not-allowed' : 'pointer',
+          }}
+          onMouseEnter={e => {
+            if (!showCustomize() || isCustomValid())
+              e.currentTarget.style.background = tokens.blue700;
+          }}
+          onMouseLeave={e => {
+            if (!showCustomize() || isCustomValid())
+              e.currentTarget.style.background = tokens.blue600;
+          }}
+        >
+          <Show when={hasAssignments()} fallback='Assign Randomly (Even Split)'>
+            <FiCopy class='h-4 w-4' />
+            Reshuffle
+          </Show>
+        </button>
+      </div>
+
+      {/* Preview section */}
+      <Show when={hasAssignments()}>
+        <section class='mt-6'>
+          <div
+            class='overflow-hidden rounded-xl border'
+            style={{ 'border-color': hasConflicts() ? '#fca5a5' : tokens.blue200 }}
+          >
+            <div
+              class='flex items-center justify-between border-b px-4 py-3'
+              style={{
+                'border-color': hasConflicts() ? '#fca5a5' : tokens.blue200,
+                background: hasConflicts() ? '#fef2f2' : tokens.blue50,
+              }}
+            >
+              <div>
+                <h4
+                  class='text-sm font-semibold'
+                  style={{ color: hasConflicts() ? '#991b1b' : tokens.blue900 }}
+                >
+                  Assignment Preview
+                </h4>
+                <Show when={hasConflicts()}>
+                  <p class='text-xs' style={{ color: '#dc2626' }}>
+                    {conflictCount()} conflict{conflictCount() !== 1 && 's'} - click Reshuffle
+                  </p>
+                </Show>
+              </div>
+              <span class='text-xs' style={{ color: tokens.slate500 }}>
+                {studies.length} studies assigned
+              </span>
+            </div>
+
+            <div class='max-h-64 overflow-y-auto'>
+              <table class='w-full text-left'>
+                <thead class='sticky top-0' style={{ background: tokens.slate50 }}>
+                  <tr>
+                    <th
+                      class='py-2 pr-4 pl-4 text-xs font-medium'
+                      style={{ color: tokens.slate500 }}
+                    >
+                      Study
+                    </th>
+                    <th class='py-2 pr-4 text-xs font-medium' style={{ color: tokens.slate500 }}>
+                      1st Reviewer
+                    </th>
+                    <th class='py-2 pr-4 text-xs font-medium' style={{ color: tokens.slate500 }}>
+                      2nd Reviewer
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <For each={previewAssignments()}>
+                    {(assignment, index) => <PreviewRow assignment={assignment} index={index()} />}
+                  </For>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+      </Show>
+
+      {/* Info callout */}
+      <div class='mt-6 flex items-start gap-3 rounded-lg p-3' style={{ background: tokens.blue50 }}>
+        <FiInfo class='mt-0.5 h-4 w-4 shrink-0' style={{ color: tokens.blue600 }} />
+        <p class='text-sm' style={{ color: tokens.blue700 }}>
+          You can reassign reviewers at any time from the Studies tab.
+        </p>
+      </div>
+
+      {/* Navigation */}
+      <div
+        class='mt-10 flex items-center justify-between border-t pt-6'
+        style={{ 'border-color': tokens.slate200 }}
+      >
+        <SecondaryButton onClick={props.onBack}>
+          <FiChevronLeft class='h-4 w-4' />
+          Back
+        </SecondaryButton>
+
+        <div class='flex items-center gap-3'>
+          <SecondaryButton onClick={props.onSkip}>Skip for now</SecondaryButton>
+
+          <PrimaryButton onClick={props.onFinish} disabled={hasAssignments() && hasConflicts()}>
+            <Show when={hasAssignments()} fallback='Finish Setup'>
+              Apply & Finish
+            </Show>
+            <FiCheck class='h-4 w-4' />
+          </PrimaryButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// MAIN WIZARD COMPONENT
+// ============================================================================
+
+export default function ProjectWizardMock() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Initialize step from URL or default to 1
+  const getInitialStep = () => {
+    const stepParam = parseInt(searchParams.step, 10);
+    return stepParam >= 1 && stepParam <= 4 ? stepParam : 1;
+  };
+
+  const [currentStep, setCurrentStep] = createSignal(getInitialStep());
+
+  // Sync step changes to URL
+  const updateStep = step => {
+    setCurrentStep(step);
+    setSearchParams({ step: step.toString() });
+  };
+
+  return (
+    <div
+      class='min-h-screen'
+      style={{
+        background: `linear-gradient(180deg, ${tokens.slate50} 0%, white 100%)`,
+        'font-family': "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+      }}
+    >
+      {/* Header */}
+      <header
+        class='sticky top-0 z-50 border-b'
+        style={{
+          background: 'rgba(255,255,255,0.8)',
+          'backdrop-filter': 'blur(12px)',
+          '-webkit-backdrop-filter': 'blur(12px)',
+          'border-color': tokens.slate200,
+        }}
+      >
+        <div class='mx-auto max-w-5xl px-6 py-4'>
+          <div class='flex items-center justify-between'>
+            <div class='flex items-center gap-3'>
+              {/* Logo placeholder */}
+              <div
+                class='flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold'
+                style={{ background: tokens.blue600, color: 'white' }}
+              >
+                C
+              </div>
+              <div>
+                <h1 class='text-base font-semibold' style={{ color: tokens.slate900 }}>
+                  New Project
+                </h1>
+              </div>
+            </div>
+
+            <button
+              class='flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm transition-colors duration-200'
+              style={{ color: tokens.slate500 }}
+              onMouseEnter={e => {
+                e.currentTarget.style.background = tokens.slate100;
+              }}
+              onMouseLeave={e => {
+                e.currentTarget.style.background = 'transparent';
+              }}
+            >
+              <FiX class='h-4 w-4' />
+              Exit
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Stepper */}
+      <div class='mx-auto max-w-5xl px-6 py-8'>
+        <Stepper currentStep={currentStep()} />
+      </div>
+
+      {/* Content area */}
+      <main class='mx-auto max-w-5xl px-6 pb-16'>
+        <div
+          class='rounded-2xl border p-8'
+          style={{
+            background: 'white',
+            'border-color': tokens.slate200,
+            'box-shadow': '0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)',
+          }}
+        >
+          <Show when={currentStep() === 1}>
+            <ProjectDetailsStep onNext={() => updateStep(2)} onCancel={() => {}} />
+          </Show>
+
+          <Show when={currentStep() === 2}>
+            <TeamStep
+              onBack={() => updateStep(1)}
+              onNext={() => updateStep(3)}
+              onSkip={() => updateStep(3)}
+            />
+          </Show>
+
+          <Show when={currentStep() === 3}>
+            <StudiesStep
+              onBack={() => updateStep(2)}
+              onNext={() => updateStep(4)}
+              onSkip={() => updateStep(4)}
+            />
+          </Show>
+
+          <Show when={currentStep() === 4}>
+            <AssignmentStep
+              onBack={() => updateStep(3)}
+              onSkip={() => alert('Setup complete! Redirecting to project...')}
+              onFinish={() => alert('Assignments applied! Redirecting to project...')}
+            />
+          </Show>
+        </div>
+      </main>
+
+      {/* Load Inter font */}
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+      `}</style>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/org/CreateOrgPage.jsx b/packages/web/src/components/org/CreateOrgPage.jsx
index 7eeab85a7..ac6d2dfa0 100644
--- a/packages/web/src/components/org/CreateOrgPage.jsx
+++ b/packages/web/src/components/org/CreateOrgPage.jsx
@@ -9,7 +9,7 @@ import { useNavigate } from '@solidjs/router';
 import { authClient } from '@api/auth-client.js';
 import { useQueryClient } from '@tanstack/solid-query';
 import { queryKeys } from '@lib/queryKeys.js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import { setLastOrgSlug } from '@primitives/useOrgContext.js';
 
 export default function CreateOrgPage() {
diff --git a/packages/web/src/components/pdf/PdfListItem.jsx b/packages/web/src/components/pdf/PdfListItem.jsx
index 05330cb82..9bf14ce44 100644
--- a/packages/web/src/components/pdf/PdfListItem.jsx
+++ b/packages/web/src/components/pdf/PdfListItem.jsx
@@ -9,10 +9,20 @@
  * - Delete button (if editable)
  */
 
-import { Show, createSignal } from 'solid-js';
-import { FiTrash2, FiEye, FiDownload, FiEdit2 } from 'solid-icons/fi';
+import { Show, createSignal, For } from 'solid-js';
+import { FiTrash2, FiEye, FiDownload, FiEdit2, FiX } from 'solid-icons/fi';
 import { CgFileDocument } from 'solid-icons/cg';
-import { Menu, Dialog } from '@corates/ui';
+import { Menu, MenuTrigger, MenuPositioner, MenuContent, MenuItem } from '@/components/ui/menu';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import PdfTagBadge from './PdfTagBadge.jsx';
 
 export default function PdfListItem(props) {
@@ -145,13 +155,18 @@ export default function PdfListItem(props) {
 
           {/* Tag change menu (if not read-only) */}
           <Show when={!props.readOnly && tagMenuItems().length > 0}>
-            <Menu
-              trigger={<span class='text-xs'>Tag</span>}
-              items={tagMenuItems()}
-              onSelect={handleTagMenuSelect}
-              placement='bottom-end'
-              hideIndicator
-            />
+            <Menu onSelect={handleTagMenuSelect} positioning={{ placement: 'bottom-end' }}>
+              <MenuTrigger class='rounded-md px-2 py-1 text-xs text-gray-500 transition-colors hover:bg-blue-50 hover:text-blue-600'>
+                Tag
+              </MenuTrigger>
+              <MenuPositioner>
+                <MenuContent>
+                  <For each={tagMenuItems()}>
+                    {item => <MenuItem value={item.value}>{item.label}</MenuItem>}
+                  </For>
+                </MenuContent>
+              </MenuPositioner>
+            </Menu>
           </Show>
 
           {/* Delete button (if not read-only) */}
@@ -169,29 +184,40 @@ export default function PdfListItem(props) {
       </div>
 
       {/* Delete confirmation dialog */}
-      <Dialog open={showDeleteConfirm()} onOpenChange={setShowDeleteConfirm} title='Delete PDF'>
-        <div class='p-4'>
-          <p class='mb-4 text-gray-600'>
-            Are you sure you want to delete <strong>{props.pdf.fileName}</strong>? This action
-            cannot be undone.
-          </p>
-          <div class='flex justify-end gap-3'>
-            <button
-              type='button'
-              onClick={() => setShowDeleteConfirm(false)}
-              class='rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50'
-            >
-              Cancel
-            </button>
-            <button
-              type='button'
-              onClick={handleDelete}
-              class='rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
-            >
-              Delete
-            </button>
-          </div>
-        </div>
+      <Dialog open={showDeleteConfirm()} onOpenChange={setShowDeleteConfirm}>
+        <DialogBackdrop />
+        <DialogPositioner>
+          <DialogContent class='max-w-md'>
+            <DialogHeader>
+              <DialogTitle>Delete PDF</DialogTitle>
+              <DialogCloseTrigger>
+                <FiX class='h-5 w-5' />
+              </DialogCloseTrigger>
+            </DialogHeader>
+            <DialogBody>
+              <p class='mb-4 text-gray-600'>
+                Are you sure you want to delete <strong>{props.pdf.fileName}</strong>? This action
+                cannot be undone.
+              </p>
+              <div class='flex justify-end gap-3'>
+                <button
+                  type='button'
+                  onClick={() => setShowDeleteConfirm(false)}
+                  class='rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50'
+                >
+                  Cancel
+                </button>
+                <button
+                  type='button'
+                  onClick={handleDelete}
+                  class='rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                >
+                  Delete
+                </button>
+              </div>
+            </DialogBody>
+          </DialogContent>
+        </DialogPositioner>
       </Dialog>
     </>
   );
diff --git a/packages/web/src/components/profile/ProfilePage.jsx b/packages/web/src/components/profile/ProfilePage.jsx
index 321bae7a5..fea24b1c7 100644
--- a/packages/web/src/components/profile/ProfilePage.jsx
+++ b/packages/web/src/components/profile/ProfilePage.jsx
@@ -1,10 +1,29 @@
-import { createSignal, Show, For } from 'solid-js';
+import { createSignal, createMemo, Show, For } from 'solid-js';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { FiCamera } from 'solid-icons/fi';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import { LANDING_URL, API_BASE } from '@config/api.js';
-import { ROLES, getRoleLabel } from '@/components/auth/RoleSelector.jsx';
+import { ROLES, getRoleLabel, TITLE_OPTIONS } from '@/components/auth/RoleSelector.jsx';
 import { compressImageFile } from '@lib/imageUtils.js';
+import {
+  Select,
+  SelectControl,
+  SelectTrigger,
+  SelectValueText,
+  SelectIndicator,
+  SelectPositioner,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectItemIndicator,
+  createListCollection,
+} from '@/components/ui/select';
+
+const titleCollection = createListCollection({
+  items: TITLE_OPTIONS,
+  itemToString: item => item.label,
+  itemToValue: item => item.value,
+});
 
 const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
 
@@ -38,8 +57,24 @@ export default function ProfilePage() {
   const [editFirstName, setEditFirstName] = createSignal('');
   const [editLastName, setEditLastName] = createSignal('');
   const [editRole, setEditRole] = createSignal('');
+  const [isEditingAcademic, setIsEditingAcademic] = createSignal(false);
+  const [editTitleSelection, setEditTitleSelection] = createSignal([]);
+  const [editCustomTitle, setEditCustomTitle] = createSignal('');
+  const [editInstitution, setEditInstitution] = createSignal('');
+  const [editDepartment, setEditDepartment] = createSignal('');
   const [saving, setSaving] = createSignal(false);
 
+  // Compute the actual title value for editing
+  const editTitle = createMemo(() => {
+    const selected = editTitleSelection()[0];
+    if (selected === 'other') {
+      return editCustomTitle().trim();
+    }
+    return selected || '';
+  });
+
+  const isEditingCustomTitle = createMemo(() => editTitleSelection()[0] === 'other');
+
   // Delete account state
   const [showDeleteConfirm, setShowDeleteConfirm] = createSignal(false);
   const [deleteConfirmText, setDeleteConfirmText] = createSignal('');
@@ -97,6 +132,31 @@ export default function ProfilePage() {
     setEditRole('');
   };
 
+  const startEditingAcademic = () => {
+    const currentTitle = user()?.title || '';
+    const isStandardTitle = TITLE_OPTIONS.some(
+      opt => opt.value === currentTitle && opt.value !== 'other',
+    );
+    if (currentTitle && !isStandardTitle) {
+      setEditTitleSelection(['other']);
+      setEditCustomTitle(currentTitle);
+    } else {
+      setEditTitleSelection(currentTitle ? [currentTitle] : []);
+      setEditCustomTitle('');
+    }
+    setEditInstitution(user()?.institution || '');
+    setEditDepartment(user()?.department || '');
+    setIsEditingAcademic(true);
+  };
+
+  const cancelEditingAcademic = () => {
+    setIsEditingAcademic(false);
+    setEditTitleSelection([]);
+    setEditCustomTitle('');
+    setEditInstitution('');
+    setEditDepartment('');
+  };
+
   const saveName = async () => {
     setSaving(true);
 
@@ -134,6 +194,25 @@ export default function ProfilePage() {
     }
   };
 
+  const saveAcademic = async () => {
+    setSaving(true);
+
+    try {
+      await auth.updateProfile({
+        title: editTitle() || null,
+        institution: editInstitution()?.trim() || null,
+        department: editDepartment()?.trim() || null,
+      });
+      showToast.success('Profile Updated', 'Your academic information has been updated.');
+      setIsEditingAcademic(false);
+    } catch (err) {
+      console.warn('Failed to update academic info:', err.message);
+      showToast.error('Update Failed', 'Failed to update academic information. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
   const handleImageSelect = async event => {
     const file = event.target.files?.[0];
     if (!file) return;
@@ -442,6 +521,131 @@ export default function ProfilePage() {
               </Show>
             </div>
 
+            {/* Academic Information Field */}
+            <div class='flex items-start justify-between border-t border-gray-100 pt-4'>
+              <div class='flex-1'>
+                <label class='block text-xs font-medium tracking-wide text-gray-500 uppercase'>
+                  Academic Information
+                </label>
+                <Show
+                  when={isEditingAcademic()}
+                  fallback={
+                    <div class='mt-1 space-y-1'>
+                      <div>
+                        <span class='text-xs text-gray-500'>Title: </span>
+                        <span class='text-gray-900'>{user()?.title || 'Not set'}</span>
+                      </div>
+                      <div>
+                        <span class='text-xs text-gray-500'>Institution: </span>
+                        <span class='text-gray-900'>{user()?.institution || 'Not set'}</span>
+                      </div>
+                      <div>
+                        <span class='text-xs text-gray-500'>Department: </span>
+                        <span class='text-gray-900'>{user()?.department || 'Not set'}</span>
+                      </div>
+                    </div>
+                  }
+                >
+                  <div class='mt-2 space-y-3'>
+                    <div>
+                      <label class='mb-1 block text-xs font-medium tracking-wide text-gray-500 uppercase'>
+                        Title
+                      </label>
+                      <Select
+                        collection={titleCollection}
+                        value={editTitleSelection()}
+                        onValueChange={details => setEditTitleSelection(details.value)}
+                        class='max-w-xs'
+                      >
+                        <SelectControl>
+                          <SelectTrigger>
+                            <SelectValueText placeholder='Select a title (optional)' />
+                            <SelectIndicator />
+                          </SelectTrigger>
+                        </SelectControl>
+                        <SelectPositioner>
+                          <SelectContent>
+                            <For each={TITLE_OPTIONS}>
+                              {option => (
+                                <SelectItem item={option}>
+                                  <SelectItemText>{option.label}</SelectItemText>
+                                  <SelectItemIndicator />
+                                </SelectItem>
+                              )}
+                            </For>
+                          </SelectContent>
+                        </SelectPositioner>
+                      </Select>
+                      <Show when={isEditingCustomTitle()}>
+                        <input
+                          type='text'
+                          value={editCustomTitle()}
+                          onInput={e => setEditCustomTitle(e.target.value)}
+                          class='mt-2 block w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                          placeholder='Enter your title'
+                          maxLength={50}
+                        />
+                      </Show>
+                    </div>
+                    <div>
+                      <label class='mb-1 block text-xs font-medium tracking-wide text-gray-500 uppercase'>
+                        Institution
+                      </label>
+                      <input
+                        type='text'
+                        value={editInstitution()}
+                        onInput={e => setEditInstitution(e.target.value)}
+                        class='block w-full max-w-md rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-400 focus:outline-none'
+                        placeholder='University or organization'
+                        maxLength={200}
+                      />
+                    </div>
+                    <div>
+                      <label class='mb-1 block text-xs font-medium tracking-wide text-gray-500 uppercase'>
+                        Department
+                      </label>
+                      <input
+                        type='text'
+                        value={editDepartment()}
+                        onInput={e => setEditDepartment(e.target.value)}
+                        class='block w-full max-w-md rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-400 focus:outline-none'
+                        placeholder='Department or faculty'
+                        maxLength={200}
+                      />
+                    </div>
+                  </div>
+                </Show>
+              </div>
+              <Show
+                when={isEditingAcademic()}
+                fallback={
+                  <button
+                    onClick={startEditingAcademic}
+                    class='ml-4 text-sm font-medium text-blue-600 hover:text-blue-700'
+                  >
+                    Edit
+                  </button>
+                }
+              >
+                <div class='ml-4 flex space-x-2'>
+                  <button
+                    onClick={saveAcademic}
+                    disabled={saving()}
+                    class='rounded-lg bg-blue-600 px-3 py-1 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
+                  >
+                    Save
+                  </button>
+                  <button
+                    onClick={cancelEditingAcademic}
+                    disabled={saving()}
+                    class='px-3 py-1 text-sm font-medium text-gray-600 hover:text-gray-800 disabled:opacity-50'
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </Show>
+            </div>
+
             {/* Email Field */}
             <div class='border-t border-gray-100 pt-4'>
               <label class='block text-xs font-medium tracking-wide text-gray-500 uppercase'>
diff --git a/packages/web/src/components/project/CreateProjectForm.jsx b/packages/web/src/components/project/CreateProjectForm.jsx
index 80beb6499..b06530ea3 100644
--- a/packages/web/src/components/project/CreateProjectForm.jsx
+++ b/packages/web/src/components/project/CreateProjectForm.jsx
@@ -1,6 +1,7 @@
 import { createSignal, Show, onMount, createMemo, createEffect } from 'solid-js';
 import AddStudiesForm from './add-studies/AddStudiesForm.jsx';
-import { showToast, Select } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import { SimpleSelect } from '@/components/ui/select';
 import { AUTH_ERRORS } from '@corates/shared';
 import { isUnlimitedQuota } from '@corates/shared/plans';
 import {
@@ -28,7 +29,7 @@ export default function CreateProjectForm(props) {
   const [projectDescription, setProjectDescription] = createSignal('');
   const [isCreating, setIsCreating] = createSignal(false);
   const [restoredState, setRestoredState] = createSignal(null);
-  const [selectedOrgId, setSelectedOrgId] = createSignal(null);
+  const [selectedOrgId, setSimpleSelectedOrgId] = createSignal(null);
 
   // Get orgs list
   const { orgs, isLoading: orgsLoading } = useOrgs();
@@ -37,7 +38,7 @@ export default function CreateProjectForm(props) {
   createEffect(() => {
     const orgsList = orgs();
     if (orgsList.length > 1 && !selectedOrgId()) {
-      setSelectedOrgId(orgsList[0].id);
+      setSimpleSelectedOrgId(orgsList[0].id);
     }
   });
 
@@ -197,10 +198,10 @@ export default function CreateProjectForm(props) {
         <Show when={!orgsLoading() && orgs().length > 1}>
           <div>
             <label class='mb-2 block text-sm font-semibold text-gray-700'>Organization</label>
-            <Select
+            <SimpleSelect
               items={orgs().map(org => ({ value: org.id, label: org.name }))}
               value={selectedOrgId()}
-              onChange={value => setSelectedOrgId(value)}
+              onChange={value => setSimpleSelectedOrgId(value)}
               placeholder='Select an organization'
             />
           </div>
diff --git a/packages/web/src/components/project/ProjectHeader.jsx b/packages/web/src/components/project/ProjectHeader.jsx
index 487ec0297..16f028dfa 100644
--- a/packages/web/src/components/project/ProjectHeader.jsx
+++ b/packages/web/src/components/project/ProjectHeader.jsx
@@ -1,7 +1,7 @@
 import { Show, createMemo, createSignal } from 'solid-js';
 import { FiChevronLeft, FiEdit2, FiCheck, FiX } from 'solid-icons/fi';
 import { useProjectContext } from './ProjectContext.jsx';
-import { Editable } from '@corates/ui';
+import { SimpleEditable } from '@/components/ui/editable';
 import { handleError } from '@/lib/error-utils.js';
 
 export default function ProjectHeader(props) {
@@ -72,7 +72,7 @@ export default function ProjectHeader(props) {
           <FiChevronLeft class='h-6 w-6' />
         </button>
         <div class='flex min-w-0 flex-1 items-center gap-2'>
-          <Editable
+          <SimpleEditable
             activationMode='click'
             value={name()}
             onSubmit={handleNameChange}
diff --git a/packages/web/src/components/project/ProjectView.jsx b/packages/web/src/components/project/ProjectView.jsx
index 4d95a8242..79de3cdf1 100644
--- a/packages/web/src/components/project/ProjectView.jsx
+++ b/packages/web/src/components/project/ProjectView.jsx
@@ -6,7 +6,7 @@
  * This component uses org-scoped routes and APIs.
  */
 
-import { createSignal, createEffect, Show, onCleanup, batch, createMemo } from 'solid-js';
+import { createSignal, createEffect, Show, onCleanup, batch, createMemo, For } from 'solid-js';
 import { useParams, useNavigate, useLocation } from '@solidjs/router';
 import useProject from '@/primitives/useProject/index.js';
 import { useProjectOrgId } from '@primitives/useProjectOrgId.js';
@@ -17,7 +17,8 @@ import { useBetterAuth } from '@api/better-auth-store.js';
 import { uploadPdf, deletePdf } from '@api/pdf-api.js';
 import { cachePdf } from '@primitives/pdfCache.js';
 import { importFromGoogleDrive } from '@api/google-drive.js';
-import { Tabs, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { BiRegularHome } from 'solid-icons/bi';
 import { BsListTask } from 'solid-icons/bs';
 import { CgArrowsExchange } from 'solid-icons/cg';
@@ -192,7 +193,7 @@ export default function ProjectView(props) {
       };
       const studyId = projectActionsStore.study.create(title, abstract, metadata);
       if (studyId && file.id) {
-        importFromGoogleDrive(file.id, oid, params.projectId, studyId)
+        importFromGoogleDrive(file.id, params.projectId, studyId)
           .then(result => {
             try {
               projectActionsStore.pdf.addToStudy(studyId, {
@@ -296,40 +297,65 @@ export default function ProjectView(props) {
             onBack={() => navigate(backPath())}
           />
 
-          <Tabs tabs={tabDefinitions} value={tabFromUrl()} onValueChange={handleTabChange}>
-            {tabValue => (
-              <>
-                <Show when={tabValue === 'overview'}>
-                  <SectionErrorBoundary name='Overview'>
-                    <OverviewTab />
-                  </SectionErrorBoundary>
-                </Show>
-
-                <Show when={tabValue === 'all-studies'}>
-                  <SectionErrorBoundary name='All Studies'>
-                    <AllStudiesTab />
-                  </SectionErrorBoundary>
-                </Show>
-
-                <Show when={tabValue === 'todo'}>
-                  <SectionErrorBoundary name='To-Do'>
-                    <ToDoTab />
-                  </SectionErrorBoundary>
-                </Show>
-
-                <Show when={tabValue === 'reconcile'}>
-                  <SectionErrorBoundary name='Reconcile'>
-                    <ReconcileTab />
-                  </SectionErrorBoundary>
-                </Show>
-
-                <Show when={tabValue === 'completed'}>
-                  <SectionErrorBoundary name='Completed'>
-                    <CompletedTab />
-                  </SectionErrorBoundary>
-                </Show>
-              </>
-            )}
+          <Tabs value={tabFromUrl()} onValueChange={handleTabChange}>
+            <TabsList class='overflow-x-auto rounded-t-lg border border-gray-200 bg-white'>
+              <For each={tabDefinitions}>
+                {tab => (
+                  <TabsTrigger
+                    value={tab.value}
+                    class='gap-2 border-b-2 border-transparent text-gray-600 hover:bg-gray-50 hover:text-gray-900 data-[selected]:border-blue-600 data-[selected]:text-gray-900'
+                  >
+                    {tab.icon}
+                    {tab.label}
+                    <Show when={tab.getCount}>
+                      <span class='ml-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600'>
+                        {tab.getCount()}
+                      </span>
+                    </Show>
+                  </TabsTrigger>
+                )}
+              </For>
+            </TabsList>
+            <TabsContent
+              value='overview'
+              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
+            >
+              <SectionErrorBoundary name='Overview'>
+                <OverviewTab />
+              </SectionErrorBoundary>
+            </TabsContent>
+            <TabsContent
+              value='all-studies'
+              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
+            >
+              <SectionErrorBoundary name='All Studies'>
+                <AllStudiesTab />
+              </SectionErrorBoundary>
+            </TabsContent>
+            <TabsContent
+              value='todo'
+              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
+            >
+              <SectionErrorBoundary name='To-Do'>
+                <ToDoTab />
+              </SectionErrorBoundary>
+            </TabsContent>
+            <TabsContent
+              value='reconcile'
+              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
+            >
+              <SectionErrorBoundary name='Reconcile'>
+                <ReconcileTab />
+              </SectionErrorBoundary>
+            </TabsContent>
+            <TabsContent
+              value='completed'
+              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
+            >
+              <SectionErrorBoundary name='Completed'>
+                <CompletedTab />
+              </SectionErrorBoundary>
+            </TabsContent>
           </Tabs>
         </div>
 
diff --git a/packages/web/src/components/project/ProjectsPanel.jsx b/packages/web/src/components/project/ProjectsPanel.jsx
index 4bba49bc2..e31a8b0f2 100644
--- a/packages/web/src/components/project/ProjectsPanel.jsx
+++ b/packages/web/src/components/project/ProjectsPanel.jsx
@@ -11,7 +11,20 @@ import { useMyProjectsList } from '@primitives/useMyProjectsList.js';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { useSubscription } from '@primitives/useSubscription.js';
 import { useQueryClient } from '@tanstack/solid-query';
-import { useConfirmDialog, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 import { API_BASE } from '@config/api.js';
 import { queryKeys } from '@lib/queryKeys.js';
 import ProjectCard from '@/components/project/ProjectCard.jsx';
@@ -22,9 +35,13 @@ import projectStore from '@/stores/projectStore.js';
 export default function ProjectsPanel() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const confirmDialog = useConfirmDialog();
   const { isOnline } = useBetterAuth();
 
+  // Delete confirmation dialog state
+  const [deleteDialogOpen, setDeleteDialogOpen] = createSignal(false);
+  const [pendingDeleteId, setPendingDeleteId] = createSignal(null);
+  const [deleteLoading, setDeleteLoading] = createSignal(false);
+
   // Projects for current user
   const projectListQuery = useMyProjectsList();
   const projects = () => projectListQuery.projects();
@@ -80,24 +97,23 @@ export default function ProjectsPanel() {
     navigate(`/projects/${projectId}`);
   };
 
-  // Delete a project
-  const handleDeleteProject = async targetProjectId => {
-    const confirmed = await confirmDialog.open({
-      title: 'Delete Project',
-      description:
-        'Are you sure you want to delete this entire project? This action cannot be undone.',
-      confirmText: 'Delete Project',
-      variant: 'danger',
-    });
-    if (!confirmed) return;
-
-    // Find the project to get its orgId
+  // Opens delete confirmation dialog
+  const handleDeleteProject = targetProjectId => {
+    setPendingDeleteId(targetProjectId);
+    setDeleteDialogOpen(true);
+  };
+
+  // Executes delete after confirmation
+  const confirmDeleteProject = async () => {
+    const targetProjectId = pendingDeleteId();
     const project = projects()?.find(p => p.id === targetProjectId);
     if (!project?.orgId) {
       showToast.error('Error', 'Unable to find project organization');
+      setDeleteDialogOpen(false);
       return;
     }
 
+    setDeleteLoading(true);
     try {
       const response = await fetch(
         `${API_BASE}/api/orgs/${project.orgId}/projects/${targetProjectId}`,
@@ -113,9 +129,12 @@ export default function ProjectsPanel() {
 
       queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
       showToast.success('Project Deleted', 'The project has been deleted successfully');
+      setDeleteDialogOpen(false);
     } catch (err) {
       const { handleError } = await import('@/lib/error-utils.js');
       await handleError(err, { toastTitle: 'Delete Failed' });
+    } finally {
+      setDeleteLoading(false);
     }
   };
 
@@ -125,6 +144,15 @@ export default function ProjectsPanel() {
 
   return (
     <div class='space-y-6'>
+      {/* Contact prompt for users who can't create projects */}
+      <Show when={!canCreateProject() && canCreateProject() !== null}>
+        <ContactPrompt
+          restrictionType={restrictionType()}
+          projectCount={projectCount()}
+          quotaLimit={quotas()?.['projects.max']}
+        />
+      </Show>
+
       {/* Header */}
       <div class='flex flex-wrap items-center justify-between gap-4'>
         <div>
@@ -132,17 +160,8 @@ export default function ProjectsPanel() {
           <p class='mt-1 text-gray-500'>Manage your research projects</p>
         </div>
 
-        {/* Create button or quota prompt */}
-        <Show
-          when={canCreateProject()}
-          fallback={
-            <ContactPrompt
-              restrictionType={restrictionType()}
-              projectCount={projectCount()}
-              quotaLimit={quotas()?.['projects.max']}
-            />
-          }
-        >
+        {/* Create button */}
+        <Show when={canCreateProject()}>
           <button
             class='inline-flex transform items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white shadow-md transition-all duration-200 hover:scale-[1.02] hover:bg-blue-700 hover:shadow-lg focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100'
             onClick={() => setShowCreateForm(!showCreateForm())}
@@ -227,7 +246,33 @@ export default function ProjectsPanel() {
         </Show>
       </div>
 
-      <confirmDialog.ConfirmDialogComponent />
+      {/* Delete confirmation dialog */}
+      <AlertDialog open={deleteDialogOpen()} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogBackdrop />
+        <AlertDialogPositioner>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIcon variant='danger' />
+              <div>
+                <AlertDialogTitle>Delete Project</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Are you sure you want to delete this entire project? This action cannot be undone.
+                </AlertDialogDescription>
+              </div>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={deleteLoading()}>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                variant='danger'
+                disabled={deleteLoading()}
+                onClick={confirmDeleteProject}
+              >
+                {deleteLoading() ? 'Deleting...' : 'Delete Project'}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogPositioner>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/packages/web/src/components/project/add-studies/AddStudiesForm.jsx b/packages/web/src/components/project/add-studies/AddStudiesForm.jsx
index 462129703..f49ee483f 100644
--- a/packages/web/src/components/project/add-studies/AddStudiesForm.jsx
+++ b/packages/web/src/components/project/add-studies/AddStudiesForm.jsx
@@ -1,8 +1,9 @@
-import { createSignal, createEffect, Show, onMount, onCleanup } from 'solid-js';
+import { createSignal, createEffect, Show, onMount, onCleanup, For } from 'solid-js';
 import { BiRegularPlus } from 'solid-icons/bi';
 import { AiOutlineCloudUpload } from 'solid-icons/ai';
 import { FiChevronUp } from 'solid-icons/fi';
-import { Tabs, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import projectStore from '@/stores/projectStore.js';
 
 import { useAddStudies } from '@primitives/useAddStudies.js';
@@ -215,37 +216,34 @@ export default function AddStudiesForm(props) {
             </div>
           </Show>
 
-          <Tabs
-            variant='underline'
-            value={activeTab()}
-            onValueChange={v => setActiveTab(v)}
-            tabs={tabs.map(t => ({
-              ...t,
-              label: (
-                <span class='flex items-center gap-2'>
-                  {t.label}
-                  <Show
-                    when={
-                      (t.value === 'pdfs' && studies.pdfCount() > 0) ||
-                      (t.value === 'references' && studies.refCount() > 0) ||
-                      (t.value === 'lookup' && studies.lookupCount() > 0) ||
-                      (t.value === 'drive' && studies.driveCount() > 0)
-                    }
-                  >
-                    <span class='inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-blue-100 px-1.5 text-xs font-medium text-blue-700'>
-                      {t.value === 'pdfs' ?
-                        studies.pdfCount()
-                      : t.value === 'references' ?
-                        studies.refCount()
-                      : t.value === 'lookup' ?
-                        studies.lookupCount()
-                      : studies.driveCount()}
-                    </span>
-                  </Show>
-                </span>
-              ),
-            }))}
-          />
+          <Tabs value={activeTab()} onValueChange={v => setActiveTab(v)}>
+            <TabsList class='border-b border-gray-200 bg-white'>
+              <For each={tabs}>
+                {tab => {
+                  const getCount = () => {
+                    if (tab.value === 'pdfs') return studies.pdfCount();
+                    if (tab.value === 'references') return studies.refCount();
+                    if (tab.value === 'lookup') return studies.lookupCount();
+                    if (tab.value === 'drive') return studies.driveCount();
+                    return 0;
+                  };
+                  return (
+                    <TabsTrigger
+                      value={tab.value}
+                      class='gap-2 border-b-2 border-transparent text-gray-600 hover:text-gray-900 data-[selected]:border-blue-600 data-[selected]:text-gray-900'
+                    >
+                      {tab.label}
+                      <Show when={getCount() > 0}>
+                        <span class='inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-blue-100 px-1.5 text-xs font-medium text-blue-700'>
+                          {getCount()}
+                        </span>
+                      </Show>
+                    </TabsTrigger>
+                  );
+                }}
+              </For>
+            </TabsList>
+          </Tabs>
 
           <div class='mt-4'>
             <Show when={activeTab() === 'pdfs'}>
diff --git a/packages/web/src/components/project/add-studies/DoiLookupSection.jsx b/packages/web/src/components/project/add-studies/DoiLookupSection.jsx
index 9ad5217f2..d30368bde 100644
--- a/packages/web/src/components/project/add-studies/DoiLookupSection.jsx
+++ b/packages/web/src/components/project/add-studies/DoiLookupSection.jsx
@@ -13,7 +13,14 @@ import {
   BiRegularUpload,
 } from 'solid-icons/bi';
 import { FiFile, FiFileText, FiAlertCircle, FiCheck, FiDownload } from 'solid-icons/fi';
-import { Checkbox, Tooltip, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
+import { CheckboxRoot, CheckboxControl, CheckboxLabel } from '@/components/ui/checkbox';
 import { getRefDisplayName } from '@/lib/referenceParser.js';
 import { validatePdfFile } from '@/lib/pdfValidation.js';
 
@@ -104,15 +111,22 @@ export default function DoiLookupSection(props) {
 
           <Show when={refsWithPdf().length > 0}>
             <div class='flex items-center gap-2 border-b border-gray-200 pb-2'>
-              <Checkbox
-                checked={studies().selectedLookupIds().size === refsWithPdf().length}
-                indeterminate={
-                  studies().selectedLookupIds().size > 0 &&
-                  studies().selectedLookupIds().size < refsWithPdf().length
+              <CheckboxRoot
+                checked={
+                  (
+                    studies().selectedLookupIds().size > 0 &&
+                    studies().selectedLookupIds().size < refsWithPdf().length
+                  ) ?
+                    'indeterminate'
+                  : studies().selectedLookupIds().size === refsWithPdf().length
                 }
-                onChange={studies().toggleSelectAllLookup}
-                label={`Select all with PDF (${studies().selectedLookupIds().size}/${refsWithPdf().length})`}
-              />
+                onCheckedChange={studies().toggleSelectAllLookup}
+              >
+                <CheckboxControl />
+                <CheckboxLabel>
+                  Select all with PDF ({studies().selectedLookupIds().size}/{refsWithPdf().length})
+                </CheckboxLabel>
+              </CheckboxRoot>
             </div>
           </Show>
 
@@ -164,11 +178,13 @@ export default function DoiLookupSection(props) {
                       class='hidden'
                       onChange={handleManualPdfSelect}
                     />
-                    <Checkbox
+                    <CheckboxRoot
                       checked={studies().selectedLookupIds().has(ref._id)}
-                      onChange={() => studies().toggleLookupSelection(ref._id)}
+                      onCheckedChange={() => studies().toggleLookupSelection(ref._id)}
                       class='mt-0.5'
-                    />
+                    >
+                      <CheckboxControl />
+                    </CheckboxRoot>
                     <div class='min-w-0 flex-1'>
                       <div class='flex items-start gap-2'>
                         <p class='line-clamp-2 flex-1 text-sm font-medium text-gray-900'>
@@ -182,64 +198,97 @@ export default function DoiLookupSection(props) {
                                 when={ref.pdfAccessible}
                                 fallback={
                                   <>
-                                    <Tooltip content='Click to manually upload PDF after downloading from publisher'>
-                                      <button
-                                        type='button'
-                                        onClick={e => {
-                                          e.stopPropagation();
-                                          fileInputRef?.click();
-                                        }}
-                                        class='inline-flex items-center gap-1 rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700 transition-colors hover:bg-amber-200'
-                                      >
-                                        <BiRegularUpload class='h-3 w-3' />
-                                        Upload PDF
-                                      </button>
+                                    <Tooltip>
+                                      <TooltipTrigger>
+                                        <button
+                                          type='button'
+                                          onClick={e => {
+                                            e.stopPropagation();
+                                            fileInputRef?.click();
+                                          }}
+                                          class='inline-flex items-center gap-1 rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700 transition-colors hover:bg-amber-200'
+                                        >
+                                          <BiRegularUpload class='h-3 w-3' />
+                                          Upload PDF
+                                        </button>
+                                      </TooltipTrigger>
+                                      <TooltipPositioner>
+                                        <TooltipContent>
+                                          Click to manually upload PDF after downloading from
+                                          publisher
+                                        </TooltipContent>
+                                      </TooltipPositioner>
                                     </Tooltip>
                                     <Show when={ref.pdfUrl}>
-                                      <Tooltip content='Download PDF from publisher (then upload)'>
-                                        <a
-                                          href={ref.pdfUrl}
-                                          target='_blank'
-                                          rel='noopener noreferrer'
-                                          onClick={e => e.stopPropagation()}
-                                          class='inline-flex h-6 w-6 items-center justify-center rounded text-blue-600 transition-colors hover:bg-blue-50 hover:text-blue-700'
-                                        >
-                                          <FiDownload class='h-4 w-4' />
-                                        </a>
+                                      <Tooltip>
+                                        <TooltipTrigger>
+                                          <a
+                                            href={ref.pdfUrl}
+                                            target='_blank'
+                                            rel='noopener noreferrer'
+                                            onClick={e => e.stopPropagation()}
+                                            class='inline-flex h-6 w-6 items-center justify-center rounded text-blue-600 transition-colors hover:bg-blue-50 hover:text-blue-700'
+                                          >
+                                            <FiDownload class='h-4 w-4' />
+                                          </a>
+                                        </TooltipTrigger>
+                                        <TooltipPositioner>
+                                          <TooltipContent>
+                                            Download PDF from publisher (then upload)
+                                          </TooltipContent>
+                                        </TooltipPositioner>
                                       </Tooltip>
                                     </Show>
                                   </>
                                 }
                               >
-                                <Tooltip
-                                  content={`PDF available via ${ref.pdfSource || 'repository'} - will auto-download`}
-                                >
-                                  <span class='inline-flex items-center gap-1 rounded bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700'>
-                                    <FiFileText class='h-3 w-3' />
-                                    PDF
-                                  </span>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <span class='inline-flex items-center gap-1 rounded bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700'>
+                                      <FiFileText class='h-3 w-3' />
+                                      PDF
+                                    </span>
+                                  </TooltipTrigger>
+                                  <TooltipPositioner>
+                                    <TooltipContent>
+                                      PDF available via {ref.pdfSource || 'repository'} - will
+                                      auto-download
+                                    </TooltipContent>
+                                  </TooltipPositioner>
                                 </Tooltip>
                               </Show>
                             }
                           >
-                            <Tooltip content={`PDF uploaded: ${ref.manualPdfFileName}`}>
-                              <span class='inline-flex items-center gap-1 rounded bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700'>
-                                <FiCheck class='h-3 w-3' />
-                                PDF Ready
-                              </span>
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <span class='inline-flex items-center gap-1 rounded bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700'>
+                                  <FiCheck class='h-3 w-3' />
+                                  PDF Ready
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipPositioner>
+                                <TooltipContent>
+                                  PDF uploaded: {ref.manualPdfFileName}
+                                </TooltipContent>
+                              </TooltipPositioner>
                             </Tooltip>
                           </Show>
                           <Show when={ref.pdfUrl && ref.pdfAccessible}>
-                            <Tooltip content='View PDF'>
-                              <a
-                                href={ref.pdfUrl}
-                                target='_blank'
-                                rel='noopener noreferrer'
-                                onClick={e => e.stopPropagation()}
-                                class='inline-flex h-6 w-6 items-center justify-center rounded text-blue-600 transition-colors hover:bg-blue-50 hover:text-blue-700'
-                              >
-                                <BiRegularLinkExternal class='h-4 w-4' />
-                              </a>
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <a
+                                  href={ref.pdfUrl}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                  onClick={e => e.stopPropagation()}
+                                  class='inline-flex h-6 w-6 items-center justify-center rounded text-blue-600 transition-colors hover:bg-blue-50 hover:text-blue-700'
+                                >
+                                  <BiRegularLinkExternal class='h-4 w-4' />
+                                </a>
+                              </TooltipTrigger>
+                              <TooltipPositioner>
+                                <TooltipContent>View PDF</TooltipContent>
+                              </TooltipPositioner>
                             </Tooltip>
                           </Show>
                         </div>
diff --git a/packages/web/src/components/project/add-studies/PdfUploadSection.jsx b/packages/web/src/components/project/add-studies/PdfUploadSection.jsx
index 8f21cc312..c72e4709b 100644
--- a/packages/web/src/components/project/add-studies/PdfUploadSection.jsx
+++ b/packages/web/src/components/project/add-studies/PdfUploadSection.jsx
@@ -6,9 +6,9 @@
 import { For, Show } from 'solid-js';
 import { BiRegularTrash } from 'solid-icons/bi';
 import { CgFileDocument } from 'solid-icons/cg';
-import { FiLink, FiRefreshCw } from 'solid-icons/fi';
+import { FiLink, FiRefreshCw, FiUploadCloud } from 'solid-icons/fi';
 import { VsWarning } from 'solid-icons/vs';
-import { FileUpload } from '@corates/ui';
+import { FileUpload, FileUploadDropzone, FileUploadHiddenInput } from '@/components/ui/file-upload';
 
 export default function PdfUploadSection(props) {
   const studies = () => props.studies;
@@ -21,14 +21,19 @@ export default function PdfUploadSection(props) {
       </p>
 
       <FileUpload
-        accept='application/pdf,.pdf'
-        multiple
-        allowDirectories={false}
-        helpText='PDF files only'
-        showFileList={false}
-        onFilesChange={studies().handlePdfSelect}
-        compact
-      />
+        accept={['application/pdf', '.pdf']}
+        maxFiles={Infinity}
+        onFileAccept={details => studies().handlePdfSelect(details.files)}
+      >
+        <FileUploadDropzone class='min-h-24 p-4'>
+          <FiUploadCloud class='h-6 w-6 text-gray-400' />
+          <p class='mt-2 text-center text-xs text-gray-600'>
+            <span class='font-medium text-blue-600'>Click to upload</span> or drag and drop
+          </p>
+          <p class='mt-1 text-xs text-gray-400'>PDF files only</p>
+        </FileUploadDropzone>
+        <FileUploadHiddenInput />
+      </FileUpload>
 
       <Show when={studies().uploadedPdfs.length > 0}>
         <div class='space-y-2'>
diff --git a/packages/web/src/components/project/add-studies/ReferenceImportSection.jsx b/packages/web/src/components/project/add-studies/ReferenceImportSection.jsx
index 2502942ef..3ae6a6afc 100644
--- a/packages/web/src/components/project/add-studies/ReferenceImportSection.jsx
+++ b/packages/web/src/components/project/add-studies/ReferenceImportSection.jsx
@@ -8,7 +8,9 @@ import { For, Show } from 'solid-js';
 import { AiOutlineFileText } from 'solid-icons/ai';
 import { CgFileDocument } from 'solid-icons/cg';
 import { BiRegularLinkAlt } from 'solid-icons/bi';
-import { FileUpload, Checkbox } from '@corates/ui';
+import { FiUploadCloud } from 'solid-icons/fi';
+import { FileUpload, FileUploadDropzone, FileUploadHiddenInput } from '@/components/ui/file-upload';
+import { CheckboxRoot, CheckboxControl, CheckboxLabel } from '@/components/ui/checkbox';
 import {
   getRefDisplayName,
   SUPPORTED_FORMATS,
@@ -79,15 +81,22 @@ export default function ReferenceImportSection(props) {
             </Show>
 
             <div class='flex items-center gap-2 border-b border-gray-200 pb-2'>
-              <Checkbox
-                checked={studies().selectedRefIds().size === studies().importedRefs().length}
-                indeterminate={
-                  studies().selectedRefIds().size > 0 &&
-                  studies().selectedRefIds().size < studies().importedRefs().length
+              <CheckboxRoot
+                checked={
+                  (
+                    studies().selectedRefIds().size > 0 &&
+                    studies().selectedRefIds().size < studies().importedRefs().length
+                  ) ?
+                    'indeterminate'
+                  : studies().selectedRefIds().size === studies().importedRefs().length
                 }
-                onChange={studies().toggleSelectAllRefs}
-                label={`Select all (${studies().selectedRefIds().size}/${studies().importedRefs().length})`}
-              />
+                onCheckedChange={studies().toggleSelectAllRefs}
+              >
+                <CheckboxControl />
+                <CheckboxLabel>
+                  Select all ({studies().selectedRefIds().size}/{studies().importedRefs().length})
+                </CheckboxLabel>
+              </CheckboxRoot>
             </div>
 
             <div class='max-h-48 space-y-1 overflow-y-auto pr-1'>
@@ -101,11 +110,13 @@ export default function ReferenceImportSection(props) {
                     }`}
                     onClick={() => studies().toggleRefSelection(ref._id)}
                   >
-                    <Checkbox
+                    <CheckboxRoot
                       checked={studies().selectedRefIds().has(ref._id)}
-                      onChange={() => studies().toggleRefSelection(ref._id)}
+                      onCheckedChange={() => studies().toggleRefSelection(ref._id)}
                       class='mt-0.5'
-                    />
+                    >
+                      <CheckboxControl />
+                    </CheckboxRoot>
                     <div class='min-w-0 flex-1'>
                       <div class='flex items-center gap-2'>
                         <p class='line-clamp-2 flex-1 text-sm font-medium text-gray-900'>
@@ -166,13 +177,19 @@ export default function ReferenceImportSection(props) {
         </p>
 
         <FileUpload
-          accept={MIXED_IMPORT_ACCEPT}
-          multiple={true}
-          onFilesChange={studies().handleRefFileSelect}
-          showFileList={false}
-          helpText='RIS, EndNote, BibTeX, or PDF files'
-          compact
-        />
+          accept={MIXED_IMPORT_ACCEPT.split(',').map(t => t.trim())}
+          maxFiles={Infinity}
+          onFileAccept={details => studies().handleRefFileSelect(details.files)}
+        >
+          <FileUploadDropzone class='min-h-24 p-4'>
+            <FiUploadCloud class='h-6 w-6 text-gray-400' />
+            <p class='mt-2 text-center text-xs text-gray-600'>
+              <span class='font-medium text-blue-600'>Click to upload</span> or drag and drop
+            </p>
+            <p class='mt-1 text-xs text-gray-400'>RIS, EndNote, BibTeX, or PDF files</p>
+          </FileUploadDropzone>
+          <FileUploadHiddenInput />
+        </FileUpload>
 
         <div class='text-xs text-gray-500'>
           <p class='mb-1 font-medium'>Supported formats:</p>
diff --git a/packages/web/src/components/project/all-studies-tab/AssignReviewersModal.jsx b/packages/web/src/components/project/all-studies-tab/AssignReviewersModal.jsx
index 27c66652e..107b083cc 100644
--- a/packages/web/src/components/project/all-studies-tab/AssignReviewersModal.jsx
+++ b/packages/web/src/components/project/all-studies-tab/AssignReviewersModal.jsx
@@ -7,8 +7,19 @@
  */
 
 import { createSignal, createEffect, createMemo, Show } from 'solid-js';
-import { Dialog, Select } from '@corates/ui';
+import { SimpleSelect } from '@/components/ui/select';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import { BiRegularUser } from 'solid-icons/bi';
+import { FiX } from 'solid-icons/fi';
 import projectStore from '@/stores/projectStore.js';
 
 export default function AssignReviewersModal(props) {
@@ -21,7 +32,7 @@ export default function AssignReviewersModal(props) {
   const [reviewer1, setReviewer1] = createSignal('');
   const [reviewer2, setReviewer2] = createSignal('');
   const [saving, setSaving] = createSignal(false);
-  const [selectsReady, setSelectsReady] = createSignal(false);
+  const [selectsReady, setSimpleSelectsReady] = createSignal(false);
 
   const members = () => projectStore.getMembers(props.projectId) || [];
 
@@ -37,7 +48,7 @@ export default function AssignReviewersModal(props) {
     return allStudies.find(s => s.id === studyId) || null;
   });
 
-  // Convert members to Select items format
+  // Convert members to SimpleSelect items format
   const memberItems = createMemo(() => {
     const getMemberName = member =>
       member?.displayName || member?.name || member?.email || 'Unknown';
@@ -67,13 +78,13 @@ export default function AssignReviewersModal(props) {
       setReviewer1(study.reviewer1 || '');
       setReviewer2(study.reviewer2 || '');
 
-      // Small delay to ensure Select components are ready before rendering
-      setSelectsReady(true);
+      // Small delay to ensure SimpleSelect components are ready before rendering
+      setSimpleSelectsReady(true);
     } else if (!isOpen) {
       // Reset when modal closes
       setReviewer1('');
       setReviewer2('');
-      setSelectsReady(false);
+      setSimpleSelectsReady(false);
     }
   });
 
@@ -101,70 +112,83 @@ export default function AssignReviewersModal(props) {
   };
 
   return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange} title='Assign Reviewers' size='md'>
-      <div class='space-y-4'>
-        <p class='text-sm text-gray-600'>
-          Assign two reviewers to this study. Each reviewer will independently complete their
-          assessments.
-        </p>
-
-        {/* Reviewer Assignments */}
-        <div class='space-y-4'>
-          <div class='flex items-center gap-2 text-sm font-medium text-gray-900'>
-            <BiRegularUser class='h-4 w-4' />
-            <span>Reviewer Assignments</span>
-          </div>
-
-          <Show when={selectsReady()} fallback={<div class='grid h-20 grid-cols-2 gap-4' />}>
-            <div class='grid grid-cols-2 gap-4'>
-              <Select
-                label='Reviewer 1'
-                items={memberItems()}
-                value={reviewer1()}
-                onChange={setReviewer1}
-                placeholder='Unassigned'
-                disabledValues={reviewer1DisabledValues()}
-                inDialog={true}
-              />
-              <Select
-                label='Reviewer 2'
-                items={memberItems()}
-                value={reviewer2()}
-                onChange={setReviewer2}
-                placeholder='Unassigned'
-                disabledValues={reviewer2DisabledValues()}
-                inDialog={true}
-              />
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent class='max-w-md'>
+          <DialogHeader>
+            <DialogTitle>Assign Reviewers</DialogTitle>
+            <DialogCloseTrigger aria-label='Close'>
+              <FiX class='h-5 w-5' />
+            </DialogCloseTrigger>
+          </DialogHeader>
+          <DialogBody>
+            <div class='space-y-4'>
+              <p class='text-sm text-gray-600'>
+                Assign two reviewers to this study. Each reviewer will independently complete their
+                assessments.
+              </p>
+
+              {/* Reviewer Assignments */}
+              <div class='space-y-4'>
+                <div class='flex items-center gap-2 text-sm font-medium text-gray-900'>
+                  <BiRegularUser class='h-4 w-4' />
+                  <span>Reviewer Assignments</span>
+                </div>
+
+                <Show when={selectsReady()} fallback={<div class='grid h-20 grid-cols-2 gap-4' />}>
+                  <div class='grid grid-cols-2 gap-4'>
+                    <SimpleSelect
+                      label='Reviewer 1'
+                      items={memberItems()}
+                      value={reviewer1()}
+                      onChange={setReviewer1}
+                      placeholder='Unassigned'
+                      disabledValues={reviewer1DisabledValues()}
+                      inDialog={true}
+                    />
+                    <SimpleSelect
+                      label='Reviewer 2'
+                      items={memberItems()}
+                      value={reviewer2()}
+                      onChange={setReviewer2}
+                      placeholder='Unassigned'
+                      disabledValues={reviewer2DisabledValues()}
+                      inDialog={true}
+                    />
+                  </div>
+                </Show>
+
+                <Show when={members().length === 0}>
+                  <p class='text-sm text-gray-500'>
+                    No team members available. Add members to the project first.
+                  </p>
+                </Show>
+              </div>
+
+              {/* Actions */}
+              <div class='flex justify-end gap-3 border-t border-gray-200 pt-4'>
+                <button
+                  type='button'
+                  onClick={() => props.onOpenChange(false)}
+                  disabled={saving()}
+                  class='rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
+                >
+                  Cancel
+                </button>
+                <button
+                  type='button'
+                  onClick={handleSave}
+                  disabled={saving()}
+                  class='rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
+                >
+                  {saving() ? 'Saving...' : 'Save'}
+                </button>
+              </div>
             </div>
-          </Show>
-
-          <Show when={members().length === 0}>
-            <p class='text-sm text-gray-500'>
-              No team members available. Add members to the project first.
-            </p>
-          </Show>
-        </div>
-
-        {/* Actions */}
-        <div class='flex justify-end gap-3 border-t border-gray-200 pt-4'>
-          <button
-            type='button'
-            onClick={() => props.onOpenChange(false)}
-            disabled={saving()}
-            class='rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
-          >
-            Cancel
-          </button>
-          <button
-            type='button'
-            onClick={handleSave}
-            disabled={saving()}
-            class='rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
-          >
-            {saving() ? 'Saving...' : 'Save'}
-          </button>
-        </div>
-      </div>
+          </DialogBody>
+        </DialogContent>
+      </DialogPositioner>
     </Dialog>
   );
 }
diff --git a/packages/web/src/components/project/all-studies-tab/EditPdfMetadataModal.jsx b/packages/web/src/components/project/all-studies-tab/EditPdfMetadataModal.jsx
index d7bcefa02..3e4a5f1b1 100644
--- a/packages/web/src/components/project/all-studies-tab/EditPdfMetadataModal.jsx
+++ b/packages/web/src/components/project/all-studies-tab/EditPdfMetadataModal.jsx
@@ -10,7 +10,18 @@
  */
 
 import { createSignal, createEffect } from 'solid-js';
-import { Dialog, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
+import { FiX } from 'solid-icons/fi';
 import { handleError } from '@/lib/error-utils.js';
 
 export default function EditPdfMetadataModal(props) {
@@ -85,108 +96,123 @@ export default function EditPdfMetadataModal(props) {
   };
 
   return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange} title='Edit PDF Metadata' size='lg'>
-      <div class='space-y-4'>
-        {/* File info header */}
-        <div class='rounded-lg border border-gray-200 bg-gray-50 p-3'>
-          <div class='truncate text-sm font-medium text-gray-700'>{props.pdf?.fileName}</div>
-          <div class='mt-1 text-xs text-gray-500'>
-            <span
-              class={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${
-                props.pdf?.tag === 'primary' ? 'bg-blue-100 text-blue-800'
-                : props.pdf?.tag === 'protocol' ? 'bg-purple-100 text-purple-800'
-                : 'bg-gray-100 text-gray-700'
-              }`}
-            >
-              {tagLabel()}
-            </span>
-          </div>
-        </div>
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent class='max-w-lg'>
+          <DialogHeader>
+            <DialogTitle>Edit PDF Metadata</DialogTitle>
+            <DialogCloseTrigger>
+              <FiX class='h-5 w-5' />
+            </DialogCloseTrigger>
+          </DialogHeader>
+          <DialogBody>
+            <div class='space-y-4'>
+              {/* File info header */}
+              <div class='rounded-lg border border-gray-200 bg-gray-50 p-3'>
+                <div class='truncate text-sm font-medium text-gray-700'>{props.pdf?.fileName}</div>
+                <div class='mt-1 text-xs text-gray-500'>
+                  <span
+                    class={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${
+                      props.pdf?.tag === 'primary' ? 'bg-blue-100 text-blue-800'
+                      : props.pdf?.tag === 'protocol' ? 'bg-purple-100 text-purple-800'
+                      : 'bg-gray-100 text-gray-700'
+                    }`}
+                  >
+                    {tagLabel()}
+                  </span>
+                </div>
+              </div>
 
-        {/* Article Title */}
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Article Title</label>
-          <textarea
-            value={title()}
-            onInput={e => setTitle(e.target.value)}
-            class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
-            placeholder='Full article title'
-            rows={2}
-          />
-        </div>
+              {/* Article Title */}
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>Article Title</label>
+                <textarea
+                  value={title()}
+                  onInput={e => setTitle(e.target.value)}
+                  class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
+                  placeholder='Full article title'
+                  rows={2}
+                />
+              </div>
 
-        {/* Author and Year */}
-        <div class='grid grid-cols-2 gap-4'>
-          <div>
-            <label class='mb-1 block text-sm font-medium text-gray-700'>First Author</label>
-            <input
-              type='text'
-              value={firstAuthor()}
-              onInput={e => setFirstAuthor(e.target.value)}
-              class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
-              placeholder='e.g., Smith'
-            />
-          </div>
-          <div>
-            <label class='mb-1 block text-sm font-medium text-gray-700'>Publication Year</label>
-            <input
-              type='number'
-              value={publicationYear()}
-              onInput={e => setPublicationYear(e.target.value)}
-              class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
-              placeholder='e.g., 2024'
-              min='1900'
-              max='2100'
-              step='1'
-              inputMode='numeric'
-            />
-          </div>
-        </div>
+              {/* Author and Year */}
+              <div class='grid grid-cols-2 gap-4'>
+                <div>
+                  <label class='mb-1 block text-sm font-medium text-gray-700'>First Author</label>
+                  <input
+                    type='text'
+                    value={firstAuthor()}
+                    onInput={e => setFirstAuthor(e.target.value)}
+                    class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
+                    placeholder='e.g., Smith'
+                  />
+                </div>
+                <div>
+                  <label class='mb-1 block text-sm font-medium text-gray-700'>
+                    Publication Year
+                  </label>
+                  <input
+                    type='number'
+                    value={publicationYear()}
+                    onInput={e => setPublicationYear(e.target.value)}
+                    class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
+                    placeholder='e.g., 2024'
+                    min='1900'
+                    max='2100'
+                    step='1'
+                    inputMode='numeric'
+                  />
+                </div>
+              </div>
 
-        {/* Journal */}
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>Journal</label>
-          <input
-            type='text'
-            value={journal()}
-            onInput={e => setJournal(e.target.value)}
-            class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
-            placeholder='e.g., Journal of Clinical Research'
-          />
-        </div>
+              {/* Journal */}
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>Journal</label>
+                <input
+                  type='text'
+                  value={journal()}
+                  onInput={e => setJournal(e.target.value)}
+                  class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
+                  placeholder='e.g., Journal of Clinical Research'
+                />
+              </div>
 
-        {/* DOI */}
-        <div>
-          <label class='mb-1 block text-sm font-medium text-gray-700'>DOI</label>
-          <input
-            type='text'
-            value={doi()}
-            onInput={e => setDoi(e.target.value)}
-            class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
-            placeholder='e.g., 10.1000/xyz123'
-          />
-        </div>
+              {/* DOI */}
+              <div>
+                <label class='mb-1 block text-sm font-medium text-gray-700'>DOI</label>
+                <input
+                  type='text'
+                  value={doi()}
+                  onInput={e => setDoi(e.target.value)}
+                  class='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500'
+                  placeholder='e.g., 10.1000/xyz123'
+                />
+              </div>
 
-        {/* Actions */}
-        <div class='flex justify-end gap-3 border-t border-gray-200 pt-4'>
-          <button
-            type='button'
-            onClick={() => props.onOpenChange(false)}
-            disabled={saving()}
-            class='rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
-          >
-            Cancel
-          </button>
-          <button
-            type='button'
-            onClick={handleSave}
-            disabled={saving()}
-            class='rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
-          >
-            {saving() ? 'Saving...' : 'Save Changes'}
-          </button>
-        </div>
-      </div>
+              {/* Actions */}
+              <div class='flex justify-end gap-3 border-t border-gray-200 pt-4'>
+                <button
+                  type='button'
+                  onClick={() => props.onOpenChange(false)}
+                  disabled={saving()}
+                  class='rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
+                >
+                  Cancel
+                </button>
+                <button
+                  type='button'
+                  onClick={handleSave}
+                  disabled={saving()}
+                  class='rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50'
+                >
+                  {saving() ? 'Saving...' : 'Save Changes'}
+                </button>
+              </div>
+            </div>
+          </DialogBody>
+        </DialogContent>
+      </DialogPositioner>
     </Dialog>
   );
 }
diff --git a/packages/web/src/components/project/all-studies-tab/study-card/StudyCard.jsx b/packages/web/src/components/project/all-studies-tab/study-card/StudyCard.jsx
index 5fbe23057..2304a4207 100644
--- a/packages/web/src/components/project/all-studies-tab/study-card/StudyCard.jsx
+++ b/packages/web/src/components/project/all-studies-tab/study-card/StudyCard.jsx
@@ -9,7 +9,7 @@
  * Only needs study data and minimal control props.
  */
 
-import { Collapsible } from '@corates/ui';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import StudyCardHeader from './StudyCardHeader.jsx';
 import StudyPdfSection from './StudyPdfSection.jsx';
 
@@ -24,31 +24,23 @@ export default function StudyCard(props) {
 
   return (
     <div class='rounded-lg border border-gray-200 bg-white shadow-sm transition-colors hover:border-gray-300'>
-      <Collapsible
-        open={props.expanded}
-        onOpenChange={({ open }) => {
-          // Only toggle if the state is actually different
-          if (open !== props.expanded) {
-            props.onToggleExpanded?.();
-          }
-        }}
-        trigger={() => (
-          <StudyCardHeader
-            study={props.study}
-            expanded={props.expanded}
-            onToggle={() => props.onToggleExpanded?.()}
-            onAssignReviewers={() => props.onAssignReviewers?.(props.study)}
-            getAssigneeName={props.getAssigneeName}
-          />
-        )}
-      >
-        <div class='border-t border-gray-100'>
-          <StudyPdfSection
-            study={props.study}
-            onOpenGoogleDrive={props.onOpenGoogleDrive}
-            readOnly={props.readOnly}
-          />
-        </div>
+      <Collapsible open={props.expanded}>
+        <StudyCardHeader
+          study={props.study}
+          expanded={props.expanded}
+          onToggle={() => props.onToggleExpanded?.()}
+          onAssignReviewers={() => props.onAssignReviewers?.(props.study)}
+          getAssigneeName={props.getAssigneeName}
+        />
+        <CollapsibleContent>
+          <div class='border-t border-gray-100'>
+            <StudyPdfSection
+              study={props.study}
+              onOpenGoogleDrive={props.onOpenGoogleDrive}
+              readOnly={props.readOnly}
+            />
+          </div>
+        </CollapsibleContent>
       </Collapsible>
     </div>
   );
diff --git a/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx b/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx
index 1b6bd5116..c4cb2e386 100644
--- a/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx
+++ b/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx
@@ -15,7 +15,15 @@
 import { Show, For } from 'solid-js';
 import { BiRegularChevronRight } from 'solid-icons/bi';
 import { FiUsers, FiTrash2, FiMoreVertical } from 'solid-icons/fi';
-import { Menu, Editable } from '@corates/ui';
+import { SimpleEditable } from '@/components/ui/editable';
+import {
+  Menu,
+  MenuTrigger,
+  MenuPositioner,
+  MenuContent,
+  MenuItem,
+  MenuSeparator,
+} from '@/components/ui/menu';
 import projectActionsStore from '@/stores/projectActionsStore';
 
 export default function StudyCardHeader(props) {
@@ -72,21 +80,6 @@ export default function StudyCardHeader(props) {
     return parts.join(' ');
   };
 
-  const menuItems = [
-    {
-      value: 'assign-reviewers',
-      label: 'Assign Reviewers',
-      icon: <FiUsers class='h-4 w-4' />,
-    },
-    { separator: true },
-    {
-      value: 'delete',
-      label: 'Delete Study',
-      icon: <FiTrash2 class='h-4 w-4' />,
-      destructive: true,
-    },
-  ];
-
   const handleMenuSelect = details => {
     switch (details.value) {
       case 'assign-reviewers':
@@ -124,7 +117,7 @@ export default function StudyCardHeader(props) {
 
       {/* Study info - editable name */}
       <div class='min-w-0 flex-1'>
-        <Editable
+        <SimpleEditable
           activationMode='click'
           value={studyName()}
           onSubmit={handleNameChange}
@@ -153,14 +146,25 @@ export default function StudyCardHeader(props) {
         <span class='shrink-0 text-xs text-gray-400 italic'>No reviewers</span>
       </Show>
 
-      {/* Actions menu - using Menu component with custom trigger (no indicator) */}
-      <Menu
-        trigger={<FiMoreVertical class='h-4 w-4' />}
-        items={menuItems}
-        onSelect={handleMenuSelect}
-        placement='bottom-end'
-        hideIndicator
-      />
+      {/* Actions menu */}
+      <Menu onSelect={handleMenuSelect} positioning={{ placement: 'bottom-end' }}>
+        <MenuTrigger class='rounded-md p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600'>
+          <FiMoreVertical class='h-4 w-4' />
+        </MenuTrigger>
+        <MenuPositioner>
+          <MenuContent>
+            <MenuItem value='assign-reviewers'>
+              <FiUsers class='h-4 w-4' />
+              Assign Reviewers
+            </MenuItem>
+            <MenuSeparator />
+            <MenuItem value='delete' destructive>
+              <FiTrash2 class='h-4 w-4' />
+              Delete Study
+            </MenuItem>
+          </MenuContent>
+        </MenuPositioner>
+      </Menu>
     </div>
   );
 }
diff --git a/packages/web/src/components/project/all-studies-tab/study-card/StudyPdfSection.jsx b/packages/web/src/components/project/all-studies-tab/study-card/StudyPdfSection.jsx
index 22be46f74..4bae61195 100644
--- a/packages/web/src/components/project/all-studies-tab/study-card/StudyPdfSection.jsx
+++ b/packages/web/src/components/project/all-studies-tab/study-card/StudyPdfSection.jsx
@@ -7,7 +7,7 @@
 
 import { createSignal, createMemo, Show, For } from 'solid-js';
 import { FaBrandsGoogleDrive, FaSolidPlus } from 'solid-icons/fa';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import { PdfListItem } from '@pdf';
 import EditPdfMetadataModal from '@/components/project/all-studies-tab/EditPdfMetadataModal.jsx';
 import projectActionsStore from '@/stores/projectActionsStore';
diff --git a/packages/web/src/components/project/completed-tab/CompletedStudyRow.jsx b/packages/web/src/components/project/completed-tab/CompletedStudyRow.jsx
index ce78eaa3f..bc4b689ad 100644
--- a/packages/web/src/components/project/completed-tab/CompletedStudyRow.jsx
+++ b/packages/web/src/components/project/completed-tab/CompletedStudyRow.jsx
@@ -7,7 +7,7 @@
 
 import { For, Show, createMemo, createSignal } from 'solid-js';
 import { BiRegularChevronRight } from 'solid-icons/bi';
-import { Collapsible } from '@corates/ui';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { getChecklistMetadata } from '@/checklist-registry';
 import { PdfListItem } from '@pdf';
 import { getCompletedChecklists } from '@/lib/checklist-domain.js';
@@ -63,115 +63,117 @@ export default function CompletedStudyRow(props) {
     );
   };
 
+  // Handle row click - toggle unless clicking on interactive elements or selectable text
+  const handleRowClick = e => {
+    if (!hasPdfs()) return;
+    const target = e.target;
+    const interactive = target.closest('button, [role="button"], [data-selectable]');
+    if (interactive) return;
+    setExpanded(!expanded());
+  };
+
   return (
     <>
       <div class='overflow-hidden rounded-lg border border-gray-200 bg-white transition-colors hover:border-gray-300'>
-        <Collapsible
-          open={expanded()}
-          onOpenChange={({ open }) => {
-            // Only toggle if there are PDFs to show
-            if (hasPdfs()) {
-              setExpanded(open);
-            }
-          }}
-          trigger={
-            <div
-              class={`flex items-center gap-3 px-4 py-3 select-none ${hasPdfs() ? 'cursor-pointer' : ''}`}
-            >
-              {/* Chevron indicator (only if has PDFs) */}
-              <Show when={hasPdfs()}>
-                <div class='-ml-1 shrink-0 p-1'>
-                  <BiRegularChevronRight
-                    class={`h-5 w-5 text-gray-400 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
-                  />
-                </div>
-              </Show>
-
-              {/* Study info */}
-              <div class='min-w-0 flex-1'>
-                <div class='flex items-center gap-2'>
-                  <span class='truncate font-medium text-gray-900'>{study().name}</span>
-                </div>
-                {/* Citation line - selectable */}
-                <Show when={citationLine()}>
-                  <p
-                    class='w-fit cursor-text truncate text-xs text-gray-500 select-text'
-                    data-selectable
-                  >
-                    {citationLine()}
-                    <Show when={hasPdfs()}>
-                      <span class='text-gray-400'> · {pdfCount()} PDFs</span>
-                    </Show>
-                  </p>
-                </Show>
-                <Show when={!citationLine() && hasPdfs()}>
-                  <p class='text-xs text-gray-400'>{pdfCount()} PDFs</p>
-                </Show>
+        <Collapsible open={expanded()}>
+          <div
+            class={`flex items-center gap-3 px-4 py-3 select-none ${hasPdfs() ? 'cursor-pointer' : ''}`}
+            onClick={handleRowClick}
+          >
+            {/* Chevron indicator (only if has PDFs) */}
+            <Show when={hasPdfs()}>
+              <div class='-ml-1 shrink-0 p-1'>
+                <BiRegularChevronRight
+                  class={`h-5 w-5 text-gray-400 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
+                />
               </div>
+            </Show>
 
-              {/* Checklist type badge - selectable */}
-              <Show when={completedChecklists().length > 0}>
-                <span
-                  class='inline-flex shrink-0 cursor-text items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 select-text'
+            {/* Study info */}
+            <div class='min-w-0 flex-1'>
+              <div class='flex items-center gap-2'>
+                <span class='truncate font-medium text-gray-900'>{study().name}</span>
+              </div>
+              {/* Citation line - selectable */}
+              <Show when={citationLine()}>
+                <p
+                  class='w-fit cursor-text truncate text-xs text-gray-500 select-text'
                   data-selectable
                 >
-                  {getChecklistMetadata(completedChecklists()[0]?.type)?.name || 'Checklist'}
-                </span>
+                  {citationLine()}
+                  <Show when={hasPdfs()}>
+                    <span class='text-gray-400'> · {pdfCount()} PDFs</span>
+                  </Show>
+                </p>
               </Show>
-
-              {/* Checklist status badge */}
-              <Show when={completedChecklists().length > 0}>
-                <span
-                  class={`inline-flex shrink-0 cursor-text items-center rounded-full px-2.5 py-1 text-xs font-medium select-text ${getStatusStyle(completedChecklists()[0]?.status)}`}
-                  data-selectable
-                >
-                  {getStatusLabel(completedChecklists()[0]?.status)}
-                </span>
+              <Show when={!citationLine() && hasPdfs()}>
+                <p class='text-xs text-gray-400'>{pdfCount()} PDFs</p>
               </Show>
-
-              {/* View Previous Reviewers button (only for dual-reviewer studies) */}
-              <Show when={hasPreviousReviewers()}>
-                <button
-                  onClick={e => {
-                    e.stopPropagation();
-                    setShowPreviousReviewers(true);
-                  }}
-                  class='shrink-0 rounded-lg bg-gray-100 px-4 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
-                >
-                  View Previous
-                </button>
-              </Show>
-
-              {/* Open checklist button */}
-              <Show when={completedChecklists().length > 0}>
-                <button
-                  onClick={e => {
-                    e.stopPropagation();
-                    props.onOpenChecklist?.(completedChecklists()[0].id);
-                  }}
-                  class='shrink-0 rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                >
-                  Open
-                </button>
-              </Show>
-            </div>
-          }
-        >
-          {/* Expanded PDF Section */}
-          <Show when={hasPdfs()}>
-            <div class='space-y-2 border-t border-gray-100 px-4 py-3'>
-              <For each={sortedPdfs()}>
-                {pdf => (
-                  <PdfListItem
-                    pdf={pdf}
-                    onView={() => props.onViewPdf?.(pdf)}
-                    onDownload={() => props.onDownloadPdf?.(pdf)}
-                    readOnly={true}
-                  />
-                )}
-              </For>
             </div>
-          </Show>
+
+            {/* Checklist type badge - selectable */}
+            <Show when={completedChecklists().length > 0}>
+              <span
+                class='inline-flex shrink-0 cursor-text items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 select-text'
+                data-selectable
+              >
+                {getChecklistMetadata(completedChecklists()[0]?.type)?.name || 'Checklist'}
+              </span>
+            </Show>
+
+            {/* Checklist status badge */}
+            <Show when={completedChecklists().length > 0}>
+              <span
+                class={`inline-flex shrink-0 cursor-text items-center rounded-full px-2.5 py-1 text-xs font-medium select-text ${getStatusStyle(completedChecklists()[0]?.status)}`}
+                data-selectable
+              >
+                {getStatusLabel(completedChecklists()[0]?.status)}
+              </span>
+            </Show>
+
+            {/* View Previous Reviewers button (only for dual-reviewer studies) */}
+            <Show when={hasPreviousReviewers()}>
+              <button
+                onClick={e => {
+                  e.stopPropagation();
+                  setShowPreviousReviewers(true);
+                }}
+                class='shrink-0 rounded-lg bg-gray-100 px-4 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
+              >
+                View Previous
+              </button>
+            </Show>
+
+            {/* Open checklist button */}
+            <Show when={completedChecklists().length > 0}>
+              <button
+                onClick={e => {
+                  e.stopPropagation();
+                  props.onOpenChecklist?.(completedChecklists()[0].id);
+                }}
+                class='shrink-0 rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+              >
+                Open
+              </button>
+            </Show>
+          </div>
+          <CollapsibleContent>
+            {/* Expanded PDF Section */}
+            <Show when={hasPdfs()}>
+              <div class='space-y-2 border-t border-gray-100 px-4 py-3'>
+                <For each={sortedPdfs()}>
+                  {pdf => (
+                    <PdfListItem
+                      pdf={pdf}
+                      onView={() => props.onViewPdf?.(pdf)}
+                      onDownload={() => props.onDownloadPdf?.(pdf)}
+                      readOnly={true}
+                    />
+                  )}
+                </For>
+              </div>
+            </Show>
+          </CollapsibleContent>
         </Collapsible>
       </div>
 
diff --git a/packages/web/src/components/project/completed-tab/PreviousReviewersView.jsx b/packages/web/src/components/project/completed-tab/PreviousReviewersView.jsx
index 43e1f4c9b..3542022c5 100644
--- a/packages/web/src/components/project/completed-tab/PreviousReviewersView.jsx
+++ b/packages/web/src/components/project/completed-tab/PreviousReviewersView.jsx
@@ -5,8 +5,20 @@
  * Displays checklists in readonly mode with tabs to switch between reviewers.
  */
 
-import { Show, createMemo, createSignal, createEffect } from 'solid-js';
-import { Dialog, Tabs } from '@corates/ui';
+import { Show, For, createMemo, createSignal, createEffect } from 'solid-js';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
+import { FiX } from 'solid-icons/fi';
 import { useProjectContext } from '@/components/project/ProjectContext.jsx';
 import useProject from '@/primitives/useProject/index.js';
 import { getOriginalReviewerChecklists } from '@/lib/checklist-domain.js';
@@ -145,56 +157,88 @@ export default function PreviousReviewersView(props) {
           props.onClose();
         }
       }}
-      title='Original Reviewer Appraisals'
-      description='The original appraisals from each reviewer that were reconciled to create the final version.'
-      size='2xl'
     >
-      <div class='flex flex-col' style={{ 'min-height': '600px', 'max-height': '80vh' }}>
-        <Show
-          when={hasData()}
-          fallback={
-            <div class='flex flex-1 items-center justify-center py-16'>
-              <div class='text-center text-gray-500'>
-                {loading() ? 'Loading appraisals...' : 'No previous reviewer appraisals found.'}
-              </div>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent class='max-w-4xl'>
+          <DialogHeader>
+            <div>
+              <DialogTitle>Original Reviewer Appraisals</DialogTitle>
+              <DialogDescription>
+                The original appraisals from each reviewer that were reconciled to create the final
+                version.
+              </DialogDescription>
             </div>
-          }
-        >
-          <Show when={reviewerTabs().length > 1}>
-            <div class='mb-4'>
-              <Tabs tabs={reviewerTabs()} value={activeTab()} onValueChange={setActiveTab} />
-            </div>
-          </Show>
-
-          <div class='flex-1 overflow-y-auto rounded-lg border border-gray-200 bg-white p-6'>
-            <Show when={currentChecklistData()}>
-              <div class='mb-4 border-b border-gray-200 pb-3'>
-                <div class='flex items-center justify-between'>
-                  <h3 class='text-base font-semibold text-gray-900'>
-                    {currentChecklistData()?.reviewerName || 'Reviewer'}
-                  </h3>
-                  <span class='text-sm text-gray-500'>
-                    {currentChecklistType() ?
-                      getChecklistMetadata(currentChecklistType())?.name || currentChecklistType()
-                    : ''}
-                  </span>
+            <DialogCloseTrigger>
+              <FiX class='h-5 w-5' />
+            </DialogCloseTrigger>
+          </DialogHeader>
+          <DialogBody>
+            <div class='flex flex-col' style={{ 'min-height': '600px', 'max-height': '70vh' }}>
+              <Show
+                when={hasData()}
+                fallback={
+                  <div class='flex flex-1 items-center justify-center py-16'>
+                    <div class='text-center text-gray-500'>
+                      {loading() ?
+                        'Loading appraisals...'
+                      : 'No previous reviewer appraisals found.'}
+                    </div>
+                  </div>
+                }
+              >
+                <Show when={reviewerTabs().length > 1}>
+                  <div class='mb-4'>
+                    <Tabs value={activeTab()} onValueChange={setActiveTab}>
+                      <TabsList class='overflow-x-auto rounded-t-lg border border-gray-200 bg-white'>
+                        <For each={reviewerTabs()}>
+                          {tab => (
+                            <TabsTrigger
+                              value={tab.value}
+                              class='gap-2 border-b-2 border-transparent text-gray-600 hover:bg-gray-50 hover:text-gray-900 data-[selected]:border-blue-600 data-[selected]:text-gray-900'
+                            >
+                              {tab.label}
+                            </TabsTrigger>
+                          )}
+                        </For>
+                      </TabsList>
+                    </Tabs>
+                  </div>
+                </Show>
+
+                <div class='flex-1 overflow-y-auto rounded-lg border border-gray-200 bg-white p-6'>
+                  <Show when={currentChecklistData()}>
+                    <div class='mb-4 border-b border-gray-200 pb-3'>
+                      <div class='flex items-center justify-between'>
+                        <h3 class='text-base font-semibold text-gray-900'>
+                          {currentChecklistData()?.reviewerName || 'Reviewer'}
+                        </h3>
+                        <span class='text-sm text-gray-500'>
+                          {currentChecklistType() ?
+                            getChecklistMetadata(currentChecklistType())?.name ||
+                            currentChecklistType()
+                          : ''}
+                        </span>
+                      </div>
+                    </div>
+                    <GenericChecklist
+                      checklist={currentChecklistData()}
+                      checklistType={currentChecklistType()}
+                      readOnly={true}
+                      onUpdate={() => {}}
+                      getQuestionNote={questionKey => {
+                        const checklistId = currentChecklistId();
+                        if (!checklistId) return null;
+                        return getQuestionNote(props.study.id, checklistId, questionKey);
+                      }}
+                    />
+                  </Show>
                 </div>
-              </div>
-              <GenericChecklist
-                checklist={currentChecklistData()}
-                checklistType={currentChecklistType()}
-                readOnly={true}
-                onUpdate={() => {}}
-                getQuestionNote={questionKey => {
-                  const checklistId = currentChecklistId();
-                  if (!checklistId) return null;
-                  return getQuestionNote(props.study.id, checklistId, questionKey);
-                }}
-              />
-            </Show>
-          </div>
-        </Show>
-      </div>
+              </Show>
+            </div>
+          </DialogBody>
+        </DialogContent>
+      </DialogPositioner>
     </Dialog>
   );
 }
diff --git a/packages/web/src/components/project/google-drive/GoogleDrivePickerModal.jsx b/packages/web/src/components/project/google-drive/GoogleDrivePickerModal.jsx
index 2ab22df18..a1e4c4361 100644
--- a/packages/web/src/components/project/google-drive/GoogleDrivePickerModal.jsx
+++ b/packages/web/src/components/project/google-drive/GoogleDrivePickerModal.jsx
@@ -3,7 +3,19 @@
  */
 
 import { createSignal } from 'solid-js';
-import { Dialog, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
+import { FiX } from 'solid-icons/fi';
 
 import { importFromGoogleDrive } from '@/api/google-drive.js';
 import GoogleDrivePickerLauncher from './GoogleDrivePickerLauncher.jsx';
@@ -45,35 +57,45 @@ export default function GoogleDrivePickerModal(props) {
   };
 
   return (
-    <Dialog
-      open={props.open}
-      onOpenChange={open => !open && props.onClose()}
-      title='Import from Google Drive'
-      description='Select a PDF from your Google Drive to import'
-      size='lg'
-    >
-      <div class='space-y-4'>
-        <GoogleDrivePickerLauncher
-          active={props.open}
-          multiselect={false}
-          disabled={!props.projectId || !props.studyId}
-          busy={importing()}
-          onBeforeOpenPicker={() => props.onClose()}
-          onPick={handlePicked}
-          studyId={props.studyId}
-        />
+    <Dialog open={props.open} onOpenChange={open => !open && props.onClose()}>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent class='max-w-lg'>
+          <DialogHeader>
+            <DialogTitle>Import from Google Drive</DialogTitle>
+            <DialogCloseTrigger>
+              <FiX class='h-5 w-5' />
+            </DialogCloseTrigger>
+          </DialogHeader>
+          <DialogBody>
+            <DialogDescription class='mb-4'>
+              Select a PDF from your Google Drive to import
+            </DialogDescription>
+            <div class='space-y-4'>
+              <GoogleDrivePickerLauncher
+                active={props.open}
+                multiselect={false}
+                disabled={!props.projectId || !props.studyId}
+                busy={importing()}
+                onBeforeOpenPicker={() => props.onClose()}
+                onPick={handlePicked}
+                studyId={props.studyId}
+              />
 
-        {/* Action buttons */}
-        <div class='flex justify-end'>
-          <button
-            type='button'
-            onClick={() => props.onClose()}
-            class='rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50'
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
+              {/* Action buttons */}
+              <div class='flex justify-end'>
+                <button
+                  type='button'
+                  onClick={() => props.onClose()}
+                  class='rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50'
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </DialogBody>
+        </DialogContent>
+      </DialogPositioner>
     </Dialog>
   );
 }
diff --git a/packages/web/src/components/project/overview-tab/AddMemberModal.jsx b/packages/web/src/components/project/overview-tab/AddMemberModal.jsx
index fdde420d9..c739df114 100644
--- a/packages/web/src/components/project/overview-tab/AddMemberModal.jsx
+++ b/packages/web/src/components/project/overview-tab/AddMemberModal.jsx
@@ -2,7 +2,9 @@ import { createSignal, For, Show, createEffect, onCleanup } from 'solid-js';
 import { debounce } from '@solid-primitives/scheduled';
 import { A } from '@solidjs/router';
 import { FiX, FiAlertTriangle } from 'solid-icons/fi';
-import { Select, Avatar, showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import { SimpleSelect } from '@/components/ui/select';
+import { Avatar, AvatarImage, AvatarFallback, getInitials } from '@/components/ui/avatar';
 import { apiFetch } from '@lib/apiFetch.js';
 import { isUnlimitedQuota } from '@corates/shared/plans';
 
@@ -20,8 +22,8 @@ export default function AddMemberModal(props) {
   const [searchQuery, setSearchQuery] = createSignal('');
   const [searchResults, setSearchResults] = createSignal([]);
   const [searching, setSearching] = createSignal(false);
-  const [selectedUser, setSelectedUser] = createSignal(null);
-  const [selectedRole, setSelectedRole] = createSignal('member');
+  const [selectedUser, setSimpleSelectedUser] = createSignal(null);
+  const [selectedRole, setSimpleSelectedRole] = createSignal('member');
   const [adding, setAdding] = createSignal(false);
   const [error, setError] = createSignal(null);
 
@@ -79,8 +81,8 @@ export default function AddMemberModal(props) {
     debouncedSearchUsers(value);
   };
 
-  const handleSelectUser = user => {
-    setSelectedUser(user);
+  const handleSimpleSelectUser = user => {
+    setSimpleSelectedUser(user);
     setSearchQuery(user.displayName || user.name || user.email);
     setSearchResults([]);
   };
@@ -141,8 +143,8 @@ export default function AddMemberModal(props) {
   const handleClose = () => {
     setSearchQuery('');
     setSearchResults([]);
-    setSelectedUser(null);
-    setSelectedRole('member');
+    setSimpleSelectedUser(null);
+    setSimpleSelectedRole('member');
     setError(null);
     props.onClose();
   };
@@ -217,15 +219,18 @@ export default function AddMemberModal(props) {
                     {user => (
                       <button
                         type='button'
-                        onClick={() => handleSelectUser(user)}
+                        onClick={() => handleSimpleSelectUser(user)}
                         class='flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-blue-50'
                       >
-                        <Avatar
-                          src={user.image}
-                          name={user.displayName || user.name || user.email}
-                          class='h-8 w-8 shrink-0 rounded-full'
-                          fallbackClass='flex items-center justify-center w-full h-full bg-blue-600 text-white text-sm font-medium'
-                        />
+                        <Avatar class='h-8 w-8 shrink-0'>
+                          <AvatarImage
+                            src={user.image}
+                            alt={user.displayName || user.name || user.email}
+                          />
+                          <AvatarFallback class='bg-blue-600 text-sm text-white'>
+                            {getInitials(user.displayName || user.name || user.email)}
+                          </AvatarFallback>
+                        </Avatar>
                         <div class='min-w-0'>
                           <p class='truncate font-medium text-gray-900'>
                             {user.displayName || user.name || 'Unknown'}
@@ -269,16 +274,23 @@ export default function AddMemberModal(props) {
               </div>
             </Show>
 
-            {/* Selected User Display */}
+            {/* SimpleSelected User Display */}
             <Show when={selectedUser()}>
               <div class='flex items-center justify-between rounded-lg border border-blue-200 bg-blue-50 p-3'>
                 <div class='flex items-center gap-3'>
-                  <Avatar
-                    src={selectedUser().image}
-                    name={selectedUser().displayName || selectedUser().name || selectedUser().email}
-                    class='h-10 w-10 rounded-full'
-                    fallbackClass='flex items-center justify-center w-full h-full bg-blue-600 text-white font-medium'
-                  />
+                  <Avatar class='h-10 w-10'>
+                    <AvatarImage
+                      src={selectedUser().image}
+                      alt={
+                        selectedUser().displayName || selectedUser().name || selectedUser().email
+                      }
+                    />
+                    <AvatarFallback class='bg-blue-600 text-white'>
+                      {getInitials(
+                        selectedUser().displayName || selectedUser().name || selectedUser().email,
+                      )}
+                    </AvatarFallback>
+                  </Avatar>
                   <div>
                     <p class='font-medium text-gray-900'>
                       {selectedUser().displayName || selectedUser().name || 'Unknown'}
@@ -288,7 +300,7 @@ export default function AddMemberModal(props) {
                 </div>
                 <button
                   onClick={() => {
-                    setSelectedUser(null);
+                    setSimpleSelectedUser(null);
                     setSearchQuery('');
                   }}
                   class='text-gray-400 hover:text-gray-600'
@@ -298,17 +310,17 @@ export default function AddMemberModal(props) {
               </div>
             </Show>
 
-            {/* Role Selection */}
+            {/* Role SimpleSelection */}
             <Show when={selectedUser() || canAddByEmail()}>
-              <Select
+              <SimpleSelect
                 label='Role'
                 items={[
                   { label: 'Member - Can edit project content', value: 'member' },
                   { label: 'Owner - Full access and member management', value: 'owner' },
                 ]}
                 value={selectedRole()}
-                onChange={setSelectedRole}
-                placeholder='Select a role'
+                onChange={setSimpleSelectedRole}
+                placeholder='SimpleSelect a role'
                 inDialog={true}
               />
             </Show>
diff --git a/packages/web/src/components/project/overview-tab/OverviewTab.jsx b/packages/web/src/components/project/overview-tab/OverviewTab.jsx
index c20406c13..05b83d0e2 100644
--- a/packages/web/src/components/project/overview-tab/OverviewTab.jsx
+++ b/packages/web/src/components/project/overview-tab/OverviewTab.jsx
@@ -1,6 +1,6 @@
 import { For, Show, createSignal, createMemo } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
-import { FiPlus, FiTrash2 } from 'solid-icons/fi';
+import { FiPlus, FiTrash2, FiChevronDown } from 'solid-icons/fi';
 import { AiOutlineBook } from 'solid-icons/ai';
 import { BiRegularCheckCircle } from 'solid-icons/bi';
 import { CgArrowsExchange } from 'solid-icons/cg';
@@ -12,7 +12,34 @@ import projectStore from '@/stores/projectStore.js';
 import projectActionsStore from '@/stores/projectActionsStore';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { useProjectContext } from '../ProjectContext.jsx';
-import { Avatar, useConfirmDialog, showToast, Progress, Collapsible } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  Progress,
+  ProgressTrack,
+  ProgressRange,
+  ProgressLabel,
+  ProgressValueText,
+} from '@/components/ui/progress';
+import { Avatar, AvatarImage, AvatarFallback, getInitials } from '@/components/ui/avatar';
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleIndicator,
+} from '@/components/ui/collapsible';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 import { API_BASE } from '@config/api.js';
 import { CHECKLIST_STATUS } from '@/constants/checklist-status.js';
 import { shouldShowInTab, isReconciledChecklist } from '@/lib/checklist-domain.js';
@@ -35,9 +62,12 @@ export default function OverviewTab() {
 
   const { user } = useBetterAuth();
   const { projectId, orgId, isOwner } = useProjectContext();
-  const confirmDialog = useConfirmDialog();
   const navigate = useNavigate();
 
+  // Remove member confirmation dialog state
+  const [removeDialogOpen, setRemoveDialogOpen] = createSignal(false);
+  const [pendingRemoveMember, setPendingRemoveMember] = createSignal(null);
+
   // Subscription/quota checks for member addition
   const { hasQuota, quotas } = useSubscription();
   const { memberCount: orgMemberCount } = useMembers();
@@ -140,29 +170,31 @@ export default function OverviewTab() {
     projectActionsStore.study.update(studyId, updates);
   };
 
-  const handleRemoveMember = async (memberId, memberName) => {
+  // Opens remove member confirmation dialog
+  const handleRemoveMember = (memberId, memberName) => {
     const currentUser = user();
     const isSelf = currentUser?.id === memberId;
+    setPendingRemoveMember({ memberId, memberName, isSelf });
+    setRemoveDialogOpen(true);
+  };
 
-    const confirmed = await confirmDialog.open({
-      title: isSelf ? 'Leave Project' : 'Remove Member',
-      description:
-        isSelf ?
-          'Are you sure you want to leave this project? You will need to be re-invited to rejoin.'
-        : `Are you sure you want to remove ${memberName} from this project?`,
-      confirmText: isSelf ? 'Leave Project' : 'Remove',
-      variant: 'danger',
-    });
-    if (!confirmed) return;
+  // Executes remove after confirmation
+  const confirmRemoveMember = async () => {
+    const pending = pendingRemoveMember();
+    if (!pending) return;
 
     try {
-      const result = await projectActionsStore.member.remove(memberId);
+      const result = await projectActionsStore.member.remove(pending.memberId);
       if (result.isSelf) {
         navigate('/dashboard', { replace: true });
         showToast.success('Left Project', 'You have left the project');
       } else {
-        showToast.success('Member Removed', `${memberName} has been removed from the project`);
+        showToast.success(
+          'Member Removed',
+          `${pending.memberName} has been removed from the project`,
+        );
       }
+      setRemoveDialogOpen(false);
     } catch (err) {
       const { handleError } = await import('@/lib/error-utils.js');
       await handleError(err, {
@@ -317,18 +349,21 @@ export default function OverviewTab() {
                     <div class='p-4'>
                       <div class='flex items-center justify-between'>
                         <div class='flex items-center gap-3'>
-                          <Avatar
-                            src={
-                              member.image ?
-                                member.image.startsWith('/') ?
-                                  `${API_BASE}${member.image}`
-                                : member.image
-                              : `${API_BASE}/api/users/avatar/${member.userId}`
-                            }
-                            name={member.displayName || member.name || member.email}
-                            class='h-10 w-10 overflow-hidden rounded-full'
-                            fallbackClass='flex items-center justify-center w-full h-full bg-blue-600 text-white font-medium'
-                          />
+                          <Avatar class='h-10 w-10'>
+                            <AvatarImage
+                              src={
+                                member.image ?
+                                  member.image.startsWith('/') ?
+                                    `${API_BASE}${member.image}`
+                                  : member.image
+                                : `${API_BASE}/api/users/avatar/${member.userId}`
+                              }
+                              alt={member.displayName || member.name || member.email}
+                            />
+                            <AvatarFallback class='bg-blue-600 text-white'>
+                              {getInitials(member.displayName || member.name || member.email)}
+                            </AvatarFallback>
+                          </Avatar>
                           <div>
                             <p class='font-medium text-gray-900'>
                               {member.displayName || member.name || 'Unknown'}
@@ -358,18 +393,25 @@ export default function OverviewTab() {
                       </div>
                       <Show when={userProgress().total > 0}>
                         <div class='mt-4'>
-                          <Progress
-                            value={userProgress().percentage}
-                            label={`${userProgress().completed} of ${userProgress().total} studies appraised`}
-                            showValue={true}
-                            size='sm'
-                            variant={
-                              userProgress().percentage === 100 ? 'success'
-                              : userProgress().percentage >= 50 ?
-                                'default'
-                              : 'warning'
-                            }
-                          />
+                          <Progress value={userProgress().percentage}>
+                            <div class='mb-1 flex items-center justify-between'>
+                              <ProgressLabel class='mb-0 text-xs'>
+                                {userProgress().completed} of {userProgress().total} studies
+                                appraised
+                              </ProgressLabel>
+                              <ProgressValueText class='text-xs' />
+                            </div>
+                            <ProgressTrack class='h-1.5'>
+                              <ProgressRange
+                                class={
+                                  userProgress().percentage === 100 ? 'bg-green-500'
+                                  : userProgress().percentage >= 50 ?
+                                    'bg-blue-600'
+                                  : 'bg-amber-500'
+                                }
+                              />
+                            </ProgressTrack>
+                          </Progress>
                         </div>
                       </Show>
                     </div>
@@ -396,40 +438,40 @@ export default function OverviewTab() {
 
         {/* Figures Section - Collapsible */}
         <div class='overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
-          <Collapsible
-            open={chartsExpanded()}
-            onOpenChange={({ open }) => setChartsExpanded(open)}
-            trigger={
-              <div class='flex w-full cursor-pointer items-center justify-between px-6 py-4 transition-colors select-none hover:bg-gray-50'>
-                <h2 class='text-lg font-semibold text-gray-900'>Figures</h2>
-                <div class='text-sm text-gray-500'>
-                  {chartsExpanded() ? 'Click to collapse' : 'Click to expand charts'}
-                </div>
+          <Collapsible open={chartsExpanded()} onOpenChange={setChartsExpanded}>
+            <CollapsibleTrigger class='cursor-pointer px-6 py-4 transition-colors select-none hover:bg-gray-50'>
+              <h2 class='text-lg font-semibold text-gray-900'>Figures</h2>
+              <div class='flex items-center gap-2 text-sm text-gray-500'>
+                {chartsExpanded() ? 'Click to collapse' : 'Click to expand charts'}
+                <CollapsibleIndicator>
+                  <FiChevronDown class='h-5 w-5' />
+                </CollapsibleIndicator>
               </div>
-            }
-          >
-            <div class='border-t border-gray-200 px-6 py-6'>
-              <ChartSection studies={studies} members={members} />
-            </div>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div class='border-t border-gray-200 px-6 py-6'>
+                <ChartSection studies={studies} members={members} />
+              </div>
+            </CollapsibleContent>
           </Collapsible>
         </div>
         {/* Tables Section - Collapsible */}
         <div class='overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
-          <Collapsible
-            open={tablesExpanded()}
-            onOpenChange={({ open }) => setTablesExpanded(open)}
-            trigger={
-              <div class='flex w-full cursor-pointer items-center justify-between px-6 py-4 transition-colors select-none hover:bg-gray-50'>
-                <h2 class='text-lg font-semibold text-gray-900'>Tables</h2>
-                <div class='text-sm text-gray-500'>
-                  {tablesExpanded() ? 'Click to collapse' : 'Click to expand tables'}
-                </div>
+          <Collapsible open={tablesExpanded()} onOpenChange={setTablesExpanded}>
+            <CollapsibleTrigger class='cursor-pointer px-6 py-4 transition-colors select-none hover:bg-gray-50'>
+              <h2 class='text-lg font-semibold text-gray-900'>Tables</h2>
+              <div class='flex items-center gap-2 text-sm text-gray-500'>
+                {tablesExpanded() ? 'Click to collapse' : 'Click to expand tables'}
+                <CollapsibleIndicator>
+                  <FiChevronDown class='h-5 w-5' />
+                </CollapsibleIndicator>
               </div>
-            }
-          >
-            <div class='border-t border-gray-200 px-6 py-6'>
-              <AMSTAR2ResultsTable studies={studies} />
-            </div>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div class='border-t border-gray-200 px-6 py-6'>
+                <AMSTAR2ResultsTable studies={studies} />
+              </div>
+            </CollapsibleContent>
           </Collapsible>
         </div>
       </div>
@@ -440,7 +482,34 @@ export default function OverviewTab() {
         orgId={orgId()}
         quotaInfo={collaboratorQuotaInfo()}
       />
-      <confirmDialog.ConfirmDialogComponent />
+      {/* Remove member confirmation dialog */}
+      <AlertDialog open={removeDialogOpen()} onOpenChange={setRemoveDialogOpen}>
+        <AlertDialogBackdrop />
+        <AlertDialogPositioner>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogIcon variant='danger' />
+              <div>
+                <AlertDialogTitle>
+                  {pendingRemoveMember()?.isSelf ? 'Leave Project' : 'Remove Member'}
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  {pendingRemoveMember()?.isSelf ?
+                    'Are you sure you want to leave this project? You will need to be re-invited to rejoin.'
+                  : `Are you sure you want to remove ${pendingRemoveMember()?.memberName} from this project?`
+                  }
+                </AlertDialogDescription>
+              </div>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction variant='danger' onClick={confirmRemoveMember}>
+                {pendingRemoveMember()?.isSelf ? 'Leave Project' : 'Remove'}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogPositioner>
+      </AlertDialog>
     </>
   );
 }
diff --git a/packages/web/src/components/project/overview-tab/ReviewerAssignment.jsx b/packages/web/src/components/project/overview-tab/ReviewerAssignment.jsx
index f6827ec07..e33a96ba4 100644
--- a/packages/web/src/components/project/overview-tab/ReviewerAssignment.jsx
+++ b/packages/web/src/components/project/overview-tab/ReviewerAssignment.jsx
@@ -5,7 +5,8 @@
 
 import { createSignal, createMemo, For, Show } from 'solid-js';
 import { createStore, produce } from 'solid-js/store';
-import { showToast, Collapsible } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import {
   BiRegularShuffle,
   BiRegularCheck,
@@ -426,166 +427,165 @@ export default function ReviewerAssignment(props) {
 
   return (
     <div class='overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
-      <Collapsible
-        open={isExpanded()}
-        onOpenChange={({ open }) => setIsExpanded(open)}
-        trigger={
-          <div class='flex w-full cursor-pointer items-center gap-3 px-4 py-3 select-none'>
-            {/* Chevron indicator */}
-            <div class='shrink-0'>
-              <BiRegularChevronRight
-                class={`h-5 w-5 text-gray-400 transition-transform duration-200 ${isExpanded() ? 'rotate-90' : ''}`}
-              />
-            </div>
-            <div class='flex items-center gap-2'>
-              <FiUsers class='h-4 w-4 text-blue-600' />
-              <span class='text-sm font-medium text-gray-900'>Assign Reviewers to Studies</span>
-            </div>
+      <Collapsible open={isExpanded()} onOpenChange={setIsExpanded}>
+        <CollapsibleTrigger class='flex w-full cursor-pointer items-center gap-3 px-4 py-3 select-none'>
+          {/* Chevron indicator */}
+          <div class='shrink-0'>
+            <BiRegularChevronRight
+              class={`h-5 w-5 text-gray-400 transition-transform duration-200 ${isExpanded() ? 'rotate-90' : ''}`}
+            />
           </div>
-        }
-      >
-        <div class='border-t border-gray-200 px-4 pb-4'>
-          <Show
-            when={members().length >= 2}
-            fallback={
-              <p class='mt-4 text-sm text-gray-500'>
-                At least 2 project members are required to assign reviewers.
-              </p>
-            }
-          >
+          <div class='flex items-center gap-2'>
+            <FiUsers class='h-4 w-4 text-blue-600' />
+            <span class='text-sm font-medium text-gray-900'>Assign Reviewers to Studies</span>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div class='border-t border-gray-200 px-4 pb-4'>
             <Show
-              when={unassignedStudies().length > 0 || showPreview()}
+              when={members().length >= 2}
               fallback={
-                <div class='mt-4 flex items-center gap-2 text-green-600'>
-                  <BiRegularCheck class='h-5 w-5' />
-                  <p class='text-sm'>All studies have reviewers assigned.</p>
-                </div>
+                <p class='mt-4 text-sm text-gray-500'>
+                  At least 2 project members are required to assign reviewers.
+                </p>
               }
             >
-              <div class='space-y-4'>
-                <p class='mt-4 text-sm text-gray-600'>
-                  Add reviewers to each pool and set their percentage. Studies will be randomly
-                  assigned one reviewer from each pool based on the percentages.
-                </p>
-
-                {/* Reviewer Pools */}
-                <div class='grid grid-cols-1 gap-4 md:grid-cols-2'>
-                  <ReviewerPoolSection
-                    title='1st Reviewer Pool'
-                    pool={reviewer1Pool}
-                    available={availableForPool1()}
-                    total={pool1Total()}
-                    isValid={isPool1Valid()}
-                    onAdd={addToPool1}
-                    onRemove={removeFromPool1}
-                    onUpdatePercent={updatePool1Percent}
-                    onDistributeEvenly={distributeEvenly1}
-                  />
-                  <ReviewerPoolSection
-                    title='2nd Reviewer Pool'
-                    pool={reviewer2Pool}
-                    available={availableForPool2()}
-                    total={pool2Total()}
-                    isValid={isPool2Valid()}
-                    onAdd={addToPool2}
-                    onRemove={removeFromPool2}
-                    onUpdatePercent={updatePool2Percent}
-                    onDistributeEvenly={distributeEvenly2}
-                  />
-                </div>
-
-                <p class='text-xs text-gray-500'>
-                  {unassignedStudies().length}{' '}
-                  {unassignedStudies().length === 1 ? 'study' : 'studies'} without reviewers
-                </p>
+              <Show
+                when={unassignedStudies().length > 0 || showPreview()}
+                fallback={
+                  <div class='mt-4 flex items-center gap-2 text-green-600'>
+                    <BiRegularCheck class='h-5 w-5' />
+                    <p class='text-sm'>All studies have reviewers assigned.</p>
+                  </div>
+                }
+              >
+                <div class='space-y-4'>
+                  <p class='mt-4 text-sm text-gray-600'>
+                    Add reviewers to each pool and set their percentage. Studies will be randomly
+                    assigned one reviewer from each pool based on the percentages.
+                  </p>
+
+                  {/* Reviewer Pools */}
+                  <div class='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                    <ReviewerPoolSection
+                      title='1st Reviewer Pool'
+                      pool={reviewer1Pool}
+                      available={availableForPool1()}
+                      total={pool1Total()}
+                      isValid={isPool1Valid()}
+                      onAdd={addToPool1}
+                      onRemove={removeFromPool1}
+                      onUpdatePercent={updatePool1Percent}
+                      onDistributeEvenly={distributeEvenly1}
+                    />
+                    <ReviewerPoolSection
+                      title='2nd Reviewer Pool'
+                      pool={reviewer2Pool}
+                      available={availableForPool2()}
+                      total={pool2Total()}
+                      isValid={isPool2Valid()}
+                      onAdd={addToPool2}
+                      onRemove={removeFromPool2}
+                      onUpdatePercent={updatePool2Percent}
+                      onDistributeEvenly={distributeEvenly2}
+                    />
+                  </div>
 
-                {/* Preview Button */}
-                <Show when={!showPreview()}>
-                  <button
-                    onClick={handlePreview}
-                    disabled={!canGenerate() || unassignedStudies().length === 0}
-                    class='inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50'
-                  >
-                    <BiRegularShuffle class='h-4 w-4' />
-                    Generate Random Assignments
-                  </button>
-                </Show>
-
-                {/* Preview Section */}
-                <Show when={showPreview()}>
-                  <div class='overflow-hidden rounded-lg border border-blue-200'>
-                    <div class='flex items-center justify-between border-b border-blue-200 bg-blue-50 px-4 py-2'>
-                      <h4 class='text-sm font-semibold text-blue-900'>
-                        Preview Assignments ({previewAssignments().length} studies)
-                      </h4>
-                      <button
-                        onClick={handleReshuffle}
-                        class='inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-100'
-                      >
-                        <BiRegularShuffle class='h-3 w-3' />
-                        Reshuffle
-                      </button>
-                    </div>
-                    <div class='max-h-64 overflow-y-auto'>
-                      <table class='w-full text-sm'>
-                        <thead class='sticky top-0 bg-gray-50'>
-                          <tr>
-                            <th class='px-4 py-2 text-left font-medium text-gray-700'>Study</th>
-                            <th class='px-4 py-2 text-left font-medium text-gray-700'>
-                              1st Reviewer
-                            </th>
-                            <th class='px-4 py-2 text-left font-medium text-gray-700'>
-                              2nd Reviewer
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody class='divide-y divide-gray-200'>
-                          <For each={previewAssignments()}>
-                            {assignment => (
-                              <tr
-                                class={`hover:bg-gray-50 ${assignment.sameReviewer ? 'bg-red-50' : ''}`}
-                              >
-                                <td class='max-w-xs truncate px-4 py-2 text-gray-900'>
-                                  {assignment.studyName}
-                                </td>
-                                <td class='px-4 py-2 text-gray-600'>{assignment.reviewer1Name}</td>
-                                <td
-                                  class={`px-4 py-2 ${assignment.sameReviewer ? 'font-medium text-red-600' : 'text-gray-600'}`}
+                  <p class='text-xs text-gray-500'>
+                    {unassignedStudies().length}{' '}
+                    {unassignedStudies().length === 1 ? 'study' : 'studies'} without reviewers
+                  </p>
+
+                  {/* Preview Button */}
+                  <Show when={!showPreview()}>
+                    <button
+                      onClick={handlePreview}
+                      disabled={!canGenerate() || unassignedStudies().length === 0}
+                      class='inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50'
+                    >
+                      <BiRegularShuffle class='h-4 w-4' />
+                      Generate Random Assignments
+                    </button>
+                  </Show>
+
+                  {/* Preview Section */}
+                  <Show when={showPreview()}>
+                    <div class='overflow-hidden rounded-lg border border-blue-200'>
+                      <div class='flex items-center justify-between border-b border-blue-200 bg-blue-50 px-4 py-2'>
+                        <h4 class='text-sm font-semibold text-blue-900'>
+                          Preview Assignments ({previewAssignments().length} studies)
+                        </h4>
+                        <button
+                          onClick={handleReshuffle}
+                          class='inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-100'
+                        >
+                          <BiRegularShuffle class='h-3 w-3' />
+                          Reshuffle
+                        </button>
+                      </div>
+                      <div class='max-h-64 overflow-y-auto'>
+                        <table class='w-full text-sm'>
+                          <thead class='sticky top-0 bg-gray-50'>
+                            <tr>
+                              <th class='px-4 py-2 text-left font-medium text-gray-700'>Study</th>
+                              <th class='px-4 py-2 text-left font-medium text-gray-700'>
+                                1st Reviewer
+                              </th>
+                              <th class='px-4 py-2 text-left font-medium text-gray-700'>
+                                2nd Reviewer
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody class='divide-y divide-gray-200'>
+                            <For each={previewAssignments()}>
+                              {assignment => (
+                                <tr
+                                  class={`hover:bg-gray-50 ${assignment.sameReviewer ? 'bg-red-50' : ''}`}
                                 >
-                                  {assignment.reviewer2Name}
-                                  {assignment.sameReviewer && ' (conflict)'}
-                                </td>
-                              </tr>
-                            )}
-                          </For>
-                        </tbody>
-                      </table>
-                    </div>
-                    <div class='flex gap-2 border-t border-gray-200 bg-gray-50 px-4 py-3'>
-                      <button
-                        onClick={() => {
-                          handleApply();
-                          handleCollapse();
-                        }}
-                        disabled={previewAssignments().some(a => a.sameReviewer)}
-                        class='inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50'
-                      >
-                        <BiRegularCheck class='h-4 w-4' />
-                        Apply Assignments
-                      </button>
-                      <button
-                        onClick={handleCancel}
-                        class='rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:border-gray-400'
-                      >
-                        Cancel
-                      </button>
+                                  <td class='max-w-xs truncate px-4 py-2 text-gray-900'>
+                                    {assignment.studyName}
+                                  </td>
+                                  <td class='px-4 py-2 text-gray-600'>
+                                    {assignment.reviewer1Name}
+                                  </td>
+                                  <td
+                                    class={`px-4 py-2 ${assignment.sameReviewer ? 'font-medium text-red-600' : 'text-gray-600'}`}
+                                  >
+                                    {assignment.reviewer2Name}
+                                    {assignment.sameReviewer && ' (conflict)'}
+                                  </td>
+                                </tr>
+                              )}
+                            </For>
+                          </tbody>
+                        </table>
+                      </div>
+                      <div class='flex gap-2 border-t border-gray-200 bg-gray-50 px-4 py-3'>
+                        <button
+                          onClick={() => {
+                            handleApply();
+                            handleCollapse();
+                          }}
+                          disabled={previewAssignments().some(a => a.sameReviewer)}
+                          class='inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50'
+                        >
+                          <BiRegularCheck class='h-4 w-4' />
+                          Apply Assignments
+                        </button>
+                        <button
+                          onClick={handleCancel}
+                          class='rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:border-gray-400'
+                        >
+                          Cancel
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                </Show>
-              </div>
+                  </Show>
+                </div>
+              </Show>
             </Show>
-          </Show>
-        </div>
+          </div>
+        </CollapsibleContent>
       </Collapsible>
     </div>
   );
diff --git a/packages/web/src/components/project/reconcile-tab/ReconcileStudyRow.jsx b/packages/web/src/components/project/reconcile-tab/ReconcileStudyRow.jsx
index 39bb9f165..8fdd3617c 100644
--- a/packages/web/src/components/project/reconcile-tab/ReconcileStudyRow.jsx
+++ b/packages/web/src/components/project/reconcile-tab/ReconcileStudyRow.jsx
@@ -8,7 +8,7 @@
 import { For, Show, createMemo, createSignal } from 'solid-js';
 import { BiRegularChevronRight } from 'solid-icons/bi';
 import { BsFileDiff } from 'solid-icons/bs';
-import { Collapsible } from '@corates/ui';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { CHECKLIST_STATUS } from '@/constants/checklist-status.js';
 import { isReconciledChecklist } from '@/lib/checklist-domain.js';
 import { PdfListItem } from '@pdf';
@@ -78,101 +78,103 @@ export default function ReconcileStudyRow(props) {
     return props.getAssigneeName?.(checklist.assignedTo) || 'Unknown';
   };
 
+  // Handle row click - toggle unless clicking on interactive elements or selectable text
+  const handleRowClick = e => {
+    if (!hasPdfs()) return;
+    const target = e.target;
+    const interactive = target.closest('button, [role="button"], [data-selectable]');
+    if (interactive) return;
+    setExpanded(!expanded());
+  };
+
   return (
     <div class='overflow-hidden rounded-lg border border-gray-200 bg-white transition-colors hover:border-gray-300'>
-      <Collapsible
-        open={expanded()}
-        onOpenChange={({ open }) => {
-          // Only toggle if there are PDFs to show
-          if (hasPdfs()) {
-            setExpanded(open);
-          }
-        }}
-        trigger={
-          <div
-            class={`flex items-center gap-3 px-4 py-3 select-none ${hasPdfs() ? 'cursor-pointer' : ''}`}
-          >
-            {/* Chevron indicator (only if has PDFs) */}
-            <Show when={hasPdfs()}>
-              <div class='-ml-1 shrink-0 p-1'>
-                <BiRegularChevronRight
-                  class={`h-5 w-5 text-gray-400 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
-                />
-              </div>
+      <Collapsible open={expanded()}>
+        <div
+          class={`flex items-center gap-3 px-4 py-3 select-none ${hasPdfs() ? 'cursor-pointer' : ''}`}
+          onClick={handleRowClick}
+        >
+          {/* Chevron indicator (only if has PDFs) */}
+          <Show when={hasPdfs()}>
+            <div class='-ml-1 shrink-0 p-1'>
+              <BiRegularChevronRight
+                class={`h-5 w-5 text-gray-400 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
+              />
+            </div>
+          </Show>
+
+          {/* Study info */}
+          <div class='min-w-0 flex-1'>
+            <div class='flex items-center gap-2'>
+              <span class='truncate font-medium text-gray-900'>{study().name}</span>
+            </div>
+            {/* Citation line - selectable */}
+            <Show when={citationLine()}>
+              <p
+                class='w-fit cursor-text truncate text-xs text-gray-500 select-text'
+                data-selectable
+              >
+                {citationLine()}
+                <Show when={hasPdfs()}>
+                  <span class='text-gray-400'> · {pdfCount()} PDFs</span>
+                </Show>
+              </p>
+            </Show>
+            <Show when={!citationLine() && hasPdfs()}>
+              <p class='text-xs text-gray-400'>{pdfCount()} PDFs</p>
             </Show>
+          </div>
+
+          {/* Reconciliation status tag */}
+          <ReconcileStatusTag study={study()} getAssigneeName={props.getAssigneeName} />
 
-            {/* Study info */}
-            <div class='min-w-0 flex-1'>
-              <div class='flex items-center gap-2'>
-                <span class='truncate font-medium text-gray-900'>{study().name}</span>
-              </div>
-              {/* Citation line - selectable */}
-              <Show when={citationLine()}>
-                <p
-                  class='w-fit cursor-text truncate text-xs text-gray-500 select-text'
-                  data-selectable
-                >
-                  {citationLine()}
-                  <Show when={hasPdfs()}>
-                    <span class='text-gray-400'> · {pdfCount()} PDFs</span>
-                  </Show>
-                </p>
+          {/* Reviewer info when ready */}
+          <Show when={isReady()}>
+            <div class='flex items-center gap-2 text-sm text-gray-700'>
+              <Show when={awaitingReconcileChecklists()[0]}>
+                {checklist => <span>{getReviewerName(checklist())}</span>}
               </Show>
-              <Show when={!citationLine() && hasPdfs()}>
-                <p class='text-xs text-gray-400'>{pdfCount()} PDFs</p>
+              <span class='text-gray-400'>vs</span>
+              <Show when={awaitingReconcileChecklists()[1]}>
+                {checklist => <span>{getReviewerName(checklist())}</span>}
               </Show>
             </div>
+          </Show>
 
-            {/* Reconciliation status tag */}
-            <ReconcileStatusTag study={study()} getAssigneeName={props.getAssigneeName} />
-
-            {/* Reviewer info when ready */}
-            <Show when={isReady()}>
-              <div class='flex items-center gap-2 text-sm text-gray-700'>
-                <Show when={awaitingReconcileChecklists()[0]}>
-                  {checklist => <span>{getReviewerName(checklist())}</span>}
-                </Show>
-                <span class='text-gray-400'>vs</span>
-                <Show when={awaitingReconcileChecklists()[1]}>
-                  {checklist => <span>{getReviewerName(checklist())}</span>}
-                </Show>
-              </div>
-            </Show>
-
-            {/* Reconcile button */}
-            <button
-              onClick={e => {
-                e.stopPropagation();
-                startReconciliation();
-              }}
-              disabled={!isReady()}
-              class={`flex shrink-0 items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-                isReady() ?
-                  'bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                : 'cursor-not-allowed bg-gray-200 text-gray-500'
-              }`}
-            >
-              <BsFileDiff class='h-4 w-4' />
-              Reconcile
-            </button>
-          </div>
-        }
-      >
-        {/* Expanded PDF Section */}
-        <Show when={hasPdfs()}>
-          <div class='space-y-2 border-t border-gray-100 px-4 py-3'>
-            <For each={sortedPdfs()}>
-              {pdf => (
-                <PdfListItem
-                  pdf={pdf}
-                  onView={() => props.onViewPdf?.(pdf)}
-                  onDownload={() => props.onDownloadPdf?.(pdf)}
-                  readOnly={true}
-                />
-              )}
-            </For>
-          </div>
-        </Show>
+          {/* Reconcile button */}
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              startReconciliation();
+            }}
+            disabled={!isReady()}
+            class={`flex shrink-0 items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
+              isReady() ?
+                'bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+              : 'cursor-not-allowed bg-gray-200 text-gray-500'
+            }`}
+          >
+            <BsFileDiff class='h-4 w-4' />
+            Reconcile
+          </button>
+        </div>
+        <CollapsibleContent>
+          {/* Expanded PDF Section */}
+          <Show when={hasPdfs()}>
+            <div class='space-y-2 border-t border-gray-100 px-4 py-3'>
+              <For each={sortedPdfs()}>
+                {pdf => (
+                  <PdfListItem
+                    pdf={pdf}
+                    onView={() => props.onViewPdf?.(pdf)}
+                    onDownload={() => props.onDownloadPdf?.(pdf)}
+                    readOnly={true}
+                  />
+                )}
+              </For>
+            </div>
+          </Show>
+        </CollapsibleContent>
       </Collapsible>
     </div>
   );
diff --git a/packages/web/src/components/project/reconcile-tab/ReconciliationWrapper.jsx b/packages/web/src/components/project/reconcile-tab/ReconciliationWrapper.jsx
index d4c43943a..246e991fe 100644
--- a/packages/web/src/components/project/reconcile-tab/ReconciliationWrapper.jsx
+++ b/packages/web/src/components/project/reconcile-tab/ReconciliationWrapper.jsx
@@ -16,7 +16,7 @@ import {
 } from '@/lib/checklist-domain.js';
 import { downloadPdf, getPdfUrl } from '@api/pdf-api.js';
 import { getCachedPdf, cachePdf } from '@primitives/pdfCache.js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import ReconciliationWithPdf from './ReconciliationWithPdf.jsx';
 import { RobinsIReconciliationWithPdf } from './robins-i-reconcile/index.js';
 import { ROB2ReconciliationWithPdf } from './rob2-reconcile/index.js';
diff --git a/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/ChecklistReconciliation.jsx b/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/ChecklistReconciliation.jsx
index 0c2822964..cba6415ca 100644
--- a/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/ChecklistReconciliation.jsx
+++ b/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/ChecklistReconciliation.jsx
@@ -5,7 +5,20 @@
 
 import { createSignal, createMemo, createEffect, Show } from 'solid-js';
 import { FiArrowLeft, FiArrowRight } from 'solid-icons/fi';
-import { showToast, useConfirmDialog } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 import {
   compareChecklists,
   getReconciliationSummary,
@@ -39,7 +52,8 @@ export default function ChecklistReconciliation(props) {
   const [reconciledName, setReconciledName] = createSignal('Reconciled Checklist');
   const [saving, setSaving] = createSignal(false);
 
-  const confirmDialog = useConfirmDialog();
+  // Finish confirmation dialog state
+  const [finishDialogOpen, setFinishDialogOpen] = createSignal(false);
 
   // Navigation state in localStorage (not synced across clients)
   const getStorageKey = () => {
@@ -357,28 +371,22 @@ export default function ChecklistReconciliation(props) {
     return count;
   });
 
-  // Handle save
-  async function handleSave() {
+  // Handle save - opens confirmation dialog
+  function handleSave() {
     if (!allAnswered()) {
       showToast.error('Incomplete Review', 'Please review all questions before saving.');
       return;
     }
+    setFinishDialogOpen(true);
+  }
 
-    const confirmed = await confirmDialog.open({
-      title: 'Finish reconciliation?',
-      description:
-        'This will mark the reconciled checklist as completed and end this reconciliation. You will no longer be able to edit these reconciliation answers afterwards.',
-      confirmText: 'Finish',
-      cancelText: 'Cancel',
-      variant: 'warning',
-    });
-
-    if (!confirmed) return;
-
+  // Execute save after confirmation
+  async function confirmSave() {
     setSaving(true);
     try {
       // Just pass the name - the checklist already exists and has all the answers
       await props.onSaveReconciled?.(reconciledName());
+      setFinishDialogOpen(false);
     } catch (err) {
       console.error('Error saving reconciled checklist:', err);
       showToast.error('Save Failed', 'Failed to save reconciled checklist. Please try again.');
@@ -390,7 +398,31 @@ export default function ChecklistReconciliation(props) {
   return (
     <div class='bg-blue-50'>
       <div class='mx-auto max-w-7xl px-4 py-4'>
-        <confirmDialog.ConfirmDialogComponent />
+        {/* Finish confirmation dialog */}
+        <AlertDialog open={finishDialogOpen()} onOpenChange={setFinishDialogOpen}>
+          <AlertDialogBackdrop />
+          <AlertDialogPositioner>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogIcon variant='warning' />
+                <div>
+                  <AlertDialogTitle>Finish reconciliation?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This will mark the reconciled checklist as completed and end this
+                    reconciliation. You will no longer be able to edit these reconciliation answers
+                    afterwards.
+                  </AlertDialogDescription>
+                </div>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel disabled={saving()}>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant='warning' disabled={saving()} onClick={confirmSave}>
+                  {saving() ? 'Saving...' : 'Finish'}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogPositioner>
+        </AlertDialog>
         {/* Main Content */}
         <Show when={viewMode() === 'questions'}>
           <Show
diff --git a/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/Navbar.jsx b/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/Navbar.jsx
index 861f67f53..4a9213a45 100644
--- a/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/Navbar.jsx
+++ b/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/Navbar.jsx
@@ -1,7 +1,12 @@
 import { For, createMemo, Show } from 'solid-js';
 import { FaSolidArrowRotateLeft } from 'solid-icons/fa';
 import { FiCheck } from 'solid-icons/fi';
-import { Tooltip } from '@corates/ui';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 import { hasQuestionAnswer, getQuestionPillStyle, getQuestionTooltip } from './navbar-utils.js';
 
 /**
@@ -54,23 +59,28 @@ function QuestionPill(props) {
   );
 
   return (
-    <Tooltip content={tooltip()} placement='bottom' openDelay={200}>
-      <button
-        onClick={() => props.store.goToQuestion?.(props.questionIndex)}
-        class={`relative h-8 w-8 rounded-full text-xs font-medium transition-all ${pillStyle()}`}
-        aria-label={tooltip()}
-        aria-current={isCurrentPage() ? 'page' : undefined}
-      >
-        {props.questionIndex + 1}
-        <Show when={hasAnswer()}>
-          <span
-            class='absolute -top-0.5 -right-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full border-[0.5px] bg-white shadow-sm'
-            aria-hidden='true'
-          >
-            <FiCheck class='h-2.5 w-2.5 text-green-600' />
-          </span>
-        </Show>
-      </button>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <button
+          onClick={() => props.store.goToQuestion?.(props.questionIndex)}
+          class={`relative h-8 w-8 rounded-full text-xs font-medium transition-all ${pillStyle()}`}
+          aria-label={tooltip()}
+          aria-current={isCurrentPage() ? 'page' : undefined}
+        >
+          {props.questionIndex + 1}
+          <Show when={hasAnswer()}>
+            <span
+              class='absolute -top-0.5 -right-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full border-[0.5px] bg-white shadow-sm'
+              aria-hidden='true'
+            >
+              <FiCheck class='h-2.5 w-2.5 text-green-600' />
+            </span>
+          </Show>
+        </button>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>{tooltip()}</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
@@ -88,15 +98,20 @@ function SummaryButton(props) {
   );
 
   return (
-    <Tooltip content='View summary of all questions' placement='bottom' openDelay={200}>
-      <button
-        onClick={() => props.store.setViewMode?.('summary')}
-        class={`h-8 rounded-full px-3 text-xs font-medium transition-all ${buttonStyle()}`}
-        aria-label='View summary'
-        aria-current={isActive() ? 'page' : undefined}
-      >
-        Summary
-      </button>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <button
+          onClick={() => props.store.setViewMode?.('summary')}
+          class={`h-8 rounded-full px-3 text-xs font-medium transition-all ${buttonStyle()}`}
+          aria-label='View summary'
+          aria-current={isActive() ? 'page' : undefined}
+        >
+          Summary
+        </button>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>View summary of all questions</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
@@ -106,15 +121,20 @@ function SummaryButton(props) {
  */
 function ResetButton(props) {
   return (
-    <Tooltip content='Reset final answers to unresolved' placement='bottom' openDelay={200}>
-      <button
-        onClick={() => props.onClick?.()}
-        class='flex h-8 items-center gap-1 rounded-full bg-red-100 px-3 text-xs font-medium text-red-700 transition-all hover:bg-red-200'
-        aria-label='Reset reconciliation'
-      >
-        <FaSolidArrowRotateLeft size={12} />
-        Reset
-      </button>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <button
+          onClick={() => props.onClick?.()}
+          class='flex h-8 items-center gap-1 rounded-full bg-red-100 px-3 text-xs font-medium text-red-700 transition-all hover:bg-red-200'
+          aria-label='Reset reconciliation'
+        >
+          <FaSolidArrowRotateLeft size={12} />
+          Reset
+        </button>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>Reset final answers to unresolved</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
diff --git a/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/NotesCompareSection.jsx b/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/NotesCompareSection.jsx
index d009b7f9c..9891cf6db 100644
--- a/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/NotesCompareSection.jsx
+++ b/packages/web/src/components/project/reconcile-tab/amstar2-reconcile/NotesCompareSection.jsx
@@ -7,7 +7,7 @@
 import { createSignal, createEffect, onCleanup, Show } from 'solid-js';
 import { BiRegularChevronRight } from 'solid-icons/bi';
 import { BsJournalText, BsClipboard2 } from 'solid-icons/bs';
-import { Collapsible } from '@corates/ui';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import NoteEditor from '@/components/checklist/common/NoteEditor.jsx';
 
 const MAX_LENGTH = 2000;
@@ -88,116 +88,113 @@ export default function NotesCompareSection(props) {
 
   return (
     <div class='mt-4 border-t border-gray-200 pt-3'>
-      <Collapsible
-        open={expanded()}
-        onOpenChange={({ open }) => setExpanded(open)}
-        trigger={
-          <div
-            class={`flex cursor-pointer items-center gap-1.5 py-1 text-sm select-none ${hasAnyNote() ? 'text-blue-600 hover:text-blue-700' : 'text-gray-500 hover:text-gray-700'} `}
-          >
-            <BiRegularChevronRight
-              class={`h-4 w-4 shrink-0 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
-            />
-            <BsJournalText class='h-4 w-4 shrink-0' />
-            <span class='font-medium'>Question Notes</span>
-            <Show when={hasAnyNote()}>
-              <span class='ml-1 text-xs text-gray-400'>
-                (
-                {[hasReviewer1Note() && 'R1', hasReviewer2Note() && 'R2', hasFinalNote() && 'Final']
-                  .filter(Boolean)
-                  .join(', ')}
-                )
-              </span>
-            </Show>
-          </div>
-        }
-      >
-        <div class='pt-3'>
-          {/* Three column layout for notes */}
-          <div class='grid grid-cols-3 gap-4'>
-            {/* Reviewer 1 Note (read-only) */}
-            <div class='rounded-lg bg-gray-50 p-3'>
-              <div class='mb-2 flex items-center justify-between'>
-                <h4 class='text-xs font-semibold text-gray-700'>
-                  {props.reviewer1Name || 'Reviewer 1'}
-                </h4>
-                <Show when={hasReviewer1Note()}>
-                  <button
-                    onClick={() => copyToFinal(props.reviewer1Note)}
-                    class='flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800'
-                    title='Copy to final note'
-                  >
-                    <BsClipboard2 class='h-3 w-3' />
-                    Use
-                  </button>
+      <Collapsible open={expanded()} onOpenChange={setExpanded}>
+        <CollapsibleTrigger
+          class={`flex cursor-pointer items-center gap-1.5 py-1 text-sm select-none ${hasAnyNote() ? 'text-blue-600 hover:text-blue-700' : 'text-gray-500 hover:text-gray-700'} `}
+        >
+          <BiRegularChevronRight
+            class={`h-4 w-4 shrink-0 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
+          />
+          <BsJournalText class='h-4 w-4 shrink-0' />
+          <span class='font-medium'>Question Notes</span>
+          <Show when={hasAnyNote()}>
+            <span class='ml-1 text-xs text-gray-400'>
+              (
+              {[hasReviewer1Note() && 'R1', hasReviewer2Note() && 'R2', hasFinalNote() && 'Final']
+                .filter(Boolean)
+                .join(', ')}
+              )
+            </span>
+          </Show>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div class='pt-3'>
+            {/* Three column layout for notes */}
+            <div class='grid grid-cols-3 gap-4'>
+              {/* Reviewer 1 Note (read-only) */}
+              <div class='rounded-lg bg-gray-50 p-3'>
+                <div class='mb-2 flex items-center justify-between'>
+                  <h4 class='text-xs font-semibold text-gray-700'>
+                    {props.reviewer1Name || 'Reviewer 1'}
+                  </h4>
+                  <Show when={hasReviewer1Note()}>
+                    <button
+                      onClick={() => copyToFinal(props.reviewer1Note)}
+                      class='flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800'
+                      title='Copy to final note'
+                    >
+                      <BsClipboard2 class='h-3 w-3' />
+                      Use
+                    </button>
+                  </Show>
+                </div>
+                <Show
+                  when={hasReviewer1Note()}
+                  fallback={<p class='text-xs text-gray-400 italic'>No note added</p>}
+                >
+                  <p class='wrap-break-words text-sm whitespace-pre-wrap text-gray-700'>
+                    {props.reviewer1Note}
+                  </p>
                 </Show>
               </div>
-              <Show
-                when={hasReviewer1Note()}
-                fallback={<p class='text-xs text-gray-400 italic'>No note added</p>}
-              >
-                <p class='wrap-break-words text-sm whitespace-pre-wrap text-gray-700'>
-                  {props.reviewer1Note}
-                </p>
-              </Show>
-            </div>
 
-            {/* Reviewer 2 Note (read-only) */}
-            <div class='rounded-lg bg-gray-50 p-3'>
-              <div class='mb-2 flex items-center justify-between'>
-                <h4 class='text-xs font-semibold text-gray-700'>
-                  {props.reviewer2Name || 'Reviewer 2'}
-                </h4>
-                <Show when={hasReviewer2Note()}>
-                  <button
-                    onClick={() => copyToFinal(props.reviewer2Note)}
-                    class='flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800'
-                    title='Copy to final note'
-                  >
-                    <BsClipboard2 class='h-3 w-3' />
-                    Use
-                  </button>
+              {/* Reviewer 2 Note (read-only) */}
+              <div class='rounded-lg bg-gray-50 p-3'>
+                <div class='mb-2 flex items-center justify-between'>
+                  <h4 class='text-xs font-semibold text-gray-700'>
+                    {props.reviewer2Name || 'Reviewer 2'}
+                  </h4>
+                  <Show when={hasReviewer2Note()}>
+                    <button
+                      onClick={() => copyToFinal(props.reviewer2Note)}
+                      class='flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800'
+                      title='Copy to final note'
+                    >
+                      <BsClipboard2 class='h-3 w-3' />
+                      Use
+                    </button>
+                  </Show>
+                </div>
+                <Show
+                  when={hasReviewer2Note()}
+                  fallback={<p class='text-xs text-gray-400 italic'>No note added</p>}
+                >
+                  <p class='wrap-break-words text-sm whitespace-pre-wrap text-gray-700'>
+                    {props.reviewer2Note}
+                  </p>
                 </Show>
               </div>
-              <Show
-                when={hasReviewer2Note()}
-                fallback={<p class='text-xs text-gray-400 italic'>No note added</p>}
-              >
-                <p class='wrap-break-words text-sm whitespace-pre-wrap text-gray-700'>
-                  {props.reviewer2Note}
-                </p>
-              </Show>
-            </div>
 
-            {/* Final Note (editable) */}
-            <div class='rounded-lg bg-green-50/50 p-3'>
-              <div class='mb-2 flex items-center justify-between'>
-                <h4 class='text-xs font-semibold text-gray-700'>Final Note</h4>
-                <Show when={hasReviewer1Note() && hasReviewer2Note()}>
-                  <button
-                    onClick={mergeToFinal}
-                    class='text-xs text-green-600 hover:text-green-800'
-                    title='Merge both notes'
-                  >
-                    Merge Both
-                  </button>
+              {/* Final Note (editable) */}
+              <div class='rounded-lg bg-green-50/50 p-3'>
+                <div class='mb-2 flex items-center justify-between'>
+                  <h4 class='text-xs font-semibold text-gray-700'>Final Note</h4>
+                  <Show when={hasReviewer1Note() && hasReviewer2Note()}>
+                    <button
+                      onClick={mergeToFinal}
+                      class='text-xs text-green-600 hover:text-green-800'
+                      title='Merge both notes'
+                    >
+                      Merge Both
+                    </button>
+                  </Show>
+                </div>
+                <Show
+                  when={props.finalNoteYText}
+                  fallback={<p class='text-xs text-gray-400 italic'>Loading...</p>}
+                >
+                  <NoteEditor
+                    yText={props.finalNoteYText}
+                    inline={true}
+                    placeholder='Add the final reconciled note...'
+                    maxLength={MAX_LENGTH}
+                    focusRingColor='green-500'
+                  />
                 </Show>
               </div>
-              <Show
-                when={props.finalNoteYText}
-                fallback={<p class='text-xs text-gray-400 italic'>Loading...</p>}
-              >
-                <NoteEditor
-                  yText={props.finalNoteYText}
-                  inline={true}
-                  placeholder='Add the final reconciled note...'
-                  maxLength={MAX_LENGTH}
-                  focusRingColor='green-500'
-                />
-              </Show>
             </div>
           </div>
-        </div>
+        </CollapsibleContent>
       </Collapsible>
     </div>
   );
diff --git a/packages/web/src/components/project/reconcile-tab/rob2-reconcile/NavbarDomainPill.jsx b/packages/web/src/components/project/reconcile-tab/rob2-reconcile/NavbarDomainPill.jsx
index 8339daaf7..0aacca32d 100644
--- a/packages/web/src/components/project/reconcile-tab/rob2-reconcile/NavbarDomainPill.jsx
+++ b/packages/web/src/components/project/reconcile-tab/rob2-reconcile/NavbarDomainPill.jsx
@@ -1,6 +1,12 @@
 import { For, createMemo, Show } from 'solid-js';
 import { FiChevronDown, FiChevronRight, FiCheck } from 'solid-icons/fi';
-import { Tooltip, CollapsiblePrimitive as Collapsible } from '@corates/ui';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import {
   getSectionLabel,
   hasNavItemAnswer,
@@ -68,27 +74,32 @@ export default function NavbarDomainPill(props) {
   });
 
   return (
-    <Collapsible.Root open={props.isExpanded} collapsedWidth={0} class={containerStyle()}>
+    <Collapsible open={props.isExpanded} collapsedWidth={0} class={containerStyle()}>
       {/* Label/collapse button */}
-      <Tooltip content={tooltipContent()} placement='bottom' openDelay={300}>
-        <button type='button' onClick={() => props.onClick?.()} class={labelStyle()}>
-          <span class='font-semibold'>{label()}</span>
-          {/* Only show progress count when collapsed */}
-          <Show when={!props.isExpanded}>
-            <span class='text-2xs opacity-80'>
-              {props.progress?.answered || 0}/{props.progress?.total || 0}
-            </span>
-          </Show>
-          <Show when={props.sectionKey !== 'overall'}>
-            {props.isExpanded ?
-              <FiChevronDown class='h-3 w-3 opacity-60' />
-            : <FiChevronRight class='h-3 w-3 opacity-60' />}
-          </Show>
-        </button>
+      <Tooltip openDelay={300} positioning={{ placement: 'bottom' }}>
+        <TooltipTrigger>
+          <button type='button' onClick={() => props.onClick?.()} class={labelStyle()}>
+            <span class='font-semibold'>{label()}</span>
+            {/* Only show progress count when collapsed */}
+            <Show when={!props.isExpanded}>
+              <span class='text-2xs opacity-80'>
+                {props.progress?.answered || 0}/{props.progress?.total || 0}
+              </span>
+            </Show>
+            <Show when={props.sectionKey !== 'overall'}>
+              {props.isExpanded ?
+                <FiChevronDown class='h-3 w-3 opacity-60' />
+              : <FiChevronRight class='h-3 w-3 opacity-60' />}
+            </Show>
+          </button>
+        </TooltipTrigger>
+        <TooltipPositioner>
+          <TooltipContent>{tooltipContent()}</TooltipContent>
+        </TooltipPositioner>
       </Tooltip>
 
       {/* Animated expanded question pills */}
-      <Collapsible.Content class='collapsible-horizontal flex items-center overflow-visible py-1'>
+      <CollapsibleContent horizontal class='flex items-center overflow-visible py-1'>
         <For each={props.progress?.items || []}>
           {(item, idx) => {
             const globalIndex = () => props.allNavItems?.indexOf(item) ?? -1;
@@ -109,8 +120,8 @@ export default function NavbarDomainPill(props) {
             );
           }}
         </For>
-      </Collapsible.Content>
-    </Collapsible.Root>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }
 
@@ -180,24 +191,29 @@ function QuestionPill(props) {
   };
 
   return (
-    <Tooltip content={tooltip()} placement='bottom' openDelay={200}>
-      <button
-        type='button'
-        onClick={() => props.goToPage?.(props.globalIndex)}
-        class={`relative flex items-center justify-center overflow-visible rounded-full font-medium transition-all ${pillSizeClass()} ${pillSpacingClass()} ${pillStyle()}`}
-        aria-label={tooltip()}
-        aria-current={isCurrentPage() ? 'page' : undefined}
-      >
-        {displayLabel()}
-        <Show when={hasAnswer()}>
-          <span
-            class='absolute -top-0.5 -right-0.5 flex h-2.5 w-2.5 items-center justify-center rounded-full border-[0.5px] bg-white shadow-sm'
-            aria-hidden='true'
-          >
-            <FiCheck class='h-1.5 w-1.5 text-green-600' />
-          </span>
-        </Show>
-      </button>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <button
+          type='button'
+          onClick={() => props.goToPage?.(props.globalIndex)}
+          class={`relative flex items-center justify-center overflow-visible rounded-full font-medium transition-all ${pillSizeClass()} ${pillSpacingClass()} ${pillStyle()}`}
+          aria-label={tooltip()}
+          aria-current={isCurrentPage() ? 'page' : undefined}
+        >
+          {displayLabel()}
+          <Show when={hasAnswer()}>
+            <span
+              class='absolute -top-0.5 -right-0.5 flex h-2.5 w-2.5 items-center justify-center rounded-full border-[0.5px] bg-white shadow-sm'
+              aria-hidden='true'
+            >
+              <FiCheck class='h-1.5 w-1.5 text-green-600' />
+            </span>
+          </Show>
+        </button>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>{tooltip()}</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
diff --git a/packages/web/src/components/project/reconcile-tab/rob2-reconcile/ROB2Navbar.jsx b/packages/web/src/components/project/reconcile-tab/rob2-reconcile/ROB2Navbar.jsx
index d4813295f..30a8cc8cd 100644
--- a/packages/web/src/components/project/reconcile-tab/rob2-reconcile/ROB2Navbar.jsx
+++ b/packages/web/src/components/project/reconcile-tab/rob2-reconcile/ROB2Navbar.jsx
@@ -6,7 +6,12 @@
 import { For, createMemo, Show } from 'solid-js';
 import { FaSolidArrowRotateLeft } from 'solid-icons/fa';
 import { FiAlertTriangle } from 'solid-icons/fi';
-import { Tooltip } from '@corates/ui';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 import NavbarDomainPill from './NavbarDomainPill.jsx';
 import {
   getDomainProgress,
@@ -86,15 +91,19 @@ export default function ROB2Navbar(props) {
     <nav class='flex items-center gap-1 px-1 py-1.5' aria-label='Question navigation'>
       {/* Aim Mismatch Warning */}
       <Show when={props.store.aimMismatch}>
-        <Tooltip
-          content='Aim mismatch - reconcile the aim field first'
-          placement='bottom'
-          openDelay={200}
-        >
-          <div class='mr-1 flex shrink-0 items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700'>
-            <FiAlertTriangle class='h-3 w-3' />
-            Aim
-          </div>
+        <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+          <TooltipTrigger>
+            <button
+              type='button'
+              class='mr-1 flex shrink-0 items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700'
+            >
+              <FiAlertTriangle class='h-3 w-3' />
+              Aim
+            </button>
+          </TooltipTrigger>
+          <TooltipPositioner>
+            <TooltipContent>Aim mismatch - reconcile the aim field first</TooltipContent>
+          </TooltipPositioner>
         </Tooltip>
       </Show>
 
@@ -148,16 +157,21 @@ function SummaryButton(props) {
   );
 
   return (
-    <Tooltip content='View summary of all items' placement='bottom' openDelay={200}>
-      <button
-        type='button'
-        onClick={() => props.store.setViewMode?.('summary')}
-        class={`h-7 rounded-full px-3 text-xs font-medium transition-all ${buttonStyle()}`}
-        aria-label='View summary'
-        aria-current={isActive() ? 'page' : undefined}
-      >
-        Summary
-      </button>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <button
+          type='button'
+          onClick={() => props.store.setViewMode?.('summary')}
+          class={`h-7 rounded-full px-3 text-xs font-medium transition-all ${buttonStyle()}`}
+          aria-label='View summary'
+          aria-current={isActive() ? 'page' : undefined}
+        >
+          Summary
+        </button>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>View summary of all items</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
@@ -167,16 +181,21 @@ function SummaryButton(props) {
  */
 function ResetButton(props) {
   return (
-    <Tooltip content='Reset all final answers' placement='bottom' openDelay={200}>
-      <button
-        type='button'
-        onClick={() => props.onClick?.()}
-        class='flex h-7 items-center gap-1 rounded-full bg-red-100 px-2 text-xs font-medium text-red-700 transition-all hover:bg-red-200'
-        aria-label='Reset reconciliation'
-      >
-        <FaSolidArrowRotateLeft size={10} />
-        Reset
-      </button>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <button
+          type='button'
+          onClick={() => props.onClick?.()}
+          class='flex h-7 items-center gap-1 rounded-full bg-red-100 px-2 text-xs font-medium text-red-700 transition-all hover:bg-red-200'
+          aria-label='Reset reconciliation'
+        >
+          <FaSolidArrowRotateLeft size={10} />
+          Reset
+        </button>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>Reset all final answers</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
diff --git a/packages/web/src/components/project/reconcile-tab/rob2-reconcile/ROB2Reconciliation.jsx b/packages/web/src/components/project/reconcile-tab/rob2-reconcile/ROB2Reconciliation.jsx
index abfa7d60f..0bc30e288 100644
--- a/packages/web/src/components/project/reconcile-tab/rob2-reconcile/ROB2Reconciliation.jsx
+++ b/packages/web/src/components/project/reconcile-tab/rob2-reconcile/ROB2Reconciliation.jsx
@@ -5,7 +5,20 @@
 
 import { createSignal, createMemo, createEffect, Show, Switch, Match } from 'solid-js';
 import { FiArrowLeft, FiArrowRight, FiAlertTriangle } from 'solid-icons/fi';
-import { showToast, useConfirmDialog } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 import {
   compareChecklists,
   hasAimMismatch,
@@ -43,7 +56,8 @@ import ROB2SummaryView from './ROB2SummaryView.jsx';
  */
 export default function ROB2Reconciliation(props) {
   const [saving, setSaving] = createSignal(false);
-  const confirmDialog = useConfirmDialog();
+  // Finish confirmation dialog state
+  const [finishDialogOpen, setFinishDialogOpen] = createSignal(false);
 
   // Navigation state (localStorage-backed)
   const getStorageKey = () => {
@@ -357,26 +371,21 @@ export default function ROB2Reconciliation(props) {
   });
 
   // Handle save
-  async function handleSave() {
+  // Handle save - opens confirmation dialog
+  function handleSave() {
     if (!allAnswered()) {
       showToast.error('Incomplete Review', 'Please review all items before saving.');
       return;
     }
+    setFinishDialogOpen(true);
+  }
 
-    const confirmed = await confirmDialog.open({
-      title: 'Finish reconciliation?',
-      description:
-        'This will mark the reconciled checklist as completed. You will no longer be able to edit these reconciliation answers afterwards.',
-      confirmText: 'Finish',
-      cancelText: 'Cancel',
-      variant: 'warning',
-    });
-
-    if (!confirmed) return;
-
+  // Execute save after confirmation
+  async function confirmSave() {
     setSaving(true);
     try {
       await props.onSaveReconciled?.();
+      setFinishDialogOpen(false);
     } catch (err) {
       console.error('Error saving reconciled checklist:', err);
       showToast.error('Save Failed', 'Failed to save reconciled checklist. Please try again.');
@@ -415,7 +424,30 @@ export default function ROB2Reconciliation(props) {
   return (
     <div class='bg-blue-50'>
       <div class='mx-auto max-w-7xl px-4 py-4'>
-        <confirmDialog.ConfirmDialogComponent />
+        {/* Finish confirmation dialog */}
+        <AlertDialog open={finishDialogOpen()} onOpenChange={setFinishDialogOpen}>
+          <AlertDialogBackdrop />
+          <AlertDialogPositioner>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogIcon variant='warning' />
+                <div>
+                  <AlertDialogTitle>Finish reconciliation?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This will mark the reconciled checklist as completed. You will no longer be able
+                    to edit these reconciliation answers afterwards.
+                  </AlertDialogDescription>
+                </div>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel disabled={saving()}>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant='warning' disabled={saving()} onClick={confirmSave}>
+                  {saving() ? 'Saving...' : 'Finish'}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogPositioner>
+        </AlertDialog>
 
         {/* Aim Mismatch Warning Banner */}
         <Show when={aimMismatch()}>
diff --git a/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/NavbarDomainPill.jsx b/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/NavbarDomainPill.jsx
index 1908a0b22..b36ce8c2c 100644
--- a/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/NavbarDomainPill.jsx
+++ b/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/NavbarDomainPill.jsx
@@ -1,6 +1,12 @@
 import { For, createMemo, Show } from 'solid-js';
 import { FiChevronDown, FiChevronRight, FiCheck } from 'solid-icons/fi';
-import { Tooltip, CollapsiblePrimitive as Collapsible } from '@corates/ui';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import {
   getSectionLabel,
   hasNavItemAnswer,
@@ -69,27 +75,32 @@ export default function NavbarDomainPill(props) {
   });
 
   return (
-    <Collapsible.Root open={props.isExpanded} collapsedWidth={0} class={containerStyle()}>
+    <Collapsible open={props.isExpanded} collapsedWidth={0} class={containerStyle()}>
       {/* Label/collapse button */}
-      <Tooltip content={tooltipContent()} placement='bottom' openDelay={300}>
-        <button type='button' onClick={() => props.onClick?.()} class={labelStyle()}>
-          <span class='font-semibold'>{label()}</span>
-          {/* Only show progress count when collapsed */}
-          <Show when={!props.isExpanded}>
-            <span class='text-2xs opacity-80'>
-              {props.progress?.answered || 0}/{props.progress?.total || 0}
-            </span>
-          </Show>
-          <Show when={props.sectionKey !== 'overall'}>
-            {props.isExpanded ?
-              <FiChevronDown class='h-3 w-3 opacity-60' />
-            : <FiChevronRight class='h-3 w-3 opacity-60' />}
-          </Show>
-        </button>
+      <Tooltip openDelay={300} positioning={{ placement: 'bottom' }}>
+        <TooltipTrigger>
+          <button type='button' onClick={() => props.onClick?.()} class={labelStyle()}>
+            <span class='font-semibold'>{label()}</span>
+            {/* Only show progress count when collapsed */}
+            <Show when={!props.isExpanded}>
+              <span class='text-2xs opacity-80'>
+                {props.progress?.answered || 0}/{props.progress?.total || 0}
+              </span>
+            </Show>
+            <Show when={props.sectionKey !== 'overall'}>
+              {props.isExpanded ?
+                <FiChevronDown class='h-3 w-3 opacity-60' />
+              : <FiChevronRight class='h-3 w-3 opacity-60' />}
+            </Show>
+          </button>
+        </TooltipTrigger>
+        <TooltipPositioner>
+          <TooltipContent>{tooltipContent()}</TooltipContent>
+        </TooltipPositioner>
       </Tooltip>
 
       {/* Animated expanded question pills */}
-      <Collapsible.Content class='collapsible-horizontal flex items-center overflow-visible py-1'>
+      <CollapsibleContent horizontal class='flex items-center overflow-visible py-1'>
         <For each={props.progress?.items || []}>
           {(item, idx) => {
             const globalIndex = () => props.allNavItems?.indexOf(item) ?? -1;
@@ -110,8 +121,8 @@ export default function NavbarDomainPill(props) {
             );
           }}
         </For>
-      </Collapsible.Content>
-    </Collapsible.Root>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }
 
@@ -164,24 +175,29 @@ function QuestionPill(props) {
   };
 
   return (
-    <Tooltip content={tooltip()} placement='bottom' openDelay={200}>
-      <button
-        type='button'
-        onClick={() => props.goToPage?.(props.globalIndex)}
-        class={`relative flex items-center justify-center overflow-visible rounded-full font-medium transition-all ${pillSizeClass()} ${pillSpacingClass()} ${pillStyle()}`}
-        aria-label={tooltip()}
-        aria-current={isCurrentPage() ? 'page' : undefined}
-      >
-        {displayLabel()}
-        <Show when={hasAnswer()}>
-          <span
-            class='absolute -top-0.5 -right-0.5 flex h-2.5 w-2.5 items-center justify-center rounded-full border-[0.5px] bg-white shadow-sm'
-            aria-hidden='true'
-          >
-            <FiCheck class='h-1.5 w-1.5 text-green-600' />
-          </span>
-        </Show>
-      </button>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <button
+          type='button'
+          onClick={() => props.goToPage?.(props.globalIndex)}
+          class={`relative flex items-center justify-center overflow-visible rounded-full font-medium transition-all ${pillSizeClass()} ${pillSpacingClass()} ${pillStyle()}`}
+          aria-label={tooltip()}
+          aria-current={isCurrentPage() ? 'page' : undefined}
+        >
+          {displayLabel()}
+          <Show when={hasAnswer()}>
+            <span
+              class='absolute -top-0.5 -right-0.5 flex h-2.5 w-2.5 items-center justify-center rounded-full border-[0.5px] bg-white shadow-sm'
+              aria-hidden='true'
+            >
+              <FiCheck class='h-1.5 w-1.5 text-green-600' />
+            </span>
+          </Show>
+        </button>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>{tooltip()}</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
diff --git a/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsINavbar.jsx b/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsINavbar.jsx
index 55067374f..0af6b82ff 100644
--- a/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsINavbar.jsx
+++ b/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsINavbar.jsx
@@ -1,7 +1,12 @@
 import { For, createMemo, Show } from 'solid-js';
 import { FaSolidArrowRotateLeft } from 'solid-icons/fa';
 import { FiAlertTriangle } from 'solid-icons/fi';
-import { Tooltip } from '@corates/ui';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 import NavbarDomainPill from './NavbarDomainPill.jsx';
 import {
   getDomainProgress,
@@ -80,11 +85,16 @@ export default function RobinsINavbar(props) {
     <nav class='flex items-center gap-1 px-1 py-1.5' aria-label='Question navigation'>
       {/* Critical Risk Warning */}
       <Show when={props.store.sectionBCritical}>
-        <Tooltip content='Section B indicates Critical Risk' placement='bottom' openDelay={200}>
-          <div class='mr-1 flex shrink-0 items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700'>
-            <FiAlertTriangle class='h-3 w-3' />
-            Critical
-          </div>
+        <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+          <TooltipTrigger>
+            <div class='mr-1 flex shrink-0 items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700'>
+              <FiAlertTriangle class='h-3 w-3' />
+              Critical
+            </div>
+          </TooltipTrigger>
+          <TooltipPositioner>
+            <TooltipContent>Section B indicates Critical Risk</TooltipContent>
+          </TooltipPositioner>
         </Tooltip>
       </Show>
 
@@ -138,16 +148,21 @@ function SummaryButton(props) {
   );
 
   return (
-    <Tooltip content='View summary of all items' placement='bottom' openDelay={200}>
-      <button
-        type='button'
-        onClick={() => props.store.setViewMode?.('summary')}
-        class={`h-7 rounded-full px-3 text-xs font-medium transition-all ${buttonStyle()}`}
-        aria-label='View summary'
-        aria-current={isActive() ? 'page' : undefined}
-      >
-        Summary
-      </button>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <button
+          type='button'
+          onClick={() => props.store.setViewMode?.('summary')}
+          class={`h-7 rounded-full px-3 text-xs font-medium transition-all ${buttonStyle()}`}
+          aria-label='View summary'
+          aria-current={isActive() ? 'page' : undefined}
+        >
+          Summary
+        </button>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>View summary of all items</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
@@ -157,16 +172,21 @@ function SummaryButton(props) {
  */
 function ResetButton(props) {
   return (
-    <Tooltip content='Reset all final answers' placement='bottom' openDelay={200}>
-      <button
-        type='button'
-        onClick={() => props.onClick?.()}
-        class='flex h-7 items-center gap-1 rounded-full bg-red-100 px-2 text-xs font-medium text-red-700 transition-all hover:bg-red-200'
-        aria-label='Reset reconciliation'
-      >
-        <FaSolidArrowRotateLeft size={10} />
-        Reset
-      </button>
+    <Tooltip openDelay={200} positioning={{ placement: 'bottom' }}>
+      <TooltipTrigger>
+        <button
+          type='button'
+          onClick={() => props.onClick?.()}
+          class='flex h-7 items-center gap-1 rounded-full bg-red-100 px-2 text-xs font-medium text-red-700 transition-all hover:bg-red-200'
+          aria-label='Reset reconciliation'
+        >
+          <FaSolidArrowRotateLeft size={10} />
+          Reset
+        </button>
+      </TooltipTrigger>
+      <TooltipPositioner>
+        <TooltipContent>Reset all final answers</TooltipContent>
+      </TooltipPositioner>
     </Tooltip>
   );
 }
diff --git a/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsIReconciliation.jsx b/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsIReconciliation.jsx
index 673fd24b9..4d3d44b88 100644
--- a/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsIReconciliation.jsx
+++ b/packages/web/src/components/project/reconcile-tab/robins-i-reconcile/RobinsIReconciliation.jsx
@@ -6,7 +6,20 @@
 import { createSignal, createMemo, createEffect, Show, Switch, Match } from 'solid-js';
 import { AiOutlineWarning } from 'solid-icons/ai';
 import { FiArrowLeft, FiArrowRight } from 'solid-icons/fi';
-import { showToast, useConfirmDialog } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 import {
   compareChecklists,
   getSectionBKeys,
@@ -45,7 +58,8 @@ import RobinsISummaryView from './RobinsISummaryView.jsx';
  */
 export default function RobinsIReconciliation(props) {
   const [saving, setSaving] = createSignal(false);
-  const confirmDialog = useConfirmDialog();
+  // Finish confirmation dialog state
+  const [finishDialogOpen, setFinishDialogOpen] = createSignal(false);
 
   // Navigation state (localStorage-backed)
   const getStorageKey = () => {
@@ -343,27 +357,21 @@ export default function RobinsIReconciliation(props) {
     };
   });
 
-  // Handle save
-  async function handleSave() {
+  // Handle save - opens confirmation dialog
+  function handleSave() {
     if (!allAnswered()) {
       showToast.error('Incomplete Review', 'Please review all items before saving.');
       return;
     }
+    setFinishDialogOpen(true);
+  }
 
-    const confirmed = await confirmDialog.open({
-      title: 'Finish reconciliation?',
-      description:
-        'This will mark the reconciled checklist as completed. You will no longer be able to edit these reconciliation answers afterwards.',
-      confirmText: 'Finish',
-      cancelText: 'Cancel',
-      variant: 'warning',
-    });
-
-    if (!confirmed) return;
-
+  // Execute save after confirmation
+  async function confirmSave() {
     setSaving(true);
     try {
       await props.onSaveReconciled?.();
+      setFinishDialogOpen(false);
     } catch (err) {
       console.error('Error saving reconciled checklist:', err);
       showToast.error('Save Failed', 'Failed to save reconciled checklist. Please try again.');
@@ -406,7 +414,30 @@ export default function RobinsIReconciliation(props) {
   return (
     <div class='bg-blue-50'>
       <div class='mx-auto max-w-7xl px-4 py-4'>
-        <confirmDialog.ConfirmDialogComponent />
+        {/* Finish confirmation dialog */}
+        <AlertDialog open={finishDialogOpen()} onOpenChange={setFinishDialogOpen}>
+          <AlertDialogBackdrop />
+          <AlertDialogPositioner>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogIcon variant='warning' />
+                <div>
+                  <AlertDialogTitle>Finish reconciliation?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This will mark the reconciled checklist as completed. You will no longer be able
+                    to edit these reconciliation answers afterwards.
+                  </AlertDialogDescription>
+                </div>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel disabled={saving()}>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant='warning' disabled={saving()} onClick={confirmSave}>
+                  {saving() ? 'Saving...' : 'Finish'}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogPositioner>
+        </AlertDialog>
 
         {/* Critical Risk Warning Banner */}
         <Show when={sectionBCritical()}>
diff --git a/packages/web/src/components/project/todo-tab/ChecklistForm.jsx b/packages/web/src/components/project/todo-tab/ChecklistForm.jsx
index 52b847761..b3491348a 100644
--- a/packages/web/src/components/project/todo-tab/ChecklistForm.jsx
+++ b/packages/web/src/components/project/todo-tab/ChecklistForm.jsx
@@ -4,7 +4,7 @@
 
 import { createSignal } from 'solid-js';
 import { getChecklistTypeOptions, DEFAULT_CHECKLIST_TYPE } from '@/checklist-registry';
-import { Select } from '@corates/ui';
+import { SimpleSelect } from '@/components/ui/select';
 
 export default function ChecklistForm(props) {
   const [type, setType] = createSignal(DEFAULT_CHECKLIST_TYPE);
@@ -20,7 +20,7 @@ export default function ChecklistForm(props) {
     <div class='m-4 rounded-lg border border-blue-200 bg-blue-50 p-4'>
       <div class='space-y-3'>
         <div>
-          <Select
+          <SimpleSelect
             label='Checklist Type'
             value={type()}
             onChange={value => setType(value)}
diff --git a/packages/web/src/components/project/todo-tab/TodoStudyRow.jsx b/packages/web/src/components/project/todo-tab/TodoStudyRow.jsx
index 50f586cea..00a356002 100644
--- a/packages/web/src/components/project/todo-tab/TodoStudyRow.jsx
+++ b/packages/web/src/components/project/todo-tab/TodoStudyRow.jsx
@@ -7,7 +7,7 @@
 
 import { For, Show, createMemo, createSignal } from 'solid-js';
 import { BiRegularChevronRight } from 'solid-icons/bi';
-import { Collapsible } from '@corates/ui';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { getChecklistMetadata } from '@/checklist-registry';
 import { PdfListItem } from '@pdf';
 import ChecklistForm from './ChecklistForm.jsx';
@@ -54,114 +54,116 @@ export default function TodoStudyRow(props) {
     return `${author || 'Unknown'}${year ? ` (${year})` : ''}`;
   };
 
+  // Handle row click - toggle unless clicking on interactive elements or selectable text
+  const handleRowClick = e => {
+    if (!hasPdfs()) return;
+    const target = e.target;
+    const interactive = target.closest('button, [role="button"], [data-selectable]');
+    if (interactive) return;
+    setExpanded(!expanded());
+  };
+
   return (
     <div class='overflow-hidden rounded-lg border border-gray-200 bg-white transition-colors hover:border-gray-300'>
-      <Collapsible
-        open={expanded()}
-        onOpenChange={({ open }) => {
-          // Only toggle if there are PDFs to show
-          if (hasPdfs()) {
-            setExpanded(open);
-          }
-        }}
-        trigger={
-          <div
-            class={`flex items-center gap-3 px-4 py-3 select-none ${hasPdfs() ? 'cursor-pointer' : ''}`}
-          >
-            {/* Chevron indicator (only if has PDFs) */}
-            <Show when={hasPdfs()}>
-              <div class='-ml-1 shrink-0 p-1'>
-                <BiRegularChevronRight
-                  class={`h-5 w-5 text-gray-400 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
-                />
-              </div>
-            </Show>
-
-            {/* Study info */}
-            <div class='min-w-0 flex-1'>
-              <div class='flex items-center gap-2'>
-                <span class='truncate font-medium text-gray-900'>{study().name}</span>
-              </div>
-              {/* Citation line - selectable */}
-              <Show when={citationLine()}>
-                <p
-                  class='w-fit cursor-text truncate text-xs text-gray-500 select-text'
-                  data-selectable
-                >
-                  {citationLine()}
-                  <Show when={hasPdfs()}>
-                    <span class='text-gray-400'> · {pdfCount()} PDFs</span>
-                  </Show>
-                </p>
-              </Show>
-              <Show when={!citationLine() && hasPdfs()}>
-                <p class='text-xs text-gray-400'>{pdfCount()} PDFs</p>
-              </Show>
+      <Collapsible open={expanded()}>
+        <div
+          class={`flex items-center gap-3 px-4 py-3 select-none ${hasPdfs() ? 'cursor-pointer' : ''}`}
+          onClick={handleRowClick}
+        >
+          {/* Chevron indicator (only if has PDFs) */}
+          <Show when={hasPdfs()}>
+            <div class='-ml-1 shrink-0 p-1'>
+              <BiRegularChevronRight
+                class={`h-5 w-5 text-gray-400 transition-transform duration-200 ${expanded() ? 'rotate-90' : ''}`}
+              />
             </div>
+          </Show>
 
-            {/* Checklist type badge - selectable */}
-            <Show when={checklist()}>
-              <span
-                class='inline-flex shrink-0 cursor-text items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 select-text'
+          {/* Study info */}
+          <div class='min-w-0 flex-1'>
+            <div class='flex items-center gap-2'>
+              <span class='truncate font-medium text-gray-900'>{study().name}</span>
+            </div>
+            {/* Citation line - selectable */}
+            <Show when={citationLine()}>
+              <p
+                class='w-fit cursor-text truncate text-xs text-gray-500 select-text'
                 data-selectable
               >
-                {getChecklistMetadata(checklist().type)?.name || 'Checklist'}
-              </span>
+                {citationLine()}
+                <Show when={hasPdfs()}>
+                  <span class='text-gray-400'> · {pdfCount()} PDFs</span>
+                </Show>
+              </p>
             </Show>
-
-            {/* Checklist status badge */}
-            <Show when={checklist()}>
-              <span
-                class={`inline-flex shrink-0 cursor-text items-center rounded-full px-2.5 py-1 text-xs font-medium select-text ${getStatusStyle(checklist().status)}`}
-                data-selectable
-              >
-                {getStatusLabel(checklist().status)}
-              </span>
+            <Show when={!citationLine() && hasPdfs()}>
+              <p class='text-xs text-gray-400'>{pdfCount()} PDFs</p>
             </Show>
+          </div>
 
-            {/* Open checklist button (when checklist exists) */}
-            <Show when={checklist()}>
-              <button
-                onClick={e => {
-                  e.stopPropagation();
-                  props.onOpenChecklist?.(checklist().id);
-                }}
-                class='shrink-0 rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
-              >
-                Open
-              </button>
-            </Show>
+          {/* Checklist type badge - selectable */}
+          <Show when={checklist()}>
+            <span
+              class='inline-flex shrink-0 cursor-text items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 select-text'
+              data-selectable
+            >
+              {getChecklistMetadata(checklist().type)?.name || 'Checklist'}
+            </span>
+          </Show>
 
-            {/* Select Checklist button (when no checklist) */}
-            <Show when={!checklist()}>
-              <button
-                onClick={e => {
-                  e.stopPropagation();
-                  props.onToggleChecklistForm?.();
-                }}
-                class='shrink-0 rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
-              >
-                Select Checklist
-              </button>
-            </Show>
-          </div>
-        }
-      >
-        {/* Expanded PDF Section */}
-        <Show when={hasPdfs()}>
-          <div class='space-y-2 border-t border-gray-100 px-4 py-3'>
-            <For each={sortedPdfs()}>
-              {pdf => (
-                <PdfListItem
-                  pdf={pdf}
-                  onView={() => props.onViewPdf?.(pdf)}
-                  onDownload={() => props.onDownloadPdf?.(pdf)}
-                  readOnly={true}
-                />
-              )}
-            </For>
-          </div>
-        </Show>
+          {/* Checklist status badge */}
+          <Show when={checklist()}>
+            <span
+              class={`inline-flex shrink-0 cursor-text items-center rounded-full px-2.5 py-1 text-xs font-medium select-text ${getStatusStyle(checklist().status)}`}
+              data-selectable
+            >
+              {getStatusLabel(checklist().status)}
+            </span>
+          </Show>
+
+          {/* Open checklist button (when checklist exists) */}
+          <Show when={checklist()}>
+            <button
+              onClick={e => {
+                e.stopPropagation();
+                props.onOpenChecklist?.(checklist().id);
+              }}
+              class='shrink-0 rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+            >
+              Open
+            </button>
+          </Show>
+
+          {/* Select Checklist button (when no checklist) */}
+          <Show when={!checklist()}>
+            <button
+              onClick={e => {
+                e.stopPropagation();
+                props.onToggleChecklistForm?.();
+              }}
+              class='shrink-0 rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+            >
+              Select Checklist
+            </button>
+          </Show>
+        </div>
+        <CollapsibleContent>
+          {/* Expanded PDF Section */}
+          <Show when={hasPdfs()}>
+            <div class='space-y-2 border-t border-gray-100 px-4 py-3'>
+              <For each={sortedPdfs()}>
+                {pdf => (
+                  <PdfListItem
+                    pdf={pdf}
+                    onView={() => props.onViewPdf?.(pdf)}
+                    onDownload={() => props.onDownloadPdf?.(pdf)}
+                    readOnly={true}
+                  />
+                )}
+              </For>
+            </div>
+          </Show>
+        </CollapsibleContent>
       </Collapsible>
 
       {/* Checklist Form (when adding a new checklist) - outside collapsible */}
diff --git a/packages/web/src/components/settings/SettingsSidebar.jsx b/packages/web/src/components/settings/SettingsSidebar.jsx
index 5c0e0d185..17bc48ad5 100644
--- a/packages/web/src/components/settings/SettingsSidebar.jsx
+++ b/packages/web/src/components/settings/SettingsSidebar.jsx
@@ -1,7 +1,12 @@
 import { Show, For, createSignal, createEffect, onCleanup } from 'solid-js';
 import { useNavigate, useLocation } from '@solidjs/router';
 import { Portal } from 'solid-js/web';
-import { Tooltip } from '@corates/ui';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 import {
   FiChevronsLeft,
   FiChevronsRight,
@@ -152,18 +157,23 @@ export default function SettingsSidebar(props) {
         {item => {
           const Icon = item.icon;
           return (
-            <Tooltip content={item.label} positioning={{ placement: 'right' }}>
-              <button
-                onClick={() => navigate(item.path)}
-                class={`flex h-8 w-8 items-center justify-center rounded-md transition-colors ${
-                  isCurrentPath(item.path) ?
-                    'bg-blue-100 text-blue-700'
-                  : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700'
-                }`}
-                aria-label={item.label}
-              >
-                <Icon class='h-4 w-4' />
-              </button>
+            <Tooltip positioning={{ placement: 'right' }}>
+              <TooltipTrigger>
+                <button
+                  onClick={() => navigate(item.path)}
+                  class={`flex h-8 w-8 items-center justify-center rounded-md transition-colors ${
+                    isCurrentPath(item.path) ?
+                      'bg-blue-100 text-blue-700'
+                    : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700'
+                  }`}
+                  aria-label={item.label}
+                >
+                  <Icon class='h-4 w-4' />
+                </button>
+              </TooltipTrigger>
+              <TooltipPositioner>
+                <TooltipContent>{item.label}</TooltipContent>
+              </TooltipPositioner>
             </Tooltip>
           );
         }}
@@ -184,14 +194,19 @@ export default function SettingsSidebar(props) {
           <div class='flex shrink-0 items-center border-b border-gray-100 p-2'>
             {/* Collapsed: expand button */}
             <Show when={!isExpanded()}>
-              <Tooltip content='Expand sidebar' positioning={{ placement: 'right' }}>
-                <button
-                  onClick={() => props.onToggleDesktop?.()}
-                  class='hidden h-8 w-8 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 md:flex'
-                  aria-label='Expand sidebar'
-                >
-                  <FiChevronsRight class='h-4 w-4' />
-                </button>
+              <Tooltip positioning={{ placement: 'right' }}>
+                <TooltipTrigger>
+                  <button
+                    onClick={() => props.onToggleDesktop?.()}
+                    class='hidden h-8 w-8 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 md:flex'
+                    aria-label='Expand sidebar'
+                  >
+                    <FiChevronsRight class='h-4 w-4' />
+                  </button>
+                </TooltipTrigger>
+                <TooltipPositioner>
+                  <TooltipContent>Expand sidebar</TooltipContent>
+                </TooltipPositioner>
               </Tooltip>
             </Show>
 
@@ -209,14 +224,19 @@ export default function SettingsSidebar(props) {
             {/* Expanded: collapse button */}
             <Show when={isExpanded()}>
               <div class='flex-1' />
-              <Tooltip content='Collapse sidebar' positioning={{ placement: 'right' }}>
-                <button
-                  onClick={() => props.onToggleDesktop?.()}
-                  class='hidden h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 md:flex'
-                  aria-label='Collapse sidebar'
-                >
-                  <FiChevronsLeft class='h-4 w-4' />
-                </button>
+              <Tooltip positioning={{ placement: 'right' }}>
+                <TooltipTrigger>
+                  <button
+                    onClick={() => props.onToggleDesktop?.()}
+                    class='hidden h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 md:flex'
+                    aria-label='Collapse sidebar'
+                  >
+                    <FiChevronsLeft class='h-4 w-4' />
+                  </button>
+                </TooltipTrigger>
+                <TooltipPositioner>
+                  <TooltipContent>Collapse sidebar</TooltipContent>
+                </TooltipPositioner>
               </Tooltip>
             </Show>
 
diff --git a/packages/web/src/components/settings/pages/AccountProviderCard.jsx b/packages/web/src/components/settings/pages/AccountProviderCard.jsx
index 80f48cf0a..b2fe32767 100644
--- a/packages/web/src/components/settings/pages/AccountProviderCard.jsx
+++ b/packages/web/src/components/settings/pages/AccountProviderCard.jsx
@@ -7,7 +7,12 @@
 
 import { Show, createMemo } from 'solid-js';
 import { FiMail, FiTrash2, FiCheck, FiExternalLink } from 'solid-icons/fi';
-import { Tooltip } from '@corates/ui';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 
 /**
  * Format ORCID ID for display (add hyphens if not present)
@@ -108,8 +113,15 @@ export default function AccountProviderCard(props) {
         when={props.canUnlink}
         fallback={
           <Show when={!isCredential()}>
-            <Tooltip content="Can't unlink your only sign-in method. Link another account first.">
-              <span class='cursor-help text-xs text-gray-400'>Only sign-in method</span>
+            <Tooltip>
+              <TooltipTrigger>
+                <span class='cursor-help text-xs text-gray-400'>Only sign-in method</span>
+              </TooltipTrigger>
+              <TooltipPositioner>
+                <TooltipContent>
+                  Can't unlink your only sign-in method. Link another account first.
+                </TooltipContent>
+              </TooltipPositioner>
             </Tooltip>
           </Show>
         }
diff --git a/packages/web/src/components/settings/pages/GoogleDriveSettings.jsx b/packages/web/src/components/settings/pages/GoogleDriveSettings.jsx
index 8f97aac00..56b1fb9d1 100644
--- a/packages/web/src/components/settings/pages/GoogleDriveSettings.jsx
+++ b/packages/web/src/components/settings/pages/GoogleDriveSettings.jsx
@@ -4,7 +4,7 @@
 
 import { createSignal, onMount, Show } from 'solid-js';
 import { FiX } from 'solid-icons/fi';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import {
   getGoogleDriveStatus,
   disconnectGoogleDrive,
diff --git a/packages/web/src/components/settings/pages/LinkedAccountsSection.jsx b/packages/web/src/components/settings/pages/LinkedAccountsSection.jsx
index 4908432db..786b81130 100644
--- a/packages/web/src/components/settings/pages/LinkedAccountsSection.jsx
+++ b/packages/web/src/components/settings/pages/LinkedAccountsSection.jsx
@@ -11,11 +11,21 @@
  */
 
 import { createSignal, createMemo, For, Show, onMount } from 'solid-js';
-import { FiLink, FiMail, FiInfo, FiAlertCircle } from 'solid-icons/fi';
+import { FiLink, FiMail, FiInfo, FiAlertCircle, FiX } from 'solid-icons/fi';
 import { authClient } from '@api/auth-client.js';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { useLinkedAccounts } from '@/primitives/useLinkedAccounts.js';
-import { showToast, Dialog } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import AccountProviderCard from './AccountProviderCard.jsx';
 import MergeAccountsDialog from './MergeAccountsDialog.jsx';
 import { parseOAuthError, getLinkErrorMessage } from '@lib/account-linking-errors.js';
@@ -359,42 +369,54 @@ export default function LinkedAccountsSection() {
             setUnlinkError(null);
           }
         }}
-        title={`Unlink ${unlinkProviderName()}?`}
       >
-        <div class='space-y-4'>
-          <p class='text-gray-600'>
-            You won't be able to sign in with <strong>{unlinkProviderName()}</strong> anymore. Your
-            CoRATES data will not be affected.
-          </p>
-
-          <p class='text-sm text-gray-500'>
-            <strong>Note:</strong> If you sign in with {unlinkProviderName()} later without linking
-            first, a new separate account will be created.
-          </p>
-
-          {/* Error message */}
-          <Show when={unlinkError()}>
-            <div class='rounded-md border border-red-200 bg-red-50 p-3'>
-              <p class='text-sm text-red-700'>{unlinkError()}</p>
-            </div>
-          </Show>
-
-          <div class='flex justify-end gap-3 pt-2'>
-            <button
-              onClick={() => setShowUnlinkConfirm(false)}
-              class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
-            >
-              Cancel
-            </button>
-            <button
-              onClick={confirmUnlink}
-              disabled={unlinkingId() !== null}
-              class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
-            >
-              {unlinkingId() ? 'Unlinking...' : 'Unlink'}
-            </button>
-          </div>
-        </div>
+        <DialogBackdrop />
+        <DialogPositioner>
+          <DialogContent class='max-w-md'>
+            <DialogHeader>
+              <DialogTitle>Unlink {unlinkProviderName()}?</DialogTitle>
+              <DialogCloseTrigger aria-label='Close'>
+                <FiX class='h-5 w-5' />
+              </DialogCloseTrigger>
+            </DialogHeader>
+            <DialogBody>
+              <div class='space-y-4'>
+                <p class='text-gray-600'>
+                  You won't be able to sign in with <strong>{unlinkProviderName()}</strong> anymore.
+                  Your CoRATES data will not be affected.
+                </p>
+
+                <p class='text-sm text-gray-500'>
+                  <strong>Note:</strong> If you sign in with {unlinkProviderName()} later without
+                  linking first, a new separate account will be created.
+                </p>
+
+                {/* Error message */}
+                <Show when={unlinkError()}>
+                  <div class='rounded-md border border-red-200 bg-red-50 p-3'>
+                    <p class='text-sm text-red-700'>{unlinkError()}</p>
+                  </div>
+                </Show>
+
+                <div class='flex justify-end gap-3 pt-2'>
+                  <button
+                    onClick={() => setShowUnlinkConfirm(false)}
+                    class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={confirmUnlink}
+                    disabled={unlinkingId() !== null}
+                    class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
+                  >
+                    {unlinkingId() ? 'Unlinking...' : 'Unlink'}
+                  </button>
+                </div>
+              </div>
+            </DialogBody>
+          </DialogContent>
+        </DialogPositioner>
       </Dialog>
 
       {/* Merge accounts dialog - shown when linking conflicts with another user */}
diff --git a/packages/web/src/components/settings/pages/MergeAccountsDialog.jsx b/packages/web/src/components/settings/pages/MergeAccountsDialog.jsx
index bbf699207..bfbd6ffa4 100644
--- a/packages/web/src/components/settings/pages/MergeAccountsDialog.jsx
+++ b/packages/web/src/components/settings/pages/MergeAccountsDialog.jsx
@@ -13,9 +13,20 @@
  * 6. SUCCESS - Done
  */
 
-import { createSignal, createEffect, Show, createMemo } from 'solid-js';
-import { FiAlertTriangle, FiCheck, FiLoader, FiUserPlus, FiMail } from 'solid-icons/fi';
-import { Dialog, PinInput, showToast } from '@corates/ui';
+import { createSignal, createEffect, Show, createMemo, Index } from 'solid-js';
+import { FiAlertTriangle, FiCheck, FiLoader, FiUserPlus, FiMail, FiX } from 'solid-icons/fi';
+import { showToast } from '@/components/ui/toast';
+import { PinInput, PinInputControl, PinInputField } from '@/components/ui/pin-input';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import { initiateMerge, verifyMergeCode, completeMerge, cancelMerge } from '@api/account-merge.js';
 
 // Merge flow steps
@@ -177,9 +188,10 @@ export default function MergeAccountsDialog(props) {
   }
 
   async function handleCancel() {
-    if (mergeToken()) {
+    const token = mergeToken();
+    if (token && typeof token === 'string' && token.length > 0) {
       try {
-        await cancelMerge(mergeToken());
+        await cancelMerge(token);
       } catch (err) {
         console.warn('Failed to cancel merge:', err.message);
       }
@@ -217,254 +229,285 @@ export default function MergeAccountsDialog(props) {
       open={isOpen()}
       onOpenChange={open => {
         if (!open && step() !== STEPS.MERGING) {
-          handleCancel();
+          // Only call handleCancel if we have an active merge token to cancel
+          if (mergeToken()) {
+            handleCancel();
+          } else {
+            props.onOpenChange?.(false);
+          }
         }
       }}
-      title={step() === STEPS.SUCCESS ? 'Accounts Merged' : 'Merge Accounts'}
     >
-      <div class='space-y-4'>
-        {/* Step: Prompt */}
-        <Show when={step() === STEPS.PROMPT}>
-          <div class='flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3'>
-            <FiAlertTriangle class='mt-0.5 h-5 w-5 shrink-0 text-amber-600' />
-            <div class='text-sm text-amber-800'>
-              <p class='font-medium'>This {providerName()} account belongs to another user</p>
-              <p class='mt-1'>
-                If you own both accounts and want to combine them, you can merge them into one.
-              </p>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent class='max-w-md'>
+          <DialogHeader>
+            <DialogTitle>
+              {step() === STEPS.SUCCESS ? 'Accounts Merged' : 'Merge Accounts'}
+            </DialogTitle>
+            <DialogCloseTrigger>
+              <FiX class='h-5 w-5' />
+            </DialogCloseTrigger>
+          </DialogHeader>
+          <DialogBody>
+            <div class='space-y-4'>
+              {/* Step: Prompt */}
+              <Show when={step() === STEPS.PROMPT}>
+                <div class='flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3'>
+                  <FiAlertTriangle class='mt-0.5 h-5 w-5 shrink-0 text-amber-600' />
+                  <div class='text-sm text-amber-800'>
+                    <p class='font-medium'>This {providerName()} account belongs to another user</p>
+                    <p class='mt-1'>
+                      If you own both accounts and want to combine them, you can merge them into
+                      one.
+                    </p>
+                  </div>
+                </div>
+
+                <Show when={isOrcidConflict()}>
+                  <div class='rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800'>
+                    <p class='font-medium'>ORCID Account Merge</p>
+                    <p class='mt-1'>
+                      You can enter either the email address or your ORCID ID (e.g.,
+                      0000-0001-2345-6789) to identify the account you want to merge.
+                    </p>
+                  </div>
+                </Show>
+
+                <p class='text-sm text-gray-600'>
+                  Merging will combine all your projects, data, and sign-in methods into this
+                  account. The other account will be deleted.
+                </p>
+
+                <div class='flex justify-end gap-3 pt-2'>
+                  <button
+                    onClick={() => props.onOpenChange?.(false)}
+                    class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={() => setStep(STEPS.ENTER_EMAIL)}
+                    class='inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'
+                  >
+                    <FiUserPlus class='h-4 w-4' />
+                    Merge Accounts
+                  </button>
+                </div>
+              </Show>
+
+              {/* Step: Enter Email */}
+              <Show when={step() === STEPS.ENTER_EMAIL}>
+                <p class='text-sm text-gray-600'>
+                  {isOrcidConflict() ?
+                    `Enter the email address or ORCID ID (e.g., 0000-0001-2345-6789) of the other CoRATES account. We'll send a verification code to prove you own it.`
+                  : `Enter the email address of the other CoRATES account. We'll send a verification code to prove you own it.`
+                  }
+                </p>
+
+                <input
+                  type='text'
+                  value={targetEmail()}
+                  onInput={e => setTargetEmail(e.target.value)}
+                  onKeyDown={e => e.key === 'Enter' && handleSendCode()}
+                  placeholder={
+                    isOrcidConflict() ?
+                      'Email or ORCID ID (e.g., 0000-0001-2345-6789)'
+                    : 'other@example.com'
+                  }
+                  class='w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500'
+                  disabled={loading()}
+                />
+
+                <Show when={error()}>
+                  <p class='text-sm text-red-600'>{error()}</p>
+                </Show>
+
+                <div class='flex justify-end gap-3 pt-2'>
+                  <button
+                    onClick={() => setStep(STEPS.PROMPT)}
+                    class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
+                    disabled={loading()}
+                  >
+                    Back
+                  </button>
+                  <button
+                    onClick={handleSendCode}
+                    disabled={loading() || !targetEmail().trim()}
+                    class='inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50'
+                  >
+                    {loading() ?
+                      <FiLoader class='h-4 w-4 animate-spin' />
+                    : <FiMail class='h-4 w-4' />}
+                    Send Code
+                  </button>
+                </div>
+              </Show>
+
+              {/* Step: Enter Code */}
+              <Show when={step() === STEPS.ENTER_CODE}>
+                <div class='flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-3'>
+                  <FiMail class='mt-0.5 h-5 w-5 shrink-0 text-blue-600' />
+                  <div class='text-sm text-blue-800'>
+                    <p class='font-medium'>Verification code sent</p>
+                    <p class='mt-1'>
+                      Check{' '}
+                      <strong>
+                        {targetOrcidId() ? formatOrcidId(targetOrcidId()) : targetEmail()}
+                      </strong>{' '}
+                      for a 6-digit code.
+                    </p>
+                  </div>
+                </div>
+
+                <div>
+                  <label class='mb-1 block text-center text-sm font-medium text-gray-700'>
+                    Verification Code
+                  </label>
+                  <PinInput
+                    otp
+                    onValueChange={details => setVerificationCode(details.valueAsString)}
+                    onValueComplete={details => handleVerifyCode(details.valueAsString)}
+                    invalid={!!error()}
+                  >
+                    <PinInputControl>
+                      <Index each={[0, 1, 2, 3, 4, 5]}>
+                        {index => <PinInputField index={index()} />}
+                      </Index>
+                    </PinInputControl>
+                  </PinInput>
+                </div>
+
+                <Show when={error()}>
+                  <p class='text-sm text-red-600'>{error()}</p>
+                </Show>
+
+                <p class='text-xs text-gray-500'>
+                  Didn't receive the code?{' '}
+                  <button onClick={handleResendCode} class='text-blue-600 hover:underline'>
+                    Send again
+                  </button>
+                </p>
+
+                <div class='flex justify-end gap-3 pt-2'>
+                  <button
+                    onClick={handleCancel}
+                    class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
+                    disabled={loading()}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleVerifyCode}
+                    disabled={loading() || verificationCode().length !== 6}
+                    class='inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50'
+                  >
+                    {loading() ?
+                      <FiLoader class='h-4 w-4 animate-spin' />
+                    : null}
+                    Verify Code
+                  </button>
+                </div>
+              </Show>
+
+              {/* Step: Confirm */}
+              <Show when={step() === STEPS.CONFIRM}>
+                <div class='flex items-start gap-3 rounded-lg border border-green-200 bg-green-50 p-3'>
+                  <FiCheck class='mt-0.5 h-5 w-5 shrink-0 text-green-600' />
+                  <div class='text-sm text-green-800'>
+                    <p class='font-medium'>Email verified!</p>
+                    <p class='mt-1'>
+                      You've confirmed access to{' '}
+                      {targetOrcidId() ? formatOrcidId(targetOrcidId()) : targetEmail()}.
+                    </p>
+                  </div>
+                </div>
+
+                <Show when={mergePreview()}>
+                  <div class='rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm'>
+                    <p class='mb-2 font-medium text-gray-700'>After merging, you'll have:</p>
+                    <ul class='list-inside list-disc space-y-1 text-gray-600'>
+                      <li>
+                        Sign-in methods:{' '}
+                        {[
+                          ...new Set([
+                            ...mergePreview().currentProviders,
+                            ...mergePreview().targetProviders,
+                          ]),
+                        ].join(', ') || 'email'}
+                      </li>
+                      <li>All projects and data from both accounts</li>
+                    </ul>
+                  </div>
+                </Show>
+
+                <div class='rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800'>
+                  <p class='font-medium'>Warning: This action cannot be undone.</p>
+                  <p class='mt-1'>
+                    The account ({targetOrcidId() ? formatOrcidId(targetOrcidId()) : targetEmail()})
+                    will be deleted and all its data merged into your current account.
+                  </p>
+                </div>
+
+                <Show when={error()}>
+                  <p class='text-sm text-red-600'>{error()}</p>
+                </Show>
+
+                <div class='flex justify-end gap-3 pt-2'>
+                  <button
+                    onClick={handleCancel}
+                    class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
+                    disabled={loading()}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleCompleteMerge}
+                    disabled={loading()}
+                    class='inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
+                  >
+                    {loading() ?
+                      <FiLoader class='h-4 w-4 animate-spin' />
+                    : null}
+                    Merge Accounts
+                  </button>
+                </div>
+              </Show>
+
+              {/* Step: Merging */}
+              <Show when={step() === STEPS.MERGING}>
+                <div class='flex flex-col items-center py-6'>
+                  <FiLoader class='h-8 w-8 animate-spin text-blue-600' />
+                  <p class='mt-3 text-gray-600'>Merging accounts...</p>
+                  <p class='mt-1 text-sm text-gray-500'>This may take a moment.</p>
+                </div>
+              </Show>
+
+              {/* Step: Success */}
+              <Show when={step() === STEPS.SUCCESS}>
+                <div class='flex flex-col items-center py-6'>
+                  <div class='flex h-12 w-12 items-center justify-center rounded-full bg-green-100'>
+                    <FiCheck class='h-6 w-6 text-green-600' />
+                  </div>
+                  <p class='mt-3 font-medium text-gray-900'>Accounts Merged Successfully!</p>
+                  <p class='mt-1 text-sm text-gray-600'>
+                    All data has been combined into your account.
+                  </p>
+                </div>
+
+                <div class='flex justify-center pt-2'>
+                  <button
+                    onClick={() => props.onOpenChange?.(false)}
+                    class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'
+                  >
+                    Done
+                  </button>
+                </div>
+              </Show>
             </div>
-          </div>
-
-          <Show when={isOrcidConflict()}>
-            <div class='rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800'>
-              <p class='font-medium'>ORCID Account Merge</p>
-              <p class='mt-1'>
-                You can enter either the email address or your ORCID ID (e.g., 0000-0001-2345-6789)
-                to identify the account you want to merge.
-              </p>
-            </div>
-          </Show>
-
-          <p class='text-sm text-gray-600'>
-            Merging will combine all your projects, data, and sign-in methods into this account. The
-            other account will be deleted.
-          </p>
-
-          <div class='flex justify-end gap-3 pt-2'>
-            <button
-              onClick={() => props.onOpenChange?.(false)}
-              class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
-            >
-              Cancel
-            </button>
-            <button
-              onClick={() => setStep(STEPS.ENTER_EMAIL)}
-              class='inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'
-            >
-              <FiUserPlus class='h-4 w-4' />
-              Merge Accounts
-            </button>
-          </div>
-        </Show>
-
-        {/* Step: Enter Email */}
-        <Show when={step() === STEPS.ENTER_EMAIL}>
-          <p class='text-sm text-gray-600'>
-            {isOrcidConflict() ?
-              `Enter the email address or ORCID ID (e.g., 0000-0001-2345-6789) of the other CoRATES account. We'll send a verification code to prove you own it.`
-            : `Enter the email address of the other CoRATES account. We'll send a verification code to prove you own it.`
-            }
-          </p>
-
-          <input
-            type='text'
-            value={targetEmail()}
-            onInput={e => setTargetEmail(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && handleSendCode()}
-            placeholder={
-              isOrcidConflict() ?
-                'Email or ORCID ID (e.g., 0000-0001-2345-6789)'
-              : 'other@example.com'
-            }
-            class='w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500'
-            disabled={loading()}
-          />
-
-          <Show when={error()}>
-            <p class='text-sm text-red-600'>{error()}</p>
-          </Show>
-
-          <div class='flex justify-end gap-3 pt-2'>
-            <button
-              onClick={() => setStep(STEPS.PROMPT)}
-              class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
-              disabled={loading()}
-            >
-              Back
-            </button>
-            <button
-              onClick={handleSendCode}
-              disabled={loading() || !targetEmail().trim()}
-              class='inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50'
-            >
-              {loading() ?
-                <FiLoader class='h-4 w-4 animate-spin' />
-              : <FiMail class='h-4 w-4' />}
-              Send Code
-            </button>
-          </div>
-        </Show>
-
-        {/* Step: Enter Code */}
-        <Show when={step() === STEPS.ENTER_CODE}>
-          <div class='flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-3'>
-            <FiMail class='mt-0.5 h-5 w-5 shrink-0 text-blue-600' />
-            <div class='text-sm text-blue-800'>
-              <p class='font-medium'>Verification code sent</p>
-              <p class='mt-1'>
-                Check{' '}
-                <strong>{targetOrcidId() ? formatOrcidId(targetOrcidId()) : targetEmail()}</strong>{' '}
-                for a 6-digit code.
-              </p>
-            </div>
-          </div>
-
-          <div>
-            <label class='mb-1 block text-center text-sm font-medium text-gray-700'>
-              Verification Code
-            </label>
-            <PinInput
-              onInput={value => setVerificationCode(value)}
-              onComplete={handleVerifyCode}
-              isError={!!error()}
-            />
-          </div>
-
-          <Show when={error()}>
-            <p class='text-sm text-red-600'>{error()}</p>
-          </Show>
-
-          <p class='text-xs text-gray-500'>
-            Didn't receive the code?{' '}
-            <button onClick={handleResendCode} class='text-blue-600 hover:underline'>
-              Send again
-            </button>
-          </p>
-
-          <div class='flex justify-end gap-3 pt-2'>
-            <button
-              onClick={handleCancel}
-              class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
-              disabled={loading()}
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleVerifyCode}
-              disabled={loading() || verificationCode().length !== 6}
-              class='inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50'
-            >
-              {loading() ?
-                <FiLoader class='h-4 w-4 animate-spin' />
-              : null}
-              Verify Code
-            </button>
-          </div>
-        </Show>
-
-        {/* Step: Confirm */}
-        <Show when={step() === STEPS.CONFIRM}>
-          <div class='flex items-start gap-3 rounded-lg border border-green-200 bg-green-50 p-3'>
-            <FiCheck class='mt-0.5 h-5 w-5 shrink-0 text-green-600' />
-            <div class='text-sm text-green-800'>
-              <p class='font-medium'>Email verified!</p>
-              <p class='mt-1'>
-                You've confirmed access to{' '}
-                {targetOrcidId() ? formatOrcidId(targetOrcidId()) : targetEmail()}.
-              </p>
-            </div>
-          </div>
-
-          <Show when={mergePreview()}>
-            <div class='rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm'>
-              <p class='mb-2 font-medium text-gray-700'>After merging, you'll have:</p>
-              <ul class='list-inside list-disc space-y-1 text-gray-600'>
-                <li>
-                  Sign-in methods:{' '}
-                  {[
-                    ...new Set([
-                      ...mergePreview().currentProviders,
-                      ...mergePreview().targetProviders,
-                    ]),
-                  ].join(', ') || 'email'}
-                </li>
-                <li>All projects and data from both accounts</li>
-              </ul>
-            </div>
-          </Show>
-
-          <div class='rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800'>
-            <p class='font-medium'>Warning: This action cannot be undone.</p>
-            <p class='mt-1'>
-              The account ({targetOrcidId() ? formatOrcidId(targetOrcidId()) : targetEmail()}) will
-              be deleted and all its data merged into your current account.
-            </p>
-          </div>
-
-          <Show when={error()}>
-            <p class='text-sm text-red-600'>{error()}</p>
-          </Show>
-
-          <div class='flex justify-end gap-3 pt-2'>
-            <button
-              onClick={handleCancel}
-              class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200'
-              disabled={loading()}
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleCompleteMerge}
-              disabled={loading()}
-              class='inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
-            >
-              {loading() ?
-                <FiLoader class='h-4 w-4 animate-spin' />
-              : null}
-              Merge Accounts
-            </button>
-          </div>
-        </Show>
-
-        {/* Step: Merging */}
-        <Show when={step() === STEPS.MERGING}>
-          <div class='flex flex-col items-center py-6'>
-            <FiLoader class='h-8 w-8 animate-spin text-blue-600' />
-            <p class='mt-3 text-gray-600'>Merging accounts...</p>
-            <p class='mt-1 text-sm text-gray-500'>This may take a moment.</p>
-          </div>
-        </Show>
-
-        {/* Step: Success */}
-        <Show when={step() === STEPS.SUCCESS}>
-          <div class='flex flex-col items-center py-6'>
-            <div class='flex h-12 w-12 items-center justify-center rounded-full bg-green-100'>
-              <FiCheck class='h-6 w-6 text-green-600' />
-            </div>
-            <p class='mt-3 font-medium text-gray-900'>Accounts Merged Successfully!</p>
-            <p class='mt-1 text-sm text-gray-600'>All data has been combined into your account.</p>
-          </div>
-
-          <div class='flex justify-center pt-2'>
-            <button
-              onClick={() => props.onOpenChange?.(false)}
-              class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700'
-            >
-              Done
-            </button>
-          </div>
-        </Show>
-      </div>
+          </DialogBody>
+        </DialogContent>
+      </DialogPositioner>
     </Dialog>
   );
 }
diff --git a/packages/web/src/components/settings/pages/NotificationsSettings.jsx b/packages/web/src/components/settings/pages/NotificationsSettings.jsx
index 9f365fcca..aa521915e 100644
--- a/packages/web/src/components/settings/pages/NotificationsSettings.jsx
+++ b/packages/web/src/components/settings/pages/NotificationsSettings.jsx
@@ -4,7 +4,7 @@
 
 import { createSignal } from 'solid-js';
 import { FiBell, FiMoon } from 'solid-icons/fi';
-import { Switch } from '@corates/ui';
+import { SwitchRoot, SwitchControl, SwitchThumb, SwitchHiddenInput } from '@/components/ui/switch';
 
 export default function NotificationsSettings() {
   // Notification settings
@@ -33,7 +33,12 @@ export default function NotificationsSettings() {
                 <p class='font-medium text-gray-900'>Email Notifications</p>
                 <p class='text-sm text-gray-500'>Receive email notifications about your account.</p>
               </div>
-              <Switch checked={emailNotifications()} onChange={setEmailNotifications} />
+              <SwitchRoot checked={emailNotifications()} onCheckedChange={setEmailNotifications}>
+                <SwitchControl>
+                  <SwitchThumb />
+                </SwitchControl>
+                <SwitchHiddenInput />
+              </SwitchRoot>
             </div>
             <div class='flex items-center justify-between'>
               <div>
@@ -42,7 +47,12 @@ export default function NotificationsSettings() {
                   Get notified when collaborators make changes to your projects.
                 </p>
               </div>
-              <Switch checked={projectUpdates()} onChange={setProjectUpdates} />
+              <SwitchRoot checked={projectUpdates()} onCheckedChange={setProjectUpdates}>
+                <SwitchControl>
+                  <SwitchThumb />
+                </SwitchControl>
+                <SwitchHiddenInput />
+              </SwitchRoot>
             </div>
           </div>
         </div>
@@ -61,7 +71,12 @@ export default function NotificationsSettings() {
                 <p class='font-medium text-gray-900'>Dark Mode</p>
                 <p class='text-sm text-gray-500'>Use dark theme across the application.</p>
               </div>
-              <Switch checked={darkMode()} onChange={setDarkMode} disabled />
+              <SwitchRoot checked={darkMode()} onCheckedChange={setDarkMode} disabled>
+                <SwitchControl>
+                  <SwitchThumb />
+                </SwitchControl>
+                <SwitchHiddenInput />
+              </SwitchRoot>
             </div>
           </div>
         </div>
diff --git a/packages/web/src/components/settings/pages/SessionManagement.jsx b/packages/web/src/components/settings/pages/SessionManagement.jsx
index 6b5f520a1..ecb425df7 100644
--- a/packages/web/src/components/settings/pages/SessionManagement.jsx
+++ b/packages/web/src/components/settings/pages/SessionManagement.jsx
@@ -6,7 +6,16 @@
 import { createSignal, createResource, Show, For, Suspense } from 'solid-js';
 import { FiMonitor, FiSmartphone, FiGlobe, FiTrash2, FiLogOut, FiLoader } from 'solid-icons/fi';
 import { useBetterAuth } from '@api/better-auth-store.js';
-import { showToast, DialogPrimitive as Dialog } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogCloseTrigger,
+} from '@/components/ui/dialog';
 import { handleError } from '@/lib/error-utils.js';
 
 /**
@@ -349,25 +358,20 @@ export default function SessionManagement() {
       </Suspense>
 
       {/* Confirmation Dialog for Sign Out Everywhere */}
-      <Dialog.Root
-        open={showRevokeAllDialog()}
-        onOpenChange={({ open }) => setShowRevokeAllDialog(open)}
-      >
-        <Dialog.Backdrop class='fixed inset-0 z-50 bg-black/50' />
-        <Dialog.Positioner class='fixed inset-0 z-50 flex items-center justify-center p-4'>
-          <Dialog.Content class='w-full max-w-md rounded-lg bg-white p-6 shadow-xl'>
-            <Dialog.Title class='text-lg font-semibold text-gray-900'>
-              Sign out everywhere?
-            </Dialog.Title>
-            <Dialog.Description class='mt-2 text-sm text-gray-600'>
+      <Dialog open={showRevokeAllDialog()} onOpenChange={setShowRevokeAllDialog}>
+        <DialogBackdrop />
+        <DialogPositioner>
+          <DialogContent class='max-w-md p-6'>
+            <DialogTitle>Sign out everywhere?</DialogTitle>
+            <DialogDescription class='mt-2'>
               This will sign you out from all devices, including this one. You'll need to sign in
               again to continue.
-            </Dialog.Description>
+            </DialogDescription>
 
             <div class='mt-6 flex justify-end space-x-3'>
-              <Dialog.CloseTrigger class='rounded-md bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-200'>
+              <DialogCloseTrigger class='rounded-md bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-200'>
                 Cancel
-              </Dialog.CloseTrigger>
+              </DialogCloseTrigger>
               <button
                 onClick={handleRevokeAll}
                 disabled={revokingAll()}
@@ -376,9 +380,9 @@ export default function SessionManagement() {
                 {revokingAll() ? 'Signing out...' : 'Sign out everywhere'}
               </button>
             </div>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Dialog.Root>
+          </DialogContent>
+        </DialogPositioner>
+      </Dialog>
     </div>
   );
 }
diff --git a/packages/web/src/components/settings/pages/TwoFactorSetup.jsx b/packages/web/src/components/settings/pages/TwoFactorSetup.jsx
index 73a06bd25..2b4dd2a38 100644
--- a/packages/web/src/components/settings/pages/TwoFactorSetup.jsx
+++ b/packages/web/src/components/settings/pages/TwoFactorSetup.jsx
@@ -1,7 +1,21 @@
 import { createSignal, Show, onMount, For } from 'solid-js';
 import { FiShield, FiX, FiCopy, FiSmartphone, FiLock, FiInfo, FiHelpCircle } from 'solid-icons/fi';
 import { useBetterAuth } from '@api/better-auth-store.js';
-import { Tooltip, PasswordInput, showToast, QRCode } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
+import { QRCode, QRCodeFrame, QRCodePattern } from '@/components/ui/qr-code';
+import {
+  PasswordInput,
+  PasswordInputLabel,
+  PasswordInputControl,
+  PasswordInputField,
+  PasswordInputVisibilityTrigger,
+} from '@/components/ui/password-input';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
 
 export default function TwoFactorSetup() {
   const { user, enableTwoFactor, verifyTwoFactorSetup, disableTwoFactor, getTwoFactorStatus } =
@@ -213,8 +227,17 @@ export default function TwoFactorSetup() {
                 </span>
               </Show>
               <Show when={!isEnabled()}>
-                <Tooltip content="Requires a password. Add one above if you don't have one.">
-                  <FiHelpCircle class='h-4 w-4 cursor-help text-gray-400' />
+                <Tooltip>
+                  <TooltipTrigger>
+                    <span class='inline-flex cursor-help'>
+                      <FiHelpCircle class='h-4 w-4 text-gray-400' />
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipPositioner>
+                    <TooltipContent>
+                      Requires a password. Add one above if you don't have one.
+                    </TooltipContent>
+                  </TooltipPositioner>
                 </Tooltip>
               </Show>
             </div>
@@ -251,8 +274,17 @@ export default function TwoFactorSetup() {
           <div class='flex items-center justify-between'>
             <div class='flex items-center space-x-2'>
               <h3 class='font-medium text-gray-900'>Set Up Two-Factor Authentication</h3>
-              <Tooltip content="Requires a password. Add one above if you don't have one.">
-                <FiHelpCircle class='h-4 w-4 cursor-help text-gray-400' />
+              <Tooltip>
+                <TooltipTrigger>
+                  <span class='inline-flex cursor-help'>
+                    <FiHelpCircle class='h-4 w-4 text-gray-400' />
+                  </span>
+                </TooltipTrigger>
+                <TooltipPositioner>
+                  <TooltipContent>
+                    Requires a password. Add one above if you don't have one.
+                  </TooltipContent>
+                </TooltipPositioner>
               </Tooltip>
             </div>
             <button onClick={handleCancel} class='text-gray-400 hover:text-gray-600'>
@@ -296,13 +328,16 @@ export default function TwoFactorSetup() {
                 aria-hidden='true'
               />
 
-              <PasswordInput
-                label='Password'
-                password={password()}
-                onPasswordChange={setPassword}
-                autoComplete='current-password'
-                inputClass='w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-              />
+              <PasswordInput autoComplete='current-password'>
+                <PasswordInputLabel>Password</PasswordInputLabel>
+                <PasswordInputControl>
+                  <PasswordInputField
+                    value={password()}
+                    onInput={e => setPassword(e.target.value)}
+                  />
+                  <PasswordInputVisibilityTrigger />
+                </PasswordInputControl>
+              </PasswordInput>
 
               <div class='flex space-x-3'>
                 <button
@@ -340,7 +375,11 @@ export default function TwoFactorSetup() {
               {/* QR Code - Generated client-side for security */}
               <div class='flex justify-center'>
                 <div class='rounded-lg border border-gray-200 bg-white p-4'>
-                  <QRCode data={totpUri()} size={192} alt='2FA QR Code' />
+                  <QRCode value={totpUri()} pixelSize={192} aria-label='2FA QR Code'>
+                    <QRCodeFrame>
+                      <QRCodePattern />
+                    </QRCodeFrame>
+                  </QRCode>
                 </div>
               </div>
 
diff --git a/packages/web/src/components/sidebar/ProjectTreeItem.jsx b/packages/web/src/components/sidebar/ProjectTreeItem.jsx
index aa1104566..381bf98f2 100644
--- a/packages/web/src/components/sidebar/ProjectTreeItem.jsx
+++ b/packages/web/src/components/sidebar/ProjectTreeItem.jsx
@@ -1,7 +1,7 @@
 import { Show, For } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 import { useProjectData } from '@primitives/useProjectData.js';
-import { Collapsible } from '@corates/ui';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { AiOutlineFolder, AiOutlineFolderOpen } from 'solid-icons/ai';
 import { FiChevronRight } from 'solid-icons/fi';
 import StudyTreeItem from './StudyTreeItem.jsx';
@@ -25,68 +25,70 @@ export default function ProjectTreeItem(props) {
         // Use lightweight hook to read project data from store
         const projectData = useProjectData(projectId);
 
+        // Handle row click - toggle unless clicking on the project name button
+        const handleRowClick = e => {
+          const target = e.target;
+          const interactive = target.closest('button, [role="button"]');
+          if (interactive) return;
+          props.onToggle();
+        };
+
         return (
-          <Collapsible
-            open={props.isExpanded}
-            onOpenChange={({ open }) => {
-              if (open !== props.isExpanded) {
-                props.onToggle();
-              }
-            }}
-            trigger={
-              <div
-                class={`group flex cursor-pointer items-center rounded-lg transition-colors ${isSelected() ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-50'} `}
-              >
-                <div class='pointer-events-none rounded-l-lg p-2 hover:bg-gray-100'>
-                  <FiChevronRight
-                    class={`h-3 w-3 text-gray-500 transition-transform ${props.isExpanded ? 'rotate-90' : ''}`}
-                  />
-                </div>
-                <button
-                  onClick={e => {
-                    e.stopPropagation();
-                    navigate(projectPath());
-                  }}
-                  class='flex flex-1 items-center gap-2 py-2 pr-2 text-left'
-                >
-                  <Show
-                    when={props.isExpanded}
-                    fallback={<AiOutlineFolder class='h-4 w-4 text-gray-500' />}
-                  >
-                    <AiOutlineFolderOpen class='h-4 w-4 text-blue-500' />
-                  </Show>
-                  <span class='truncate text-sm font-medium'>{project().name}</span>
-                </button>
+          <Collapsible open={props.isExpanded}>
+            <div
+              class={`group flex cursor-pointer items-center rounded-lg transition-colors ${isSelected() ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-50'} `}
+              onClick={handleRowClick}
+            >
+              <div class='rounded-l-lg p-2 hover:bg-gray-100'>
+                <FiChevronRight
+                  class={`h-3 w-3 text-gray-500 transition-transform ${props.isExpanded ? 'rotate-90' : ''}`}
+                />
               </div>
-            }
-          >
-            {/* Studies list */}
-            <div class='mt-0.5 ml-6 space-y-0.5 border-l border-gray-200 pl-2'>
-              <Show
-                when={projectData.studies()?.length > 0}
-                fallback={
-                  <Show
-                    when={projectData.connecting() || !projectData.synced()}
-                    fallback={<div class='px-2 py-2 text-xs text-gray-500'>No studies yet</div>}
-                  >
-                    <div class='px-2 py-2 text-xs text-gray-400'>Loading...</div>
-                  </Show>
-                }
+              <button
+                onClick={e => {
+                  e.stopPropagation();
+                  navigate(projectPath());
+                }}
+                class='flex flex-1 items-center gap-2 py-2 pr-2 text-left'
               >
-                <For each={projectData.studies()}>
-                  {study => (
-                    <StudyTreeItem
-                      study={study}
-                      projectId={projectId}
-                      userId={props.userId}
-                      currentPath={props.currentPath}
-                      isExpanded={props.isStudyExpanded?.(study.id)}
-                      onToggle={() => props.onToggleStudy?.(study.id)}
-                    />
-                  )}
-                </For>
-              </Show>
+                <Show
+                  when={props.isExpanded}
+                  fallback={<AiOutlineFolder class='h-4 w-4 text-gray-500' />}
+                >
+                  <AiOutlineFolderOpen class='h-4 w-4 text-blue-500' />
+                </Show>
+                <span class='truncate text-sm font-medium'>{project().name}</span>
+              </button>
             </div>
+            <CollapsibleContent>
+              {/* Studies list */}
+              <div class='mt-0.5 ml-6 space-y-0.5 border-l border-gray-200 pl-2'>
+                <Show
+                  when={projectData.studies()?.length > 0}
+                  fallback={
+                    <Show
+                      when={projectData.connecting() || !projectData.synced()}
+                      fallback={<div class='px-2 py-2 text-xs text-gray-500'>No studies yet</div>}
+                    >
+                      <div class='px-2 py-2 text-xs text-gray-400'>Loading...</div>
+                    </Show>
+                  }
+                >
+                  <For each={projectData.studies()}>
+                    {study => (
+                      <StudyTreeItem
+                        study={study}
+                        projectId={projectId}
+                        userId={props.userId}
+                        currentPath={props.currentPath}
+                        isExpanded={props.isStudyExpanded?.(study.id)}
+                        onToggle={() => props.onToggleStudy?.(study.id)}
+                      />
+                    )}
+                  </For>
+                </Show>
+              </div>
+            </CollapsibleContent>
           </Collapsible>
         );
       }}
diff --git a/packages/web/src/components/sidebar/Sidebar.jsx b/packages/web/src/components/sidebar/Sidebar.jsx
index ac313ad18..409aebe08 100644
--- a/packages/web/src/components/sidebar/Sidebar.jsx
+++ b/packages/web/src/components/sidebar/Sidebar.jsx
@@ -5,8 +5,22 @@ import { Portal } from 'solid-js/web';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import localChecklistsStore from '@/stores/localChecklistsStore';
 import { useMyProjectsList } from '@primitives/useMyProjectsList.js';
+import { showToast } from '@/components/ui/toast';
 // import useRecentsNav from './useRecentsNav.js';
-import { useConfirmDialog, Tooltip } from '@corates/ui';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog';
 import { AiOutlineFolder, AiOutlineCloud, AiOutlineHome } from 'solid-icons/ai';
 import { HiOutlineDocumentCheck } from 'solid-icons/hi';
 import { FiChevronsLeft, FiChevronsRight, FiX, FiClock } from 'solid-icons/fi';
@@ -52,9 +66,9 @@ export default function Sidebar(props) {
   const cloudProjects = () => projectListQuery.projects();
   const isProjectsLoading = () => projectListQuery.isLoading();
 
-  // Confirm dialog for delete actions
-  const confirmDialog = useConfirmDialog();
-  const [_pendingDeleteId, setPendingDeleteId] = createSignal(null);
+  // Delete confirmation dialog state
+  const [deleteDialogOpen, setDeleteDialogOpen] = createSignal(false);
+  const [pendingDeleteId, setPendingDeleteId] = createSignal(null);
 
   const isExpanded = () => props.desktopMode === 'expanded';
 
@@ -131,19 +145,30 @@ export default function Sidebar(props) {
     }
   };
 
-  const handleDeleteLocalChecklist = async (e, checklistId) => {
+  // Opens delete confirmation dialog
+  const handleDeleteLocalChecklist = (e, checklistId) => {
     e.stopPropagation();
     setPendingDeleteId(checklistId);
-    const confirmed = await confirmDialog.open({
-      title: 'Delete Checklist',
-      description: 'Are you sure you want to delete this checklist? This cannot be undone.',
-      confirmText: 'Delete',
-      variant: 'danger',
-    });
-    if (confirmed) {
+    setDeleteDialogOpen(true);
+  };
+
+  // Executes delete after confirmation
+  const confirmDeleteChecklist = async () => {
+    const checklistId = pendingDeleteId();
+    if (!checklistId) {
+      setDeleteDialogOpen(false);
+      setPendingDeleteId(null);
+      return;
+    }
+    try {
       await deleteChecklist(checklistId);
+    } catch (err) {
+      console.error('Failed to delete checklist:', err);
+      showToast.error('Delete Failed', 'Could not delete the checklist. Please try again.');
+    } finally {
+      setDeleteDialogOpen(false);
+      setPendingDeleteId(null);
     }
-    setPendingDeleteId(null);
   };
 
   // Close mobile sidebar on escape key
@@ -192,14 +217,16 @@ export default function Sidebar(props) {
           <div class='flex shrink-0 items-center border-b border-gray-100 p-2'>
             {/* Desktop collapsed: just the expand button */}
             <Show when={!isExpanded()}>
-              <Tooltip content='Expand sidebar' positioning={{ placement: 'right' }}>
-                <button
+              <Tooltip positioning={{ placement: 'right' }}>
+                <TooltipTrigger
+                  as='button'
                   onClick={() => props.onToggleDesktop?.()}
                   class='hidden h-8 w-8 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 md:flex'
                   aria-label='Expand sidebar'
                 >
                   <FiChevronsRight class='h-4 w-4' />
-                </button>
+                </TooltipTrigger>
+                <TooltipContent>Expand sidebar</TooltipContent>
               </Tooltip>
             </Show>
 
@@ -210,14 +237,16 @@ export default function Sidebar(props) {
 
             {/* Desktop expanded: collapse button */}
             <Show when={isExpanded()}>
-              <Tooltip content='Collapse sidebar' positioning={{ placement: 'right' }}>
-                <button
+              <Tooltip positioning={{ placement: 'right' }}>
+                <TooltipTrigger
+                  as='button'
                   onClick={() => props.onToggleDesktop?.()}
                   class='hidden h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 md:flex'
                   aria-label='Collapse sidebar'
                 >
                   <FiChevronsLeft class='h-4 w-4' />
-                </button>
+                </TooltipTrigger>
+                <TooltipContent>Collapse sidebar</TooltipContent>
               </Tooltip>
             </Show>
 
@@ -381,8 +410,9 @@ export default function Sidebar(props) {
           <Show when={!isExpanded()}>
             <div class='hidden flex-1 flex-col items-center gap-1 overflow-y-auto py-2 md:flex'>
               {/* Home/Projects icon */}
-              <Tooltip content='Projects' positioning={{ placement: 'right' }}>
-                <button
+              <Tooltip positioning={{ placement: 'right' }}>
+                <TooltipTrigger
+                  as='button'
                   onClick={() => navigate(getProjectsPath())}
                   class={`flex h-8 w-8 items-center justify-center rounded-md transition-colors ${
                     isCurrentPath(getProjectsPath()) || isCurrentPath('/dashboard') ?
@@ -392,13 +422,15 @@ export default function Sidebar(props) {
                   aria-label='Projects'
                 >
                   <AiOutlineHome class='h-4 w-4' />
-                </button>
+                </TooltipTrigger>
+                <TooltipContent>Projects</TooltipContent>
               </Tooltip>
 
               {/* Projects icon */}
               <Show when={isLoggedIn()}>
-                <Tooltip content='Projects' positioning={{ placement: 'right' }}>
-                  <button
+                <Tooltip positioning={{ placement: 'right' }}>
+                  <TooltipTrigger
+                    as='button'
                     onClick={() => {
                       props.onToggleDesktop?.();
                     }}
@@ -406,13 +438,15 @@ export default function Sidebar(props) {
                     aria-label='Projects'
                   >
                     <AiOutlineCloud class='h-4 w-4' />
-                  </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Projects</TooltipContent>
                 </Tooltip>
               </Show>
 
               {/* Appraisals icon */}
-              <Tooltip content='Appraisals' positioning={{ placement: 'right' }}>
-                <button
+              <Tooltip positioning={{ placement: 'right' }}>
+                <TooltipTrigger
+                  as='button'
                   onClick={() => {
                     props.onToggleDesktop?.();
                   }}
@@ -420,13 +454,36 @@ export default function Sidebar(props) {
                   aria-label='Appraisals'
                 >
                   <HiOutlineDocumentCheck class='h-4 w-4' />
-                </button>
+                </TooltipTrigger>
+                <TooltipContent>Appraisals</TooltipContent>
               </Tooltip>
             </div>
           </Show>
         </div>
 
-        <confirmDialog.ConfirmDialogComponent />
+        {/* Delete confirmation dialog */}
+        <AlertDialog open={deleteDialogOpen()} onOpenChange={setDeleteDialogOpen}>
+          <AlertDialogBackdrop />
+          <AlertDialogPositioner>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogIcon variant='danger' />
+                <div>
+                  <AlertDialogTitle>Delete Checklist</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Are you sure you want to delete this checklist? This cannot be undone.
+                  </AlertDialogDescription>
+                </div>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant='danger' onClick={confirmDeleteChecklist}>
+                  Delete
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogPositioner>
+        </AlertDialog>
 
         {/* Resize handle (desktop only, when expanded) */}
         <Show when={isExpanded()}>
diff --git a/packages/web/src/components/sidebar/StudyTreeItem.jsx b/packages/web/src/components/sidebar/StudyTreeItem.jsx
index 21ba0b95f..13037d09b 100644
--- a/packages/web/src/components/sidebar/StudyTreeItem.jsx
+++ b/packages/web/src/components/sidebar/StudyTreeItem.jsx
@@ -1,7 +1,7 @@
 import { createMemo, For, Show } from 'solid-js';
 import { VsBook } from 'solid-icons/vs';
 import { FiChevronRight } from 'solid-icons/fi';
-import { Collapsible } from '@corates/ui';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import ChecklistTreeItem from './ChecklistTreeItem.jsx';
 
 /**
@@ -26,47 +26,47 @@ export default function StudyTreeItem(props) {
   return (
     <Collapsible
       open={isExpanded()}
-      onOpenChange={({ open }) => {
+      onOpenChange={open => {
         if (open !== isExpanded()) {
           props.onToggle?.();
         }
       }}
-      trigger={
-        <div class='group flex items-center rounded text-gray-600 transition-colors hover:bg-gray-50'>
-          <div class='pointer-events-none rounded p-1.5'>
-            <FiChevronRight
-              class={`h-2.5 w-2.5 text-gray-400 transition-transform ${isExpanded() ? 'rotate-90' : ''}`}
-            />
-          </div>
-          <div class='flex flex-1 items-center gap-1.5 py-1.5 pr-2 text-left'>
-            <VsBook class='h-3.5 w-3.5 text-gray-400' />
-            <span class='truncate text-xs font-medium'>{props.study.name}</span>
-          </div>
-        </div>
-      }
     >
-      {/* Checklists list */}
-      <div class='mt-0.5 ml-4 space-y-0.5 border-l border-gray-100 pl-2'>
-        <Show
-          when={assignedChecklists()?.length > 0}
-          fallback={
-            <div class='text-2xs px-2 py-1 text-gray-400'>
-              {props.userId ? 'No checklists assigned to you' : 'No checklists'}
-            </div>
-          }
-        >
-          <For each={assignedChecklists()}>
-            {checklist => (
-              <ChecklistTreeItem
-                checklist={checklist}
-                projectId={props.projectId}
-                studyId={props.study.id}
-                currentPath={props.currentPath}
-              />
-            )}
-          </For>
-        </Show>
-      </div>
+      <CollapsibleTrigger class='group flex items-center rounded text-gray-600 transition-colors hover:bg-gray-50'>
+        <div class='pointer-events-none rounded p-1.5'>
+          <FiChevronRight
+            class={`h-2.5 w-2.5 text-gray-400 transition-transform ${isExpanded() ? 'rotate-90' : ''}`}
+          />
+        </div>
+        <div class='flex flex-1 items-center gap-1.5 py-1.5 pr-2 text-left'>
+          <VsBook class='h-3.5 w-3.5 text-gray-400' />
+          <span class='truncate text-xs font-medium'>{props.study.name}</span>
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        {/* Checklists list */}
+        <div class='mt-0.5 ml-4 space-y-0.5 border-l border-gray-100 pl-2'>
+          <Show
+            when={assignedChecklists()?.length > 0}
+            fallback={
+              <div class='text-2xs px-2 py-1 text-gray-400'>
+                {props.userId ? 'No checklists assigned to you' : 'No checklists'}
+              </div>
+            }
+          >
+            <For each={assignedChecklists()}>
+              {checklist => (
+                <ChecklistTreeItem
+                  checklist={checklist}
+                  projectId={props.projectId}
+                  studyId={props.study.id}
+                  currentPath={props.currentPath}
+                />
+              )}
+            </For>
+          </Show>
+        </div>
+      </CollapsibleContent>
     </Collapsible>
   );
 }
diff --git a/packages/web/src/components/ui/alert-dialog.tsx b/packages/web/src/components/ui/alert-dialog.tsx
new file mode 100644
index 000000000..70e8dc99d
--- /dev/null
+++ b/packages/web/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,282 @@
+/**
+ * AlertDialog component for confirmation dialogs requiring user action.
+ *
+ * @example
+ * const [open, setOpen] = createSignal(false);
+ *
+ * <AlertDialog open={open()} onOpenChange={setOpen}>
+ *   <AlertDialogBackdrop />
+ *   <AlertDialogPositioner>
+ *     <AlertDialogContent>
+ *       <AlertDialogHeader>
+ *         <AlertDialogIcon variant="danger" />
+ *         <div>
+ *           <AlertDialogTitle>Delete Project</AlertDialogTitle>
+ *           <AlertDialogDescription>
+ *             This action cannot be undone.
+ *           </AlertDialogDescription>
+ *         </div>
+ *       </AlertDialogHeader>
+ *       <AlertDialogFooter>
+ *         <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *         <AlertDialogAction variant="danger" onClick={handleDelete}>
+ *           Delete
+ *         </AlertDialogAction>
+ *       </AlertDialogFooter>
+ *     </AlertDialogContent>
+ *   </AlertDialogPositioner>
+ * </AlertDialog>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { Dialog as DialogPrimitive } from '@ark-ui/solid/dialog';
+import type { DialogRootProps as ArkDialogRootProps } from '@ark-ui/solid/dialog';
+import { Portal } from 'solid-js/web';
+import { FiAlertTriangle, FiX } from 'solid-icons/fi';
+import { cn } from './cn';
+import { Z_INDEX } from './z-index';
+
+type AlertDialogProps = Omit<ArkDialogRootProps, 'onOpenChange'> & {
+  children?: JSX.Element;
+  onOpenChange?: (_open: boolean) => void;
+};
+
+const AlertDialog: Component<AlertDialogProps> = props => {
+  const [local, others] = splitProps(props, ['children', 'onOpenChange']);
+  return (
+    <DialogPrimitive.Root
+      role='alertdialog'
+      onOpenChange={details => local.onOpenChange?.(details.open)}
+      {...others}
+    >
+      {local.children}
+    </DialogPrimitive.Root>
+  );
+};
+
+type AlertDialogBackdropProps = {
+  class?: string;
+};
+
+const AlertDialogBackdrop: Component<AlertDialogBackdropProps> = props => {
+  return (
+    <Portal>
+      <DialogPrimitive.Backdrop
+        class={cn('fixed inset-0 bg-black/50 transition-opacity', Z_INDEX.BACKDROP, props.class)}
+      />
+    </Portal>
+  );
+};
+
+type AlertDialogPositionerProps = {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const AlertDialogPositioner: Component<AlertDialogPositionerProps> = props => {
+  return (
+    <Portal>
+      <DialogPrimitive.Positioner
+        class={cn(
+          'fixed inset-0 flex items-center justify-center p-4',
+          Z_INDEX.DIALOG,
+          props.class,
+        )}
+      >
+        {props.children}
+      </DialogPrimitive.Positioner>
+    </Portal>
+  );
+};
+
+type AlertDialogContentProps = {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const AlertDialogContent: Component<AlertDialogContentProps> = props => {
+  return (
+    <DialogPrimitive.Content
+      class={cn('w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl', props.class)}
+    >
+      {props.children}
+    </DialogPrimitive.Content>
+  );
+};
+
+type AlertDialogHeaderProps = {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const AlertDialogHeader: Component<AlertDialogHeaderProps> = props => {
+  return <div class={cn('flex items-start gap-4 p-6', props.class)}>{props.children}</div>;
+};
+
+type AlertDialogIconProps = {
+  class?: string;
+  variant?: 'danger' | 'warning' | 'info';
+};
+
+const AlertDialogIcon: Component<AlertDialogIconProps> = props => {
+  const variant = () => props.variant || 'danger';
+
+  const variantStyles = () => {
+    switch (variant()) {
+      case 'warning':
+        return 'bg-amber-100 text-amber-500';
+      case 'info':
+        return 'bg-blue-100 text-blue-500';
+      default:
+        return 'bg-red-100 text-red-500';
+    }
+  };
+
+  return (
+    <div class={cn('shrink-0 rounded-full p-2', variantStyles(), props.class)}>
+      <FiAlertTriangle class='h-6 w-6' />
+    </div>
+  );
+};
+
+type AlertDialogTitleProps = {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const AlertDialogTitle: Component<AlertDialogTitleProps> = props => {
+  return (
+    <DialogPrimitive.Title class={cn('text-lg font-semibold text-gray-900', props.class)}>
+      {props.children}
+    </DialogPrimitive.Title>
+  );
+};
+
+type AlertDialogDescriptionProps = {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const AlertDialogDescription: Component<AlertDialogDescriptionProps> = props => {
+  return (
+    <DialogPrimitive.Description class={cn('mt-2 text-sm text-gray-600', props.class)}>
+      {props.children}
+    </DialogPrimitive.Description>
+  );
+};
+
+type AlertDialogFooterProps = {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const AlertDialogFooter: Component<AlertDialogFooterProps> = props => {
+  return (
+    <div class={cn('flex justify-end gap-3 bg-gray-50 px-6 py-4', props.class)}>
+      {props.children}
+    </div>
+  );
+};
+
+type AlertDialogCancelProps = {
+  class?: string;
+  children?: JSX.Element;
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+const AlertDialogCancel: Component<AlertDialogCancelProps> = props => {
+  return (
+    <DialogPrimitive.CloseTrigger
+      disabled={props.disabled}
+      onClick={props.onClick}
+      class={cn(
+        'rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700',
+        'transition-colors hover:bg-gray-50',
+        'focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none',
+        'disabled:opacity-50',
+        props.class,
+      )}
+    >
+      {props.children}
+    </DialogPrimitive.CloseTrigger>
+  );
+};
+
+type AlertDialogActionProps = {
+  class?: string;
+  children?: JSX.Element;
+  disabled?: boolean;
+  variant?: 'danger' | 'warning' | 'info';
+  onClick?: () => void;
+};
+
+const AlertDialogAction: Component<AlertDialogActionProps> = props => {
+  const variant = () => props.variant || 'danger';
+
+  const variantStyles = () => {
+    switch (variant()) {
+      case 'warning':
+        return 'bg-amber-600 hover:bg-amber-700 focus:ring-amber-500';
+      case 'info':
+        return 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500';
+      default:
+        return 'bg-red-600 hover:bg-red-700 focus:ring-red-500';
+    }
+  };
+
+  return (
+    <button
+      type='button'
+      disabled={props.disabled}
+      onClick={() => props.onClick?.()}
+      class={cn(
+        'rounded-md px-4 py-2 text-sm font-medium text-white',
+        'transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none',
+        'disabled:opacity-50',
+        variantStyles(),
+        props.class,
+      )}
+    >
+      {props.children}
+    </button>
+  );
+};
+
+type AlertDialogCloseTriggerProps = {
+  class?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+};
+
+const AlertDialogCloseTrigger: Component<AlertDialogCloseTriggerProps> = props => {
+  return (
+    <DialogPrimitive.CloseTrigger
+      disabled={props.disabled}
+      aria-label={props.ariaLabel ?? 'Close'}
+      class={cn(
+        'shrink-0 rounded-md p-1 text-gray-400',
+        'transition-colors hover:bg-gray-100 hover:text-gray-500',
+        'disabled:opacity-50',
+        props.class,
+      )}
+    >
+      <FiX class='h-5 w-5' />
+    </DialogPrimitive.CloseTrigger>
+  );
+};
+
+export {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  AlertDialogCloseTrigger,
+};
diff --git a/packages/web/src/components/ui/avatar.tsx b/packages/web/src/components/ui/avatar.tsx
new file mode 100644
index 000000000..bad1d266f
--- /dev/null
+++ b/packages/web/src/components/ui/avatar.tsx
@@ -0,0 +1,125 @@
+/**
+ * Avatar component for user profile images with fallback.
+ *
+ * @example
+ * <Avatar>
+ *   <AvatarImage src="/user.jpg" alt="John Doe" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ *
+ * @example
+ * // Custom size
+ * <Avatar class="h-16 w-16">
+ *   <AvatarImage src="/user.jpg" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ *
+ * @example
+ * // Fallback only (no image)
+ * <Avatar>
+ *   <AvatarFallback>AB</AvatarFallback>
+ * </Avatar>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { Avatar as AvatarPrimitive } from '@ark-ui/solid/avatar';
+import type {
+  AvatarRootProps as ArkAvatarRootProps,
+  AvatarImageProps as ArkAvatarImageProps,
+  AvatarFallbackProps as ArkAvatarFallbackProps,
+} from '@ark-ui/solid/avatar';
+import { cn } from './cn';
+
+type AvatarProps = ArkAvatarRootProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const Avatar: Component<AvatarProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <AvatarPrimitive.Root
+      class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', local.class)}
+      {...others}
+    >
+      {local.children}
+    </AvatarPrimitive.Root>
+  );
+};
+
+type AvatarImageProps = ArkAvatarImageProps & {
+  class?: string;
+};
+
+const AvatarImage: Component<AvatarImageProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <AvatarPrimitive.Image
+      class={cn('aspect-square h-full w-full object-cover', local.class)}
+      {...others}
+    />
+  );
+};
+
+type AvatarFallbackProps = ArkAvatarFallbackProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const AvatarFallback: Component<AvatarFallbackProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <AvatarPrimitive.Fallback
+      class={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-gray-100 text-sm font-medium text-gray-600',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </AvatarPrimitive.Fallback>
+  );
+};
+
+/**
+ * Helper to generate initials from a name
+ */
+function getInitials(name?: string): string {
+  if (!name) return '';
+  const parts = name.trim().split(' ').filter(Boolean);
+  if (parts.length === 0) return '';
+  if (parts.length === 1) return (parts[0]?.[0] ?? '').toUpperCase();
+  return ((parts[0]?.[0] ?? '') + (parts[parts.length - 1]?.[0] ?? '')).toUpperCase();
+}
+
+type UserAvatarProps = {
+  /** Image source URL */
+  src?: string;
+  /** Name for generating initials fallback */
+  name?: string;
+  /** Alt text for image */
+  alt?: string;
+  /** Additional class for root element */
+  class?: string;
+};
+
+/**
+ * Convenience component for user avatars with auto-generated initials.
+ *
+ * @example
+ * <UserAvatar src="/user.jpg" name="John Doe" />
+ *
+ * @example
+ * // Custom size via class
+ * <UserAvatar name="John Doe" class="h-8 w-8 text-xs" />
+ */
+const UserAvatar: Component<UserAvatarProps> = props => {
+  return (
+    <Avatar class={props.class}>
+      <AvatarImage src={props.src} alt={props.alt || props.name || 'Avatar'} />
+      <AvatarFallback>{getInitials(props.name)}</AvatarFallback>
+    </Avatar>
+  );
+};
+
+export { Avatar, AvatarImage, AvatarFallback, UserAvatar, getInitials };
diff --git a/packages/web/src/components/ui/button.tsx b/packages/web/src/components/ui/button.tsx
new file mode 100644
index 000000000..79cb7e06f
--- /dev/null
+++ b/packages/web/src/components/ui/button.tsx
@@ -0,0 +1,69 @@
+/**
+ * Button component with variants and sizes.
+ *
+ * @example
+ * // Default button
+ * <Button>Click me</Button>
+ *
+ * // Destructive button
+ * <Button variant="destructive">Delete</Button>
+ *
+ * // Outline button with small size
+ * <Button variant="outline" size="sm">Cancel</Button>
+ *
+ * // Icon button
+ * <Button variant="ghost" size="icon"><FiSettings /></Button>
+ *
+ * // Loading state (combine with Spinner)
+ * <Button disabled><ButtonSpinner /> Saving...</Button>
+ */
+import type { Component, ComponentProps, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './cn';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-blue-600 text-white hover:bg-blue-700',
+        destructive: 'bg-red-600 text-white hover:bg-red-700',
+        outline: 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
+        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
+        ghost: 'hover:bg-gray-100 hover:text-gray-900',
+        link: 'text-blue-600 underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 px-3 text-xs',
+        lg: 'h-11 px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+type ButtonProps = ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    children?: JSX.Element;
+  };
+
+const Button: Component<ButtonProps> = props => {
+  const [local, others] = splitProps(props, ['variant', 'size', 'class']);
+
+  return (
+    <button
+      type='button'
+      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...others}
+    />
+  );
+};
+
+export { Button, buttonVariants };
+export type { ButtonProps };
diff --git a/packages/web/src/components/ui/checkbox.tsx b/packages/web/src/components/ui/checkbox.tsx
new file mode 100644
index 000000000..556757f67
--- /dev/null
+++ b/packages/web/src/components/ui/checkbox.tsx
@@ -0,0 +1,111 @@
+/**
+ * Checkbox component for boolean inputs.
+ *
+ * @example
+ * <CheckboxRoot>
+ *   <CheckboxControl />
+ *   <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
+ *   <CheckboxHiddenInput />
+ * </CheckboxRoot>
+ *
+ * @example
+ * // Controlled
+ * const [checked, setChecked] = createSignal(false);
+ * <CheckboxRoot
+ *   checked={checked()}
+ *   onCheckedChange={setChecked}
+ * >
+ *   <CheckboxControl />
+ *   <CheckboxLabel>Remember me</CheckboxLabel>
+ * </CheckboxRoot>
+ *
+ * @example
+ * // Indeterminate state (for "select all" patterns)
+ * <CheckboxRoot checked="indeterminate">
+ *   <CheckboxControl />
+ *   <CheckboxLabel>Select all</CheckboxLabel>
+ * </CheckboxRoot>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { Checkbox as CheckboxPrimitive } from '@ark-ui/solid/checkbox';
+import type {
+  CheckboxRootProps as ArkCheckboxRootProps,
+  CheckboxControlProps as ArkCheckboxControlProps,
+  CheckboxLabelProps as ArkCheckboxLabelProps,
+} from '@ark-ui/solid/checkbox';
+import { BiRegularCheck, BiRegularMinus } from 'solid-icons/bi';
+import { cn } from './cn';
+
+const Checkbox = CheckboxPrimitive.Root;
+const CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;
+
+type CheckedState = boolean | 'indeterminate';
+
+type CheckboxRootProps = Omit<ArkCheckboxRootProps, 'onCheckedChange'> & {
+  class?: string;
+  children?: JSX.Element;
+  onCheckedChange?: (_checked: CheckedState) => void;
+};
+
+const CheckboxRoot: Component<CheckboxRootProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'onCheckedChange']);
+  return (
+    <CheckboxPrimitive.Root
+      class={cn('flex items-center gap-2', local.class)}
+      onCheckedChange={details => local.onCheckedChange?.(details.checked)}
+      {...others}
+    >
+      {local.children}
+    </CheckboxPrimitive.Root>
+  );
+};
+
+type CheckboxControlProps = ArkCheckboxControlProps & {
+  class?: string;
+};
+
+const CheckboxControl: Component<CheckboxControlProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <CheckboxPrimitive.Control
+      class={cn(
+        'flex h-4 w-4 shrink-0 items-center justify-center rounded border border-gray-300',
+        'ring-offset-white transition-colors',
+        'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:outline-none',
+        'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        'data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white',
+        'data-[state=indeterminate]:border-blue-600 data-[state=indeterminate]:bg-blue-600 data-[state=indeterminate]:text-white',
+        local.class,
+      )}
+      {...others}
+    >
+      <CheckboxPrimitive.Indicator>
+        <BiRegularCheck class='h-3.5 w-3.5' />
+      </CheckboxPrimitive.Indicator>
+      <CheckboxPrimitive.Indicator indeterminate>
+        <BiRegularMinus class='h-3.5 w-3.5' />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Control>
+  );
+};
+
+type CheckboxLabelProps = ArkCheckboxLabelProps & {
+  class?: string;
+};
+
+const CheckboxLabel: Component<CheckboxLabelProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <CheckboxPrimitive.Label
+      class={cn(
+        'text-sm leading-none font-medium text-gray-900',
+        'data-disabled:cursor-not-allowed data-disabled:opacity-70',
+        local.class,
+      )}
+      {...others}
+    />
+  );
+};
+
+export { Checkbox, CheckboxRoot, CheckboxControl, CheckboxLabel, CheckboxHiddenInput };
diff --git a/packages/web/src/components/ui/cn.ts b/packages/web/src/components/ui/cn.ts
new file mode 100644
index 000000000..cf9b46311
--- /dev/null
+++ b/packages/web/src/components/ui/cn.ts
@@ -0,0 +1,15 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Combines class names with Tailwind CSS conflict resolution.
+ * Uses clsx for conditional classes and tailwind-merge for smart overrides.
+ *
+ * @example
+ * cn('px-2 py-1', 'px-4')           // -> 'py-1 px-4' (px-4 wins)
+ * cn('p-4', props.class)            // -> consumer can override padding
+ * cn('text-sm', large && 'text-lg') // -> conditional classes
+ */
+export function cn(...inputs: Array<string | undefined | null | false>): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/web/src/components/ui/collapsible.tsx b/packages/web/src/components/ui/collapsible.tsx
new file mode 100644
index 000000000..ad5d7c88b
--- /dev/null
+++ b/packages/web/src/components/ui/collapsible.tsx
@@ -0,0 +1,113 @@
+/**
+ * Collapsible component for expandable content sections.
+ *
+ * @example
+ * <Collapsible>
+ *   <CollapsibleTrigger>
+ *     <span>Show more</span>
+ *     <CollapsibleIndicator>
+ *       <FiChevronDown />
+ *     </CollapsibleIndicator>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     Hidden content that expands when trigger is clicked.
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * @example
+ * // Controlled
+ * const [open, setOpen] = createSignal(false);
+ * <Collapsible open={open()} onOpenChange={setOpen}>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Content</CollapsibleContent>
+ * </Collapsible>
+ *
+ * @example
+ * // Default open
+ * <Collapsible defaultOpen>
+ *   ...
+ * </Collapsible>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { Collapsible as CollapsiblePrimitive } from '@ark-ui/solid/collapsible';
+import type {
+  CollapsibleRootProps as ArkCollapsibleRootProps,
+  CollapsibleTriggerProps as ArkCollapsibleTriggerProps,
+  CollapsibleContentProps as ArkCollapsibleContentProps,
+  CollapsibleIndicatorProps as ArkCollapsibleIndicatorProps,
+} from '@ark-ui/solid/collapsible';
+import { cn } from './cn';
+
+type CollapsibleProps = Omit<ArkCollapsibleRootProps, 'onOpenChange'> & {
+  class?: string;
+  children?: JSX.Element;
+  onOpenChange?: (_open: boolean) => void;
+};
+
+const Collapsible: Component<CollapsibleProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'onOpenChange']);
+  return (
+    <CollapsiblePrimitive.Root
+      class={local.class}
+      onOpenChange={details => local.onOpenChange?.(details.open)}
+      {...others}
+    >
+      {local.children}
+    </CollapsiblePrimitive.Root>
+  );
+};
+
+type CollapsibleTriggerProps = ArkCollapsibleTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const CollapsibleTrigger: Component<CollapsibleTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <CollapsiblePrimitive.Trigger
+      class={cn('flex items-center text-left', local.class)}
+      {...others}
+    >
+      {local.children}
+    </CollapsiblePrimitive.Trigger>
+  );
+};
+
+type CollapsibleContentProps = ArkCollapsibleContentProps & {
+  class?: string;
+  children?: JSX.Element;
+  horizontal?: boolean;
+};
+
+const CollapsibleContent: Component<CollapsibleContentProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'horizontal']);
+  return (
+    <CollapsiblePrimitive.Content
+      class={cn('overflow-hidden', local.horizontal && 'collapsible-horizontal', local.class)}
+      {...others}
+    >
+      {local.children}
+    </CollapsiblePrimitive.Content>
+  );
+};
+
+type CollapsibleIndicatorProps = ArkCollapsibleIndicatorProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const CollapsibleIndicator: Component<CollapsibleIndicatorProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <CollapsiblePrimitive.Indicator
+      class={cn('transition-transform duration-200 data-[state=open]:rotate-180', local.class)}
+      {...others}
+    >
+      {local.children}
+    </CollapsiblePrimitive.Indicator>
+  );
+};
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, CollapsibleIndicator };
diff --git a/packages/web/src/components/ui/dialog.tsx b/packages/web/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..ca6ba0661
--- /dev/null
+++ b/packages/web/src/components/ui/dialog.tsx
@@ -0,0 +1,209 @@
+/**
+ * Dialog component for modal overlays.
+ *
+ * @example
+ * <Dialog>
+ *   <DialogTrigger>
+ *     <Button>Open Dialog</Button>
+ *   </DialogTrigger>
+ *   <DialogBackdrop />
+ *   <DialogPositioner>
+ *     <DialogContent>
+ *       <DialogHeader>
+ *         <DialogTitle>Confirm Action</DialogTitle>
+ *         <DialogCloseTrigger>
+ *           <FiX />
+ *         </DialogCloseTrigger>
+ *       </DialogHeader>
+ *       <DialogBody>
+ *         <DialogDescription>Are you sure you want to proceed?</DialogDescription>
+ *       </DialogBody>
+ *       <DialogFooter>
+ *         <DialogCloseTrigger>
+ *           <Button variant="outline">Cancel</Button>
+ *         </DialogCloseTrigger>
+ *         <Button>Confirm</Button>
+ *       </DialogFooter>
+ *     </DialogContent>
+ *   </DialogPositioner>
+ * </Dialog>
+ *
+ * @example
+ * // Controlled dialog
+ * const [open, setOpen] = createSignal(false);
+ * <Dialog open={open()} onOpenChange={setOpen}>
+ *   ...
+ * </Dialog>
+ */
+import type { Component, ComponentProps, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { Dialog as DialogPrimitive } from '@ark-ui/solid/dialog';
+import type {
+  DialogRootProps as ArkDialogRootProps,
+  DialogBackdropProps as ArkDialogBackdropProps,
+  DialogContentProps as ArkDialogContentProps,
+  DialogTitleProps as ArkDialogTitleProps,
+  DialogDescriptionProps as ArkDialogDescriptionProps,
+  DialogCloseTriggerProps as ArkDialogCloseTriggerProps,
+} from '@ark-ui/solid/dialog';
+import { Portal } from 'solid-js/web';
+import { cn } from './cn';
+import { Z_INDEX } from './z-index';
+
+type DialogProps = Omit<ArkDialogRootProps, 'onOpenChange'> & {
+  children?: JSX.Element;
+  onOpenChange?: (_open: boolean) => void;
+};
+
+const Dialog: Component<DialogProps> = props => {
+  const [local, others] = splitProps(props, ['children', 'onOpenChange']);
+  return (
+    <DialogPrimitive.Root onOpenChange={details => local.onOpenChange?.(details.open)} {...others}>
+      {local.children}
+    </DialogPrimitive.Root>
+  );
+};
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+type DialogBackdropProps = ArkDialogBackdropProps & {
+  class?: string;
+};
+
+const DialogBackdrop: Component<DialogBackdropProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <Portal>
+      <DialogPrimitive.Backdrop
+        class={cn('fixed inset-0 bg-black/50', Z_INDEX.BACKDROP, local.class)}
+        {...others}
+      />
+    </Portal>
+  );
+};
+
+type DialogPositionerProps = ComponentProps<typeof DialogPrimitive.Positioner> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const DialogPositioner: Component<DialogPositionerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <Portal>
+      <DialogPrimitive.Positioner
+        class={cn(
+          'fixed inset-0 flex items-center justify-center overflow-y-auto p-4',
+          Z_INDEX.DIALOG,
+          local.class,
+        )}
+        {...others}
+      >
+        {local.children}
+      </DialogPrimitive.Positioner>
+    </Portal>
+  );
+};
+
+type DialogContentProps = ArkDialogContentProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const DialogContent: Component<DialogContentProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <DialogPrimitive.Content
+      class={cn(
+        'my-auto w-full max-w-lg rounded-lg border border-gray-200 bg-white shadow-xl',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </DialogPrimitive.Content>
+  );
+};
+
+type DialogTitleProps = ArkDialogTitleProps & {
+  class?: string;
+};
+
+const DialogTitle: Component<DialogTitleProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <DialogPrimitive.Title
+      class={cn('text-lg font-semibold text-gray-900', local.class)}
+      {...others}
+    />
+  );
+};
+
+type DialogDescriptionProps = ArkDialogDescriptionProps & {
+  class?: string;
+};
+
+const DialogDescription: Component<DialogDescriptionProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <DialogPrimitive.Description
+      class={cn('mt-1 text-sm text-gray-500', local.class)}
+      {...others}
+    />
+  );
+};
+
+type DialogCloseTriggerProps = ArkDialogCloseTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const DialogCloseTrigger: Component<DialogCloseTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <DialogPrimitive.CloseTrigger
+      class={cn(
+        'rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500',
+        'focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </DialogPrimitive.CloseTrigger>
+  );
+};
+
+const DialogHeader: Component<ComponentProps<'div'>> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <div
+      class={cn('flex items-center justify-between border-b border-gray-200 p-4', local.class)}
+      {...others}
+    />
+  );
+};
+
+const DialogBody: Component<ComponentProps<'div'>> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return <div class={cn('p-4', local.class)} {...others} />;
+};
+
+const DialogFooter: Component<ComponentProps<'div'>> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return <div class={cn('flex justify-end gap-3 bg-gray-50 px-4 py-3', local.class)} {...others} />;
+};
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogCloseTrigger,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+};
diff --git a/packages/web/src/components/ui/editable.tsx b/packages/web/src/components/ui/editable.tsx
new file mode 100644
index 000000000..ac802d71e
--- /dev/null
+++ b/packages/web/src/components/ui/editable.tsx
@@ -0,0 +1,252 @@
+/**
+ * Editable - Inline editable text component
+ *
+ * @example
+ * // Basic usage
+ * <SimpleEditable
+ *   value={name()}
+ *   onSubmit={handleNameChange}
+ *   activationMode="click"
+ * />
+ *
+ * @example
+ * // With edit icon
+ * <SimpleEditable
+ *   value={title()}
+ *   onSubmit={handleTitleChange}
+ *   showEditIcon
+ *   class="text-2xl font-bold"
+ * />
+ */
+
+import type { Component } from 'solid-js';
+import { Show, splitProps, mergeProps } from 'solid-js';
+import { Editable as EditablePrimitive } from '@ark-ui/solid/editable';
+import { FiCheck, FiX, FiEdit2 } from 'solid-icons/fi';
+import { cn } from './cn';
+
+// Variant style presets
+const variants = {
+  default: {
+    area: 'px-2 py-1 rounded transition-colors hover:bg-gray-100 focus-within:ring-1 focus-within:ring-blue-500 focus-within:border-blue-500 border border-transparent',
+    input: 'outline-none bg-transparent',
+    preview: 'cursor-pointer',
+  },
+  inline: {
+    area: 'border-b border-transparent focus-within:border-blue-500 transition-colors',
+    input: 'outline-none bg-transparent',
+    preview: 'cursor-pointer hover:text-blue-600 transition-colors',
+  },
+  heading: {
+    area: 'rounded transition-colors hover:bg-gray-50 focus-within:bg-gray-50',
+    input: 'outline-none bg-transparent',
+    preview: 'cursor-pointer',
+  },
+  field: {
+    area: 'px-3 py-2 border border-gray-300 rounded-md transition-colors hover:border-gray-400 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500',
+    input: 'outline-none bg-transparent',
+    preview: 'cursor-pointer',
+  },
+} as const;
+
+type EditableVariant = keyof typeof variants;
+
+type SimpleEditableProps = {
+  /** The controlled value */
+  value?: string;
+  /** The initial value (uncontrolled) */
+  defaultValue?: string;
+  /** Placeholder text when empty */
+  placeholder?: string;
+  /** Called when value changes (on each keystroke) */
+  onChange?: (_value: string) => void;
+  /** Called when value is committed (Enter/blur/submit button) */
+  onSubmit?: (_value: string) => void;
+  /** Called when editing is cancelled */
+  onCancel?: () => void;
+  /** Whether the editable is disabled */
+  disabled?: boolean;
+  /** Whether the editable is read-only */
+  readOnly?: boolean;
+  /** Whether to auto-resize to fit content */
+  autoResize?: boolean;
+  /** How to enter edit mode */
+  activationMode?: 'focus' | 'dblclick' | 'click' | 'none';
+  /** What triggers submit */
+  submitMode?: 'enter' | 'blur' | 'none' | 'both';
+  /** Whether to select text when focused */
+  selectOnFocus?: boolean;
+  /** Maximum characters allowed */
+  maxLength?: number;
+  /** Style preset */
+  variant?: EditableVariant;
+  /** Additional CSS classes for the root */
+  class?: string;
+  /** Additional CSS classes for the area */
+  areaClass?: string;
+  /** Additional CSS classes for the input */
+  inputClass?: string;
+  /** Additional CSS classes for the preview */
+  previewClass?: string;
+  /** Whether to show edit/save/cancel buttons */
+  showControls?: boolean;
+  /** Whether to show only an edit icon trigger */
+  showEditIcon?: boolean;
+  /** Optional label text */
+  label?: string;
+};
+
+const SimpleEditable: Component<SimpleEditableProps> = props => {
+  const merged = mergeProps(
+    {
+      placeholder: 'Click to edit...',
+      activationMode: 'dblclick' as const,
+      submitMode: 'both' as const,
+      selectOnFocus: true,
+      autoResize: true,
+      showControls: false,
+      showEditIcon: false,
+      variant: 'default' as EditableVariant,
+    },
+    props,
+  );
+
+  const [local] = splitProps(merged, [
+    'value',
+    'defaultValue',
+    'placeholder',
+    'onChange',
+    'onSubmit',
+    'onCancel',
+    'disabled',
+    'readOnly',
+    'autoResize',
+    'activationMode',
+    'submitMode',
+    'selectOnFocus',
+    'maxLength',
+    'variant',
+    'class',
+    'areaClass',
+    'inputClass',
+    'previewClass',
+    'showControls',
+    'showEditIcon',
+    'label',
+  ]);
+
+  const variantStyles = () => variants[local.variant] || variants.default;
+
+  // Determine the value to display
+  // - If value prop is provided, use it (reactive to parent changes)
+  // - Otherwise fall back to defaultValue
+  const currentValue = () => local.value ?? local.defaultValue ?? '';
+
+  // Use controlled mode (value prop) when value is provided
+  // This ensures the component reacts to parent value changes
+  const hasValueProp = () => local.value !== undefined;
+
+  return (
+    <EditablePrimitive.Root
+      value={hasValueProp() ? currentValue() : undefined}
+      defaultValue={!hasValueProp() ? currentValue() : undefined}
+      placeholder={local.placeholder}
+      disabled={local.disabled}
+      readOnly={local.readOnly}
+      autoResize={local.autoResize}
+      activationMode={local.activationMode}
+      submitMode={local.submitMode}
+      selectOnFocus={local.selectOnFocus}
+      maxLength={local.maxLength}
+      onValueChange={details => local.onChange?.(details.value)}
+      onValueCommit={details => local.onSubmit?.(details.value)}
+      onValueRevert={() => local.onCancel?.()}
+      class={cn('group inline-block', local.class)}
+    >
+      <EditablePrimitive.Context>
+        {api => (
+          <>
+            <Show when={local.label}>
+              <EditablePrimitive.Label class='mb-1 block text-sm font-medium text-gray-700'>
+                {local.label}
+              </EditablePrimitive.Label>
+            </Show>
+
+            <div class='flex items-center gap-2'>
+              <EditablePrimitive.Area
+                class={cn(
+                  variantStyles().area,
+                  local.disabled && 'cursor-not-allowed opacity-50',
+                  local.areaClass,
+                )}
+              >
+                <EditablePrimitive.Input class={cn(variantStyles().input, local.inputClass)} />
+                <EditablePrimitive.Preview
+                  class={cn(
+                    variantStyles().preview,
+                    !api().value && 'text-gray-400',
+                    local.previewClass,
+                  )}
+                >
+                  {api().value || local.placeholder}
+                </EditablePrimitive.Preview>
+              </EditablePrimitive.Area>
+
+              <Show when={local.showControls}>
+                <div class='flex items-center gap-1'>
+                  <Show
+                    when={api().editing}
+                    fallback={
+                      <EditablePrimitive.EditTrigger class='rounded p-1 text-gray-400 opacity-0 transition-colors group-hover:opacity-100 hover:bg-gray-100 hover:text-gray-600'>
+                        <FiEdit2 class='h-4 w-4' />
+                      </EditablePrimitive.EditTrigger>
+                    }
+                  >
+                    <EditablePrimitive.SubmitTrigger class='rounded p-1 text-green-500 transition-colors hover:bg-green-50 hover:text-green-600'>
+                      <FiCheck class='h-4 w-4' />
+                    </EditablePrimitive.SubmitTrigger>
+                    <EditablePrimitive.CancelTrigger class='rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600'>
+                      <FiX class='h-4 w-4' />
+                    </EditablePrimitive.CancelTrigger>
+                  </Show>
+                </div>
+              </Show>
+
+              <Show when={local.showEditIcon && !local.showControls && !api().editing}>
+                <EditablePrimitive.EditTrigger class='rounded p-1 text-gray-400 opacity-0 transition-colors group-hover:opacity-100 hover:bg-gray-100 hover:text-gray-600'>
+                  <FiEdit2 class='h-4 w-4' />
+                </EditablePrimitive.EditTrigger>
+              </Show>
+            </div>
+          </>
+        )}
+      </EditablePrimitive.Context>
+    </EditablePrimitive.Root>
+  );
+};
+
+// Re-export Ark UI primitives for composable usage
+const Editable = EditablePrimitive.Root;
+const EditableArea = EditablePrimitive.Area;
+const EditableInput = EditablePrimitive.Input;
+const EditablePreview = EditablePrimitive.Preview;
+const EditableLabel = EditablePrimitive.Label;
+const EditableControl = EditablePrimitive.Control;
+const EditableEditTrigger = EditablePrimitive.EditTrigger;
+const EditableSubmitTrigger = EditablePrimitive.SubmitTrigger;
+const EditableCancelTrigger = EditablePrimitive.CancelTrigger;
+const EditableContext = EditablePrimitive.Context;
+
+export {
+  SimpleEditable,
+  Editable,
+  EditableArea,
+  EditableInput,
+  EditablePreview,
+  EditableLabel,
+  EditableControl,
+  EditableEditTrigger,
+  EditableSubmitTrigger,
+  EditableCancelTrigger,
+  EditableContext,
+};
diff --git a/packages/web/src/components/ui/file-upload.tsx b/packages/web/src/components/ui/file-upload.tsx
new file mode 100644
index 000000000..1b2507d46
--- /dev/null
+++ b/packages/web/src/components/ui/file-upload.tsx
@@ -0,0 +1,254 @@
+/**
+ * FileUpload component for file selection with drag-and-drop support.
+ *
+ * @example
+ * // Basic dropzone
+ * <FileUpload
+ *   accept={['application/pdf', '.pdf']}
+ *   maxFiles={5}
+ *   onFileAccept={details => handleFiles(details.files)}
+ * >
+ *   <FileUploadDropzone>
+ *     <FiUploadCloud class="h-8 w-8 text-gray-400" />
+ *     <p>Click to upload or drag and drop</p>
+ *     <p class="text-xs text-gray-400">PDF files only</p>
+ *   </FileUploadDropzone>
+ *   <FileUploadHiddenInput />
+ * </FileUpload>
+ *
+ * @example
+ * // With file list
+ * <FileUpload maxFiles={5} onFileAccept={handleFiles}>
+ *   <FileUploadDropzone>Drop files here</FileUploadDropzone>
+ *   <FileUploadItemGroup>
+ *     <FileUploadContext>
+ *       {api => (
+ *         <For each={api().acceptedFiles}>
+ *           {file => (
+ *             <FileUploadItem file={file}>
+ *               <FileUploadItemName />
+ *               <FileUploadItemSizeText />
+ *               <FileUploadItemDeleteTrigger />
+ *             </FileUploadItem>
+ *           )}
+ *         </For>
+ *       )}
+ *     </FileUploadContext>
+ *   </FileUploadItemGroup>
+ *   <FileUploadHiddenInput />
+ * </FileUpload>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { FileUpload as FileUploadPrimitive } from '@ark-ui/solid/file-upload';
+import type {
+  FileUploadRootProps as ArkFileUploadRootProps,
+  FileUploadDropzoneProps as ArkFileUploadDropzoneProps,
+  FileUploadTriggerProps as ArkFileUploadTriggerProps,
+  FileUploadLabelProps as ArkFileUploadLabelProps,
+  FileUploadItemGroupProps as ArkFileUploadItemGroupProps,
+  FileUploadItemProps as ArkFileUploadItemProps,
+  FileUploadItemNameProps as ArkFileUploadItemNameProps,
+  FileUploadItemSizeTextProps as ArkFileUploadItemSizeTextProps,
+  FileUploadItemDeleteTriggerProps as ArkFileUploadItemDeleteTriggerProps,
+  FileUploadItemPreviewProps as ArkFileUploadItemPreviewProps,
+} from '@ark-ui/solid/file-upload';
+import { FiX } from 'solid-icons/fi';
+import { cn } from './cn';
+
+// Re-export context and hidden input directly
+const FileUploadContext = FileUploadPrimitive.Context;
+const FileUploadHiddenInput = FileUploadPrimitive.HiddenInput;
+const FileUploadClearTrigger = FileUploadPrimitive.ClearTrigger;
+const FileUploadItemPreviewImage = FileUploadPrimitive.ItemPreviewImage;
+
+type FileUploadProps = ArkFileUploadRootProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const FileUpload: Component<FileUploadProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <FileUploadPrimitive.Root class={cn('w-full', local.class)} {...others}>
+      {local.children}
+    </FileUploadPrimitive.Root>
+  );
+};
+
+type FileUploadDropzoneProps = ArkFileUploadDropzoneProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const FileUploadDropzone: Component<FileUploadDropzoneProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <FileUploadPrimitive.Dropzone
+      class={cn(
+        'flex min-h-32 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition-colors',
+        'hover:border-blue-400 hover:bg-blue-50',
+        'data-dragging:border-blue-500 data-dragging:bg-blue-50',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </FileUploadPrimitive.Dropzone>
+  );
+};
+
+type FileUploadTriggerProps = ArkFileUploadTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const FileUploadTrigger: Component<FileUploadTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <FileUploadPrimitive.Trigger
+      class={cn(
+        'inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors',
+        'hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </FileUploadPrimitive.Trigger>
+  );
+};
+
+type FileUploadLabelProps = ArkFileUploadLabelProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const FileUploadLabel: Component<FileUploadLabelProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <FileUploadPrimitive.Label
+      class={cn('mb-2 block text-sm font-medium text-gray-700', local.class)}
+      {...others}
+    >
+      {local.children}
+    </FileUploadPrimitive.Label>
+  );
+};
+
+type FileUploadItemGroupProps = ArkFileUploadItemGroupProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const FileUploadItemGroup: Component<FileUploadItemGroupProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <FileUploadPrimitive.ItemGroup class={cn('mt-4 space-y-2', local.class)} {...others}>
+      {local.children}
+    </FileUploadPrimitive.ItemGroup>
+  );
+};
+
+type FileUploadItemProps = ArkFileUploadItemProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const FileUploadItem: Component<FileUploadItemProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <FileUploadPrimitive.Item
+      class={cn(
+        'flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </FileUploadPrimitive.Item>
+  );
+};
+
+type FileUploadItemNameProps = ArkFileUploadItemNameProps & {
+  class?: string;
+};
+
+const FileUploadItemName: Component<FileUploadItemNameProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <FileUploadPrimitive.ItemName
+      class={cn('min-w-0 flex-1 truncate text-sm font-medium text-gray-900', local.class)}
+      {...others}
+    />
+  );
+};
+
+type FileUploadItemSizeTextProps = ArkFileUploadItemSizeTextProps & {
+  class?: string;
+};
+
+const FileUploadItemSizeText: Component<FileUploadItemSizeTextProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <FileUploadPrimitive.ItemSizeText
+      class={cn('text-xs text-gray-500', local.class)}
+      {...others}
+    />
+  );
+};
+
+type FileUploadItemDeleteTriggerProps = ArkFileUploadItemDeleteTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const FileUploadItemDeleteTrigger: Component<FileUploadItemDeleteTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <FileUploadPrimitive.ItemDeleteTrigger
+      class={cn(
+        'rounded p-1 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children ?? <FiX class='h-4 w-4' />}
+    </FileUploadPrimitive.ItemDeleteTrigger>
+  );
+};
+
+type FileUploadItemPreviewProps = ArkFileUploadItemPreviewProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const FileUploadItemPreview: Component<FileUploadItemPreviewProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <FileUploadPrimitive.ItemPreview
+      class={cn('flex h-10 w-10 items-center justify-center rounded bg-gray-100', local.class)}
+      {...others}
+    >
+      {local.children}
+    </FileUploadPrimitive.ItemPreview>
+  );
+};
+
+export {
+  FileUpload,
+  FileUploadDropzone,
+  FileUploadTrigger,
+  FileUploadLabel,
+  FileUploadItemGroup,
+  FileUploadItem,
+  FileUploadItemName,
+  FileUploadItemSizeText,
+  FileUploadItemDeleteTrigger,
+  FileUploadItemPreview,
+  FileUploadItemPreviewImage,
+  FileUploadContext,
+  FileUploadHiddenInput,
+  FileUploadClearTrigger,
+};
diff --git a/packages/web/src/components/ui/index.ts b/packages/web/src/components/ui/index.ts
new file mode 100644
index 000000000..38288b596
--- /dev/null
+++ b/packages/web/src/components/ui/index.ts
@@ -0,0 +1,36 @@
+/**
+ * UI Component Library
+ *
+ * Shadcn-style composable primitives built on Ark UI for SolidJS.
+ * Each component is a thin styling wrapper around Ark UI primitives.
+ *
+ * Usage:
+ *   import { Button, Dialog, DialogContent } from '@/components/ui';
+ *
+ * For better tree-shaking, import directly from individual files:
+ *   import { Button } from '@/components/ui/button';
+ *   import { Dialog, DialogContent } from '@/components/ui/dialog';
+ *
+ * Each component file contains JSDoc examples showing common usage patterns.
+ */
+
+// Utilities
+export * from './cn';
+export * from './z-index';
+
+// Components
+export * from './button';
+export * from './dialog';
+export * from './select';
+export * from './tooltip';
+export * from './popover';
+export * from './avatar';
+export * from './spinner';
+export * from './toast';
+export * from './menu';
+export * from './tabs';
+export * from './checkbox';
+export * from './switch';
+export * from './collapsible';
+export * from './steps';
+export * from './alert-dialog';
diff --git a/packages/web/src/components/ui/menu.tsx b/packages/web/src/components/ui/menu.tsx
new file mode 100644
index 000000000..0b4fb0a7c
--- /dev/null
+++ b/packages/web/src/components/ui/menu.tsx
@@ -0,0 +1,204 @@
+/**
+ * Menu component for dropdown actions.
+ *
+ * @example
+ * <Menu>
+ *   <MenuTrigger>
+ *     <Button variant="ghost" size="icon"><FiMoreVertical /></Button>
+ *   </MenuTrigger>
+ *   <MenuPositioner>
+ *     <MenuContent>
+ *       <MenuItem value="edit">Edit</MenuItem>
+ *       <MenuItem value="duplicate">Duplicate</MenuItem>
+ *       <MenuSeparator />
+ *       <MenuItem value="delete" destructive>Delete</MenuItem>
+ *     </MenuContent>
+ *   </MenuPositioner>
+ * </Menu>
+ *
+ * @example
+ * // With groups
+ * <MenuContent>
+ *   <MenuItemGroup>
+ *     <MenuItemGroupLabel>Actions</MenuItemGroupLabel>
+ *     <MenuItem value="edit">Edit</MenuItem>
+ *   </MenuItemGroup>
+ * </MenuContent>
+ *
+ * @example
+ * // Context menu
+ * <Menu>
+ *   <MenuContextTrigger>
+ *     <div>Right-click me</div>
+ *   </MenuContextTrigger>
+ *   <MenuPositioner>
+ *     <MenuContent>...</MenuContent>
+ *   </MenuPositioner>
+ * </Menu>
+ *
+ * @example
+ * // Inside a Dialog (prevents portal z-index issues)
+ * <MenuPositioner inDialog>
+ *   <MenuContent>...</MenuContent>
+ * </MenuPositioner>
+ */
+import type { Component, JSX } from 'solid-js';
+import { Show, splitProps } from 'solid-js';
+import { Menu as MenuPrimitive } from '@ark-ui/solid/menu';
+import type {
+  MenuRootProps as ArkMenuRootProps,
+  MenuContentProps as ArkMenuContentProps,
+  MenuTriggerProps as ArkMenuTriggerProps,
+  MenuItemProps as ArkMenuItemProps,
+  MenuItemGroupProps as ArkMenuItemGroupProps,
+  MenuItemGroupLabelProps as ArkMenuItemGroupLabelProps,
+  MenuSeparatorProps as ArkMenuSeparatorProps,
+} from '@ark-ui/solid/menu';
+import { Portal } from 'solid-js/web';
+import { cn } from './cn';
+import { Z_INDEX } from './z-index';
+
+type MenuProps = Omit<ArkMenuRootProps, 'onOpenChange'> & {
+  children?: JSX.Element;
+  onOpenChange?: (_open: boolean) => void;
+};
+
+const Menu: Component<MenuProps> = props => {
+  const [local, others] = splitProps(props, ['children', 'onOpenChange']);
+  return (
+    <MenuPrimitive.Root onOpenChange={details => local.onOpenChange?.(details.open)} {...others}>
+      {local.children}
+    </MenuPrimitive.Root>
+  );
+};
+
+const MenuContextTrigger = MenuPrimitive.ContextTrigger;
+
+type MenuTriggerProps = ArkMenuTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const MenuTrigger: Component<MenuTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <MenuPrimitive.Trigger class={local.class} {...others}>
+      {local.children}
+    </MenuPrimitive.Trigger>
+  );
+};
+
+type MenuPositionerProps = {
+  class?: string;
+  children?: JSX.Element;
+  inDialog?: boolean;
+};
+
+const MenuPositioner: Component<MenuPositionerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'inDialog']);
+
+  const positioner = (
+    <MenuPrimitive.Positioner class={local.class} {...others}>
+      {local.children}
+    </MenuPrimitive.Positioner>
+  );
+
+  return (
+    <Show when={!local.inDialog} fallback={positioner}>
+      <Portal>{positioner}</Portal>
+    </Show>
+  );
+};
+
+type MenuContentProps = ArkMenuContentProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const MenuContent: Component<MenuContentProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <MenuPrimitive.Content
+      class={cn(
+        'min-w-40 rounded-lg border border-gray-200 bg-white py-1 shadow-lg outline-none',
+        Z_INDEX.MENU,
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </MenuPrimitive.Content>
+  );
+};
+
+type MenuItemProps = ArkMenuItemProps & {
+  class?: string;
+  children?: JSX.Element;
+  destructive?: boolean;
+};
+
+const MenuItem: Component<MenuItemProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'destructive']);
+  return (
+    <MenuPrimitive.Item
+      class={cn(
+        'mx-1 flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors outline-none select-none',
+        'hover:bg-gray-100 data-highlighted:bg-gray-100',
+        'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        local.destructive ?
+          'text-red-600 hover:bg-red-50 data-highlighted:bg-red-50'
+        : 'text-gray-700',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </MenuPrimitive.Item>
+  );
+};
+
+type MenuItemGroupProps = ArkMenuItemGroupProps & {
+  class?: string;
+};
+
+const MenuItemGroup: Component<MenuItemGroupProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return <MenuPrimitive.ItemGroup class={local.class} {...others} />;
+};
+
+type MenuItemGroupLabelProps = ArkMenuItemGroupLabelProps & {
+  class?: string;
+};
+
+const MenuItemGroupLabel: Component<MenuItemGroupLabelProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <MenuPrimitive.ItemGroupLabel
+      class={cn('px-2 py-1.5 text-xs font-semibold text-gray-500', local.class)}
+      {...others}
+    />
+  );
+};
+
+type MenuSeparatorProps = ArkMenuSeparatorProps & {
+  class?: string;
+};
+
+const MenuSeparator: Component<MenuSeparatorProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <MenuPrimitive.Separator class={cn('my-1 border-t border-gray-100', local.class)} {...others} />
+  );
+};
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuContextTrigger,
+  MenuPositioner,
+  MenuContent,
+  MenuItem,
+  MenuItemGroup,
+  MenuItemGroupLabel,
+  MenuSeparator,
+};
diff --git a/packages/web/src/components/ui/password-input.tsx b/packages/web/src/components/ui/password-input.tsx
new file mode 100644
index 000000000..65f117dc1
--- /dev/null
+++ b/packages/web/src/components/ui/password-input.tsx
@@ -0,0 +1,144 @@
+/**
+ * PasswordInput component with visibility toggle.
+ *
+ * @example
+ * // Basic usage
+ * <PasswordInput>
+ *   <PasswordInputLabel>Password</PasswordInputLabel>
+ *   <PasswordInputControl>
+ *     <PasswordInputField />
+ *     <PasswordInputVisibilityTrigger />
+ *   </PasswordInputControl>
+ * </PasswordInput>
+ *
+ * @example
+ * // With controlled value
+ * <PasswordInput autoComplete="current-password">
+ *   <PasswordInputControl>
+ *     <PasswordInputField
+ *       value={password()}
+ *       onInput={e => setPassword(e.target.value)}
+ *     />
+ *     <PasswordInputVisibilityTrigger />
+ *   </PasswordInputControl>
+ * </PasswordInput>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { PasswordInput as PasswordInputPrimitive } from '@ark-ui/solid/password-input';
+import type {
+  PasswordInputRootProps as ArkPasswordInputRootProps,
+  PasswordInputControlProps as ArkPasswordInputControlProps,
+  PasswordInputInputProps as ArkPasswordInputInputProps,
+  PasswordInputLabelProps as ArkPasswordInputLabelProps,
+  PasswordInputVisibilityTriggerProps as ArkPasswordInputVisibilityTriggerProps,
+} from '@ark-ui/solid/password-input';
+import { FiEye, FiEyeOff } from 'solid-icons/fi';
+import { cn } from './cn';
+
+// Re-export primitives directly
+const PasswordInputIndicator = PasswordInputPrimitive.Indicator;
+const PasswordInputContext = PasswordInputPrimitive.Context;
+
+type PasswordInputProps = ArkPasswordInputRootProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PasswordInput: Component<PasswordInputProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PasswordInputPrimitive.Root class={cn('w-full', local.class)} {...others}>
+      {local.children}
+    </PasswordInputPrimitive.Root>
+  );
+};
+
+type PasswordInputLabelProps = ArkPasswordInputLabelProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PasswordInputLabel: Component<PasswordInputLabelProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PasswordInputPrimitive.Label
+      class={cn('mb-1 block text-sm font-medium text-gray-700', local.class)}
+      {...others}
+    >
+      {local.children}
+    </PasswordInputPrimitive.Label>
+  );
+};
+
+type PasswordInputControlProps = ArkPasswordInputControlProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PasswordInputControl: Component<PasswordInputControlProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PasswordInputPrimitive.Control
+      class={cn('relative flex items-center', local.class)}
+      {...others}
+    >
+      {local.children}
+    </PasswordInputPrimitive.Control>
+  );
+};
+
+type PasswordInputFieldProps = ArkPasswordInputInputProps & {
+  class?: string;
+};
+
+const PasswordInputField: Component<PasswordInputFieldProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <PasswordInputPrimitive.Input
+      class={cn(
+        'w-full rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm transition',
+        'focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none',
+        'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500',
+        local.class,
+      )}
+      {...others}
+    />
+  );
+};
+
+type PasswordInputVisibilityTriggerProps = ArkPasswordInputVisibilityTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PasswordInputVisibilityTrigger: Component<PasswordInputVisibilityTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PasswordInputPrimitive.VisibilityTrigger
+      class={cn(
+        'absolute right-3 flex items-center text-gray-400 transition-colors',
+        'hover:text-gray-600 focus:outline-none',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children ?? (
+        <PasswordInputPrimitive.Indicator fallback={<FiEyeOff class='h-4 w-4' />}>
+          <FiEye class='h-4 w-4' />
+        </PasswordInputPrimitive.Indicator>
+      )}
+    </PasswordInputPrimitive.VisibilityTrigger>
+  );
+};
+
+export {
+  PasswordInput,
+  PasswordInputLabel,
+  PasswordInputControl,
+  PasswordInputField,
+  PasswordInputVisibilityTrigger,
+  PasswordInputIndicator,
+  PasswordInputContext,
+};
diff --git a/packages/web/src/components/ui/pin-input.tsx b/packages/web/src/components/ui/pin-input.tsx
new file mode 100644
index 000000000..18e92c08d
--- /dev/null
+++ b/packages/web/src/components/ui/pin-input.tsx
@@ -0,0 +1,116 @@
+/**
+ * PinInput component for verification codes.
+ *
+ * @example
+ * // Basic 6-digit OTP input
+ * <PinInput otp onValueComplete={details => handleCode(details.valueAsString)}>
+ *   <PinInputLabel>Verification Code</PinInputLabel>
+ *   <PinInputControl>
+ *     <Index each={[0, 1, 2, 3, 4, 5]}>
+ *       {index => <PinInputField index={index()} />}
+ *     </Index>
+ *   </PinInputControl>
+ *   <PinInputHiddenInput />
+ * </PinInput>
+ *
+ * @example
+ * // With error state
+ * <PinInput invalid={hasError()}>
+ *   <PinInputControl>
+ *     <Index each={[0, 1, 2, 3]}>
+ *       {index => <PinInputField index={index()} />}
+ *     </Index>
+ *   </PinInputControl>
+ * </PinInput>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { PinInput as PinInputPrimitive } from '@ark-ui/solid/pin-input';
+import type {
+  PinInputRootProps as ArkPinInputRootProps,
+  PinInputControlProps as ArkPinInputControlProps,
+  PinInputInputProps as ArkPinInputInputProps,
+  PinInputLabelProps as ArkPinInputLabelProps,
+} from '@ark-ui/solid/pin-input';
+import { cn } from './cn';
+
+// Re-export primitives directly
+const PinInputHiddenInput = PinInputPrimitive.HiddenInput;
+const PinInputContext = PinInputPrimitive.Context;
+
+type PinInputProps = ArkPinInputRootProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PinInput: Component<PinInputProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PinInputPrimitive.Root class={cn('w-full', local.class)} {...others}>
+      {local.children}
+    </PinInputPrimitive.Root>
+  );
+};
+
+type PinInputLabelProps = ArkPinInputLabelProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PinInputLabel: Component<PinInputLabelProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PinInputPrimitive.Label
+      class={cn('mb-2 block text-sm font-medium text-gray-700', local.class)}
+      {...others}
+    >
+      {local.children}
+    </PinInputPrimitive.Label>
+  );
+};
+
+type PinInputControlProps = ArkPinInputControlProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PinInputControl: Component<PinInputControlProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PinInputPrimitive.Control
+      class={cn('flex items-center justify-center gap-2', local.class)}
+      {...others}
+    >
+      {local.children}
+    </PinInputPrimitive.Control>
+  );
+};
+
+type PinInputFieldProps = ArkPinInputInputProps & {
+  class?: string;
+};
+
+const PinInputField: Component<PinInputFieldProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <PinInputPrimitive.Input
+      class={cn(
+        'h-12 w-12 rounded-lg border border-gray-300 text-center text-lg font-semibold transition',
+        'focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none',
+        'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500',
+        'data-invalid:border-red-500 data-invalid:focus:ring-red-500',
+        local.class,
+      )}
+      {...others}
+    />
+  );
+};
+
+export {
+  PinInput,
+  PinInputLabel,
+  PinInputControl,
+  PinInputField,
+  PinInputHiddenInput,
+  PinInputContext,
+};
diff --git a/packages/web/src/components/ui/popover.tsx b/packages/web/src/components/ui/popover.tsx
new file mode 100644
index 000000000..ee5549efc
--- /dev/null
+++ b/packages/web/src/components/ui/popover.tsx
@@ -0,0 +1,207 @@
+/**
+ * Popover component for floating content panels.
+ *
+ * @example
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button>Open Popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverPositioner>
+ *     <PopoverContent>
+ *       <PopoverTitle>Settings</PopoverTitle>
+ *       <PopoverDescription>Adjust your preferences below.</PopoverDescription>
+ *       <PopoverCloseTrigger>
+ *         <FiX />
+ *       </PopoverCloseTrigger>
+ *     </PopoverContent>
+ *   </PopoverPositioner>
+ * </Popover>
+ *
+ * @example
+ * // Inside a Dialog (prevents portal z-index issues)
+ * <PopoverPositioner inDialog>
+ *   <PopoverContent>...</PopoverContent>
+ * </PopoverPositioner>
+ *
+ * @example
+ * // With arrow
+ * <PopoverContent>
+ *   <PopoverArrow>
+ *     <PopoverArrowTip />
+ *   </PopoverArrow>
+ *   Content here
+ * </PopoverContent>
+ */
+import type { Component, JSX } from 'solid-js';
+import { Show, splitProps } from 'solid-js';
+import { Popover as PopoverPrimitive } from '@ark-ui/solid/popover';
+import type {
+  PopoverRootProps as ArkPopoverRootProps,
+  PopoverContentProps as ArkPopoverContentProps,
+  PopoverTriggerProps as ArkPopoverTriggerProps,
+  PopoverTitleProps as ArkPopoverTitleProps,
+  PopoverDescriptionProps as ArkPopoverDescriptionProps,
+  PopoverCloseTriggerProps as ArkPopoverCloseTriggerProps,
+  PopoverArrowProps as ArkPopoverArrowProps,
+  PopoverArrowTipProps as ArkPopoverArrowTipProps,
+} from '@ark-ui/solid/popover';
+import { Portal } from 'solid-js/web';
+import { cn } from './cn';
+import { Z_INDEX } from './z-index';
+
+type PopoverProps = Omit<ArkPopoverRootProps, 'onOpenChange'> & {
+  children?: JSX.Element;
+  onOpenChange?: (_open: boolean) => void;
+};
+
+const Popover: Component<PopoverProps> = props => {
+  const [local, others] = splitProps(props, ['children', 'onOpenChange']);
+  return (
+    <PopoverPrimitive.Root onOpenChange={details => local.onOpenChange?.(details.open)} {...others}>
+      {local.children}
+    </PopoverPrimitive.Root>
+  );
+};
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+type PopoverTriggerProps = ArkPopoverTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PopoverTrigger: Component<PopoverTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PopoverPrimitive.Trigger class={local.class} {...others}>
+      {local.children}
+    </PopoverPrimitive.Trigger>
+  );
+};
+
+type PopoverPositionerProps = {
+  class?: string;
+  children?: JSX.Element;
+  inDialog?: boolean;
+};
+
+const PopoverPositioner: Component<PopoverPositionerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'inDialog']);
+
+  const positioner = (
+    <PopoverPrimitive.Positioner class={local.class} {...others}>
+      {local.children}
+    </PopoverPrimitive.Positioner>
+  );
+
+  return (
+    <Show when={!local.inDialog} fallback={positioner}>
+      <Portal>{positioner}</Portal>
+    </Show>
+  );
+};
+
+type PopoverContentProps = ArkPopoverContentProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PopoverContent: Component<PopoverContentProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PopoverPrimitive.Content
+      class={cn(
+        'w-72 rounded-md border border-gray-200 bg-white p-4 shadow-md outline-none',
+        Z_INDEX.POPOVER,
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </PopoverPrimitive.Content>
+  );
+};
+
+type PopoverTitleProps = ArkPopoverTitleProps & {
+  class?: string;
+};
+
+const PopoverTitle: Component<PopoverTitleProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <PopoverPrimitive.Title
+      class={cn('text-sm font-medium text-gray-900', local.class)}
+      {...others}
+    />
+  );
+};
+
+type PopoverDescriptionProps = ArkPopoverDescriptionProps & {
+  class?: string;
+};
+
+const PopoverDescription: Component<PopoverDescriptionProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <PopoverPrimitive.Description
+      class={cn('mt-1 text-sm text-gray-500', local.class)}
+      {...others}
+    />
+  );
+};
+
+type PopoverCloseTriggerProps = ArkPopoverCloseTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const PopoverCloseTrigger: Component<PopoverCloseTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <PopoverPrimitive.CloseTrigger
+      class={cn(
+        'absolute top-2 right-2 rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </PopoverPrimitive.CloseTrigger>
+  );
+};
+
+type PopoverArrowProps = ArkPopoverArrowProps & {
+  class?: string;
+};
+
+const PopoverArrow: Component<PopoverArrowProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return <PopoverPrimitive.Arrow class={local.class} {...others} />;
+};
+
+type PopoverArrowTipProps = ArkPopoverArrowTipProps & {
+  class?: string;
+};
+
+const PopoverArrowTip: Component<PopoverArrowTipProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <PopoverPrimitive.ArrowTip
+      class={cn('border-t border-l border-gray-200 bg-white', local.class)}
+      {...others}
+    />
+  );
+};
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverTrigger,
+  PopoverPositioner,
+  PopoverContent,
+  PopoverTitle,
+  PopoverDescription,
+  PopoverCloseTrigger,
+  PopoverArrow,
+  PopoverArrowTip,
+};
diff --git a/packages/web/src/components/ui/progress.tsx b/packages/web/src/components/ui/progress.tsx
new file mode 100644
index 000000000..86004c8d5
--- /dev/null
+++ b/packages/web/src/components/ui/progress.tsx
@@ -0,0 +1,136 @@
+/**
+ * Progress component for displaying completion status.
+ *
+ * @example
+ * // Basic usage
+ * <Progress value={75}>
+ *   <ProgressTrack>
+ *     <ProgressRange />
+ *   </ProgressTrack>
+ * </Progress>
+ *
+ * @example
+ * // With label and value
+ * <Progress value={50}>
+ *   <ProgressLabel>Loading...</ProgressLabel>
+ *   <ProgressTrack>
+ *     <ProgressRange />
+ *   </ProgressTrack>
+ *   <ProgressValueText />
+ * </Progress>
+ *
+ * @example
+ * // With variant colors
+ * <Progress value={90}>
+ *   <ProgressTrack>
+ *     <ProgressRange class="bg-red-500" />
+ *   </ProgressTrack>
+ * </Progress>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { Progress as ProgressPrimitive } from '@ark-ui/solid/progress';
+import type {
+  ProgressRootProps as ArkProgressRootProps,
+  ProgressTrackProps as ArkProgressTrackProps,
+  ProgressRangeProps as ArkProgressRangeProps,
+  ProgressLabelProps as ArkProgressLabelProps,
+  ProgressValueTextProps as ArkProgressValueTextProps,
+} from '@ark-ui/solid/progress';
+import { cn } from './cn';
+
+// Re-export context directly
+const ProgressContext = ProgressPrimitive.Context;
+
+type ProgressProps = ArkProgressRootProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const Progress: Component<ProgressProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <ProgressPrimitive.Root class={cn('w-full', local.class)} {...others}>
+      {local.children}
+    </ProgressPrimitive.Root>
+  );
+};
+
+type ProgressTrackProps = ArkProgressTrackProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const ProgressTrack: Component<ProgressTrackProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <ProgressPrimitive.Track
+      class={cn('h-2 w-full overflow-hidden rounded-full bg-gray-200', local.class)}
+      {...others}
+    >
+      {local.children}
+    </ProgressPrimitive.Track>
+  );
+};
+
+type ProgressRangeProps = ArkProgressRangeProps & {
+  class?: string;
+};
+
+const ProgressRange: Component<ProgressRangeProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <ProgressPrimitive.Range
+      class={cn('h-full bg-blue-600 transition-[width] duration-300 ease-in-out', local.class)}
+      {...others}
+    />
+  );
+};
+
+type ProgressLabelProps = ArkProgressLabelProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const ProgressLabel: Component<ProgressLabelProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <ProgressPrimitive.Label
+      class={cn('mb-1 block text-sm font-medium text-gray-700', local.class)}
+      {...others}
+    >
+      {local.children}
+    </ProgressPrimitive.Label>
+  );
+};
+
+type ProgressValueTextProps = ArkProgressValueTextProps & {
+  class?: string;
+};
+
+const ProgressValueText: Component<ProgressValueTextProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <ProgressPrimitive.ValueText
+      class={cn('text-sm font-medium text-gray-600', local.class)}
+      {...others}
+    />
+  );
+};
+
+// Circular progress components
+const ProgressCircle = ProgressPrimitive.Circle;
+const ProgressCircleTrack = ProgressPrimitive.CircleTrack;
+const ProgressCircleRange = ProgressPrimitive.CircleRange;
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressRange,
+  ProgressLabel,
+  ProgressValueText,
+  ProgressContext,
+  ProgressCircle,
+  ProgressCircleTrack,
+  ProgressCircleRange,
+};
diff --git a/packages/web/src/components/ui/qr-code.tsx b/packages/web/src/components/ui/qr-code.tsx
new file mode 100644
index 000000000..36c9d6818
--- /dev/null
+++ b/packages/web/src/components/ui/qr-code.tsx
@@ -0,0 +1,124 @@
+/**
+ * QRCode component for generating QR codes.
+ *
+ * @example
+ * // Basic usage
+ * <QRCode value="https://example.com">
+ *   <QRCodeFrame>
+ *     <QRCodePattern />
+ *   </QRCodeFrame>
+ * </QRCode>
+ *
+ * @example
+ * // With download button
+ * <QRCode value={totpUri()} pixelSize={192}>
+ *   <QRCodeFrame>
+ *     <QRCodePattern />
+ *   </QRCodeFrame>
+ *   <QRCodeDownloadTrigger fileName="qr-code.png" mimeType="image/png">
+ *     Download QR Code
+ *   </QRCodeDownloadTrigger>
+ * </QRCode>
+ *
+ * @example
+ * // With overlay (logo in center)
+ * <QRCode value="https://example.com">
+ *   <QRCodeFrame>
+ *     <QRCodePattern />
+ *   </QRCodeFrame>
+ *   <QRCodeOverlay>
+ *     <img src="/logo.png" alt="Logo" />
+ *   </QRCodeOverlay>
+ * </QRCode>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { QrCode as QrCodePrimitive } from '@ark-ui/solid/qr-code';
+import type {
+  QrCodeRootProps as ArkQrCodeRootProps,
+  QrCodeFrameProps as ArkQrCodeFrameProps,
+  QrCodePatternProps as ArkQrCodePatternProps,
+  QrCodeOverlayProps as ArkQrCodeOverlayProps,
+  QrCodeDownloadTriggerProps as ArkQrCodeDownloadTriggerProps,
+} from '@ark-ui/solid/qr-code';
+import { cn } from './cn';
+
+// Re-export primitives directly
+const QRCodeContext = QrCodePrimitive.Context;
+
+type QRCodeProps = ArkQrCodeRootProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const QRCode: Component<QRCodeProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <QrCodePrimitive.Root class={cn('inline-flex flex-col items-center', local.class)} {...others}>
+      {local.children}
+    </QrCodePrimitive.Root>
+  );
+};
+
+type QRCodeFrameProps = ArkQrCodeFrameProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const QRCodeFrame: Component<QRCodeFrameProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <QrCodePrimitive.Frame class={cn('', local.class)} {...others}>
+      {local.children}
+    </QrCodePrimitive.Frame>
+  );
+};
+
+type QRCodePatternProps = ArkQrCodePatternProps & {
+  class?: string;
+};
+
+const QRCodePattern: Component<QRCodePatternProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return <QrCodePrimitive.Pattern class={cn('', local.class)} {...others} />;
+};
+
+type QRCodeOverlayProps = ArkQrCodeOverlayProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const QRCodeOverlay: Component<QRCodeOverlayProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <QrCodePrimitive.Overlay
+      class={cn('absolute inset-0 flex items-center justify-center', local.class)}
+      {...others}
+    >
+      {local.children}
+    </QrCodePrimitive.Overlay>
+  );
+};
+
+type QRCodeDownloadTriggerProps = ArkQrCodeDownloadTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const QRCodeDownloadTrigger: Component<QRCodeDownloadTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <QrCodePrimitive.DownloadTrigger
+      class={cn(
+        'mt-2 rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors',
+        'hover:bg-gray-200 focus:ring-2 focus:ring-blue-500 focus:outline-none',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </QrCodePrimitive.DownloadTrigger>
+  );
+};
+
+export { QRCode, QRCodeFrame, QRCodePattern, QRCodeOverlay, QRCodeDownloadTrigger, QRCodeContext };
diff --git a/packages/web/src/components/ui/select.tsx b/packages/web/src/components/ui/select.tsx
new file mode 100644
index 000000000..69b97d90a
--- /dev/null
+++ b/packages/web/src/components/ui/select.tsx
@@ -0,0 +1,382 @@
+/**
+ * Select component for dropdown selection.
+ *
+ * @example
+ * const items = createListCollection({
+ *   items: [
+ *     { label: 'React', value: 'react' },
+ *     { label: 'Solid', value: 'solid' },
+ *     { label: 'Vue', value: 'vue' },
+ *   ],
+ * });
+ *
+ * <Select collection={items} onValueChange={details => console.log(details.value)}>
+ *   <SelectLabel>Framework</SelectLabel>
+ *   <SelectControl>
+ *     <SelectTrigger>
+ *       <SelectValueText placeholder="Select a framework" />
+ *       <SelectIndicator />
+ *     </SelectTrigger>
+ *   </SelectControl>
+ *   <SelectPositioner>
+ *     <SelectContent>
+ *       <For each={items.items}>
+ *         {item => (
+ *           <SelectItem item={item}>
+ *             <SelectItemText>{item.label}</SelectItemText>
+ *             <SelectItemIndicator />
+ *           </SelectItem>
+ *         )}
+ *       </For>
+ *     </SelectContent>
+ *   </SelectPositioner>
+ * </Select>
+ *
+ * @example
+ * // Inside a Dialog (prevents portal z-index issues)
+ * <SelectPositioner inDialog>
+ *   <SelectContent>...</SelectContent>
+ * </SelectPositioner>
+ */
+import type { Component, JSX } from 'solid-js';
+import { Index, Show, splitProps, createMemo } from 'solid-js';
+import { Select as SelectPrimitive, createListCollection } from '@ark-ui/solid/select';
+import type {
+  SelectRootProps as ArkSelectRootProps,
+  SelectLabelProps as ArkSelectLabelProps,
+  SelectTriggerProps as ArkSelectTriggerProps,
+  SelectContentProps as ArkSelectContentProps,
+  SelectItemProps as ArkSelectItemProps,
+  SelectItemGroupProps as ArkSelectItemGroupProps,
+  SelectItemGroupLabelProps as ArkSelectItemGroupLabelProps,
+  SelectPositionerProps as ArkSelectPositionerProps,
+} from '@ark-ui/solid/select';
+import { Portal } from 'solid-js/web';
+import { BiRegularChevronDown, BiRegularCheck } from 'solid-icons/bi';
+import { cn } from './cn';
+import { Z_INDEX } from './z-index';
+
+type SelectProps<T> = Omit<ArkSelectRootProps<T>, 'onValueChange' | 'onOpenChange'> & {
+  children?: JSX.Element;
+  onValueChange?: (_value: string[]) => void;
+  onOpenChange?: (_open: boolean) => void;
+};
+
+const Select = <T,>(props: SelectProps<T>) => {
+  const [local, others] = splitProps(props, ['children', 'onValueChange', 'onOpenChange']);
+  return (
+    <SelectPrimitive.Root
+      positioning={{ sameWidth: true, ...props.positioning }}
+      onValueChange={details => local.onValueChange?.(details.value)}
+      onOpenChange={details => local.onOpenChange?.(details.open)}
+      {...others}
+    >
+      {local.children}
+    </SelectPrimitive.Root>
+  );
+};
+
+const SelectControl = SelectPrimitive.Control;
+const SelectValueText = SelectPrimitive.ValueText;
+const SelectItemText = SelectPrimitive.ItemText;
+const SelectHiddenSelect = SelectPrimitive.HiddenSelect;
+
+type SelectLabelProps = ArkSelectLabelProps & {
+  class?: string;
+};
+
+const SelectLabel: Component<SelectLabelProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <SelectPrimitive.Label
+      class={cn('mb-1.5 block text-sm leading-none font-medium text-gray-900', local.class)}
+      {...others}
+    />
+  );
+};
+
+type SelectTriggerProps = ArkSelectTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const SelectTrigger: Component<SelectTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <SelectPrimitive.Trigger
+      class={cn(
+        'flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm',
+        'text-gray-900 ring-offset-white placeholder:text-gray-500',
+        'hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-invalid:border-red-500 data-invalid:focus:ring-red-500',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </SelectPrimitive.Trigger>
+  );
+};
+
+type SelectIndicatorProps = {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const SelectIndicator: Component<SelectIndicatorProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <SelectPrimitive.Indicator
+      class={cn('transition-transform duration-200', local.class)}
+      {...others}
+    >
+      <Show
+        when={local.children}
+        fallback={<BiRegularChevronDown class='h-4 w-4 text-gray-500 opacity-50' />}
+      >
+        {local.children}
+      </Show>
+    </SelectPrimitive.Indicator>
+  );
+};
+
+type SelectClearTriggerProps = {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const SelectClearTrigger: Component<SelectClearTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <SelectPrimitive.ClearTrigger
+      class={cn('text-gray-500 hover:text-gray-700', local.class)}
+      {...others}
+    >
+      {local.children}
+    </SelectPrimitive.ClearTrigger>
+  );
+};
+
+type SelectPositionerProps = ArkSelectPositionerProps & {
+  class?: string;
+  children?: JSX.Element;
+  /** Set to true when used inside a Dialog to prevent z-index issues */
+  inDialog?: boolean;
+};
+
+const SelectPositioner: Component<SelectPositionerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'inDialog']);
+
+  const positioner = (
+    <SelectPrimitive.Positioner class={local.class} {...others}>
+      {local.children}
+    </SelectPrimitive.Positioner>
+  );
+
+  return (
+    <Show when={!local.inDialog} fallback={positioner}>
+      <Portal>{positioner}</Portal>
+    </Show>
+  );
+};
+
+type SelectContentProps = ArkSelectContentProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const SelectContent: Component<SelectContentProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <SelectPrimitive.Content
+      class={cn(
+        'max-h-96 min-w-32 overflow-hidden rounded-md border border-gray-200 bg-white p-1 shadow-md',
+        Z_INDEX.SELECT,
+        'focus:outline-none',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </SelectPrimitive.Content>
+  );
+};
+
+type SelectItemGroupProps = ArkSelectItemGroupProps & {
+  class?: string;
+};
+
+const SelectItemGroup: Component<SelectItemGroupProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return <SelectPrimitive.ItemGroup class={local.class} {...others} />;
+};
+
+type SelectItemGroupLabelProps = ArkSelectItemGroupLabelProps & {
+  class?: string;
+};
+
+const SelectItemGroupLabel: Component<SelectItemGroupLabelProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <SelectPrimitive.ItemGroupLabel
+      class={cn('px-2 py-1.5 text-sm font-semibold text-gray-900', local.class)}
+      {...others}
+    />
+  );
+};
+
+type SelectItemProps = ArkSelectItemProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const SelectItem: Component<SelectItemProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <SelectPrimitive.Item
+      class={cn(
+        'relative flex w-full cursor-default items-center rounded-sm px-2 py-1.5 pr-8 text-sm',
+        'text-gray-900 outline-none select-none',
+        'hover:bg-gray-100 focus:bg-gray-100',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
+        'data-highlighted:bg-gray-100',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </SelectPrimitive.Item>
+  );
+};
+
+type SelectItemIndicatorProps = {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const SelectItemIndicator: Component<SelectItemIndicatorProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <SelectPrimitive.ItemIndicator
+      class={cn('absolute right-2 flex h-3.5 w-3.5 items-center justify-center', local.class)}
+      {...others}
+    >
+      <Show when={local.children} fallback={<BiRegularCheck class='h-4 w-4 text-blue-600' />}>
+        {local.children}
+      </Show>
+    </SelectPrimitive.ItemIndicator>
+  );
+};
+
+// --- SimpleSelect: Convenience wrapper matching old @corates/ui API ---
+
+type SelectOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+type SimpleSelectProps = {
+  /** Options to display */
+  items: SelectOption[];
+  /** The selected value (controlled) */
+  value?: string;
+  /** Callback when value changes */
+  onChange?: (_value: string) => void;
+  /** Label text for the select */
+  label?: string;
+  /** Placeholder text when no value selected */
+  placeholder?: string;
+  /** Whether the select is disabled */
+  disabled?: boolean;
+  /** Array of values that should be disabled */
+  disabledValues?: string[];
+  /** Set to true when used inside a Dialog */
+  inDialog?: boolean;
+  /** Additional class for the root element */
+  class?: string;
+};
+
+const SimpleSelect: Component<SimpleSelectProps> = props => {
+  const [local, others] = splitProps(props, [
+    'items',
+    'value',
+    'onChange',
+    'label',
+    'placeholder',
+    'disabledValues',
+    'inDialog',
+    'class',
+  ]);
+
+  const disabledSet = () => new Set(local.disabledValues || []);
+
+  // Use createMemo for reactive collection updates (Ark UI best practice)
+  const collection = createMemo(() =>
+    createListCollection({
+      items: (local.items || []).map(item => ({
+        ...item,
+        disabled: item.disabled || disabledSet().has(item.value),
+      })),
+      itemToString: item => item.label,
+      itemToValue: item => item.value,
+    }),
+  );
+
+  // Convert single value to array format for Ark UI
+  const selectValue = () => (local.value != null && local.value !== '' ? [local.value] : []);
+
+  return (
+    <Select
+      collection={collection()}
+      value={selectValue()}
+      onValueChange={values => local.onChange?.(values[0] || '')}
+      class={local.class}
+      {...others}
+    >
+      <Show when={local.label}>
+        <SelectLabel>{local.label}</SelectLabel>
+      </Show>
+      <SelectControl>
+        <SelectTrigger>
+          <SelectValueText placeholder={local.placeholder || 'Select option'} />
+          <SelectIndicator />
+        </SelectTrigger>
+      </SelectControl>
+      <SelectPositioner inDialog={local.inDialog}>
+        <SelectContent>
+          <Index each={collection().items}>
+            {item => (
+              <SelectItem item={item()}>
+                <SelectItemText>{item().label}</SelectItemText>
+                <SelectItemIndicator />
+              </SelectItem>
+            )}
+          </Index>
+        </SelectContent>
+      </SelectPositioner>
+      <SelectHiddenSelect />
+    </Select>
+  );
+};
+
+export {
+  Select,
+  SelectLabel,
+  SelectControl,
+  SelectTrigger,
+  SelectValueText,
+  SelectIndicator,
+  SelectClearTrigger,
+  SelectPositioner,
+  SelectContent,
+  SelectItemGroup,
+  SelectItemGroupLabel,
+  SelectItem,
+  SelectItemText,
+  SelectItemIndicator,
+  SelectHiddenSelect,
+  createListCollection,
+  SimpleSelect,
+};
diff --git a/packages/web/src/components/ui/spinner.tsx b/packages/web/src/components/ui/spinner.tsx
new file mode 100644
index 000000000..33936f9d6
--- /dev/null
+++ b/packages/web/src/components/ui/spinner.tsx
@@ -0,0 +1,109 @@
+/**
+ * Spinner and loading components.
+ *
+ * @example
+ * // Basic spinner
+ * <Spinner />
+ *
+ * // Large spinner
+ * <Spinner size="lg" />
+ *
+ * // White spinner (for dark backgrounds)
+ * <Spinner variant="white" />
+ *
+ * @example
+ * // Page loader (centered with min-height)
+ * <PageLoader />
+ *
+ * @example
+ * // Loading placeholder with text
+ * <LoadingPlaceholder label="Loading projects..." />
+ *
+ * @example
+ * // Button spinner (small, white)
+ * <Button disabled>
+ *   <ButtonSpinner />
+ *   Saving...
+ * </Button>
+ */
+import type { Component, ComponentProps } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './cn';
+
+const spinnerVariants = cva('inline-block animate-spin rounded-full border-transparent', {
+  variants: {
+    size: {
+      sm: 'h-4 w-4 border-2',
+      md: 'h-6 w-6 border-2',
+      lg: 'h-8 w-8 border-[3px]',
+      xl: 'h-12 w-12 border-4',
+    },
+    variant: {
+      default: 'border-t-blue-600 border-r-blue-600',
+      white: 'border-t-white border-r-white',
+      gray: 'border-t-gray-600 border-r-gray-600',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'default',
+  },
+});
+
+type SpinnerProps = ComponentProps<'div'> &
+  VariantProps<typeof spinnerVariants> & {
+    label?: string;
+  };
+
+const Spinner: Component<SpinnerProps> = props => {
+  const [local, others] = splitProps(props, ['size', 'variant', 'class', 'label']);
+  return (
+    <div
+      role='status'
+      aria-label={local.label ?? 'Loading'}
+      class={cn(spinnerVariants({ size: local.size, variant: local.variant }), local.class)}
+      {...others}
+    />
+  );
+};
+
+type PageLoaderProps = ComponentProps<'div'> & {
+  label?: string;
+};
+
+const PageLoader: Component<PageLoaderProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'label']);
+  return (
+    <div class={cn('flex min-h-50 items-center justify-center', local.class)} {...others}>
+      <Spinner size='lg' label={local.label} />
+    </div>
+  );
+};
+
+type LoadingPlaceholderProps = ComponentProps<'div'> & {
+  label?: string;
+};
+
+const LoadingPlaceholder: Component<LoadingPlaceholderProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'label']);
+  return (
+    <div
+      class={cn('flex flex-col items-center justify-center gap-3 py-12 text-gray-500', local.class)}
+      {...others}
+    >
+      <Spinner size='lg' />
+      <span class='text-sm'>{local.label ?? 'Loading...'}</span>
+    </div>
+  );
+};
+
+type ButtonSpinnerProps = ComponentProps<'div'>;
+
+const ButtonSpinner: Component<ButtonSpinnerProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return <Spinner size='sm' variant='white' class={local.class} {...others} />;
+};
+
+export { Spinner, PageLoader, LoadingPlaceholder, ButtonSpinner, spinnerVariants };
+export type { SpinnerProps };
diff --git a/packages/web/src/components/ui/steps.tsx b/packages/web/src/components/ui/steps.tsx
new file mode 100644
index 000000000..694dd7a55
--- /dev/null
+++ b/packages/web/src/components/ui/steps.tsx
@@ -0,0 +1,210 @@
+/**
+ * Steps component for multi-step wizards and progress indicators.
+ *
+ * @example
+ * <Steps count={3} defaultStep={0}>
+ *   <StepsList>
+ *     <StepsItem index={0}>
+ *       <StepsTrigger>
+ *         <StepsIndicator>1</StepsIndicator>
+ *       </StepsTrigger>
+ *       <StepsSeparator />
+ *     </StepsItem>
+ *     <StepsItem index={1}>
+ *       <StepsTrigger>
+ *         <StepsIndicator>2</StepsIndicator>
+ *       </StepsTrigger>
+ *       <StepsSeparator />
+ *     </StepsItem>
+ *     <StepsItem index={2}>
+ *       <StepsTrigger>
+ *         <StepsIndicator>3</StepsIndicator>
+ *       </StepsTrigger>
+ *     </StepsItem>
+ *   </StepsList>
+ *
+ *   <StepsContent index={0}>Step 1 content</StepsContent>
+ *   <StepsContent index={1}>Step 2 content</StepsContent>
+ *   <StepsContent index={2}>Step 3 content</StepsContent>
+ *   <StepsCompletedContent>All done!</StepsCompletedContent>
+ *
+ *   <StepsPrevTrigger>Previous</StepsPrevTrigger>
+ *   <StepsNextTrigger>Next</StepsNextTrigger>
+ * </Steps>
+ *
+ * @example
+ * // Controlled
+ * const [step, setStep] = createSignal(0);
+ * <Steps step={step()} onStepChange={details => setStep(details.step)}>
+ *   ...
+ * </Steps>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { Steps as StepsPrimitive } from '@ark-ui/solid/steps';
+import type {
+  StepsRootProps as ArkStepsRootProps,
+  StepsListProps as ArkStepsListProps,
+  StepsItemProps as ArkStepsItemProps,
+  StepsTriggerProps as ArkStepsTriggerProps,
+  StepsIndicatorProps as ArkStepsIndicatorProps,
+  StepsSeparatorProps as ArkStepsSeparatorProps,
+  StepsContentProps as ArkStepsContentProps,
+  StepsCompletedContentProps as ArkStepsCompletedContentProps,
+  StepsNextTriggerProps as ArkStepsNextTriggerProps,
+  StepsPrevTriggerProps as ArkStepsPrevTriggerProps,
+} from '@ark-ui/solid/steps';
+import { cn } from './cn';
+
+type StepsProps = ArkStepsRootProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const Steps: Component<StepsProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <StepsPrimitive.Root class={local.class} {...others}>
+      {local.children}
+    </StepsPrimitive.Root>
+  );
+};
+
+type StepsListProps = ArkStepsListProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const StepsList: Component<StepsListProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <StepsPrimitive.List class={cn('flex items-center gap-2', local.class)} {...others}>
+      {local.children}
+    </StepsPrimitive.List>
+  );
+};
+
+type StepsItemProps = ArkStepsItemProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const StepsItem: Component<StepsItemProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <StepsPrimitive.Item class={cn('flex items-center gap-2', local.class)} {...others}>
+      {local.children}
+    </StepsPrimitive.Item>
+  );
+};
+
+type StepsTriggerProps = ArkStepsTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const StepsTrigger: Component<StepsTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <StepsPrimitive.Trigger class={local.class} {...others}>
+      {local.children}
+    </StepsPrimitive.Trigger>
+  );
+};
+
+type StepsIndicatorProps = ArkStepsIndicatorProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const StepsIndicator: Component<StepsIndicatorProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <StepsPrimitive.Indicator class={local.class} {...others}>
+      {local.children}
+    </StepsPrimitive.Indicator>
+  );
+};
+
+type StepsSeparatorProps = ArkStepsSeparatorProps & {
+  class?: string;
+};
+
+const StepsSeparator: Component<StepsSeparatorProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <StepsPrimitive.Separator
+      class={cn('h-0.5 flex-1 bg-gray-200', 'data-[complete]:bg-blue-600', local.class)}
+      {...others}
+    />
+  );
+};
+
+type StepsContentProps = ArkStepsContentProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const StepsContent: Component<StepsContentProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <StepsPrimitive.Content class={local.class} {...others}>
+      {local.children}
+    </StepsPrimitive.Content>
+  );
+};
+
+type StepsCompletedContentProps = ArkStepsCompletedContentProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const StepsCompletedContent: Component<StepsCompletedContentProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <StepsPrimitive.CompletedContent class={local.class} {...others}>
+      {local.children}
+    </StepsPrimitive.CompletedContent>
+  );
+};
+
+type StepsNextTriggerProps = ArkStepsNextTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const StepsNextTrigger: Component<StepsNextTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <StepsPrimitive.NextTrigger class={local.class} {...others}>
+      {local.children}
+    </StepsPrimitive.NextTrigger>
+  );
+};
+
+type StepsPrevTriggerProps = ArkStepsPrevTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const StepsPrevTrigger: Component<StepsPrevTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <StepsPrimitive.PrevTrigger class={local.class} {...others}>
+      {local.children}
+    </StepsPrimitive.PrevTrigger>
+  );
+};
+
+export {
+  Steps,
+  StepsList,
+  StepsItem,
+  StepsTrigger,
+  StepsIndicator,
+  StepsSeparator,
+  StepsContent,
+  StepsCompletedContent,
+  StepsNextTrigger,
+  StepsPrevTrigger,
+};
diff --git a/packages/web/src/components/ui/switch.tsx b/packages/web/src/components/ui/switch.tsx
new file mode 100644
index 000000000..f25f9c533
--- /dev/null
+++ b/packages/web/src/components/ui/switch.tsx
@@ -0,0 +1,115 @@
+/**
+ * Switch component for toggle inputs.
+ *
+ * @example
+ * <SwitchRoot>
+ *   <SwitchControl>
+ *     <SwitchThumb />
+ *   </SwitchControl>
+ *   <SwitchLabel>Enable notifications</SwitchLabel>
+ *   <SwitchHiddenInput />
+ * </SwitchRoot>
+ *
+ * @example
+ * // Controlled
+ * const [enabled, setEnabled] = createSignal(false);
+ * <SwitchRoot
+ *   checked={enabled()}
+ *   onCheckedChange={setEnabled}
+ * >
+ *   <SwitchControl>
+ *     <SwitchThumb />
+ *   </SwitchControl>
+ *   <SwitchLabel>Dark mode</SwitchLabel>
+ * </SwitchRoot>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { Switch as SwitchPrimitive } from '@ark-ui/solid/switch';
+import type {
+  SwitchRootProps as ArkSwitchRootProps,
+  SwitchControlProps as ArkSwitchControlProps,
+  SwitchThumbProps as ArkSwitchThumbProps,
+  SwitchLabelProps as ArkSwitchLabelProps,
+} from '@ark-ui/solid/switch';
+import { cn } from './cn';
+
+const Switch = SwitchPrimitive.Root;
+const SwitchHiddenInput = SwitchPrimitive.HiddenInput;
+
+type SwitchRootProps = Omit<ArkSwitchRootProps, 'onCheckedChange'> & {
+  class?: string;
+  children?: JSX.Element;
+  onCheckedChange?: (_checked: boolean) => void;
+};
+
+const SwitchRoot: Component<SwitchRootProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'onCheckedChange']);
+  return (
+    <SwitchPrimitive.Root
+      class={cn('flex items-center gap-2', local.class)}
+      onCheckedChange={details => local.onCheckedChange?.(details.checked)}
+      {...others}
+    >
+      {local.children}
+    </SwitchPrimitive.Root>
+  );
+};
+
+type SwitchControlProps = ArkSwitchControlProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const SwitchControl: Component<SwitchControlProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <SwitchPrimitive.Control
+      class={cn(
+        'inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent',
+        'transition-colors',
+        'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:outline-none',
+        'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        'bg-gray-200 data-[state=checked]:bg-blue-600',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </SwitchPrimitive.Control>
+  );
+};
+
+type SwitchThumbProps = ArkSwitchThumbProps & {
+  class?: string;
+};
+
+const SwitchThumb: Component<SwitchThumbProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <SwitchPrimitive.Thumb
+      class={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform',
+        'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        local.class,
+      )}
+      {...others}
+    />
+  );
+};
+
+type SwitchLabelProps = ArkSwitchLabelProps & {
+  class?: string;
+};
+
+const SwitchLabel: Component<SwitchLabelProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <SwitchPrimitive.Label
+      class={cn('text-sm leading-none font-medium text-gray-900', local.class)}
+      {...others}
+    />
+  );
+};
+
+export { Switch, SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel, SwitchHiddenInput };
diff --git a/packages/web/src/components/ui/tabs.tsx b/packages/web/src/components/ui/tabs.tsx
new file mode 100644
index 000000000..52c418ba1
--- /dev/null
+++ b/packages/web/src/components/ui/tabs.tsx
@@ -0,0 +1,132 @@
+/**
+ * Tabs component for tabbed interfaces.
+ * Uses minimal default styles - add your own via class props.
+ *
+ * @example
+ * // Bordered tabs (common pattern)
+ * <Tabs defaultValue="account">
+ *   <TabsList class="overflow-x-auto rounded-t-lg border border-gray-200 bg-white">
+ *     <TabsTrigger
+ *       value="account"
+ *       class="border-b-2 border-transparent text-gray-600 hover:bg-gray-50 data-[selected]:border-blue-600 data-[selected]:text-gray-900"
+ *     >
+ *       Account
+ *     </TabsTrigger>
+ *     <TabsTrigger value="password" class="...">Password</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="account" class="rounded-b-lg border border-t-0 border-gray-200 bg-white p-6">
+ *     Account settings here
+ *   </TabsContent>
+ * </Tabs>
+ *
+ * @example
+ * // Controlled tabs
+ * const [tab, setTab] = createSignal('account');
+ * <Tabs value={tab()} onValueChange={setTab}>
+ *   ...
+ * </Tabs>
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import { Tabs as TabsPrimitive } from '@ark-ui/solid/tabs';
+import type {
+  TabsRootProps as ArkTabsRootProps,
+  TabListProps as ArkTabsListProps,
+  TabTriggerProps as ArkTabsTriggerProps,
+  TabContentProps as ArkTabsContentProps,
+  TabIndicatorProps as ArkTabsIndicatorProps,
+} from '@ark-ui/solid/tabs';
+import { cn } from './cn';
+
+type TabsProps = Omit<ArkTabsRootProps, 'onValueChange'> & {
+  class?: string;
+  children?: JSX.Element;
+  onValueChange?: (_value: string) => void;
+};
+
+const Tabs: Component<TabsProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'onValueChange']);
+  return (
+    <TabsPrimitive.Root
+      class={local.class}
+      onValueChange={details => local.onValueChange?.(details.value)}
+      {...others}
+    >
+      {local.children}
+    </TabsPrimitive.Root>
+  );
+};
+
+type TabsListProps = ArkTabsListProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const TabsList: Component<TabsListProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <TabsPrimitive.List class={cn('flex items-center', local.class)} {...others}>
+      {local.children}
+    </TabsPrimitive.List>
+  );
+};
+
+type TabsTriggerProps = ArkTabsTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const TabsTrigger: Component<TabsTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <TabsPrimitive.Trigger
+      class={cn(
+        'inline-flex items-center px-4 py-3 text-sm font-medium whitespace-nowrap',
+        'transition-colors',
+        'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none',
+        'disabled:pointer-events-none disabled:opacity-50',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </TabsPrimitive.Trigger>
+  );
+};
+
+type TabsContentProps = ArkTabsContentProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const TabsContent: Component<TabsContentProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <TabsPrimitive.Content
+      class={cn(
+        'mt-2 ring-offset-white',
+        'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:outline-none',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </TabsPrimitive.Content>
+  );
+};
+
+type TabsIndicatorProps = ArkTabsIndicatorProps & {
+  class?: string;
+};
+
+const TabsIndicator: Component<TabsIndicatorProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <TabsPrimitive.Indicator
+      class={cn('absolute bottom-0 h-0.5 bg-blue-600 transition-all', local.class)}
+      {...others}
+    />
+  );
+};
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator };
diff --git a/packages/web/src/components/ui/toast.tsx b/packages/web/src/components/ui/toast.tsx
new file mode 100644
index 000000000..f7f384791
--- /dev/null
+++ b/packages/web/src/components/ui/toast.tsx
@@ -0,0 +1,233 @@
+/**
+ * Toast notification system.
+ *
+ * Setup: Add <ToasterContainer /> once in your app root.
+ *
+ * @example
+ * // In App.tsx
+ * import { ToasterContainer } from '@/components/ui/toast';
+ * <ToasterContainer />
+ *
+ * @example
+ * // Show toasts anywhere in your app
+ * import { showToast } from '@/components/ui/toast';
+ *
+ * showToast.success('Saved', 'Your changes have been saved');
+ * showToast.error('Error', 'Something went wrong');
+ * showToast.warning('Warning', 'This action cannot be undone');
+ * showToast.info('Info', 'New updates available');
+ *
+ * // Loading toast (stays until dismissed)
+ * const id = showToast.loading('Uploading...', 'Please wait');
+ * // Later: showToast.dismiss(id);
+ */
+import type { Component, JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+import {
+  Toast as ToastPrimitive,
+  Toaster,
+  createToaster,
+  type ToastPromiseOptions,
+} from '@ark-ui/solid/toast';
+import type {
+  ToastRootProps as ArkToastRootProps,
+  ToastTitleProps as ArkToastTitleProps,
+  ToastDescriptionProps as ArkToastDescriptionProps,
+  ToastCloseTriggerProps as ArkToastCloseTriggerProps,
+  ToastActionTriggerProps as ArkToastActionTriggerProps,
+} from '@ark-ui/solid/toast';
+import { Portal } from 'solid-js/web';
+import { FiX, FiCheckCircle, FiAlertCircle, FiAlertTriangle, FiInfo } from 'solid-icons/fi';
+import { cn } from './cn';
+import { Z_INDEX } from './z-index';
+
+export const toaster = createToaster({
+  placement: 'top-end',
+  overlap: false,
+  gap: 12,
+});
+
+const Toast = ToastPrimitive.Root;
+
+type ToastRootProps = ArkToastRootProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const ToastRoot: Component<ToastRootProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <ToastPrimitive.Root
+      class={cn(
+        'toast-item pointer-events-auto relative w-full max-w-sm overflow-hidden rounded-lg border shadow-lg',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+    </ToastPrimitive.Root>
+  );
+};
+
+type ToastTitleProps = ArkToastTitleProps & {
+  class?: string;
+};
+
+const ToastTitle: Component<ToastTitleProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <ToastPrimitive.Title
+      class={cn('text-sm font-semibold text-gray-900', local.class)}
+      {...others}
+    />
+  );
+};
+
+type ToastDescriptionProps = ArkToastDescriptionProps & {
+  class?: string;
+};
+
+const ToastDescription: Component<ToastDescriptionProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <ToastPrimitive.Description class={cn('mt-1 text-sm text-gray-600', local.class)} {...others} />
+  );
+};
+
+type ToastCloseTriggerProps = ArkToastCloseTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const ToastCloseTrigger: Component<ToastCloseTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <ToastPrimitive.CloseTrigger
+      class={cn(
+        'absolute top-2 right-2 rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children ?? <FiX class='h-4 w-4' />}
+    </ToastPrimitive.CloseTrigger>
+  );
+};
+
+type ToastActionTriggerProps = ArkToastActionTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const ToastActionTrigger: Component<ToastActionTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <ToastPrimitive.ActionTrigger
+      class={cn('mt-2 text-sm font-medium text-blue-600 hover:text-blue-700', local.class)}
+      {...others}
+    >
+      {local.children}
+    </ToastPrimitive.ActionTrigger>
+  );
+};
+
+const getToastStyles = (type?: string) => {
+  switch (type) {
+    case 'success':
+      return 'border-green-200 bg-green-50';
+    case 'error':
+      return 'border-red-200 bg-red-50';
+    case 'warning':
+      return 'border-amber-200 bg-amber-50';
+    case 'loading':
+      return 'border-blue-200 bg-blue-50';
+    default:
+      return 'border-gray-200 bg-white';
+  }
+};
+
+const ToasterContainer: Component = () => {
+  return (
+    <Portal>
+      <Toaster
+        toaster={toaster}
+        class={cn(
+          'pointer-events-none fixed inset-0 flex flex-col items-end p-4 sm:p-6',
+          Z_INDEX.TOAST,
+        )}
+      >
+        {toast => (
+          <ToastRoot class={getToastStyles(toast().type)}>
+            <div class='p-4'>
+              <div class='flex items-start'>
+                <div class='shrink-0'>
+                  {toast().type === 'success' && <FiCheckCircle class='h-5 w-5 text-green-500' />}
+                  {toast().type === 'error' && <FiAlertCircle class='h-5 w-5 text-red-500' />}
+                  {toast().type === 'warning' && <FiAlertTriangle class='h-5 w-5 text-amber-500' />}
+                  {toast().type === 'info' && <FiInfo class='h-5 w-5 text-blue-500' />}
+                  {toast().type === 'loading' && (
+                    <div class='h-5 w-5 animate-spin rounded-full border-2 border-blue-500 border-t-transparent' />
+                  )}
+                </div>
+                <div class='ml-3 w-0 flex-1'>
+                  {toast().title && <ToastTitle>{toast().title}</ToastTitle>}
+                  {toast().description && (
+                    <ToastDescription>{toast().description}</ToastDescription>
+                  )}
+                </div>
+                <div class='ml-4 flex shrink-0'>
+                  <ToastCloseTrigger class='relative top-0 right-0' />
+                </div>
+              </div>
+            </div>
+          </ToastRoot>
+        )}
+      </Toaster>
+    </Portal>
+  );
+};
+
+interface ToastOptions {
+  title: string;
+  description?: string;
+  duration?: number;
+}
+
+const showToast = {
+  success: (title: string, description?: string, duration = 3000) => {
+    return toaster.create({ title, description, type: 'success', duration });
+  },
+  error: (title: string, description?: string, duration = 5000) => {
+    return toaster.create({ title, description, type: 'error', duration });
+  },
+  warning: (title: string, description?: string, duration = 5000) => {
+    return toaster.create({ title, description, type: 'warning', duration });
+  },
+  info: (title: string, description?: string, duration = 3000) => {
+    return toaster.create({ title, description, type: 'info', duration });
+  },
+  loading: (title: string, description?: string) => {
+    return toaster.create({ title, description, type: 'loading', duration: Infinity });
+  },
+  dismiss: (id: string) => {
+    toaster.dismiss(id);
+  },
+  update: (id: string, options: ToastOptions) => {
+    toaster.update(id, options);
+  },
+  promise: <T,>(promise: Promise<T>, options: ToastPromiseOptions<T>) => {
+    return toaster.promise(promise, options);
+  },
+};
+
+export {
+  Toast,
+  ToastRoot,
+  ToastTitle,
+  ToastDescription,
+  ToastCloseTrigger,
+  ToastActionTrigger,
+  ToasterContainer,
+  showToast,
+};
+export type { ToastOptions, ToastPromiseOptions };
diff --git a/packages/web/src/components/ui/tooltip.tsx b/packages/web/src/components/ui/tooltip.tsx
new file mode 100644
index 000000000..35d05287e
--- /dev/null
+++ b/packages/web/src/components/ui/tooltip.tsx
@@ -0,0 +1,142 @@
+/**
+ * Tooltip component for contextual information on hover.
+ * Arrow is shown by default. Use showArrow={false} to hide it.
+ *
+ * @example
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button variant="ghost" size="icon"><FiInfo /></Button>
+ *   </TooltipTrigger>
+ *   <TooltipPositioner>
+ *     <TooltipContent>
+ *       This is helpful information
+ *     </TooltipContent>
+ *   </TooltipPositioner>
+ * </Tooltip>
+ *
+ * @example
+ * // Inside a Dialog (prevents z-index issues)
+ * <TooltipPositioner inDialog>
+ *   <TooltipContent>Tooltip inside dialog</TooltipContent>
+ * </TooltipPositioner>
+ *
+ * @example
+ * // Without arrow
+ * <TooltipPositioner>
+ *   <TooltipContent showArrow={false}>
+ *     Tooltip without arrow
+ *   </TooltipContent>
+ * </TooltipPositioner>
+ */
+import type { Component, JSX } from 'solid-js';
+import { Show, splitProps } from 'solid-js';
+import { Tooltip as TooltipPrimitive } from '@ark-ui/solid/tooltip';
+import type {
+  TooltipContentProps as ArkTooltipContentProps,
+  TooltipTriggerProps as ArkTooltipTriggerProps,
+  TooltipArrowProps as ArkTooltipArrowProps,
+  TooltipArrowTipProps as ArkTooltipArrowTipProps,
+} from '@ark-ui/solid/tooltip';
+import { Portal } from 'solid-js/web';
+import { cn } from './cn';
+import { Z_INDEX } from './z-index';
+
+const Tooltip = TooltipPrimitive.Root;
+
+type TooltipTriggerProps = ArkTooltipTriggerProps & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+const TooltipTrigger: Component<TooltipTriggerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  return (
+    <TooltipPrimitive.Trigger class={local.class} {...others}>
+      {local.children}
+    </TooltipPrimitive.Trigger>
+  );
+};
+
+type TooltipPositionerProps = {
+  class?: string;
+  children?: JSX.Element;
+  /** Set to true when tooltip is inside a Dialog to prevent z-index issues */
+  inDialog?: boolean;
+};
+
+const TooltipPositioner: Component<TooltipPositionerProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'inDialog']);
+
+  const positioner = (
+    <TooltipPrimitive.Positioner class={local.class} {...others}>
+      {local.children}
+    </TooltipPrimitive.Positioner>
+  );
+
+  return (
+    <Show when={!local.inDialog} fallback={positioner}>
+      <Portal>{positioner}</Portal>
+    </Show>
+  );
+};
+
+type TooltipContentProps = ArkTooltipContentProps & {
+  class?: string;
+  children?: JSX.Element;
+  showArrow?: boolean;
+};
+
+const TooltipContent: Component<TooltipContentProps> = props => {
+  const [local, others] = splitProps(props, ['class', 'children', 'showArrow']);
+  const showArrow = () => local.showArrow !== false;
+  return (
+    <TooltipPrimitive.Content
+      class={cn(
+        'max-w-xs rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white shadow-md',
+        Z_INDEX.TOOLTIP,
+        local.class,
+      )}
+      style={{ '--arrow-size': '8px', '--arrow-background': '#111827' }}
+      {...others}
+    >
+      {showArrow() && (
+        <TooltipPrimitive.Arrow>
+          <TooltipPrimitive.ArrowTip class='bg-gray-900' />
+        </TooltipPrimitive.Arrow>
+      )}
+      {local.children}
+    </TooltipPrimitive.Content>
+  );
+};
+
+type TooltipArrowProps = ArkTooltipArrowProps & {
+  class?: string;
+};
+
+const TooltipArrow: Component<TooltipArrowProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return <TooltipPrimitive.Arrow class={local.class} {...others} />;
+};
+
+type TooltipArrowTipProps = ArkTooltipArrowTipProps & {
+  class?: string;
+};
+
+const TooltipArrowTip: Component<TooltipArrowTipProps> = props => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <TooltipPrimitive.ArrowTip
+      class={cn('border-t border-l border-gray-900', local.class)}
+      {...others}
+    />
+  );
+};
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+  TooltipArrow,
+  TooltipArrowTip,
+};
diff --git a/packages/ui/src/constants/zIndex.ts b/packages/web/src/components/ui/z-index.ts
similarity index 100%
rename from packages/ui/src/constants/zIndex.ts
rename to packages/web/src/components/ui/z-index.ts
diff --git a/packages/web/src/global.css b/packages/web/src/global.css
index 082ebf0d5..416529b23 100644
--- a/packages/web/src/global.css
+++ b/packages/web/src/global.css
@@ -1,11 +1,10 @@
 @import 'tailwindcss';
-@import '@corates/ui/components.css';
+@import './styles/ark-ui.css';
 
-/* Tailwind v4 only generates utilities for classnames it can discover.
-   Since `@corates/ui` is a workspace package that exports source TS/TSX,
-   we explicitly include it as a content source so UI component utilities
-   are generated into the web bundle. */
-@source '../../ui/src/**/*.{js,jsx,ts,tsx}';
+/* Include local UI component directories as Tailwind content sources
+   so utilities used in these files are generated into the bundle. */
+@source './components/ui/**/*.{js,jsx,ts,tsx}';
+@source './lib/ui/**/*.{js,jsx,ts,tsx}';
 
 @theme {
   --text-2xs: 0.625rem; /* 10px */
diff --git a/packages/web/src/lib/__tests__/apiFetch.test.js b/packages/web/src/lib/__tests__/apiFetch.test.js
index 7de311fc7..042bb7d98 100644
--- a/packages/web/src/lib/__tests__/apiFetch.test.js
+++ b/packages/web/src/lib/__tests__/apiFetch.test.js
@@ -10,7 +10,7 @@ vi.mock('@config/api.js', () => ({
   API_BASE: 'http://localhost:8787',
 }));
 
-vi.mock('@corates/ui', () => ({
+vi.mock('@/components/ui/toast', () => ({
   showToast: {
     error: vi.fn(),
   },
@@ -257,7 +257,7 @@ describe('apiFetch', () => {
 
     it('should pass custom toastMessage as toastTitle', async () => {
       // Import showToast mock to verify calls
-      const { showToast } = await import('@corates/ui');
+      const { showToast } = await import('@/components/ui/toast');
 
       mockFetch.mockResolvedValueOnce(
         new Response(
@@ -278,7 +278,7 @@ describe('apiFetch', () => {
     });
 
     it('should not show toast when showToast=false', async () => {
-      const { showToast } = await import('@corates/ui');
+      const { showToast } = await import('@/components/ui/toast');
 
       mockFetch.mockResolvedValueOnce(
         new Response(
diff --git a/packages/web/src/lib/__tests__/error-utils.test.js b/packages/web/src/lib/__tests__/error-utils.test.js
index 00975053e..382123450 100644
--- a/packages/web/src/lib/__tests__/error-utils.test.js
+++ b/packages/web/src/lib/__tests__/error-utils.test.js
@@ -20,7 +20,7 @@ import {
 } from '@corates/shared';
 
 // Mock showToast
-vi.mock('@corates/ui', () => ({
+vi.mock('@/components/ui/toast', () => ({
   showToast: {
     error: vi.fn(),
   },
diff --git a/packages/web/src/lib/error-utils.js b/packages/web/src/lib/error-utils.js
index 7edb73064..7a30c2776 100644
--- a/packages/web/src/lib/error-utils.js
+++ b/packages/web/src/lib/error-utils.js
@@ -12,7 +12,7 @@ import {
   AUTH_ERRORS,
   USER_ERRORS,
 } from '@corates/shared';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 
 /**
  * User-friendly error messages for common error codes
diff --git a/packages/web/src/primitives/__tests__/useAddStudies.sync.test.js b/packages/web/src/primitives/__tests__/useAddStudies.sync.test.js
index fefaa4cee..03a285eb8 100644
--- a/packages/web/src/primitives/__tests__/useAddStudies.sync.test.js
+++ b/packages/web/src/primitives/__tests__/useAddStudies.sync.test.js
@@ -13,7 +13,7 @@ import { createRoot, createSignal } from 'solid-js';
 import { useAddStudies } from '../useAddStudies';
 
 // Mock dependencies
-vi.mock('@corates/ui', () => ({
+vi.mock('@/components/ui/toast', () => ({
   showToast: {
     success: vi.fn(),
     warning: vi.fn(),
diff --git a/packages/web/src/primitives/useAddStudies/index.js b/packages/web/src/primitives/useAddStudies/index.js
index d79d09c4e..8adedcc87 100644
--- a/packages/web/src/primitives/useAddStudies/index.js
+++ b/packages/web/src/primitives/useAddStudies/index.js
@@ -6,7 +6,7 @@
  */
 
 import { createMemo, createEffect } from 'solid-js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 
 import { createPdfOperations } from './pdfs.js';
 import { createReferenceOperations } from './references.js';
diff --git a/packages/web/src/primitives/useAddStudies/lookup.js b/packages/web/src/primitives/useAddStudies/lookup.js
index f2b331895..3d5531e08 100644
--- a/packages/web/src/primitives/useAddStudies/lookup.js
+++ b/packages/web/src/primitives/useAddStudies/lookup.js
@@ -3,7 +3,7 @@
  */
 
 import { createSignal } from 'solid-js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import { fetchReferenceByIdentifier, parseIdentifiers } from '@/lib/referenceLookup.js';
 import { cloneArrayBuffer } from './serialization.js';
 
diff --git a/packages/web/src/primitives/useAddStudies/references.js b/packages/web/src/primitives/useAddStudies/references.js
index 6cc6a2a04..581e43c32 100644
--- a/packages/web/src/primitives/useAddStudies/references.js
+++ b/packages/web/src/primitives/useAddStudies/references.js
@@ -3,7 +3,7 @@
  */
 
 import { createSignal } from 'solid-js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import { extractPdfTitle, extractPdfDoi, readFileAsArrayBuffer } from '@/lib/pdfUtils.js';
 import { parseReferenceFile, separateFileTypes } from '@/lib/referenceParser.js';
 import { checkPdfAvailability } from '@/lib/referenceLookup.js';
diff --git a/packages/web/src/primitives/useProject/studies.js b/packages/web/src/primitives/useProject/studies.js
index b1b924c71..b94c48f8f 100644
--- a/packages/web/src/primitives/useProject/studies.js
+++ b/packages/web/src/primitives/useProject/studies.js
@@ -5,6 +5,7 @@
 import * as Y from 'yjs';
 import { API_BASE } from '@config/api.js';
 import projectStore from '@/stores/projectStore.js';
+import projectActionsStore from '@/stores/projectActionsStore';
 import { queryClient } from '@lib/queryClient.js';
 import { queryKeys } from '@lib/queryKeys.js';
 
@@ -144,7 +145,12 @@ export function createStudyOperations(projectId, getYDoc, isSynced) {
       throw new Error('Project name is required');
     }
 
-    const response = await fetch(`${API_BASE}/api/projects/${projectId}`, {
+    const orgId = projectActionsStore.getActiveOrgId();
+    if (!orgId) {
+      throw new Error('No active organization');
+    }
+
+    const response = await fetch(`${API_BASE}/api/orgs/${orgId}/projects/${projectId}`, {
       method: 'PUT',
       credentials: 'include',
       headers: { 'Content-Type': 'application/json' },
@@ -190,7 +196,12 @@ export function createStudyOperations(projectId, getYDoc, isSynced) {
   async function updateDescription(newDescription) {
     const trimmed = (newDescription || '').trim();
 
-    const response = await fetch(`${API_BASE}/api/projects/${projectId}`, {
+    const orgId = projectActionsStore.getActiveOrgId();
+    if (!orgId) {
+      throw new Error('No active organization');
+    }
+
+    const response = await fetch(`${API_BASE}/api/orgs/${orgId}/projects/${projectId}`, {
       method: 'PUT',
       credentials: 'include',
       headers: { 'Content-Type': 'application/json' },
@@ -222,10 +233,8 @@ export function createStudyOperations(projectId, getYDoc, isSynced) {
     projectStore.setProjectData(projectId, {
       meta: { ...existingMeta, description: trimmed || null, updatedAt: now },
     });
-    projectStore.updateProjectInList(projectId, {
-      description: trimmed || null,
-      updatedAt: new Date(now),
-    });
+    // Invalidate project list query to refetch with updated description
+    queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
 
     return trimmed;
   }
diff --git a/packages/web/src/stores/projectActionsStore/checklists.js b/packages/web/src/stores/projectActionsStore/checklists.js
index 8d82d0529..8b28722bf 100644
--- a/packages/web/src/stores/projectActionsStore/checklists.js
+++ b/packages/web/src/stores/projectActionsStore/checklists.js
@@ -2,7 +2,7 @@
  * Checklist operations for projectActionsStore
  */
 
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 
 /**
  * Creates checklist operations
diff --git a/packages/web/src/stores/projectActionsStore/project.js b/packages/web/src/stores/projectActionsStore/project.js
index 9604d3739..a7c53f3ad 100644
--- a/packages/web/src/stores/projectActionsStore/project.js
+++ b/packages/web/src/stores/projectActionsStore/project.js
@@ -2,7 +2,7 @@
  * Project-level operations for projectActionsStore
  */
 
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import { API_BASE } from '@config/api.js';
 import { queryClient } from '@lib/queryClient.js';
 import { queryKeys } from '@lib/queryKeys.js';
diff --git a/packages/web/src/stores/projectActionsStore/studies.js b/packages/web/src/stores/projectActionsStore/studies.js
index 61485148f..8b6b67dcd 100644
--- a/packages/web/src/stores/projectActionsStore/studies.js
+++ b/packages/web/src/stores/projectActionsStore/studies.js
@@ -4,7 +4,7 @@
 
 import { uploadPdf, fetchPdfViaProxy, downloadPdf, deletePdf } from '@api/pdf-api.js';
 import { cachePdf, clearStudyCache } from '@primitives/pdfCache.js';
-import { showToast } from '@corates/ui';
+import { showToast } from '@/components/ui/toast';
 import { importFromGoogleDrive } from '@api/google-drive.js';
 import { extractPdfDoi, extractPdfTitle } from '@/lib/pdfUtils.js';
 import { fetchFromDOI } from '@/lib/referenceLookup.js';
@@ -101,7 +101,7 @@ async function handleGoogleDrivePdf(ops, study, studyId, orgId, projectId, userI
   if (!study.googleDriveFileId) return false;
 
   try {
-    const result = await importFromGoogleDrive(study.googleDriveFileId, orgId, projectId, studyId);
+    const result = await importFromGoogleDrive(study.googleDriveFileId, projectId, studyId);
     const importedFile = result?.file;
     if (!importedFile?.fileName) return false;
 
diff --git a/packages/ui/src/components.css b/packages/web/src/styles/ark-ui.css
similarity index 100%
rename from packages/ui/src/components.css
rename to packages/web/src/styles/ark-ui.css
diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json
new file mode 100644
index 000000000..41a66adf4
--- /dev/null
+++ b/packages/web/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": false,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "checkJs": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@auth/*": ["src/components/auth/*"],
+      "@checklist/*": ["src/components/checklist/*"],
+      "@pdf/*": ["src/components/pdf/*"],
+      "@project/*": ["src/components/project/*"],
+      "@routes/*": ["src/routes/*"],
+      "@primitives/*": ["src/primitives/*"],
+      "@offline/*": ["src/offline/*"],
+      "@api/*": ["src/api/*"],
+      "@config/*": ["src/config/*"],
+      "@lib/*": ["src/lib/*"]
+    },
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
+  "exclude": ["node_modules", "dist", "**/preact/**", "**/preact-2/**"]
+}
diff --git a/packages/workers/migrations/0000_amusing_black_panther.sql b/packages/workers/migrations/0000_ambitious_mikhail_rasputin.sql
similarity index 97%
rename from packages/workers/migrations/0000_amusing_black_panther.sql
rename to packages/workers/migrations/0000_ambitious_mikhail_rasputin.sql
index a09dde097..ae15a2399 100644
--- a/packages/workers/migrations/0000_amusing_black_panther.sql
+++ b/packages/workers/migrations/0000_ambitious_mikhail_rasputin.sql
@@ -205,6 +205,15 @@ CREATE TABLE `user` (
 	`role` text,
 	`persona` text,
 	`profileCompletedAt` integer,
+	`title` text,
+	`institution` text,
+	`department` text,
+	`country` text,
+	`bio` text,
+	`timezone` text,
+	`locale` text,
+	`preferences` text,
+	`lastActiveAt` integer,
 	`twoFactorEnabled` integer DEFAULT false,
 	`banned` integer DEFAULT false,
 	`banReason` text,
diff --git a/packages/workers/migrations/meta/0000_snapshot.json b/packages/workers/migrations/meta/0000_snapshot.json
index e36a19168..dd80fd6ff 100644
--- a/packages/workers/migrations/meta/0000_snapshot.json
+++ b/packages/workers/migrations/meta/0000_snapshot.json
@@ -1,7 +1,7 @@
 {
   "version": "6",
   "dialect": "sqlite",
-  "id": "3a9d2b37-4834-467a-ac0f-ec8ae72a22ce",
+  "id": "3d5a6f8d-1f85-439c-9d29-1b8dc48a314b",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "account": {
@@ -1379,6 +1379,69 @@
           "notNull": false,
           "autoincrement": false
         },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "institution": {
+          "name": "institution",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "department": {
+          "name": "department",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "country": {
+          "name": "country",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "bio": {
+          "name": "bio",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "timezone": {
+          "name": "timezone",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "locale": {
+          "name": "locale",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "preferences": {
+          "name": "preferences",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastActiveAt": {
+          "name": "lastActiveAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
         "twoFactorEnabled": {
           "name": "twoFactorEnabled",
           "type": "integer",
diff --git a/packages/workers/migrations/meta/_journal.json b/packages/workers/migrations/meta/_journal.json
index 7fbdd85b5..4e8a64063 100644
--- a/packages/workers/migrations/meta/_journal.json
+++ b/packages/workers/migrations/meta/_journal.json
@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "6",
-      "when": 1767649024745,
-      "tag": "0000_amusing_black_panther",
+      "when": 1768679122217,
+      "tag": "0000_ambitious_mikhail_rasputin",
       "breakpoints": true
     }
   ]
diff --git a/packages/workers/package.json b/packages/workers/package.json
index 0108d60be..ee0b1d180 100644
--- a/packages/workers/package.json
+++ b/packages/workers/package.json
@@ -30,28 +30,28 @@
     "localflare": "localflare"
   },
   "dependencies": {
-    "@better-auth/stripe": "^1.4.12",
-    "@cloudflare/workers-types": "^4.20260114.0",
+    "@better-auth/stripe": "^1.4.15",
+    "@cloudflare/workers-types": "^4.20260118.0",
     "@corates/shared": "workspace:*",
     "@hono/zod-openapi": "^1.2.0",
-    "better-auth": "^1.4.12",
+    "better-auth": "^1.4.15",
     "drizzle-orm": "^0.45.1",
     "hono": "^4.11.4",
     "lib0": "^0.2.117",
     "postmark": "^4.0.5",
-    "stripe": "^20.1.2",
+    "stripe": "^20.2.0",
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.29",
     "zod": "^4.3.5"
   },
   "devDependencies": {
     "@cloudflare/vitest-pool-workers": "^0.11.1",
-    "better-sqlite3": "^12.6.0",
+    "better-sqlite3": "^12.6.2",
     "dotenv": "^16.6.1",
     "drizzle-kit": "^0.31.8",
     "localflare": "^0.3.1",
-    "typescript": "^5.7.3",
+    "typescript": "^5.9.3",
     "vitest": "3.2.0",
-    "wrangler": "^4.59.1"
+    "wrangler": "^4.59.2"
   }
 }
diff --git a/packages/workers/src/auth/config.ts b/packages/workers/src/auth/config.ts
index a45af124e..84ef81840 100644
--- a/packages/workers/src/auth/config.ts
+++ b/packages/workers/src/auth/config.ts
@@ -502,6 +502,42 @@ export function createAuth(env: Env, ctx?: ExecutionContext) {
           type: 'boolean',
           required: false,
         },
+        title: {
+          type: 'string',
+          required: false,
+        },
+        institution: {
+          type: 'string',
+          required: false,
+        },
+        department: {
+          type: 'string',
+          required: false,
+        },
+        country: {
+          type: 'string',
+          required: false,
+        },
+        bio: {
+          type: 'string',
+          required: false,
+        },
+        timezone: {
+          type: 'string',
+          required: false,
+        },
+        locale: {
+          type: 'string',
+          required: false,
+        },
+        preferences: {
+          type: 'string',
+          required: false,
+        },
+        lastActiveAt: {
+          type: 'number',
+          required: false,
+        },
       },
     },
 
diff --git a/packages/workers/src/db/schema.ts b/packages/workers/src/db/schema.ts
index d76b1b027..c803f3389 100644
--- a/packages/workers/src/db/schema.ts
+++ b/packages/workers/src/db/schema.ts
@@ -16,6 +16,17 @@ export const user = sqliteTable('user', {
   role: text('role'), // Better Auth admin/plugin role (e.g. 'user', 'admin')
   persona: text('persona'), // optional: researcher, student, librarian, other
   profileCompletedAt: integer('profileCompletedAt'), // unix timestamp (seconds)
+  // Academic/professional information
+  title: text('title'), // 'Dr.', 'Prof.', or custom
+  institution: text('institution'), // University or organization name
+  department: text('department'), // Department or faculty name
+  country: text('country'), // ISO 3166-1 alpha-2 code (e.g., 'US', 'GB')
+  bio: text('bio'), // Short biography
+  // User preferences and activity
+  timezone: text('timezone'), // IANA timezone (e.g., 'America/New_York')
+  locale: text('locale'), // BCP 47 language tag (e.g., 'en-US')
+  preferences: text('preferences'), // JSON: { theme, emailNotifications, etc. }
+  lastActiveAt: integer('lastActiveAt', { mode: 'timestamp' }),
   twoFactorEnabled: integer('twoFactorEnabled', { mode: 'boolean' }).default(false),
   // Admin plugin fields
   banned: integer('banned', { mode: 'boolean' }).default(false),
diff --git a/packages/workers/src/index.ts b/packages/workers/src/index.ts
index d5613ba7f..7f182c27f 100644
--- a/packages/workers/src/index.ts
+++ b/packages/workers/src/index.ts
@@ -31,6 +31,7 @@ import { avatarRoutes } from './routes/avatars';
 import { adminRoutes } from './routes/admin/index';
 import { accountMergeRoutes } from './routes/account-merge';
 import { contactRoutes } from './routes/contact';
+import { invitationRoutes } from './routes/invitations';
 
 // Export Durable Objects
 export { UserSession, ProjectDoc, EmailQueue };
@@ -152,6 +153,9 @@ app.route('/api/users/avatar', avatarRoutes);
 // Mount account merge routes
 app.route('/api/accounts/merge', accountMergeRoutes);
 
+// Mount invitation routes (for accepting project invitations)
+app.route('/api/invitations', invitationRoutes);
+
 // Mount organization routes (all project operations now live under /api/orgs/:orgId/projects/...)
 app.route('/api/orgs', orgRoutes);
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f85f34576..8f9190b1e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,17 +39,17 @@ importers:
         specifier: ^62.0.0
         version: 62.0.0(eslint@9.39.2(jiti@2.6.1))
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.8.0
+        version: 3.8.0
       prettier-plugin-tailwindcss:
         specifier: ^0.7.2
-        version: 0.7.2(prettier@3.7.4)
+        version: 0.7.2(prettier@3.8.0)
       turbo:
-        specifier: ^2.7.4
-        version: 2.7.4
+        specifier: ^2.7.5
+        version: 2.7.5
       wrangler:
-        specifier: ^4.59.1
-        version: 4.59.1(@cloudflare/workers-types@4.20260114.0)
+        specifier: ^4.59.2
+        version: 4.59.2(@cloudflare/workers-types@4.20260118.0)
 
   packages/docs:
     devDependencies:
@@ -58,10 +58,10 @@ importers:
         version: 11.12.2
       vitepress:
         specifier: ^1.6.4
-        version: 1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.8)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3)
+        version: 1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.9)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.46.0)(typescript@5.9.3)
       vitepress-plugin-mermaid:
         specifier: ^2.0.17
-        version: 2.0.17(mermaid@11.12.2)(vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.8)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3))
+        version: 2.0.17(mermaid@11.12.2)(vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.9)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.46.0)(typescript@5.9.3))
 
   packages/landing:
     dependencies:
@@ -73,7 +73,7 @@ importers:
         version: 0.15.4(solid-js@1.9.10)
       '@solidjs/start':
         specifier: ^1.2.1
-        version: 1.2.1(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vinxi@0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 1.2.1(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vinxi@0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       solid-icons:
         specifier: ^1.1.0
         version: 1.1.0(solid-js@1.9.10)
@@ -82,11 +82,11 @@ importers:
         version: 1.9.10
       vinxi:
         specifier: ^0.5.10
-        version: 0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.18
-        version: 4.1.18(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 4.1.18(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       tailwindcss:
         specifier: ^4.1.18
         version: 4.1.18
@@ -101,8 +101,8 @@ importers:
         version: 4.3.5
     devDependencies:
       '@types/node':
-        specifier: ^25.0.8
-        version: 25.0.8
+        specifier: ^25.0.9
+        version: 25.0.9
       tsx:
         specifier: ^4.21.0
         version: 4.21.0
@@ -111,7 +111,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^4.0.17
-        version: 4.0.17(@types/node@25.0.8)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.17(@types/node@25.0.9)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/mcp-memory:
     dependencies:
@@ -122,18 +122,18 @@ importers:
         specifier: ^2.17.2
         version: 2.17.2
       better-sqlite3:
-        specifier: ^11.8.1
+        specifier: ^11.10.0
         version: 11.10.0
       zod:
         specifier: ^4.3.5
         version: 4.3.5
     devDependencies:
       '@types/better-sqlite3':
-        specifier: ^7.6.12
+        specifier: ^7.6.13
         version: 7.6.13
       '@types/node':
-        specifier: ^25.0.8
-        version: 25.0.8
+        specifier: ^25.0.9
+        version: 25.0.9
       tsx:
         specifier: ^4.21.0
         version: 4.21.0
@@ -142,7 +142,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^4.0.17
-        version: 4.0.17(@types/node@25.0.8)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.17(@types/node@25.0.9)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/shared:
     devDependencies:
@@ -151,7 +151,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^4.0.17
-        version: 4.0.17(@types/node@25.0.8)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.17(@types/node@25.0.9)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/stripe-dev:
     devDependencies:
@@ -159,57 +159,14 @@ importers:
         specifier: ^9.2.1
         version: 9.2.1
 
-  packages/ui:
+  packages/web:
     dependencies:
       '@ark-ui/solid':
         specifier: ^5.30.0
         version: 5.30.0(solid-js@1.9.10)
-      '@zag-js/solid':
-        specifier: ^1.32.0
-        version: 1.32.0(solid-js@1.9.10)
-      '@zag-js/tour':
-        specifier: ^1.32.0
-        version: 1.32.0
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
-      tailwind-merge:
-        specifier: ^3.4.0
-        version: 3.4.0
-    devDependencies:
-      '@solidjs/testing-library':
-        specifier: ^0.8.10
-        version: 0.8.10(@solidjs/router@0.15.4(solid-js@1.9.10))(solid-js@1.9.10)
-      '@testing-library/jest-dom':
-        specifier: ^6.9.1
-        version: 6.9.1
-      jsdom:
-        specifier: ^27.4.0
-        version: 27.4.0
-      solid-icons:
-        specifier: ^1.1.0
-        version: 1.1.0(solid-js@1.9.10)
-      solid-js:
-        specifier: ^1.9.10
-        version: 1.9.10
-      typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
-      vite-plugin-solid:
-        specifier: ^2.11.10
-        version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
-      vitest:
-        specifier: ^4.0.17
-        version: 4.0.17(@types/node@25.0.8)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
-
-  packages/web:
-    dependencies:
       '@corates/shared':
         specifier: workspace:*
         version: link:../shared
-      '@corates/ui':
-        specifier: workspace:*
-        version: link:../ui
       '@embedpdf/core':
         specifier: ^2.2.0
         version: 2.2.0(preact@10.28.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(svelte@5.46.1)(vue@3.5.26(typescript@5.9.3))
@@ -301,17 +258,23 @@ importers:
         specifier: ^0.15.4
         version: 0.15.4(solid-js@1.9.10)
       '@tanstack/solid-query':
-        specifier: ^5.90.19
-        version: 5.90.19(solid-js@1.9.10)
+        specifier: ^5.90.22
+        version: 5.90.22(solid-js@1.9.10)
       '@tanstack/solid-table':
         specifier: ^8.21.3
         version: 8.21.3(solid-js@1.9.10)
       better-auth:
-        specifier: ^1.4.12
-        version: 1.4.12(better-sqlite3@12.6.0)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@4.0.17)(vue@3.5.26(typescript@5.9.3))
+        specifier: ^1.4.15
+        version: 1.4.15(better-sqlite3@12.6.2)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@4.0.17)(vue@3.5.26(typescript@5.9.3))
       chart.js:
         specifier: ^4.5.1
         version: 4.5.1
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       d3:
         specifier: ^7.9.0
         version: 7.9.0
@@ -345,13 +308,13 @@ importers:
     devDependencies:
       '@preact/preset-vite':
         specifier: ^2.10.2
-        version: 2.10.2(@babel/core@7.28.6)(preact@10.28.2)(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 2.10.2(@babel/core@7.28.6)(preact@10.28.2)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       '@solidjs/testing-library':
         specifier: ^0.8.10
         version: 0.8.10(@solidjs/router@0.15.4(solid-js@1.9.10))(solid-js@1.9.10)
       '@tailwindcss/vite':
         specifier: ^4.1.18
-        version: 4.1.18(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 4.1.18(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       '@testing-library/jest-dom':
         specifier: ^6.9.1
         version: 6.9.1
@@ -363,10 +326,10 @@ importers:
         version: 6.2.5
       jsdom:
         specifier: ^27.4.0
-        version: 27.4.0
+        version: 27.4.0(@noble/hashes@2.0.1)
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.8.0
+        version: 3.8.0
       puppeteer:
         specifier: ^24.35.0
         version: 24.35.0(typescript@5.9.3)
@@ -380,26 +343,29 @@ importers:
         specifier: ^4.1.18
         version: 4.1.18
       terser:
-        specifier: ^5.44.1
-        version: 5.44.1
+        specifier: ^5.46.0
+        version: 5.46.0
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
       vite:
         specifier: ^7.3.1
-        version: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
       vite-plugin-solid:
         specifier: ^2.11.10
-        version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       vitest:
         specifier: ^4.0.17
-        version: 4.0.17(@types/node@25.0.8)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.17(@types/node@25.0.9)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
   packages/workers:
     dependencies:
       '@better-auth/stripe':
-        specifier: ^1.4.12
-        version: 1.4.12(@better-auth/core@1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(better-auth@1.4.12(better-sqlite3@12.6.0)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3)))(stripe@20.1.2(@types/node@25.0.8))
+        specifier: ^1.4.15
+        version: 1.4.15(@better-auth/core@1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0))(better-auth@1.4.15(better-sqlite3@12.6.2)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3)))(stripe@20.2.0(@types/node@25.0.9))
       '@cloudflare/workers-types':
-        specifier: ^4.20260114.0
-        version: 4.20260114.0
+        specifier: ^4.20260118.0
+        version: 4.20260118.0
       '@corates/shared':
         specifier: workspace:*
         version: link:../shared
@@ -407,11 +373,11 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0(hono@4.11.4)(zod@4.3.5)
       better-auth:
-        specifier: ^1.4.12
-        version: 1.4.12(better-sqlite3@12.6.0)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+        specifier: ^1.4.15
+        version: 1.4.15(better-sqlite3@12.6.2)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       drizzle-orm:
         specifier: ^0.45.1
-        version: 0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)
+        version: 0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)
       hono:
         specifier: ^4.11.4
         version: 4.11.4
@@ -422,8 +388,8 @@ importers:
         specifier: ^4.0.5
         version: 4.0.5
       stripe:
-        specifier: ^20.1.2
-        version: 20.1.2(@types/node@25.0.8)
+        specifier: ^20.2.0
+        version: 20.2.0(@types/node@25.0.9)
       y-protocols:
         specifier: ^1.0.7
         version: 1.0.7(yjs@13.6.29)
@@ -436,10 +402,10 @@ importers:
     devDependencies:
       '@cloudflare/vitest-pool-workers':
         specifier: ^0.11.1
-        version: 0.11.1(@cloudflare/workers-types@4.20260114.0)(@vitest/runner@4.0.17)(@vitest/snapshot@4.0.17)(vitest@3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 0.11.1(@cloudflare/workers-types@4.20260118.0)(@vitest/runner@4.0.17)(@vitest/snapshot@4.0.17)(vitest@3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       better-sqlite3:
-        specifier: ^12.6.0
-        version: 12.6.0
+        specifier: ^12.6.2
+        version: 12.6.2
       dotenv:
         specifier: ^16.6.1
         version: 16.6.1
@@ -450,14 +416,14 @@ importers:
         specifier: ^0.3.1
         version: 0.3.1
       typescript:
-        specifier: ^5.7.3
+        specifier: ^5.9.3
         version: 5.9.3
       vitest:
         specifier: 3.2.0
-        version: 3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
       wrangler:
-        specifier: ^4.59.1
-        version: 4.59.1(@cloudflare/workers-types@4.20260114.0)
+        specifier: ^4.59.2
+        version: 4.59.2(@cloudflare/workers-types@4.20260118.0)
 
 packages:
 
@@ -680,27 +646,27 @@ packages:
     resolution: {integrity: sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==}
     engines: {node: '>=6.9.0'}
 
-  '@better-auth/core@1.4.12':
-    resolution: {integrity: sha512-VfqZwMAEl9rnGx092BIZ2Q5z8rt7jjN2OAbvPqehufSKZGmh8JsdtZRBMl/CHQir9bwi2Ev0UF4+7TQp+DXEMg==}
+  '@better-auth/core@1.4.15':
+    resolution: {integrity: sha512-uAvq8YA7SaS7v+TrvH/Kwt7LAJihzUqB3FX8VweDsqu3gn5t51M+Bve+V1vVWR9qBAtC6cN68V6b+scxZxDY4A==}
     peerDependencies:
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
-      better-call: 1.1.7
+      better-call: 1.1.8
       jose: ^6.1.0
       kysely: ^0.28.5
       nanostores: ^1.0.1
 
-  '@better-auth/stripe@1.4.12':
-    resolution: {integrity: sha512-JmJZbrVwRE3GIE/YFRvmkwBGiIdTX+2VG9N0qmKYGOmJziCAsSAmFfgrCQRsmTMms5Afhw6AzDxwygXw7E6IoA==}
+  '@better-auth/stripe@1.4.15':
+    resolution: {integrity: sha512-7eBHRKNway5/+ucvB0xER2BMfFcrhI2NGnmqibJeVjlQScLQCCAWZua3qzKWQwi7RBTtCe8/ni2pM4tu8yDC4A==}
     peerDependencies:
-      '@better-auth/core': 1.4.12
-      better-auth: 1.4.12
+      '@better-auth/core': 1.4.15
+      better-auth: 1.4.15
       stripe: ^18 || ^19 || ^20
 
-  '@better-auth/telemetry@1.4.12':
-    resolution: {integrity: sha512-4q504Og42PzkUbZjXDt+FyeYaS0WZmAlEOC3nbBCZDObTVCRUnGgJW52B2maJ7BCVvAQgBGLEeQmQzU5+63J0A==}
+  '@better-auth/telemetry@1.4.15':
+    resolution: {integrity: sha512-7NW/2PS4RN85rv+ozpAezP/kSLPZeWkxqcA6RA/CFXqWp2YR2e5q5E6Hym1qBgVBkoAQa3lWFdX3b+jEs+vvrQ==}
     peerDependencies:
-      '@better-auth/core': 1.4.12
+      '@better-auth/core': 1.4.15
 
   '@better-auth/utils@0.3.0':
     resolution: {integrity: sha512-W+Adw6ZA6mgvnSnhOki270rwJ42t4XzSK6YWGF//BbVXL6SwCLWfyzBc1lN2m/4RM28KubdBKQ4X5VMoLRNPQw==}
@@ -733,17 +699,21 @@ packages:
     resolution: {integrity: sha512-Nu8ahitGFFJztxUml9oD/DLb7Z28C8cd8F46IVQ7y5Btz575pvMY8AqZsXkX7Gds29eCKdMgIHjIvzskHgPSFg==}
     engines: {node: '>=18.0.0'}
 
-  '@cloudflare/unenv-preset@2.7.13':
-    resolution: {integrity: sha512-NulO1H8R/DzsJguLC0ndMuk4Ufv0KSlN+E54ay9rn9ZCQo0kpAPwwh3LhgpZ96a3Dr6L9LqW57M4CqC34iLOvw==}
+  '@cloudflare/kv-asset-handler@0.4.2':
+    resolution: {integrity: sha512-SIOD2DxrRRwQ+jgzlXCqoEFiKOFqaPjhnNTGKXSRLvp1HiOvapLaFG2kEr9dYQTYe8rKrd9uvDUzmAITeNyaHQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@cloudflare/unenv-preset@2.10.0':
+    resolution: {integrity: sha512-/uII4vLQXhzCAZzEVeYAjFLBNg2nqTJ1JGzd2lRF6ItYe6U2zVoYGfeKpGx/EkBF6euiU+cyBXgMdtJih+nQ6g==}
     peerDependencies:
       unenv: 2.0.0-rc.24
-      workerd: ^1.20251202.0
+      workerd: ^1.20251221.0
     peerDependenciesMeta:
       workerd:
         optional: true
 
-  '@cloudflare/unenv-preset@2.9.0':
-    resolution: {integrity: sha512-99nEvuOTCGGGRNaIat8UVVXJ27aZK+U09SYDp0kVjQLwC9wyxcrQ28IqLwrQq2DjWLmBI1+UalGJzdPqYgPlRw==}
+  '@cloudflare/unenv-preset@2.7.13':
+    resolution: {integrity: sha512-NulO1H8R/DzsJguLC0ndMuk4Ufv0KSlN+E54ay9rn9ZCQo0kpAPwwh3LhgpZ96a3Dr6L9LqW57M4CqC34iLOvw==}
     peerDependencies:
       unenv: 2.0.0-rc.24
       workerd: ^1.20251202.0
@@ -764,8 +734,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@cloudflare/workerd-darwin-64@1.20260111.0':
-    resolution: {integrity: sha512-UGAjrGLev2/CMLZy7b+v1NIXA4Hupc/QJBFlJwMqldywMcJ/iEqvuUYYuVI2wZXuXeWkgmgFP87oFDQsg78YTQ==}
+  '@cloudflare/workerd-darwin-64@1.20260114.0':
+    resolution: {integrity: sha512-HNlsRkfNgardCig2P/5bp/dqDECsZ4+NU5XewqArWxMseqt3C5daSuptI620s4pn7Wr0ZKg7jVLH0PDEBkA+aA==}
     engines: {node: '>=16'}
     cpu: [x64]
     os: [darwin]
@@ -776,8 +746,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@cloudflare/workerd-darwin-arm64@1.20260111.0':
-    resolution: {integrity: sha512-YFAZwidLCQVa6rKCCaiWrhA+eh87a7MUhyd9lat3KSbLBAGpYM+ORpyTXpi2Gjm3j6Mp1e/wtzcFTSeMIy2UqA==}
+  '@cloudflare/workerd-darwin-arm64@1.20260114.0':
+    resolution: {integrity: sha512-qyE1UdFnAlxzb+uCfN/d9c8icch7XRiH49/DjoqEa+bCDihTuRS7GL1RmhVIqHJhb3pX3DzxmKgQZBDBL83Inw==}
     engines: {node: '>=16'}
     cpu: [arm64]
     os: [darwin]
@@ -788,8 +758,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@cloudflare/workerd-linux-64@1.20260111.0':
-    resolution: {integrity: sha512-zx1GW6FwfOBjCV7QUCRzGRkViUtn3Is/zaaVPmm57xyy9sjtInx6/SdeBr2Y45tx9AnOP1CnaOFFdmH1P7VIEg==}
+  '@cloudflare/workerd-linux-64@1.20260114.0':
+    resolution: {integrity: sha512-Z0BLvAj/JPOabzads2ddDEfgExWTlD22pnwsuNbPwZAGTSZeQa3Y47eGUWyHk+rSGngknk++S7zHTGbKuG7RRg==}
     engines: {node: '>=16'}
     cpu: [x64]
     os: [linux]
@@ -800,8 +770,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@cloudflare/workerd-linux-arm64@1.20260111.0':
-    resolution: {integrity: sha512-wFVKxNvCyjRaAcgiSnJNJAmIos3p3Vv6Uhf4pFUZ9JIxr69GNlLWlm9SdCPvtwNFAjzSoDaKzDwjj5xqpuCS6Q==}
+  '@cloudflare/workerd-linux-arm64@1.20260114.0':
+    resolution: {integrity: sha512-kPUmEtUxUWlr9PQ64kuhdK0qyo8idPe5IIXUgi7xCD7mDd6EOe5J7ugDpbfvfbYKEjx4DpLvN2t45izyI/Sodw==}
     engines: {node: '>=16'}
     cpu: [arm64]
     os: [linux]
@@ -812,14 +782,14 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@cloudflare/workerd-windows-64@1.20260111.0':
-    resolution: {integrity: sha512-zWgd77L7OI1BxgBbG+2gybDahIMgPX5iNo6e3LqcEz1Xm3KfiqgnDyMBcxeQ7xDrj7fHUGAlc//QnKvDchuUoQ==}
+  '@cloudflare/workerd-windows-64@1.20260114.0':
+    resolution: {integrity: sha512-MJnKgm6i1jZGyt2ZHQYCnRlpFTEZcK2rv9y7asS3KdVEXaDgGF8kOns5u6YL6/+eMogfZuHRjfDS+UqRTUYIFA==}
     engines: {node: '>=16'}
     cpu: [x64]
     os: [win32]
 
-  '@cloudflare/workers-types@4.20260114.0':
-    resolution: {integrity: sha512-Q3YG2tAPvN0Z9LueWZp8RyBIJYAppb2+knSh9WXagm/W6XERGKtYfMV0z9Ij5bJksmvvR/R9jTjjEqbK27kd8g==}
+  '@cloudflare/workers-types@4.20260118.0':
+    resolution: {integrity: sha512-t+2Q421kAQqwBzMUDvgg2flp8zFVxOpiAyZPbyNcnPxMDHf0z3B7LqBIVQawwI6ntZinbk9f4oUmaA5bGeYwlg==}
 
   '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
@@ -2000,13 +1970,13 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@exodus/bytes@1.8.0':
-    resolution: {integrity: sha512-8JPn18Bcp8Uo1T82gR8lh2guEOa5KKU/IEKvvdp0sgmi7coPBWf1Doi1EXsGZb2ehc8ym/StJCjffYV+ne7sXQ==}
+  '@exodus/bytes@1.9.0':
+    resolution: {integrity: sha512-lagqsvnk09NKogQaN/XrtlWeUF8SRhT12odMvbTIIaVObqzwAogL6jhR4DAp0gPuKoM1AOVrKUshJpRdpMFrww==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
     peerDependencies:
-      '@exodus/crypto': ^1.0.0-rc.4
+      '@noble/hashes': ^1.8.0 || ^2.0.0
     peerDependenciesMeta:
-      '@exodus/crypto':
+      '@noble/hashes':
         optional: true
 
   '@floating-ui/core@1.7.3':
@@ -3058,8 +3028,8 @@ packages:
     peerDependencies:
       vite: '>=6.0.0'
 
-  '@tanstack/query-core@5.90.16':
-    resolution: {integrity: sha512-MvtWckSVufs/ja463/K4PyJeqT+HMlJWtw6PrCpywznd2NSgO3m4KwO9RqbFqGg6iDE8vVMFWMeQI4Io3eEYww==}
+  '@tanstack/query-core@5.90.19':
+    resolution: {integrity: sha512-GLW5sjPVIvH491VV1ufddnfldyVB+teCnpPIvweEfkpRx7CfUmUGhoh9cdcUKBh/KwVxk22aNEDxeTsvmyB/WA==}
 
   '@tanstack/router-utils@1.143.11':
     resolution: {integrity: sha512-N24G4LpfyK8dOlnP8BvNdkuxg1xQljkyl6PcrdiPSA301pOjatRT1y8wuCCJZKVVD8gkd0MpCZ0VEjRMGILOtA==}
@@ -3069,8 +3039,8 @@ packages:
     resolution: {integrity: sha512-a05fzK+jBGacsSAc1vE8an7lpBh4H0PyIEcivtEyHLomgSeElAJxm9E2It/0nYRZ5Lh23m0okbhzJNaYWZpAOg==}
     engines: {node: '>=12'}
 
-  '@tanstack/solid-query@5.90.19':
-    resolution: {integrity: sha512-H13RCELym1RhBQymIvHCOnvwYPa1xXckUNg/fXV0RYDEdq80Xn2GFkqyFj4r34h0ermnYi6AVkmbny/6AtkHTg==}
+  '@tanstack/solid-query@5.90.22':
+    resolution: {integrity: sha512-gu+KfBSBCth3N2IsVWcpJWinFsokOElm3D2IpyaezDq/N6OZVSBn0qSo35HlTxD3gbAscKzIFLJNRinMXOCSYA==}
     peerDependencies:
       solid-js: ^1.6.0
 
@@ -3248,8 +3218,8 @@ packages:
   '@types/micromatch@4.0.10':
     resolution: {integrity: sha512-5jOhFDElqr4DKTrTEbnW8DZ4Hz5LRUEmyrGpCMrD/NphYv3nUnaF08xmSLx1rGGnyEs/kFnhiw6dCgcDqMr5PQ==}
 
-  '@types/node@25.0.8':
-    resolution: {integrity: sha512-powIePYMmC3ibL0UJ2i2s0WIbq6cg6UyVFQxSCpaPxxzAaziRfimGivjdF943sSGV6RADVbk0Nvlm5P/FB44Zg==}
+  '@types/node@25.0.9':
+    resolution: {integrity: sha512-/rpCXHlCWeqClNBwUhDcusJxXYDjZTyE8v5oTO7WbL8eij2nKhUeU89/6xgjU7N4/Vh3He0BtyhJdQbDyhiXAw==}
 
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
@@ -3502,9 +3472,6 @@ packages:
   '@zag-js/anatomy@1.31.1':
     resolution: {integrity: sha512-BhIhf3Q0tRA0Jugd7AJfUBzeAb/iATBsw7KyYThMGcPWmrWssL7KWr5AB6RufzGKU7+DCb1QEhlqd4NSOJaYxQ==}
 
-  '@zag-js/anatomy@1.32.0':
-    resolution: {integrity: sha512-99u8VBSt5wkP9ZluIV6lR06Pvyt0AQaTGnvhZkvSmbz5U5+1XwCU0Db7Q+dcQRpM7d0p1ViWFxNVHDuuwY25Fw==}
-
   '@zag-js/angle-slider@1.31.1':
     resolution: {integrity: sha512-SfWrgnM0zMLX82rsIJOqWk430UnPA17UFGcDqMDRwXy1Wx4yptmx0aFAsSXnRnw4Ee7WaulF2RWBli6O6iYRCA==}
 
@@ -3550,9 +3517,6 @@ packages:
   '@zag-js/core@1.31.1':
     resolution: {integrity: sha512-RaMJeqtjxG6k7iFD3WQnlyFJVT3yfQN+pJygAHH37GsMtiNzQQJOoesjb0LV9T27jwMXeNUzrh3MSDr1/0yVcQ==}
 
-  '@zag-js/core@1.32.0':
-    resolution: {integrity: sha512-aibBwyqw3saAzYBf2YHfuyOGt9kdNc4+ile3D1jbUsXiccLvGuFPP3+Ox7fULcILIiQhR0X6M+sTF17IyEMrYA==}
-
   '@zag-js/date-picker@1.31.1':
     resolution: {integrity: sha512-AOWN/IskGidVQt5g+uE9cILqJBTclE6OG1GC9WSWuyP/y4F+PdP/781SgYpYCZg/6pMGbL01PFKKb7xOOCeZAg==}
     peerDependencies:
@@ -3569,15 +3533,9 @@ packages:
   '@zag-js/dismissable@1.31.1':
     resolution: {integrity: sha512-jCdJwQmEkG6PlrN13fUk2l7ZclSu54FZwmT4xOtQpEbaiAiESm5KI5oyFh5jDPY47Goa28UJkEjWXVgKXKWb0g==}
 
-  '@zag-js/dismissable@1.32.0':
-    resolution: {integrity: sha512-AUjajoaj2/3GfQvYJ5cdVwnov/dqAuS2N2dHRwxxSe/ktD4FbN/t0AcJ5Q2ojOuT6nBScEZQNd2vOrVgxLEiwQ==}
-
   '@zag-js/dom-query@1.31.1':
     resolution: {integrity: sha512-2tCZLwSfoXm62gwl0neiAN6u5VnzUhy5wHtKbX+klqGFatnca3Bm++H9+4PHMrwUWRbPg3H5N151lKFEOQhBfQ==}
 
-  '@zag-js/dom-query@1.32.0':
-    resolution: {integrity: sha512-12XCCV1bchIFC7wjtYim5sEqUrAddzt0eysMTbBrCuK5r6TmLecwLtxUNKIRQ8adkCn0jqecUiuNyXojaArP3g==}
-
   '@zag-js/editable@1.31.1':
     resolution: {integrity: sha512-JMICHw4/x0YqDy/n+I+TeaXlFbTA0j9w3UqOWMwUFQ+dAsq4JLXeqZDXu19MQN6yaTFdOpG1EFw4FEVTsu+d3Q==}
 
@@ -3593,9 +3551,6 @@ packages:
   '@zag-js/focus-trap@1.31.1':
     resolution: {integrity: sha512-omgUhAz1r81pYAujqYIIavdTKJzDRExioSiqhnx/xq10a6Q/xavMFflq8w7edMc9JHkTOnr9E5qh9abCVJjhpQ==}
 
-  '@zag-js/focus-trap@1.32.0':
-    resolution: {integrity: sha512-irzYMaz1ycAnHOGLr4r6+3MwhfKnA67N9jPft9ejnE2QoTp40W+xp07K2KQNf6xN7Boe6xGlw8SwLBnGZw2eCQ==}
-
   '@zag-js/focus-visible@1.31.1':
     resolution: {integrity: sha512-GC59A3yd7tj8aKhzvhrM+CEZZraXm5y/SpfIjz1J7kGV6eeXbUtjkbe75g99Ve8iJYfQVQlAj2GyN3oniHc5Zw==}
 
@@ -3614,9 +3569,6 @@ packages:
   '@zag-js/interact-outside@1.31.1':
     resolution: {integrity: sha512-oxBAlBqcatlxGUmhwUCRYTADIBrVoyxM1YrFzR1R8jhvVR/QCaxoLAyKwcA3mWXlZ8+NlXb7n5ELE11BZb/rEg==}
 
-  '@zag-js/interact-outside@1.32.0':
-    resolution: {integrity: sha512-OwQgBxijmv9ZXFu6WzhLRULJh0FoixuP6DJV9B2CGBKJZz4hbQAqVrW9PFaPiBuWOILZpZ/iI6ZDjkGSKZ0WHw==}
-
   '@zag-js/json-tree-utils@1.31.1':
     resolution: {integrity: sha512-wrNek2UBE69FWpo2f0E2MxiboBS+Uop79LeQU2jNDujA1o3x6b1Lp2r7Fl1sfnUWMdKVVQb44oqfIj2g3CTEmQ==}
 
@@ -3653,9 +3605,6 @@ packages:
   '@zag-js/popper@1.31.1':
     resolution: {integrity: sha512-wLXcEqzn9MK1rGbsgnDH26o5ZWqR4oeb6ZepKKy0gcuJl/1S5/dr1VBvxJNMZlf9d6etvYklG5LRnIVkXCbrjA==}
 
-  '@zag-js/popper@1.32.0':
-    resolution: {integrity: sha512-nTSdbgZKIEERNEpNhMlbATRiKhMrxo0t2206MbVhrM52TuraIc+nRmJNwWKoagalXs62/TlSpFvXmcpVyfWTMQ==}
-
   '@zag-js/presence@1.31.1':
     resolution: {integrity: sha512-tv+WsBnA0abIlDuEfZMh0lRPF4cMs6kWJosNkGBwzeXnGds+KXjzpL2KDtwDgbJgN3sI0xHPMYjRy2v3ZamcDA==}
 
@@ -3697,11 +3646,6 @@ packages:
     peerDependencies:
       solid-js: '>=1.1.3'
 
-  '@zag-js/solid@1.32.0':
-    resolution: {integrity: sha512-lH1XhOJN6uS1aNWOiotvPKAEVg4Mm/dfc/E08ku3VKiAMqCOT1C/sq/J1BHdJgh5unzt8CCyrOHeY2UYsOTgQw==}
-    peerDependencies:
-      solid-js: '>=1.1.3'
-
   '@zag-js/splitter@1.31.1':
     resolution: {integrity: sha512-7SGBT2/xKsOzeSQEg+Otn1XV3RHrAz3jTySjBRKoEmdxubhfREqbKotbGVG65aTve11fQnmJ3Oyt3GJOeraxLA==}
 
@@ -3711,9 +3655,6 @@ packages:
   '@zag-js/store@1.31.1':
     resolution: {integrity: sha512-d5ZTRciTuXOGQ3nML15kQLaTiR1wJPxT1Fu1nN659X6Rl8DPtubYaRCZ3RCk9Kyiyg2z5HxeVqDswaDvGbM9Rg==}
 
-  '@zag-js/store@1.32.0':
-    resolution: {integrity: sha512-m9jvTKJB/lTC2I8NpDf+yo2XVN+ogxjiVbGsooAFTpyUAiXZY50nVc9cFcswnwFMo/GzXMk81oalyz9u65jqRQ==}
-
   '@zag-js/switch@1.31.1':
     resolution: {integrity: sha512-Jii3OSqSa9sQux+hvSRvp9dirzUF09+PAjrLjCQs+BT08EZ0XqeGvVzM0Wqf9LFy07HdLZntai3IUaXLF6byBw==}
 
@@ -3741,24 +3682,15 @@ packages:
   '@zag-js/tour@1.31.1':
     resolution: {integrity: sha512-ZmcAevXxoENHmHG0xwdIt1oCLe2/DW1CEBFPr7YuGKc+FU3QbBVZMzcBHrJCe0nkKXhUKzHOHM78bOHD/gM76w==}
 
-  '@zag-js/tour@1.32.0':
-    resolution: {integrity: sha512-S7kz9cOzDK5T/zxwphaA3TBL/9c/m3u1VuVElpPXzIHUla48kil5/rzcpdJyloNMqazml68ed0GLGRexXletfw==}
-
   '@zag-js/tree-view@1.31.1':
     resolution: {integrity: sha512-Q+VSQz7X1XR8gT7ICWXlQOJIvzTWw/9BlF7B073UpEgAKRFlD11FmERka5y/BYqj8uE0vazcbSEA3Vc2dgCMJA==}
 
   '@zag-js/types@1.31.1':
     resolution: {integrity: sha512-mKw5DoeBjFykfUHv3ifCRjcogFTqp0aCCsmqQMfnf+J/mg2aXpAx76AXT1PYXAVVhxdP6qGXNd0mOQZDVrIlSQ==}
 
-  '@zag-js/types@1.32.0':
-    resolution: {integrity: sha512-9UV5mFnTgJRyFCCH9g/TIqtxxfw6FUphpe7E0AHK9+WSq3PRvflMeaRT/O6HgdWo0Rc+JN9vVwkFYyGD81uAbw==}
-
   '@zag-js/utils@1.31.1':
     resolution: {integrity: sha512-KLm0pmOtf4ydALbaVLboL7W98TDVxwVVLvSuvtRgV53XTjlsVopTRA5/Xmzq2NhWujDZAXv7bRV603NDgDcjSw==}
 
-  '@zag-js/utils@1.32.0':
-    resolution: {integrity: sha512-IRe1yFbMXBp8Q1Xp916Lq9P91s65K5KRNFZIv2EdQHRynLaT+QrPp5hmzkWoXJn8oOYd6PZeNb7K6v7vk8+k1g==}
-
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -3993,21 +3925,22 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.9.14:
-    resolution: {integrity: sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg==}
+  baseline-browser-mapping@2.9.15:
+    resolution: {integrity: sha512-kX8h7K2srmDyYnXRIppo4AH/wYgzWVCs+eKr3RusRSQ5PvRYoEFmR/I0PbdTjKFAoKqp5+kbxnNTFO9jOfSVJg==}
     hasBin: true
 
   basic-ftp@5.1.0:
     resolution: {integrity: sha512-RkaJzeJKDbaDWTIPiJwubyljaEPwpVWkm9Rt5h9Nd6h7tEXTJ3VB4qxdZBioV7JO5yLUaOKwz7vDOzlncUsegw==}
     engines: {node: '>=10.0.0'}
 
-  better-auth@1.4.12:
-    resolution: {integrity: sha512-FsFMnWgk+AGrxsIGbpWLCibgYcbm6uNhPHln3ohXFDXSRa0gk39Beuh54Q+x6ml2qYodF0snxf/tPtDpBI/JiA==}
+  better-auth@1.4.15:
+    resolution: {integrity: sha512-XZr4GnFPbjvf8wip8AAjTrpGNn3Sba600zT+DgsR3NNCMWCt9aD8+nuRah6BHwHWnVP1nfnby07tPmti72SRBw==}
     peerDependencies:
       '@lynx-js/react': '*'
       '@prisma/client': ^5.0.0 || ^6.0.0 || ^7.0.0
       '@sveltejs/kit': ^2.0.0
       '@tanstack/react-start': ^1.0.0
+      '@tanstack/solid-start': ^1.0.0
       better-sqlite3: ^12.0.0
       drizzle-kit: '>=0.31.4'
       drizzle-orm: '>=0.41.0'
@@ -4031,6 +3964,8 @@ packages:
         optional: true
       '@tanstack/react-start':
         optional: true
+      '@tanstack/solid-start':
+        optional: true
       better-sqlite3:
         optional: true
       drizzle-kit:
@@ -4060,8 +3995,8 @@ packages:
       vue:
         optional: true
 
-  better-call@1.1.7:
-    resolution: {integrity: sha512-6gaJe1bBIEgVebQu/7q9saahVzvBsGaByEnE8aDVncZEDiJO7sdNB28ot9I6iXSbR25egGmmZ6aIURXyQHRraQ==}
+  better-call@1.1.8:
+    resolution: {integrity: sha512-XMQ2rs6FNXasGNfMjzbyroSwKwYbZ/T3IxruSS6U2MJRsSYh3wYtG3o6H00ZlKZ/C/UPOAD97tqgQJNsxyeTXw==}
     peerDependencies:
       zod: ^4.0.0
     peerDependenciesMeta:
@@ -4071,8 +4006,8 @@ packages:
   better-sqlite3@11.10.0:
     resolution: {integrity: sha512-EwhOpyXiOEL/lKzHz9AW1msWFNzGc/z+LzeB3/jnFJpxu+th2yqvzsSWas1v9jgs9+xiXJcD5A8CJxAG2TaghQ==}
 
-  better-sqlite3@12.6.0:
-    resolution: {integrity: sha512-FXI191x+D6UPWSze5IzZjhz+i9MK9nsuHsmTX9bXVl52k06AfZ2xql0lrgIUuzsMsJ7Vgl5kIptvDgBLIV3ZSQ==}
+  better-sqlite3@12.6.2:
+    resolution: {integrity: sha512-8VYKM3MjCa9WcaSAI3hzwhmyHVlH8tiGFwf0RlTsZPWJ1I5MkzjiudCo4KC4DxOaL/53A5B1sI/IbldNFDbsKA==}
     engines: {node: 20.x || 22.x || 23.x || 24.x || 25.x}
 
   bidi-js@1.0.3:
@@ -4184,8 +4119,8 @@ packages:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
     engines: {node: '>=16'}
 
-  caniuse-lite@1.0.30001764:
-    resolution: {integrity: sha512-9JGuzl2M+vPL+pz70gtMF9sHdMFbY9FJaQBi186cHKH3pSzDvzoUJUPV6fqiKIMyXbud9ZLg4F3Yza1vJ1+93g==}
+  caniuse-lite@1.0.30001765:
+    resolution: {integrity: sha512-LWcNtSyZrakjECqmpP4qdg0MMGdN368D7X8XvvAqOcqMv0RxnlqVKZl2V6/mBR68oYMxOZPLw/gO7DuisMHUvQ==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -4261,6 +4196,9 @@ packages:
   cjs-module-lexer@1.4.3:
     resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   clean-regexp@1.0.0:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
@@ -4540,8 +4478,8 @@ packages:
     resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
     engines: {node: '>=12'}
 
-  d3-format@3.1.0:
-    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
     engines: {node: '>=12'}
 
   d3-geo@3.1.1:
@@ -4756,8 +4694,8 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
-  devalue@5.6.1:
-    resolution: {integrity: sha512-jDwizj+IlEZBunHcOuuFVBnIMPAEHvTsJj0BcIp94xYguLRVBcXO853px/MyIJvbVzWdsGvrRweIUWJw8hBP7A==}
+  devalue@5.6.2:
+    resolution: {integrity: sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==}
 
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
@@ -4998,8 +4936,8 @@ packages:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
-  es-toolkit@1.43.0:
-    resolution: {integrity: sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==}
+  es-toolkit@1.44.0:
+    resolution: {integrity: sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==}
 
   esbuild-register@3.6.0:
     resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
@@ -5433,8 +5371,8 @@ packages:
   h3@1.15.3:
     resolution: {integrity: sha512-z6GknHqyX0h9aQaTx22VZDf6QyZn+0Nh+Ym8O/u0SGSkyF5cuTJYKlc8MkzW3Nzf9LE1ivcpmYC3FUGpywhuUQ==}
 
-  h3@1.15.4:
-    resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==}
+  h3@1.15.5:
+    resolution: {integrity: sha512-xEyq3rSl+dhGX2Lm0+eFQIAzlDN6Fs0EcC4f7BNUmzaRX/PTzeuM+Tr2lHB8FoXggsQIeXLj8EDVgs5ywxyxmg==}
 
   hachure-fill@0.5.2:
     resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
@@ -5591,8 +5529,8 @@ packages:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
-  ioredis@5.9.1:
-    resolution: {integrity: sha512-BXNqFQ66oOsR82g9ajFFsR8ZKrjVvYCLyeML9IvSMAsP56XH2VXBdZjmI11p65nXXJxTEt1hie3J2QeFJVgrtQ==}
+  ioredis@5.9.2:
+    resolution: {integrity: sha512-tAAg/72/VxOUW7RQSX1pIxJVucYKcjFjfvj60L57jrZpYCHC3XN0WCQ3sNYL4Gmvv+7GPvTAjc+KSdeNuE8oWQ==}
     engines: {node: '>=12.22.0'}
 
   ip-address@10.1.0:
@@ -5824,8 +5762,8 @@ packages:
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
-  kysely@0.28.9:
-    resolution: {integrity: sha512-3BeXMoiOhpOwu62CiVpO6lxfq4eS6KMYfQdMsN/2kUCRNuF2YiEr7u0HLHaQU+O4Xu8YXE3bHVkwaQ85i72EuA==}
+  kysely@0.28.10:
+    resolution: {integrity: sha512-ksNxfzIW77OcZ+QWSAPC7yDqUSaIVwkTWnTPNiIy//vifNbwsSgQ57OkkncHxxpcBHM3LRfLAZVEh7kjq5twVA==}
     engines: {node: '>=20.0.0'}
 
   langium@3.3.1:
@@ -6111,8 +6049,8 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
-  miniflare@4.20260111.0:
-    resolution: {integrity: sha512-pUsbDlumPaTzliA+J9HMAM74nLR8wqpCQNOESximab51jAfvL7ZaP5Npzh4PWNV0Jfq28tlqazakuJcw6w5qlA==}
+  miniflare@4.20260114.0:
+    resolution: {integrity: sha512-QwHT7S6XqGdQxIvql1uirH/7/i3zDEt0B/YBXTYzMfJtVCR4+ue3KPkU+Bl0zMxvpgkvjh9+eCHhJbKEqya70A==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
@@ -6191,8 +6129,8 @@ packages:
     resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
     engines: {node: '>= 0.4.0'}
 
-  nitropack@2.13.0:
-    resolution: {integrity: sha512-31H9EgJNsJqfa5f6775ksZlKH+Fk8Kv3CV2wF6v9+KY57DexH8+qCLrcOXgM72vKB/j/7dVmOtuiVY8Jy8+8nw==}
+  nitropack@2.13.1:
+    resolution: {integrity: sha512-2dDj89C4wC2uzG7guF3CnyG+zwkZosPEp7FFBGHB3AJo11AywOolWhyQJFHDzve8COvGxJaqscye9wW2IrUsNw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -6201,8 +6139,8 @@ packages:
       xml2js:
         optional: true
 
-  node-abi@3.85.0:
-    resolution: {integrity: sha512-zsFhmbkAzwhTft6nd3VxcG0cvJsT70rL+BIGHWVq5fi6MwGrHwzqKaxXE+Hl2GmnGItnDKPPkO5/LQqjVkIdFg==}
+  node-abi@3.86.0:
+    resolution: {integrity: sha512-sn9Et4N3ynsetj3spsZR729DVlGH6iBG4RiDMV7HEp3guyOW6W3S0unGpLDxT50mXortGUMax/ykUNQXdqc/Xg==}
     engines: {node: '>=10'}
 
   node-addon-api@6.1.0:
@@ -6549,8 +6487,8 @@ packages:
       prettier-plugin-svelte:
         optional: true
 
-  prettier@3.7.4:
-    resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
+  prettier@3.8.0:
+    resolution: {integrity: sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -7145,8 +7083,8 @@ packages:
   strip-literal@3.1.0:
     resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
 
-  stripe@20.1.2:
-    resolution: {integrity: sha512-qU+lQRRJnTxmyvglYBPE24/IepncmywsAg0GDTsTdP2pb+3e3RdREHJZjKgqCmv0phPxN/nmgNPnIPPH8w0P4A==}
+  stripe@20.2.0:
+    resolution: {integrity: sha512-m8niTfdm3nPP/yQswRWMwQxqEUcTtB3RTJQ9oo6NINDzgi7aPOadsH/fPXIIfL1Sc5+lqQFKSk7WiO6CXmvaeA==}
     engines: {node: '>=16'}
     peerDependencies:
       '@types/node': '>=16'
@@ -7221,8 +7159,8 @@ packages:
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
-  tar@7.5.2:
-    resolution: {integrity: sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==}
+  tar@7.5.3:
+    resolution: {integrity: sha512-ENg5JUHUm2rDD7IvKNFGzyElLXNjachNLp6RaGf4+JOgxXHkqA+gq81ZAMCUmtMtqBsoU62lcp6S27g1LCYGGQ==}
     engines: {node: '>=18'}
 
   temp@0.9.4:
@@ -7235,8 +7173,8 @@ packages:
     peerDependencies:
       solid-js: ^1.8
 
-  terser@5.44.1:
-    resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
+  terser@5.46.0:
+    resolution: {integrity: sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -7340,38 +7278,38 @@ packages:
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
-  turbo-darwin-64@2.7.4:
-    resolution: {integrity: sha512-xDR30ltfkSsRfGzABBckvl1nz1cZ3ssTujvdj+TPwOweeDRvZ0e06t5DS0rmRBvyKpgGs42K/EK6Mn2qLlFY9A==}
+  turbo-darwin-64@2.7.5:
+    resolution: {integrity: sha512-nN3wfLLj4OES/7awYyyM7fkU8U8sAFxsXau2bYJwAWi6T09jd87DgHD8N31zXaJ7LcpyppHWPRI2Ov9MuZEwnQ==}
     cpu: [x64]
     os: [darwin]
 
-  turbo-darwin-arm64@2.7.4:
-    resolution: {integrity: sha512-P7sjqXtOL/+nYWPvcDGWhi8wf8M8mZHHB8XEzw2VX7VJrS8IGHyJHGD1AYfDvhAEcr7pnk3gGifz3/xyhI655w==}
+  turbo-darwin-arm64@2.7.5:
+    resolution: {integrity: sha512-wCoDHMiTf3FgLAbZHDDx/unNNonSGhsF5AbbYODbxnpYyoKDpEYacUEPjZD895vDhNvYCH0Nnk24YsP4n/cD6g==}
     cpu: [arm64]
     os: [darwin]
 
-  turbo-linux-64@2.7.4:
-    resolution: {integrity: sha512-GofFOxRO/IhG8BcPyMSSB3Y2+oKQotsaYbHxL9yD6JPb20/o35eo+zUSyazOtilAwDHnak5dorAJFoFU8MIg2A==}
+  turbo-linux-64@2.7.5:
+    resolution: {integrity: sha512-KKPvhOmJMmzWj/yjeO4LywkQ85vOJyhru7AZk/+c4B6OUh/odQ++SiIJBSbTG2lm1CuV5gV5vXZnf/2AMlu3Zg==}
     cpu: [x64]
     os: [linux]
 
-  turbo-linux-arm64@2.7.4:
-    resolution: {integrity: sha512-+RQKgNjksVPxYAyAgmDV7w/1qj++qca+nSNTAOKGOfJiDtSvRKoci89oftJ6anGs00uamLKVEQ712TI/tfNAIw==}
+  turbo-linux-arm64@2.7.5:
+    resolution: {integrity: sha512-8PIva4L6BQhiPikUTds9lSFSHXVDAsEvV6QUlgwPsXrtXVQMVi6Sv9p+IxtlWQFvGkdYJUgX9GnK2rC030Xcmw==}
     cpu: [arm64]
     os: [linux]
 
-  turbo-windows-64@2.7.4:
-    resolution: {integrity: sha512-rfak1+g+ON3czs1mDYsCS4X74ZmK6gOgRQTXjDICtzvR4o61paqtgAYtNPofcVsMWeF4wvCajSeoAkkeAnQ1kg==}
+  turbo-windows-64@2.7.5:
+    resolution: {integrity: sha512-rupskv/mkIUgQXzX/wUiK00mKMorQcK8yzhGFha/D5lm05FEnLx8dsip6rWzMcVpvh+4GUMA56PgtnOgpel2AA==}
     cpu: [x64]
     os: [win32]
 
-  turbo-windows-arm64@2.7.4:
-    resolution: {integrity: sha512-1ZgBNjNRbDu/fPeqXuX9i26x3CJ/Y1gcwUpQ+Vp7kN9Un6RZ9kzs164f/knrjcu5E+szCRexVjRSJay1k5jApA==}
+  turbo-windows-arm64@2.7.5:
+    resolution: {integrity: sha512-G377Gxn6P42RnCzfMyDvsqQV7j69kVHKlhz9J4RhtJOB5+DyY4yYh/w0oTIxZQ4JRMmhjwLu3w9zncMoQ6nNDw==}
     cpu: [arm64]
     os: [win32]
 
-  turbo@2.7.4:
-    resolution: {integrity: sha512-bkO4AddmDishzJB2ze7aYYPaejMoJVfS0XnaR6RCdXFOY8JGJfQE+l9fKiV7uDPa5Ut44gmOWJL3894CIMeH9g==}
+  turbo@2.7.5:
+    resolution: {integrity: sha512-7Imdmg37joOloTnj+DPrab9hIaQcDdJ5RwSzcauo/wMOSAgO+A/I/8b3hsGGs6PWQz70m/jkPgdqWsfNKtwwDQ==}
     hasBin: true
 
   type-check@0.4.0:
@@ -7382,8 +7320,8 @@ packages:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
-  type-fest@5.4.0:
-    resolution: {integrity: sha512-wfkA6r0tBpVfGiyO+zbf9e10QkRQSlK9F2UvyfnjoCmrvH2bjHyhPzhugSBOuq1dog3P0+FKckqe+Xf6WKVjwg==}
+  type-fest@5.4.1:
+    resolution: {integrity: sha512-xygQcmneDyzsEuKZrFbRMne5HDqMs++aFzefrJTgEIKjQ3rekM+RPfFCVq2Gp1VIDqddoYeppCj4Pcb+RZW0GQ==}
     engines: {node: '>=20'}
 
   type-is@2.0.1:
@@ -7398,8 +7336,8 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  ufo@1.6.2:
-    resolution: {integrity: sha512-heMioaxBcG9+Znsda5Q8sQbWnLJSl98AFDXTO80wELWEzX3hordXsTdxrIfMQoO9IY1MEnoGoPjpoKpMj+Yx0Q==}
+  ufo@1.6.3:
+    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
 
   ultrahtml@1.6.0:
     resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
@@ -7461,8 +7399,8 @@ packages:
     resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
     engines: {node: '>=18.12.0'}
 
-  unstorage@1.17.3:
-    resolution: {integrity: sha512-i+JYyy0DoKmQ3FximTHbGadmIYb8JEpq7lxUjnjeB702bCPum0vzo6oy5Mfu0lpqISw7hCyMW2yj4nWC8bqJ3Q==}
+  unstorage@1.17.4:
+    resolution: {integrity: sha512-fHK0yNg38tBiJKp/Vgsq4j0JEsCmgqH58HAn707S7zGkArbZsVr/CwINoi+nh3h98BRCwKvx1K3Xg9u3VV83sw==}
     peerDependencies:
       '@azure/app-configuration': ^1.8.0
       '@azure/cosmos': ^4.2.0
@@ -7470,14 +7408,14 @@ packages:
       '@azure/identity': ^4.6.0
       '@azure/keyvault-secrets': ^4.9.0
       '@azure/storage-blob': ^12.26.0
-      '@capacitor/preferences': ^6.0.3 || ^7.0.0
+      '@capacitor/preferences': ^6 || ^7 || ^8
       '@deno/kv': '>=0.9.0'
       '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
       '@planetscale/database': ^1.19.0
       '@upstash/redis': ^1.34.3
       '@vercel/blob': '>=0.27.1'
       '@vercel/functions': ^2.2.12 || ^3.0.0
-      '@vercel/kv': ^1.0.1
+      '@vercel/kv': ^1 || ^2 || ^3
       aws4fetch: ^1.0.20
       db0: '>=0.2.1'
       idb-keyval: ^6.2.1
@@ -7870,8 +7808,8 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
-  workerd@1.20260111.0:
-    resolution: {integrity: sha512-ov6Pt4k6d/ALfJja/EIHohT9IrY/f6GAa0arWEPat2qekp78xHbVM7jSxNWAMbaE7ZmnQQIFEGD1ZhAWZmQKIg==}
+  workerd@1.20260114.0:
+    resolution: {integrity: sha512-kTJ+jNdIllOzWuVA3NRQRvywP0T135zdCjAE2dAUY1BFbxM6fmMZV8BbskEoQ4hAODVQUfZQmyGctcwvVCKxFA==}
     engines: {node: '>=16'}
     hasBin: true
 
@@ -7886,12 +7824,12 @@ packages:
       '@cloudflare/workers-types':
         optional: true
 
-  wrangler@4.59.1:
-    resolution: {integrity: sha512-5DddGSNxHd6dOjREWTDQdovQlZ1Lh80NNRXZFQ4/CrK3fNyVIBj9tqCs9pmXMNrKQ/AnKNeYzEs/l1kr8rHhOg==}
+  wrangler@4.59.2:
+    resolution: {integrity: sha512-Z4xn6jFZTaugcOKz42xvRAYKgkVUERHVbuCJ5+f+gK+R6k12L02unakPGOA0L0ejhUl16dqDjKe4tmL9sedHcw==}
     engines: {node: '>=20.0.0'}
     hasBin: true
     peerDependencies:
-      '@cloudflare/workers-types': ^4.20260111.0
+      '@cloudflare/workers-types': ^4.20260114.0
     peerDependenciesMeta:
       '@cloudflare/workers-types':
         optional: true
@@ -8409,28 +8347,28 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@better-auth/core@1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)':
+  '@better-auth/core@1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0)':
     dependencies:
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
       '@standard-schema/spec': 1.1.0
-      better-call: 1.1.7(zod@4.3.5)
+      better-call: 1.1.8(zod@4.3.5)
       jose: 6.1.3
-      kysely: 0.28.9
+      kysely: 0.28.10
       nanostores: 1.1.0
       zod: 4.3.5
 
-  '@better-auth/stripe@1.4.12(@better-auth/core@1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(better-auth@1.4.12(better-sqlite3@12.6.0)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3)))(stripe@20.1.2(@types/node@25.0.8))':
+  '@better-auth/stripe@1.4.15(@better-auth/core@1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0))(better-auth@1.4.15(better-sqlite3@12.6.2)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3)))(stripe@20.2.0(@types/node@25.0.9))':
     dependencies:
-      '@better-auth/core': 1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
-      better-auth: 1.4.12(better-sqlite3@12.6.0)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+      '@better-auth/core': 1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0)
+      better-auth: 1.4.15(better-sqlite3@12.6.2)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       defu: 6.1.4
-      stripe: 20.1.2(@types/node@25.0.8)
+      stripe: 20.2.0(@types/node@25.0.9)
       zod: 4.3.5
 
-  '@better-auth/telemetry@1.4.12(@better-auth/core@1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))':
+  '@better-auth/telemetry@1.4.15(@better-auth/core@1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0))':
     dependencies:
-      '@better-auth/core': 1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
+      '@better-auth/core': 1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0)
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
 
@@ -8464,30 +8402,32 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
-  '@cloudflare/unenv-preset@2.7.13(unenv@2.0.0-rc.24)(workerd@1.20251217.0)':
+  '@cloudflare/kv-asset-handler@0.4.2': {}
+
+  '@cloudflare/unenv-preset@2.10.0(unenv@2.0.0-rc.24)(workerd@1.20260114.0)':
     dependencies:
       unenv: 2.0.0-rc.24
     optionalDependencies:
-      workerd: 1.20251217.0
+      workerd: 1.20260114.0
 
-  '@cloudflare/unenv-preset@2.9.0(unenv@2.0.0-rc.24)(workerd@1.20260111.0)':
+  '@cloudflare/unenv-preset@2.7.13(unenv@2.0.0-rc.24)(workerd@1.20251217.0)':
     dependencies:
       unenv: 2.0.0-rc.24
     optionalDependencies:
-      workerd: 1.20260111.0
+      workerd: 1.20251217.0
 
-  '@cloudflare/vitest-pool-workers@0.11.1(@cloudflare/workers-types@4.20260114.0)(@vitest/runner@4.0.17)(@vitest/snapshot@4.0.17)(vitest@3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@cloudflare/vitest-pool-workers@0.11.1(@cloudflare/workers-types@4.20260118.0)(@vitest/runner@4.0.17)(@vitest/snapshot@4.0.17)(vitest@3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@vitest/runner': 4.0.17
       '@vitest/snapshot': 4.0.17
       birpc: 0.2.14
       cjs-module-lexer: 1.4.3
-      devalue: 5.6.1
+      devalue: 5.6.2
       esbuild: 0.27.0
       miniflare: 4.20251217.0
       semver: 7.7.3
-      vitest: 3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
-      wrangler: 4.56.0(@cloudflare/workers-types@4.20260114.0)
+      vitest: 3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      wrangler: 4.56.0(@cloudflare/workers-types@4.20260118.0)
       zod: 3.25.76
     transitivePeerDependencies:
       - '@cloudflare/workers-types'
@@ -8497,34 +8437,34 @@ snapshots:
   '@cloudflare/workerd-darwin-64@1.20251217.0':
     optional: true
 
-  '@cloudflare/workerd-darwin-64@1.20260111.0':
+  '@cloudflare/workerd-darwin-64@1.20260114.0':
     optional: true
 
   '@cloudflare/workerd-darwin-arm64@1.20251217.0':
     optional: true
 
-  '@cloudflare/workerd-darwin-arm64@1.20260111.0':
+  '@cloudflare/workerd-darwin-arm64@1.20260114.0':
     optional: true
 
   '@cloudflare/workerd-linux-64@1.20251217.0':
     optional: true
 
-  '@cloudflare/workerd-linux-64@1.20260111.0':
+  '@cloudflare/workerd-linux-64@1.20260114.0':
     optional: true
 
   '@cloudflare/workerd-linux-arm64@1.20251217.0':
     optional: true
 
-  '@cloudflare/workerd-linux-arm64@1.20260111.0':
+  '@cloudflare/workerd-linux-arm64@1.20260114.0':
     optional: true
 
   '@cloudflare/workerd-windows-64@1.20251217.0':
     optional: true
 
-  '@cloudflare/workerd-windows-64@1.20260111.0':
+  '@cloudflare/workerd-windows-64@1.20260114.0':
     optional: true
 
-  '@cloudflare/workers-types@4.20260114.0': {}
+  '@cloudflare/workers-types@4.20260118.0': {}
 
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
@@ -9344,7 +9284,9 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
-  '@exodus/bytes@1.8.0': {}
+  '@exodus/bytes@1.9.0(@noble/hashes@2.0.1)':
+    optionalDependencies:
+      '@noble/hashes': 2.0.1
 
   '@floating-ui/core@1.7.3':
     dependencies:
@@ -9638,7 +9580,7 @@ snapshots:
       node-fetch: 2.7.0
       nopt: 8.1.0
       semver: 7.7.3
-      tar: 7.5.2
+      tar: 7.5.3
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -9796,18 +9738,18 @@ snapshots:
 
   '@poppinss/exception@1.2.3': {}
 
-  '@preact/preset-vite@2.10.2(@babel/core@7.28.6)(preact@10.28.2)(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@preact/preset-vite@2.10.2(@babel/core@7.28.6)(preact@10.28.2)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.28.6
       '@babel/plugin-transform-react-jsx': 7.28.6(@babel/core@7.28.6)
       '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.28.6)
-      '@prefresh/vite': 2.4.11(preact@10.28.2)(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@prefresh/vite': 2.4.11(preact@10.28.2)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       '@rollup/pluginutils': 4.2.1
       babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.28.6)
       debug: 4.4.3
       picocolors: 1.1.1
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
-      vite-prerender-plugin: 0.5.12(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      vite-prerender-plugin: 0.5.12(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
     transitivePeerDependencies:
       - preact
       - supports-color
@@ -9820,7 +9762,7 @@ snapshots:
 
   '@prefresh/utils@1.2.1': {}
 
-  '@prefresh/vite@2.4.11(preact@10.28.2)(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@prefresh/vite@2.4.11(preact@10.28.2)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.28.6
       '@prefresh/babel-plugin': 0.5.2
@@ -9828,7 +9770,7 @@ snapshots:
       '@prefresh/utils': 1.2.1
       '@rollup/pluginutils': 4.2.1
       preact: 10.28.2
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -9968,7 +9910,7 @@ snapshots:
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.5.0
-      terser: 5.44.1
+      terser: 5.46.0
     optionalDependencies:
       rollup: 4.55.1
 
@@ -10153,11 +10095,11 @@ snapshots:
     dependencies:
       solid-js: 1.9.10
 
-  '@solidjs/start@1.2.1(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vinxi@0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@solidjs/start@1.2.1(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vinxi@0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
-      '@tanstack/server-functions-plugin': 1.121.21(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
-      '@vinxi/plugin-directives': 0.5.1(vinxi@0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
-      '@vinxi/server-components': 0.5.1(vinxi@0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@tanstack/server-functions-plugin': 1.121.21(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      '@vinxi/plugin-directives': 0.5.1(vinxi@0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      '@vinxi/server-components': 0.5.1(vinxi@0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       cookie-es: 2.0.0
       defu: 6.1.4
       error-stack-parser: 2.1.4
@@ -10169,8 +10111,8 @@ snapshots:
       source-map-js: 1.2.1
       terracotta: 1.1.0(solid-js@1.9.10)
       tinyglobby: 0.2.15
-      vinxi: 0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
-      vite-plugin-solid: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      vinxi: 0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      vite-plugin-solid: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
     transitivePeerDependencies:
       - '@testing-library/jest-dom'
       - solid-js
@@ -10257,14 +10199,14 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
 
-  '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@tailwindcss/node': 4.1.18
       '@tailwindcss/oxide': 4.1.18
       tailwindcss: 4.1.18
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
-  '@tanstack/directive-functions-plugin@1.121.21(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tanstack/directive-functions-plugin@1.121.21(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.26.2
       '@babel/core': 7.28.6
@@ -10273,11 +10215,11 @@ snapshots:
       '@tanstack/router-utils': 1.143.11
       babel-dead-code-elimination: 1.0.12
       tiny-invariant: 1.3.3
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/query-core@5.90.16': {}
+  '@tanstack/query-core@5.90.19': {}
 
   '@tanstack/router-utils@1.143.11':
     dependencies:
@@ -10291,7 +10233,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/server-functions-plugin@1.121.21(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@tanstack/server-functions-plugin@1.121.21(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.26.2
       '@babel/core': 7.28.6
@@ -10300,16 +10242,16 @@ snapshots:
       '@babel/template': 7.28.6
       '@babel/traverse': 7.28.6
       '@babel/types': 7.28.6
-      '@tanstack/directive-functions-plugin': 1.121.21(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@tanstack/directive-functions-plugin': 1.121.21(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       babel-dead-code-elimination: 1.0.12
       tiny-invariant: 1.3.3
     transitivePeerDependencies:
       - supports-color
       - vite
 
-  '@tanstack/solid-query@5.90.19(solid-js@1.9.10)':
+  '@tanstack/solid-query@5.90.22(solid-js@1.9.10)':
     dependencies:
-      '@tanstack/query-core': 5.90.16
+      '@tanstack/query-core': 5.90.19
       solid-js: 1.9.10
 
   '@tanstack/solid-table@8.21.3(solid-js@1.9.10)':
@@ -10371,7 +10313,7 @@ snapshots:
 
   '@types/better-sqlite3@7.6.13':
     dependencies:
-      '@types/node': 25.0.8
+      '@types/node': 25.0.9
 
   '@types/braces@3.0.5': {}
 
@@ -10528,7 +10470,7 @@ snapshots:
     dependencies:
       '@types/braces': 3.0.5
 
-  '@types/node@25.0.8':
+  '@types/node@25.0.9':
     dependencies:
       undici-types: 7.16.0
 
@@ -10543,7 +10485,7 @@ snapshots:
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 25.0.8
+      '@types/node': 25.0.9
     optional: true
 
   '@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
@@ -10646,11 +10588,11 @@ snapshots:
       node-forge: 1.3.3
       pathe: 1.1.2
       std-env: 3.10.0
-      ufo: 1.6.2
+      ufo: 1.6.3
       untun: 0.1.3
       uqr: 0.1.2
 
-  '@vinxi/plugin-directives@0.5.1(vinxi@0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vinxi/plugin-directives@0.5.1(vinxi@0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/parser': 7.28.6
       acorn: 8.15.0
@@ -10661,22 +10603,22 @@ snapshots:
       magicast: 0.2.11
       recast: 0.23.11
       tslib: 2.8.1
-      vinxi: 0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vinxi: 0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
-  '@vinxi/server-components@0.5.1(vinxi@0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vinxi/server-components@0.5.1(vinxi@0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
-      '@vinxi/plugin-directives': 0.5.1(vinxi@0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@vinxi/plugin-directives': 0.5.1(vinxi@0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       acorn: 8.15.0
       acorn-loose: 8.5.2
       acorn-typescript: 1.4.13(acorn@8.15.0)
       astring: 1.9.0
       magicast: 0.2.11
       recast: 0.23.11
-      vinxi: 0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vinxi: 0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
-  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@25.0.8)(lightningcss@1.30.2)(terser@5.44.1))(vue@3.5.26(typescript@5.9.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@25.0.9)(lightningcss@1.30.2)(terser@5.46.0))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
-      vite: 5.4.21(@types/node@25.0.8)(lightningcss@1.30.2)(terser@5.44.1)
+      vite: 5.4.21(@types/node@25.0.9)(lightningcss@1.30.2)(terser@5.46.0)
       vue: 3.5.26(typescript@5.9.3)
 
   '@vitest/expect@3.2.0':
@@ -10696,21 +10638,21 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@3.2.0(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitest/mocker@3.2.0(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@vitest/spy': 3.2.0
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
-  '@vitest/mocker@4.0.17(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitest/mocker@4.0.17(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@vitest/spy': 4.0.17
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/pretty-format@3.2.0':
     dependencies:
@@ -10761,7 +10703,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vitest: 4.0.17(@types/node@25.0.8)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 4.0.17(@types/node@25.0.9)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/utils@3.2.0':
     dependencies:
@@ -10897,8 +10839,6 @@ snapshots:
 
   '@zag-js/anatomy@1.31.1': {}
 
-  '@zag-js/anatomy@1.32.0': {}
-
   '@zag-js/angle-slider@1.31.1':
     dependencies:
       '@zag-js/anatomy': 1.31.1
@@ -11011,11 +10951,6 @@ snapshots:
       '@zag-js/dom-query': 1.31.1
       '@zag-js/utils': 1.31.1
 
-  '@zag-js/core@1.32.0':
-    dependencies:
-      '@zag-js/dom-query': 1.32.0
-      '@zag-js/utils': 1.32.0
-
   '@zag-js/date-picker@1.31.1(@internationalized/date@3.10.0)':
     dependencies:
       '@internationalized/date': 3.10.0
@@ -11051,20 +10986,10 @@ snapshots:
       '@zag-js/interact-outside': 1.31.1
       '@zag-js/utils': 1.31.1
 
-  '@zag-js/dismissable@1.32.0':
-    dependencies:
-      '@zag-js/dom-query': 1.32.0
-      '@zag-js/interact-outside': 1.32.0
-      '@zag-js/utils': 1.32.0
-
   '@zag-js/dom-query@1.31.1':
     dependencies:
       '@zag-js/types': 1.31.1
 
-  '@zag-js/dom-query@1.32.0':
-    dependencies:
-      '@zag-js/types': 1.32.0
-
   '@zag-js/editable@1.31.1':
     dependencies:
       '@zag-js/anatomy': 1.31.1
@@ -11103,10 +11028,6 @@ snapshots:
     dependencies:
       '@zag-js/dom-query': 1.31.1
 
-  '@zag-js/focus-trap@1.32.0':
-    dependencies:
-      '@zag-js/dom-query': 1.32.0
-
   '@zag-js/focus-visible@1.31.1':
     dependencies:
       '@zag-js/dom-query': 1.31.1
@@ -11140,11 +11061,6 @@ snapshots:
       '@zag-js/dom-query': 1.31.1
       '@zag-js/utils': 1.31.1
 
-  '@zag-js/interact-outside@1.32.0':
-    dependencies:
-      '@zag-js/dom-query': 1.32.0
-      '@zag-js/utils': 1.32.0
-
   '@zag-js/json-tree-utils@1.31.1': {}
 
   '@zag-js/listbox@1.31.1':
@@ -11239,12 +11155,6 @@ snapshots:
       '@zag-js/dom-query': 1.31.1
       '@zag-js/utils': 1.31.1
 
-  '@zag-js/popper@1.32.0':
-    dependencies:
-      '@floating-ui/dom': 1.7.4
-      '@zag-js/dom-query': 1.32.0
-      '@zag-js/utils': 1.32.0
-
   '@zag-js/presence@1.31.1':
     dependencies:
       '@zag-js/core': 1.31.1
@@ -11341,15 +11251,6 @@ snapshots:
       '@zag-js/utils': 1.31.1
       solid-js: 1.9.10
 
-  '@zag-js/solid@1.32.0(solid-js@1.9.10)':
-    dependencies:
-      '@solid-primitives/keyed': 1.5.2(solid-js@1.9.10)
-      '@zag-js/core': 1.32.0
-      '@zag-js/store': 1.32.0
-      '@zag-js/types': 1.32.0
-      '@zag-js/utils': 1.32.0
-      solid-js: 1.9.10
-
   '@zag-js/splitter@1.31.1':
     dependencies:
       '@zag-js/anatomy': 1.31.1
@@ -11370,10 +11271,6 @@ snapshots:
     dependencies:
       proxy-compare: 3.0.1
 
-  '@zag-js/store@1.32.0':
-    dependencies:
-      proxy-compare: 3.0.1
-
   '@zag-js/switch@1.31.1':
     dependencies:
       '@zag-js/anatomy': 1.31.1
@@ -11457,18 +11354,6 @@ snapshots:
       '@zag-js/types': 1.31.1
       '@zag-js/utils': 1.31.1
 
-  '@zag-js/tour@1.32.0':
-    dependencies:
-      '@zag-js/anatomy': 1.32.0
-      '@zag-js/core': 1.32.0
-      '@zag-js/dismissable': 1.32.0
-      '@zag-js/dom-query': 1.32.0
-      '@zag-js/focus-trap': 1.32.0
-      '@zag-js/interact-outside': 1.32.0
-      '@zag-js/popper': 1.32.0
-      '@zag-js/types': 1.32.0
-      '@zag-js/utils': 1.32.0
-
   '@zag-js/tree-view@1.31.1':
     dependencies:
       '@zag-js/anatomy': 1.31.1
@@ -11482,14 +11367,8 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
-  '@zag-js/types@1.32.0':
-    dependencies:
-      csstype: 3.2.3
-
   '@zag-js/utils@1.31.1': {}
 
-  '@zag-js/utils@1.32.0': {}
-
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0:
@@ -11725,61 +11604,61 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.9.14: {}
+  baseline-browser-mapping@2.9.15: {}
 
   basic-ftp@5.1.0: {}
 
-  better-auth@1.4.12(better-sqlite3@12.6.0)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3)):
+  better-auth@1.4.15(better-sqlite3@12.6.2)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3)):
     dependencies:
-      '@better-auth/core': 1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
-      '@better-auth/telemetry': 1.4.12(@better-auth/core@1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))
+      '@better-auth/core': 1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0)
+      '@better-auth/telemetry': 1.4.15(@better-auth/core@1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0))
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
       '@noble/ciphers': 2.1.1
       '@noble/hashes': 2.0.1
-      better-call: 1.1.7(zod@4.3.5)
+      better-call: 1.1.8(zod@4.3.5)
       defu: 6.1.4
       jose: 6.1.3
-      kysely: 0.28.9
+      kysely: 0.28.10
       nanostores: 1.1.0
       zod: 4.3.5
     optionalDependencies:
-      better-sqlite3: 12.6.0
+      better-sqlite3: 12.6.2
       drizzle-kit: 0.31.8
-      drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)
+      drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
       solid-js: 1.9.10
       svelte: 5.46.1
-      vitest: 3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
-  better-auth@1.4.12(better-sqlite3@12.6.0)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@4.0.17)(vue@3.5.26(typescript@5.9.3)):
+  better-auth@1.4.15(better-sqlite3@12.6.2)(drizzle-kit@0.31.8)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)(svelte@5.46.1)(vitest@4.0.17)(vue@3.5.26(typescript@5.9.3)):
     dependencies:
-      '@better-auth/core': 1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
-      '@better-auth/telemetry': 1.4.12(@better-auth/core@1.4.12(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.7(zod@4.3.5))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))
+      '@better-auth/core': 1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0)
+      '@better-auth/telemetry': 1.4.15(@better-auth/core@1.4.15(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.5))(jose@6.1.3)(kysely@0.28.10)(nanostores@1.1.0))
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
       '@noble/ciphers': 2.1.1
       '@noble/hashes': 2.0.1
-      better-call: 1.1.7(zod@4.3.5)
+      better-call: 1.1.8(zod@4.3.5)
       defu: 6.1.4
       jose: 6.1.3
-      kysely: 0.28.9
+      kysely: 0.28.10
       nanostores: 1.1.0
       zod: 4.3.5
     optionalDependencies:
-      better-sqlite3: 12.6.0
+      better-sqlite3: 12.6.2
       drizzle-kit: 0.31.8
-      drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)
+      drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
       solid-js: 1.9.10
       svelte: 5.46.1
-      vitest: 4.0.17(@types/node@25.0.8)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 4.0.17(@types/node@25.0.9)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
-  better-call@1.1.7(zod@4.3.5):
+  better-call@1.1.8(zod@4.3.5):
     dependencies:
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
@@ -11793,7 +11672,7 @@ snapshots:
       bindings: 1.5.0
       prebuild-install: 7.1.3
 
-  better-sqlite3@12.6.0:
+  better-sqlite3@12.6.2:
     dependencies:
       bindings: 1.5.0
       prebuild-install: 7.1.3
@@ -11860,8 +11739,8 @@ snapshots:
 
   browserslist@4.28.1:
     dependencies:
-      baseline-browser-mapping: 2.9.14
-      caniuse-lite: 1.0.30001764
+      baseline-browser-mapping: 2.9.15
+      caniuse-lite: 1.0.30001765
       electron-to-chromium: 1.5.267
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
@@ -11927,7 +11806,7 @@ snapshots:
 
   camelcase@8.0.0: {}
 
-  caniuse-lite@1.0.30001764: {}
+  caniuse-lite@1.0.30001765: {}
 
   ccount@2.0.1: {}
 
@@ -12000,6 +11879,10 @@ snapshots:
 
   cjs-module-lexer@1.4.3: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   clean-regexp@1.0.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -12266,7 +12149,7 @@ snapshots:
       d3-quadtree: 3.0.1
       d3-timer: 3.0.1
 
-  d3-format@3.1.0: {}
+  d3-format@3.1.2: {}
 
   d3-geo@3.1.1:
     dependencies:
@@ -12301,7 +12184,7 @@ snapshots:
   d3-scale@4.0.2:
     dependencies:
       d3-array: 3.2.4
-      d3-format: 3.1.0
+      d3-format: 3.1.2
       d3-interpolate: 3.0.1
       d3-time: 3.1.0
       d3-time-format: 4.1.0
@@ -12358,7 +12241,7 @@ snapshots:
       d3-ease: 3.0.1
       d3-fetch: 3.0.1
       d3-force: 3.0.0
-      d3-format: 3.1.0
+      d3-format: 3.1.2
       d3-geo: 3.1.1
       d3-hierarchy: 3.1.2
       d3-interpolate: 3.0.1
@@ -12395,10 +12278,10 @@ snapshots:
 
   dayjs@1.11.19: {}
 
-  db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)):
+  db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)):
     optionalDependencies:
-      better-sqlite3: 12.6.0
-      drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)
+      better-sqlite3: 12.6.2
+      drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)
 
   debug@2.6.9:
     dependencies:
@@ -12459,7 +12342,7 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
-  devalue@5.6.1: {}
+  devalue@5.6.2: {}
 
   devlop@1.1.0:
     dependencies:
@@ -12499,7 +12382,7 @@ snapshots:
 
   dot-prop@10.1.0:
     dependencies:
-      type-fest: 5.4.0
+      type-fest: 5.4.1
 
   dotenv@16.6.1: {}
 
@@ -12514,13 +12397,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9):
+  drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10):
     optionalDependencies:
-      '@cloudflare/workers-types': 4.20260114.0
+      '@cloudflare/workers-types': 4.20260118.0
       '@types/better-sqlite3': 7.6.13
-      better-sqlite3: 12.6.0
+      better-sqlite3: 12.6.2
       gel: 2.2.0
-      kysely: 0.28.9
+      kysely: 0.28.10
 
   dunder-proto@1.0.1:
     dependencies:
@@ -12599,7 +12482,7 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  es-toolkit@1.43.0: {}
+  es-toolkit@1.44.0: {}
 
   esbuild-register@3.6.0(esbuild@0.25.12):
     dependencies:
@@ -13236,10 +13119,10 @@ snapshots:
       iron-webcrypto: 1.2.1
       node-mock-http: 1.0.4
       radix3: 1.1.2
-      ufo: 1.6.2
+      ufo: 1.6.3
       uncrypto: 0.1.3
 
-  h3@1.15.4:
+  h3@1.15.5:
     dependencies:
       cookie-es: 1.2.2
       crossws: 0.3.5
@@ -13248,7 +13131,7 @@ snapshots:
       iron-webcrypto: 1.2.1
       node-mock-http: 1.0.4
       radix3: 1.1.2
-      ufo: 1.6.2
+      ufo: 1.6.3
       uncrypto: 0.1.3
 
   hachure-fill@0.5.2: {}
@@ -13289,11 +13172,11 @@ snapshots:
 
   hookable@5.5.3: {}
 
-  html-encoding-sniffer@6.0.0:
+  html-encoding-sniffer@6.0.0(@noble/hashes@2.0.1):
     dependencies:
-      '@exodus/bytes': 1.8.0
+      '@exodus/bytes': 1.9.0(@noble/hashes@2.0.1)
     transitivePeerDependencies:
-      - '@exodus/crypto'
+      - '@noble/hashes'
 
   html-entities@2.3.3: {}
 
@@ -13390,7 +13273,7 @@ snapshots:
       cli-cursor: 4.0.0
       cli-truncate: 5.1.1
       code-excerpt: 4.0.0
-      es-toolkit: 1.43.0
+      es-toolkit: 1.44.0
       indent-string: 5.0.0
       is-in-ci: 2.0.0
       patch-console: 2.0.0
@@ -13415,7 +13298,7 @@ snapshots:
 
   internmap@2.0.3: {}
 
-  ioredis@5.9.1:
+  ioredis@5.9.2:
     dependencies:
       '@ioredis/commands': 1.5.0
       cluster-key-slot: 1.1.2
@@ -13545,15 +13428,15 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@27.4.0:
+  jsdom@27.4.0(@noble/hashes@2.0.1):
     dependencies:
       '@acemir/cssom': 0.9.31
       '@asamuzakjp/dom-selector': 6.7.6
-      '@exodus/bytes': 1.8.0
+      '@exodus/bytes': 1.9.0(@noble/hashes@2.0.1)
       cssstyle: 5.3.7
       data-urls: 6.0.0
       decimal.js: 10.6.0
-      html-encoding-sniffer: 6.0.0
+      html-encoding-sniffer: 6.0.0(@noble/hashes@2.0.1)
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
       is-potential-custom-element-name: 1.0.1
@@ -13568,7 +13451,7 @@ snapshots:
       ws: 8.19.0
       xml-name-validator: 5.0.0
     transitivePeerDependencies:
-      - '@exodus/crypto'
+      - '@noble/hashes'
       - bufferutil
       - supports-color
       - utf-8-validate
@@ -13613,7 +13496,7 @@ snapshots:
 
   kolorist@1.8.0: {}
 
-  kysely@0.28.9: {}
+  kysely@0.28.10: {}
 
   langium@3.3.1:
     dependencies:
@@ -13701,14 +13584,14 @@ snapshots:
       crossws: 0.3.5
       defu: 6.1.4
       get-port-please: 3.2.0
-      h3: 1.15.4
+      h3: 1.15.5
       http-shutdown: 1.2.2
       jiti: 2.6.1
       mlly: 1.8.0
       node-forge: 1.3.3
       pathe: 1.1.2
       std-env: 3.10.0
-      ufo: 1.6.2
+      ufo: 1.6.3
       untun: 0.1.3
       uqr: 0.1.2
 
@@ -13914,17 +13797,12 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  miniflare@4.20260111.0:
+  miniflare@4.20260114.0:
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
-      acorn: 8.14.0
-      acorn-walk: 8.3.2
-      exit-hook: 2.2.1
-      glob-to-regexp: 0.4.1
       sharp: 0.34.5
-      stoppable: 1.1.0
       undici: 7.14.0
-      workerd: 1.20260111.0
+      workerd: 1.20260114.0
       ws: 8.18.0
       youch: 4.1.0-beta.10
       zod: 3.25.76
@@ -13971,7 +13849,7 @@ snapshots:
       acorn: 8.15.0
       pathe: 2.0.3
       pkg-types: 1.3.1
-      ufo: 1.6.2
+      ufo: 1.6.3
 
   mrmime@2.0.1: {}
 
@@ -13991,9 +13869,9 @@ snapshots:
 
   netmask@2.0.2: {}
 
-  nitropack@2.13.0(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(rolldown@1.0.0-beta.51):
+  nitropack@2.13.1(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(rolldown@1.0.0-beta.51):
     dependencies:
-      '@cloudflare/kv-asset-handler': 0.4.1
+      '@cloudflare/kv-asset-handler': 0.4.2
       '@rollup/plugin-alias': 6.0.0(rollup@4.55.1)
       '@rollup/plugin-commonjs': 29.0.0(rollup@4.55.1)
       '@rollup/plugin-inject': 5.0.5(rollup@4.55.1)
@@ -14012,7 +13890,7 @@ snapshots:
       cookie-es: 2.0.0
       croner: 9.1.0
       crossws: 0.3.5
-      db0: 0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))
+      db0: 0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))
       defu: 6.1.4
       destr: 2.0.5
       dot-prop: 10.1.0
@@ -14022,10 +13900,10 @@ snapshots:
       exsolve: 1.0.8
       globby: 16.1.0
       gzip-size: 7.0.0
-      h3: 1.15.4
+      h3: 1.15.5
       hookable: 5.5.3
       httpxy: 0.1.7
-      ioredis: 5.9.1
+      ioredis: 5.9.2
       jiti: 2.6.1
       klona: 2.0.6
       knitwork: 1.3.0
@@ -14051,14 +13929,14 @@ snapshots:
       serve-static: 2.2.1
       source-map: 0.7.6
       std-env: 3.10.0
-      ufo: 1.6.2
+      ufo: 1.6.3
       ultrahtml: 1.6.0
       uncrypto: 0.1.3
       unctx: 2.5.0
       unenv: 2.0.0-rc.24
       unimport: 5.6.0
       unplugin-utils: 0.3.1
-      unstorage: 1.17.3(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(ioredis@5.9.1)
+      unstorage: 1.17.4(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(ioredis@5.9.2)
       untyped: 2.0.0
       unwasm: 0.5.3
       youch: 4.1.0-beta.13
@@ -14093,7 +13971,7 @@ snapshots:
       - supports-color
       - uploadthing
 
-  node-abi@3.85.0:
+  node-abi@3.86.0:
     dependencies:
       semver: 7.7.3
 
@@ -14155,7 +14033,7 @@ snapshots:
     dependencies:
       destr: 2.0.5
       node-fetch-native: 1.6.7
-      ufo: 1.6.2
+      ufo: 1.6.3
 
   ohash@2.0.11: {}
 
@@ -14386,7 +14264,7 @@ snapshots:
       minimist: 1.2.8
       mkdirp-classic: 0.5.3
       napi-build-utils: 2.0.0
-      node-abi: 3.85.0
+      node-abi: 3.86.0
       pump: 3.0.3
       rc: 1.2.8
       simple-get: 4.0.1
@@ -14395,11 +14273,11 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-tailwindcss@0.7.2(prettier@3.7.4):
+  prettier-plugin-tailwindcss@0.7.2(prettier@3.8.0):
     dependencies:
-      prettier: 3.7.4
+      prettier: 3.8.0
 
-  prettier@3.7.4: {}
+  prettier@3.8.0: {}
 
   pretty-bytes@7.1.0: {}
 
@@ -14430,7 +14308,7 @@ snapshots:
       '@protobufjs/pool': 1.1.0
       '@protobufjs/utf8': 1.1.0
       '@types/long': 4.0.2
-      '@types/node': 25.0.8
+      '@types/node': 25.0.9
       long: 4.0.0
 
   proxy-addr@2.0.7:
@@ -15191,11 +15069,11 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
-  stripe@20.1.2(@types/node@25.0.8):
+  stripe@20.2.0(@types/node@25.0.9):
     dependencies:
       qs: 6.14.1
     optionalDependencies:
-      '@types/node': 25.0.8
+      '@types/node': 25.0.9
 
   style-to-object@1.0.14:
     dependencies:
@@ -15229,7 +15107,7 @@ snapshots:
       aria-query: 5.3.2
       axobject-query: 4.1.0
       clsx: 2.1.1
-      devalue: 5.6.1
+      devalue: 5.6.2
       esm-env: 1.2.2
       esrap: 2.2.1
       is-reference: 3.0.3
@@ -15287,7 +15165,7 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
-  tar@7.5.2:
+  tar@7.5.3:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
       chownr: 3.0.0
@@ -15305,7 +15183,7 @@ snapshots:
       solid-js: 1.9.10
       solid-use: 0.9.1(solid-js@1.9.10)
 
-  terser@5.44.1:
+  terser@5.46.0:
     dependencies:
       '@jridgewell/source-map': 0.3.11
       acorn: 8.15.0
@@ -15390,32 +15268,32 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
-  turbo-darwin-64@2.7.4:
+  turbo-darwin-64@2.7.5:
     optional: true
 
-  turbo-darwin-arm64@2.7.4:
+  turbo-darwin-arm64@2.7.5:
     optional: true
 
-  turbo-linux-64@2.7.4:
+  turbo-linux-64@2.7.5:
     optional: true
 
-  turbo-linux-arm64@2.7.4:
+  turbo-linux-arm64@2.7.5:
     optional: true
 
-  turbo-windows-64@2.7.4:
+  turbo-windows-64@2.7.5:
     optional: true
 
-  turbo-windows-arm64@2.7.4:
+  turbo-windows-arm64@2.7.5:
     optional: true
 
-  turbo@2.7.4:
+  turbo@2.7.5:
     optionalDependencies:
-      turbo-darwin-64: 2.7.4
-      turbo-darwin-arm64: 2.7.4
-      turbo-linux-64: 2.7.4
-      turbo-linux-arm64: 2.7.4
-      turbo-windows-64: 2.7.4
-      turbo-windows-arm64: 2.7.4
+      turbo-darwin-64: 2.7.5
+      turbo-darwin-arm64: 2.7.5
+      turbo-linux-64: 2.7.5
+      turbo-linux-arm64: 2.7.5
+      turbo-windows-64: 2.7.5
+      turbo-windows-arm64: 2.7.5
 
   type-check@0.4.0:
     dependencies:
@@ -15423,7 +15301,7 @@ snapshots:
 
   type-fest@4.41.0: {}
 
-  type-fest@5.4.0:
+  type-fest@5.4.1:
     dependencies:
       tagged-tag: 1.0.0
 
@@ -15437,7 +15315,7 @@ snapshots:
 
   typescript@5.9.3: {}
 
-  ufo@1.6.2: {}
+  ufo@1.6.3: {}
 
   ultrahtml@1.6.0: {}
 
@@ -15524,19 +15402,19 @@ snapshots:
       picomatch: 4.0.3
       webpack-virtual-modules: 0.6.2
 
-  unstorage@1.17.3(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(ioredis@5.9.1):
+  unstorage@1.17.4(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(ioredis@5.9.2):
     dependencies:
       anymatch: 3.1.3
-      chokidar: 4.0.3
+      chokidar: 5.0.0
       destr: 2.0.5
-      h3: 1.15.4
-      lru-cache: 10.4.3
+      h3: 1.15.5
+      lru-cache: 11.2.4
       node-fetch-native: 1.6.7
       ofetch: 1.5.1
-      ufo: 1.6.2
+      ufo: 1.6.3
     optionalDependencies:
-      db0: 0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))
-      ioredis: 5.9.1
+      db0: 0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))
+      ioredis: 5.9.2
 
   untun@0.1.3:
     dependencies:
@@ -15589,7 +15467,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vinxi@0.5.10(@types/node@25.0.8)(better-sqlite3@12.6.0)(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(ioredis@5.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2):
+  vinxi@0.5.10(@types/node@25.0.9)(better-sqlite3@12.6.2)(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(ioredis@5.9.2)(jiti@2.6.1)(lightningcss@1.30.2)(rolldown@1.0.0-beta.51)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       '@babel/core': 7.28.6
       '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.28.6)
@@ -15610,7 +15488,7 @@ snapshots:
       hookable: 5.5.3
       http-proxy: 1.18.1
       micromatch: 4.0.8
-      nitropack: 2.13.0(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9))(rolldown@1.0.0-beta.51)
+      nitropack: 2.13.1(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10))(rolldown@1.0.0-beta.51)
       node-fetch-native: 1.6.7
       path-to-regexp: 6.3.0
       pathe: 1.1.2
@@ -15619,11 +15497,11 @@ snapshots:
       serve-placeholder: 2.0.2
       serve-static: 1.16.3
       tinyglobby: 0.2.15
-      ufo: 1.6.2
+      ufo: 1.6.3
       unctx: 2.5.0
       unenv: 1.10.0
-      unstorage: 1.17.3(db0@0.3.4(better-sqlite3@12.6.0)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260114.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.0)(gel@2.2.0)(kysely@0.28.9)))(ioredis@5.9.1)
-      vite: 6.4.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      unstorage: 1.17.4(db0@0.3.4(better-sqlite3@12.6.2)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260118.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@12.6.2)(gel@2.2.0)(kysely@0.28.10)))(ioredis@5.9.2)
+      vite: 6.4.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
       zod: 4.3.5
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -15670,13 +15548,13 @@ snapshots:
       - xml2js
       - yaml
 
-  vite-node@3.2.0(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2):
+  vite-node@3.2.0(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -15691,7 +15569,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-solid@2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)):
+  vite-plugin-solid@2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       '@babel/core': 7.28.6
       '@types/babel__core': 7.20.5
@@ -15699,14 +15577,14 @@ snapshots:
       merge-anything: 5.1.7
       solid-js: 1.9.10
       solid-refresh: 0.6.3(solid-js@1.9.10)
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
-      vitefu: 1.1.1(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      vitefu: 1.1.1(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
     optionalDependencies:
       '@testing-library/jest-dom': 6.9.1
     transitivePeerDependencies:
       - supports-color
 
-  vite-prerender-plugin@0.5.12(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)):
+  vite-prerender-plugin@0.5.12(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       kolorist: 1.8.0
       magic-string: 0.30.21
@@ -15714,20 +15592,20 @@ snapshots:
       simple-code-frame: 1.3.0
       source-map: 0.7.6
       stack-trace: 1.0.0-pre2
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
-  vite@5.4.21(@types/node@25.0.8)(lightningcss@1.30.2)(terser@5.44.1):
+  vite@5.4.21(@types/node@25.0.9)(lightningcss@1.30.2)(terser@5.46.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
       rollup: 4.55.1
     optionalDependencies:
-      '@types/node': 25.0.8
+      '@types/node': 25.0.9
       fsevents: 2.3.3
       lightningcss: 1.30.2
-      terser: 5.44.1
+      terser: 5.46.0
 
-  vite@6.4.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2):
+  vite@6.4.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
@@ -15736,15 +15614,15 @@ snapshots:
       rollup: 4.55.1
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 25.0.8
+      '@types/node': 25.0.9
       fsevents: 2.3.3
       jiti: 2.6.1
       lightningcss: 1.30.2
-      terser: 5.44.1
+      terser: 5.46.0
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2):
+  vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -15753,26 +15631,26 @@ snapshots:
       rollup: 4.55.1
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 25.0.8
+      '@types/node': 25.0.9
       fsevents: 2.3.3
       jiti: 2.6.1
       lightningcss: 1.30.2
-      terser: 5.44.1
+      terser: 5.46.0
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vitefu@1.1.1(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)):
+  vitefu@1.1.1(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
     optionalDependencies:
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
 
-  vitepress-plugin-mermaid@2.0.17(mermaid@11.12.2)(vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.8)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3)):
+  vitepress-plugin-mermaid@2.0.17(mermaid@11.12.2)(vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.9)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.46.0)(typescript@5.9.3)):
     dependencies:
       mermaid: 11.12.2
-      vitepress: 1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.8)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3)
+      vitepress: 1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.9)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.46.0)(typescript@5.9.3)
     optionalDependencies:
       '@mermaid-js/mermaid-mindmap': 9.3.0
 
-  vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.8)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3):
+  vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@25.0.9)(axios@1.13.2)(change-case@5.4.4)(lightningcss@1.30.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.46.0)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
       '@docsearch/js': 3.8.2(@algolia/client-search@5.46.3)(search-insights@2.17.3)
@@ -15781,7 +15659,7 @@ snapshots:
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@25.0.8)(lightningcss@1.30.2)(terser@5.44.1))(vue@3.5.26(typescript@5.9.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@25.0.9)(lightningcss@1.30.2)(terser@5.46.0))(vue@3.5.26(typescript@5.9.3))
       '@vue/devtools-api': 7.7.9
       '@vue/shared': 3.5.26
       '@vueuse/core': 12.8.2(typescript@5.9.3)
@@ -15790,7 +15668,7 @@ snapshots:
       mark.js: 8.11.1
       minisearch: 7.2.0
       shiki: 2.5.0
-      vite: 5.4.21(@types/node@25.0.8)(lightningcss@1.30.2)(terser@5.44.1)
+      vite: 5.4.21(@types/node@25.0.9)(lightningcss@1.30.2)(terser@5.46.0)
       vue: 3.5.26(typescript@5.9.3)
     optionalDependencies:
       postcss: 8.5.6
@@ -15821,11 +15699,11 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@3.2.0(@types/node@25.0.8)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2):
+  vitest@3.2.0(@types/node@25.0.9)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.0
-      '@vitest/mocker': 3.2.0(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@vitest/mocker': 3.2.0(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.0
       '@vitest/snapshot': 3.2.0
@@ -15843,12 +15721,12 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
-      vite-node: 3.2.0(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      vite-node: 3.2.0(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 25.0.8
-      jsdom: 27.4.0
+      '@types/node': 25.0.9
+      jsdom: 27.4.0(@noble/hashes@2.0.1)
     transitivePeerDependencies:
       - jiti
       - less
@@ -15863,10 +15741,10 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@4.0.17(@types/node@25.0.8)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2):
+  vitest@4.0.17(@types/node@25.0.9)(@vitest/ui@4.0.17)(jiti@2.6.1)(jsdom@27.4.0(@noble/hashes@2.0.1))(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       '@vitest/expect': 4.0.17
-      '@vitest/mocker': 4.0.17(vite@7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@vitest/mocker': 4.0.17(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       '@vitest/pretty-format': 4.0.17
       '@vitest/runner': 4.0.17
       '@vitest/snapshot': 4.0.17
@@ -15883,12 +15761,12 @@ snapshots:
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 7.3.1(@types/node@25.0.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 25.0.8
+      '@types/node': 25.0.9
       '@vitest/ui': 4.0.17(vitest@4.0.17)
-      jsdom: 27.4.0
+      jsdom: 27.4.0(@noble/hashes@2.0.1)
     transitivePeerDependencies:
       - jiti
       - less
@@ -15980,15 +15858,15 @@ snapshots:
       '@cloudflare/workerd-linux-arm64': 1.20251217.0
       '@cloudflare/workerd-windows-64': 1.20251217.0
 
-  workerd@1.20260111.0:
+  workerd@1.20260114.0:
     optionalDependencies:
-      '@cloudflare/workerd-darwin-64': 1.20260111.0
-      '@cloudflare/workerd-darwin-arm64': 1.20260111.0
-      '@cloudflare/workerd-linux-64': 1.20260111.0
-      '@cloudflare/workerd-linux-arm64': 1.20260111.0
-      '@cloudflare/workerd-windows-64': 1.20260111.0
+      '@cloudflare/workerd-darwin-64': 1.20260114.0
+      '@cloudflare/workerd-darwin-arm64': 1.20260114.0
+      '@cloudflare/workerd-linux-64': 1.20260114.0
+      '@cloudflare/workerd-linux-arm64': 1.20260114.0
+      '@cloudflare/workerd-windows-64': 1.20260114.0
 
-  wrangler@4.56.0(@cloudflare/workers-types@4.20260114.0):
+  wrangler@4.56.0(@cloudflare/workers-types@4.20260118.0):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.4.1
       '@cloudflare/unenv-preset': 2.7.13(unenv@2.0.0-rc.24)(workerd@1.20251217.0)
@@ -15999,24 +15877,24 @@ snapshots:
       unenv: 2.0.0-rc.24
       workerd: 1.20251217.0
     optionalDependencies:
-      '@cloudflare/workers-types': 4.20260114.0
+      '@cloudflare/workers-types': 4.20260118.0
       fsevents: 2.3.3
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
 
-  wrangler@4.59.1(@cloudflare/workers-types@4.20260114.0):
+  wrangler@4.59.2(@cloudflare/workers-types@4.20260118.0):
     dependencies:
-      '@cloudflare/kv-asset-handler': 0.4.1
-      '@cloudflare/unenv-preset': 2.9.0(unenv@2.0.0-rc.24)(workerd@1.20260111.0)
+      '@cloudflare/kv-asset-handler': 0.4.2
+      '@cloudflare/unenv-preset': 2.10.0(unenv@2.0.0-rc.24)(workerd@1.20260114.0)
       blake3-wasm: 2.1.5
       esbuild: 0.27.0
-      miniflare: 4.20260111.0
+      miniflare: 4.20260114.0
       path-to-regexp: 6.3.0
       unenv: 2.0.0-rc.24
-      workerd: 1.20260111.0
+      workerd: 1.20260114.0
     optionalDependencies:
-      '@cloudflare/workers-types': 4.20260114.0
+      '@cloudflare/workers-types': 4.20260118.0
       fsevents: 2.3.3
     transitivePeerDependencies:
       - bufferutil
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 30a1a43ae..e47dedd96 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -6,6 +6,7 @@ onlyBuiltDependencies:
   - agent-browser
   - better-sqlite3
   - esbuild
+  - protobufjs
   - puppeteer
   - sharp
   - workerd