diff --git a/.claude/commands/archon/archon-ui-consistency-review.md b/.claude/commands/archon/archon-ui-consistency-review.md
new file mode 100644
index 0000000000..f44e88eaaf
--- /dev/null
+++ b/.claude/commands/archon/archon-ui-consistency-review.md
@@ -0,0 +1,59 @@
+---
+description: Analyze UI components for reusability, Radix usage, primitives, and styling consistency
+argument-hint: <feature path, component path, or directory>
+allowed-tools: Read, Grep, Glob, Write, Bash
+thinking: auto
+---
+
+# UI Consistency Review for Archon
+
+**Review scope**: $ARGUMENTS
+
+## Process
+
+### Step 1: Load Standards
+Read `PRPs/ai_docs/UI_STANDARDS.md` - This is the single source of truth for all rules, patterns, and scans.
+
+### Step 2: Find Files
+Glob all `.tsx` files in the provided path.
+
+### Step 3: Run Automated Scans
+Execute ALL scans from **UI_STANDARDS.md - AUTOMATED SCAN REFERENCE** section:
+- Critical scans (dynamic classes, non-responsive grids, native HTML, unconstrained scroll)
+- High priority scans (keyboard support, dark mode, hardcoded patterns, min-w-0)
+- Medium priority scans (TypeScript, color mismatches, props validation)
+
+### Step 4: Deep Analysis
+For each file, check against ALL rules from **UI_STANDARDS.md sections 1-8**:
+1. TAILWIND V4 - Static classes, tokens
+2. LAYOUT & RESPONSIVE - Grids, scroll, truncation
+3. THEMING - Dark mode variants
+4. RADIX UI - Primitives usage
+5. PRIMITIVES LIBRARY - Card, PillNavigation, styles.ts
+6. ACCESSIBILITY - Keyboard, ARIA, focus
+7. TYPESCRIPT & API CONTRACTS - Types, props, consistency
+8. FUNCTIONAL LOGIC - UI actually works
+
+**For primitives** (files in `/features/ui/primitives/`):
+- Verify all props affect rendering
+- Check color variant objects have: checked, glow, focusRing, hover
+- Validate prop implementations match interface
+
+### Step 5: Generate Report
+Save to `PRPs/reviews/ui-consistency-review-[feature].md` with:
+- Overall scores (use **UI_STANDARDS.md - SCORING VIOLATIONS**)
+- Component-by-component analysis
+- Violations with file:line, current code, required fix
+- Prioritized action items
+
+### Step 6: Create PRP
+Use `/prp-claude-code:prp-claude-code-create ui-consistency-fixes-[feature]` if violations found.
+
+**PRP should reference:**
+- The review report
+- Specific UI_STANDARDS.md sections violated
+- Automated scan commands to re-run for validation
+
+---
+
+**Note**: Do NOT duplicate rules/patterns from UI_STANDARDS.md. Just reference section numbers.
diff --git a/.gitignore b/.gitignore
index 96c7a645e3..3517998753 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ __pycache__
 PRPs/local
 PRPs/completed/
 PRPs/stories/
+PRPs/reviews/
 /logs/
 .zed
 tmp/
diff --git a/CLAUDE.md b/CLAUDE.md
index 10441ac2a9..6bac8d5781 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -209,11 +209,15 @@ See `python/.env.example` for complete list
 
 ### Add a new UI component in features directory
 
+**IMPORTANT**: Review UI design standards in `@PRPs/ai_docs/UI_STANDARDS.md` before creating UI components.
+
 1. Use Radix UI primitives from `src/features/ui/primitives/`
 2. Create component in relevant feature folder under `src/features/[feature]/components/`
 3. Define types in `src/features/[feature]/types/`
 4. Use TanStack Query hook from `src/features/[feature]/hooks/`
 5. Apply Tron-inspired glassmorphism styling with Tailwind
+6. Follow responsive design patterns (mobile-first with breakpoints)
+7. Ensure no dynamic Tailwind class construction (see UI_STANDARDS.md Section 2)
 
 ### Add or modify MCP tools
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9c2f0c6de4..d3b27af7f1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -365,12 +365,21 @@ Test these things using both the UI and the MCP server. This process will be sim
    archon-ui-main/src/pages/YourPage.tsx
    ```
 
-2. **Testing Your Changes**
+2. **UI Design Standards**
+
+   Before creating or modifying UI components, review the design standards:
+   - **UI Standards**: `PRPs/ai_docs/UI_STANDARDS.md` - Complete Tailwind v4, Radix, and responsive design patterns
+   - **Style Guide**: Enable in Settings → scroll to "Feature Flags" → Enable "Style Guide Page"
+     - Access at http://localhost:3737/style-guide
+     - View all available primitives, colors, layouts, and component patterns
+   - **UI Consistency Review**: Run `/archon:archon-ui-consistency-review <path>` to automatically check your components for compliance
+
+3. **Testing Your Changes**
 
    ```bash
    # Using Make (if installed)
    make test-fe
-   
+
    # Or manually
    cd archon-ui-main && npm run test
 
@@ -381,11 +390,11 @@ Test these things using both the UI and the MCP server. This process will be sim
    npm run test:ui
    ```
 
-3. **Development Server**
+4. **Development Server**
    ```bash
    # Using Make for hybrid mode (if installed)
    make dev  # Backend in Docker, frontend local
-   
+
    # Or manually for faster iteration
    cd archon-ui-main && npm run dev
    # Still connects to Docker backend services
diff --git a/PRPs/ai_docs/UI_STANDARDS.md b/PRPs/ai_docs/UI_STANDARDS.md
new file mode 100644
index 0000000000..a8f6707756
--- /dev/null
+++ b/PRPs/ai_docs/UI_STANDARDS.md
@@ -0,0 +1,797 @@
+# Archon UI Standards
+
+**Audience**: AI agents performing automated UI audits and refactors
+**Purpose**: Single source of truth for UI patterns, violations, and automated detection
+**Usage**: Run `/archon:archon-ui-consistency-review` to scan code against these standards
+
+---
+
+## 1. TAILWIND V4
+
+### Rules
+- **NO dynamic class construction** - Tailwind scans source code as plain text at build time
+  - NEVER: `` `bg-${color}-500` ``, `` `ring-${color}-500` ``, `` `shadow-${size}` ``
+  - Use static lookup objects instead
+- **Bare HSL values in CSS variables** - NO `hsl()` wrapper
+  - Correct: `--background: 0 0% 98%;`
+  - Wrong: `--background: hsl(0 0% 98%);`
+- **CSS variables allowed in arbitrary values** - Utility name must be static
+  - Correct: `bg-[var(--accent)]`
+  - Wrong: `` `bg-[var(--${colorName})]` ``
+- **Use @theme inline** to map CSS vars to Tailwind utilities
+- **Define @custom-variant dark** - Required for `dark:` to work in v4
+
+### Anti-Patterns
+```tsx
+// ❌ Dynamic classes (NO CSS GENERATED)
+const color = "cyan";
+<div className={`bg-${color}-500`} />
+<div className={`focus-visible:ring-${color}-500`} />  // Common miss!
+
+// ❌ Inline styles for visual CSS
+<div style={{ backgroundColor: "#fff" }} />
+```
+
+### Good Examples
+```tsx
+// ✅ Static lookup for discrete variants
+const colorClasses = {
+  cyan: "bg-cyan-500 text-cyan-900 ring-cyan-500",
+  purple: "bg-purple-500 text-purple-900 ring-purple-500",
+};
+<div className={colorClasses[color]} />
+
+// ✅ CSS variables for dynamic values
+<div
+  className="bg-[var(--accent)] ring-[var(--accent)]"
+  style={{ "--accent": "oklch(0.75 0.12 210)" }}
+/>
+```
+
+### Automated Scans
+```bash
+# All dynamic class construction patterns
+grep -rn "className.*\`.*\${.*}\`" [path] --include="*.tsx"
+grep -rn "bg-\${.*}\|text-\${.*}\|border-\${.*}" [path] --include="*.tsx"
+grep -rn "ring-\${.*}\|shadow-\${.*}\|outline-\${.*}\|opacity-\${.*}" [path] --include="*.tsx"
+
+# Inline visual styles (not CSS vars)
+grep -rn "style={{.*backgroundColor\|color:\|padding:" [path] --include="*.tsx"
+```
+
+**Fix Pattern**: Add all properties to static variant object (checked, glow, focusRing, hover)
+
+---
+
+## 2. LAYOUT & RESPONSIVE
+
+### Rules
+- **Responsive grids** - NEVER fixed columns without breakpoints
+  - Use: `grid-cols-1 md:grid-cols-2 lg:grid-cols-4`
+- **Constrain horizontal scroll** - Parent must have `w-full` or `max-w-*`
+- **Add scrollbar-hide** to all `overflow-x-auto` containers
+- **min-w-0 on flex parents** containing scroll containers (prevents page expansion)
+- **Text truncation** - Always use `truncate`, `line-clamp-N`, or `break-words`
+- **Desktop-primary** - Optimize for desktop, add responsive breakpoints down
+
+### Anti-Patterns
+```tsx
+// ❌ Fixed grid (breaks mobile)
+<div className="grid grid-cols-4">
+
+// ❌ Unconstrained scroll (page becomes horizontally scrollable)
+<div className="overflow-x-auto">
+  <div className="min-w-max">
+
+// ❌ Flex parent without min-w-0 (page expansion)
+<div className="flex gap-6">
+  <main className="flex-1">  {/* MISSING min-w-0! */}
+    <div className="overflow-x-auto">
+```
+
+### Good Examples
+```tsx
+// ✅ Responsive grid
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+
+// ✅ Constrained horizontal scroll
+<div className="w-full">
+  <div className="overflow-x-auto scrollbar-hide">
+    <div className="flex gap-4 min-w-max">
+
+// ✅ Flex parent with scroll container
+<div className="flex gap-6">
+  <main className="flex-1 min-w-0">  {/* min-w-0 CRITICAL */}
+```
+
+### Automated Scans
+```bash
+# Non-responsive grids
+grep -rn "grid-cols-[2-9]" [path] --include="*.tsx" | grep -v "md:\|lg:\|xl:"
+
+# Unconstrained scroll
+grep -rn "overflow-x-auto" [path] --include="*.tsx"
+# Then manually verify parent has w-full
+
+# Missing text truncation
+grep -rn "<h[1-6]" [path] --include="*.tsx" | grep -v "truncate\|line-clamp"
+
+# Missing min-w-0
+grep -rn "flex-1" [path] --include="*.tsx" | grep -v "min-w-0"
+```
+
+**Fix Pattern**: Wrap scroll in `<div className="w-full">`, add responsive breakpoints to grids
+
+---
+
+## 3. THEMING
+
+### Rules
+- **Every visible color needs `dark:` variant**
+- **Structure identical** between themes (only colors/opacity change)
+- **Use tokens** for both light and dark (`--bg` and redefine in `.dark`)
+
+### Anti-Patterns
+```tsx
+// ❌ No dark variant
+<div className="bg-white text-gray-900">
+
+// ❌ Different structure in dark mode
+{theme === 'dark' ? <ComponentA /> : <ComponentB />}
+```
+
+### Good Examples
+```tsx
+// ✅ Both themes
+<div className="bg-white dark:bg-black text-gray-900 dark:text-white">
+```
+
+### Automated Scans
+```bash
+# Colors without dark variants
+grep -rn "bg-.*-[0-9]" [path] --include="*.tsx" | grep -v "dark:"
+```
+
+**Fix Pattern**: Add `dark:` variant for every color, border, shadow
+
+---
+
+## 4. RADIX UI
+
+### Rules
+- **Use Radix primitives** - NEVER native `<select>`, `<input type="checkbox">`, `<input type="radio">`
+- **Compose with asChild** - Don't wrap, attach behavior to your components
+- **Style via data attributes** - `[data-state="open"]`, `[data-disabled]`
+- **Use Portal** for overlays with proper z-index
+- **Support both controlled and uncontrolled modes** - All form primitives must work in both modes
+
+### Controlled vs Uncontrolled Form Components
+
+**CRITICAL RULE**: Form primitives (Switch, Checkbox, Select, etc.) MUST support both controlled and uncontrolled modes.
+
+**Controlled Mode**: Parent manages state via `value`/`checked` prop + `onChange`/`onCheckedChange` handler
+**Uncontrolled Mode**: Component manages own state via `defaultValue`/`defaultChecked`
+
+### Anti-Patterns
+```tsx
+// ❌ Native HTML
+<select><option>...</option></select>
+<input type="checkbox" />
+
+// ❌ Wrong composition
+<Dialog.Trigger><button>Open</button></Dialog.Trigger>
+
+// ❌ Only supports controlled mode (breaks uncontrolled usage)
+const Switch = ({ checked, ...props }) => {
+  const displayIcon = checked ? iconOn : iconOff;  // No internal state!
+  return <SwitchPrimitives.Root checked={checked} {...props} />
+};
+```
+
+### Good Examples
+```tsx
+// ✅ Radix with asChild
+<Dialog.Trigger asChild>
+  <Button>Open</Button>
+</Dialog.Trigger>
+
+// ✅ Radix primitives
+<Select><SelectTrigger /></Select>
+<Checkbox />
+
+// ✅ Supports both controlled and uncontrolled modes
+const Switch = ({ checked, defaultChecked, onCheckedChange, ...props }) => {
+  const isControlled = checked !== undefined;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+  const actualChecked = isControlled ? checked : internalChecked;
+
+  const handleChange = (newChecked: boolean) => {
+    if (!isControlled) setInternalChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+
+  return <SwitchPrimitives.Root checked={actualChecked} onCheckedChange={handleChange} {...props} />
+};
+```
+
+### Automated Scans
+```bash
+# Native HTML form elements
+grep -rn "<select>\|<option>" [path] --include="*.tsx"
+grep -rn "type=\"checkbox\"\|type=\"radio\"" [path] --include="*.tsx"
+
+# Form primitives that may only support controlled mode (manual check)
+grep -rn "checked.*props\|value.*props" [path]/primitives --include="*.tsx" -A 20
+# Then verify internal state management exists
+```
+
+**Fix Pattern**:
+- Detect controlled mode: `isControlled = checked !== undefined`
+- Add internal state: `useState(defaultChecked ?? false)`
+- Create handler that updates both internal state and calls parent
+- Use actual state for rendering and pass to Radix primitive
+- Import from `@/features/ui/primitives/`, use Radix primitives
+
+---
+
+## 5. CENTRALIZED STYLING (styles.ts)
+
+### CRITICAL RULE: Use glassCard & glassmorphism from styles.ts
+
+**Location**: `@/features/ui/primitives/styles.ts`
+
+All styling definitions MUST come from the centralized `glassCard` and `glassmorphism` objects in styles.ts. Do NOT duplicate style objects in components.
+
+### Anti-Patterns
+```tsx
+// ❌ WRONG - Duplicating style definitions
+const edgeColors = {
+  cyan: { solid: "bg-cyan-500", gradient: "from-cyan-500/40", border: "border-cyan-500/30" },
+  // ... more colors
+};
+
+// ❌ WRONG - Local variant objects
+const colorVariants = {
+  cyan: "shadow-cyan-500/20",
+  blue: "shadow-blue-500/20",
+};
+```
+
+### Good Examples
+```tsx
+// ✅ CORRECT - Use centralized definitions
+const edgeStyle = glassCard.edgeColors[edgeColor];
+<div className={edgeStyle.border}>
+  <div className={edgeStyle.solid} />
+  <div className={edgeStyle.gradient} />
+</div>
+
+// ✅ CORRECT - Use glassCard variants
+const glowVariant = glassCard.variants[glowColor];
+<div className={cn(glowVariant.border, glowVariant.glow, glowVariant.hover)} />
+
+// ✅ CORRECT - Use glassmorphism tokens
+<div className={cn(glassmorphism.background.card, glassmorphism.border.default)} />
+```
+
+### What's in styles.ts
+
+**glassCard object:**
+- `blur` - Blur intensity levels (sm, md, lg, xl, 2xl, 3xl)
+- `transparency` - Glass transparency (clear, light, medium, frosted, solid)
+- `variants` - Color variants with border, glow, hover (purple, blue, cyan, green, orange, pink, red)
+- `edgeColors` - Edge-lit styling with solid, gradient, border, bg
+- `tints` - Colored glass tints
+- `sizes` - Padding variants (none, sm, md, lg, xl)
+- `outerGlowSizes` - Glow size variants per color
+- `innerGlowSizes` - Inner glow size variants per color
+- `edgeLit` - Edge-lit effects (position, color with line/glow/gradient)
+
+**glassmorphism object:**
+- `background` - Background variations
+- `border` - Border styles
+- `interactive` - Interactive states
+- `animation` - Animation presets
+- `shadow` - Shadow effects with neon glow
+
+### Automated Scans
+```bash
+# Check for duplicate edge color definitions
+grep -rn "const edgeColors = {" [path]/primitives --include="*.tsx"
+
+# Check for duplicate variant objects (should use glassCard.variants)
+grep -rn "const.*Variants = {" [path]/primitives --include="*.tsx" -A 3 | grep "cyan:\|blue:\|purple:"
+
+# Check imports - all primitives should import from styles.ts
+grep -rn "from \"./styles\"" [path]/primitives --include="*.tsx" --files-without-match
+```
+
+**Fix Pattern**: Import glassCard/glassmorphism from styles.ts, use object properties instead of duplicating
+
+---
+
+## 6. PRIMITIVES LIBRARY
+
+### Archon Components
+- **Card** - For all glassmorphism effects
+- **DataCard** - Cards with header/content/footer slots
+- **PillNavigation** - Tab navigation (NEVER create custom)
+- **styles.ts** - Central styling definitions (ALWAYS import)
+
+### Rules
+- **Use Card props** - blur, transparency, edgePosition, glowColor (don't hardcode)
+- **Import from styles.ts** - Don't duplicate blur/glow classes
+- **All primitive props must affect rendering** - No unused props
+- **Use glassCard for card styling** - edgeColors, variants, tints, sizes
+- **Use glassmorphism for general styling** - background, border, shadow, animation
+
+### Anti-Patterns
+```tsx
+// ❌ Hardcoded glassmorphism
+<div className="backdrop-blur-md bg-white/10 border">
+
+// ❌ Custom pill navigation
+<div className="rounded-full backdrop-blur-sm">
+  <button>...</button>
+</div>
+
+// ❌ Primitive with unused prop
+interface CardProps { glowColor?: string } // But never used in return!
+```
+
+### Good Examples
+```tsx
+// ✅ Use Card primitive
+<Card blur="lg" transparency="light" edgePosition="top" edgeColor="cyan">
+
+// ✅ Use PillNavigation
+<PillNavigation items={...} colorVariant="orange" />
+
+// ✅ Import from styles.ts
+import { glassCard, cn } from '@/features/ui/primitives/styles';
+<div className={cn(glassCard.blur.md, glassCard.transparency.light)}>
+```
+
+### Automated Scans
+```bash
+# Hardcoded glassmorphism
+grep -rn "backdrop-blur.*bg-white/.*border" [path] --include="*.tsx"
+
+# Hardcoded pill navigation
+grep -rn "rounded-full.*flex gap-" [path] --include="*.tsx"
+
+# Primitives defining own blur classes
+grep -rn "const blurClasses\|backdrop-blur-md" [path]/primitives --include="*.tsx"
+```
+
+**Manual Check**: Read primitive interfaces, verify all props used in return statement
+
+---
+
+## 6. ACCESSIBILITY
+
+### Rules
+- **Keyboard support on all interactive elements**
+  - `<div onClick={...}>` needs `role="button"`, `tabIndex={0}`, `onKeyDown`
+  - Handle Enter and Space keys
+- **ARIA attributes** - `aria-selected`, `aria-current`, `aria-expanded`, `aria-pressed`
+- **Never remove focus rings** - Must be color-specific and static
+- **Icon-only buttons MUST have aria-label** - Required for screen readers
+- **Toggle buttons MUST have aria-pressed** - Indicates current state
+- **Collapsible controls MUST have aria-expanded** - Indicates expanded/collapsed state
+- **Decorative icons MUST have aria-hidden="true"** - Prevents screen reader announcement
+
+### Anti-Patterns
+```tsx
+// ❌ Clickable div without keyboard
+<div onClick={handler}>Click me</div>
+
+// ❌ role="button" without keyboard
+<div onClick={handler} role="button">  // Missing onKeyDown!
+
+// ❌ Clickable icon without button wrapper
+<ChevronRight onClick={handler} className="cursor-pointer" />
+
+// ❌ Icon-only button without aria-label
+<Button onClick={handler}>
+  <TrashIcon />  // Screen reader has no idea what this does!
+</Button>
+
+// ❌ Toggle button without aria-pressed
+<Button onClick={toggleView} className={viewMode === "grid" && "active"}>
+  <GridIcon />  // No indication of current state!
+</Button>
+
+// ❌ Expandable control without aria-expanded
+<Button onClick={() => setExpanded(!expanded)}>
+  <ChevronDown />  // Screen reader doesn't know if expanded or collapsed!
+</Button>
+
+// ❌ Icon without aria-hidden
+<Button aria-label="Delete">
+  <TrashIcon />  // Screen reader announces both "Delete" AND icon details!
+</Button>
+```
+
+### Good Examples
+```tsx
+// ✅ Full keyboard support on div
+<div
+  role="button"
+  tabIndex={0}
+  onClick={handler}
+  onKeyDown={(e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handler();
+    }
+  }}
+  aria-selected={isSelected}
+>
+
+// ✅ Clickable icon wrapped in button
+<button
+  type="button"
+  aria-label="Expand menu"
+  aria-expanded={isExpanded}
+  onClick={handler}
+  onKeyDown={(e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handler();
+    }
+  }}
+  className="focus:outline-none focus:ring-2"
+>
+  <ChevronRight className="h-4 w-4" />
+</button>
+
+// ✅ Icon-only button with proper aria-label and aria-hidden
+<Button onClick={deleteItem} aria-label="Delete task">
+  <TrashIcon aria-hidden="true" />
+</Button>
+
+// ✅ Toggle button with aria-pressed
+<Button
+  onClick={() => setViewMode("grid")}
+  aria-label="Grid view"
+  aria-pressed={viewMode === "grid"}
+>
+  <GridIcon aria-hidden="true" />
+</Button>
+
+// ✅ Expandable control with aria-expanded
+<Button
+  onClick={() => setSidebarExpanded(false)}
+  aria-label="Collapse sidebar"
+  aria-expanded={sidebarExpanded}
+>
+  <ChevronLeft aria-hidden="true" />
+</Button>
+```
+
+### Automated Scans
+```bash
+# Interactive divs without keyboard
+grep -rn "onClick.*role=\"button\"" [path] --include="*.tsx"
+# Then manually verify onKeyDown exists
+
+# Icons with onClick (should be wrapped in button)
+grep -rn "<[A-Z].*onClick={" [path] --include="*.tsx" | grep -v "<button\|<Button"
+
+# Icon-only buttons without aria-label (manual check - look for Button with only icon child)
+grep -rn "<Button" [path] --include="*.tsx" -A 2 | grep "Icon className"
+# Then verify aria-label exists
+
+# Toggle buttons without aria-pressed
+grep -rn "onClick.*setViewMode\|onClick.*setLayoutMode" [path] --include="*.tsx"
+# Then verify aria-pressed exists
+
+# Expandable controls without aria-expanded
+grep -rn "onClick.*setExpanded\|onClick.*setSidebarExpanded" [path] --include="*.tsx"
+# Then verify aria-expanded exists
+
+# Icons without aria-hidden when button has aria-label
+grep -rn 'aria-label="' [path] --include="*.tsx" -A 3 | grep "className=\".*Icon"
+# Then verify aria-hidden="true" on icon
+```
+
+**Fix Pattern**:
+- Add onKeyDown handler with Enter/Space, add tabIndex={0}, add ARIA
+- Wrap clickable icons in `<button type="button">` with proper ARIA attributes
+- Icon-only buttons: Add `aria-label="Descriptive action"`
+- Toggle buttons: Add `aria-pressed={isActive}`
+- Expandable controls: Add `aria-expanded={isExpanded}`
+- Icons in labeled buttons: Add `aria-hidden="true"`
+
+---
+
+## 7. TYPESCRIPT & API CONTRACTS
+
+### Rules
+- **Async functions return Promise<void>** - Not just `void` if awaited
+- **All props must be used** - If prop in interface, must affect rendering
+- **Color types consistent** - Use "green" not "emerald" across components (avoid emerald entirely)
+- **Run `tsc --noEmit`** to catch type errors
+- **Use `satisfies` for lookup objects** - Enforce type coverage on color variants
+- **120 character line limit** - Split long class strings into arrays with `.join(" ")`
+
+### Anti-Patterns
+```tsx
+// ❌ Async typed as void
+setEnabled: (val: boolean) => void;  // But implemented as async!
+
+// ❌ Unused prop
+interface CardProps { glowColor?: string }
+return <div>  {/* glowColor never used! */}
+
+// ❌ Color type mismatch
+// PillNavigation: colorVariant?: "emerald"
+// Select: color?: "green"  // Should match!
+
+// ❌ Long class strings (exceeds 120 chars)
+const activeClasses = {
+  blue: "data-[state=active]:bg-blue-500/20 dark:data-[state=active]:bg-blue-400/20 data-[state=active]:text-blue-700 dark:data-[state=active]:text-blue-300 data-[state=active]:border data-[state=active]:border-blue-400/50",
+};
+
+// ❌ Lookup objects without type safety
+const colorClasses = {
+  cyan: "bg-cyan-500",
+  blue: "bg-blue-500",
+  // What if we forget purple? No compile error!
+};
+```
+
+### Good Examples
+```tsx
+// ✅ Correct async type
+setEnabled: (val: boolean) => Promise<void>;
+
+// ✅ All props used
+interface CardProps { glowColor?: string }
+const glow = glassCard.variants[glowColor];
+return <div className={glow.border} />
+
+// ✅ Consistent color types (always use "green", never "emerald")
+type Color = "purple" | "blue" | "cyan" | "green" | "orange" | "pink";
+
+// ✅ Split long class strings (under 120 chars per line)
+const activeClasses = {
+  blue: [
+    "data-[state=active]:bg-blue-500/20 dark:data-[state=active]:bg-blue-400/20",
+    "data-[state=active]:text-blue-700 dark:data-[state=active]:text-blue-300",
+    "data-[state=active]:border data-[state=active]:border-blue-400/50",
+  ].join(" "),
+};
+
+// ✅ Type-safe lookup objects with satisfies
+type Color = "purple" | "blue" | "cyan" | "green" | "orange" | "pink";
+const colorClasses = {
+  purple: "bg-purple-500",
+  blue: "bg-blue-500",
+  cyan: "bg-cyan-500",
+  green: "bg-green-500",
+  orange: "bg-orange-500",
+  pink: "bg-pink-500",
+} satisfies Record<Color, string>;  // TypeScript enforces all colors present!
+```
+
+### Automated Scans
+```bash
+# TypeScript errors
+npx tsc --noEmit [path] 2>&1 | grep "error TS"
+
+# Color type inconsistencies (must use "green" not "emerald")
+grep -rn "emerald" [path] --include="*.tsx" --include="*.ts"
+
+# Line length violations (over 120 chars)
+grep -rn ".\{121,\}" [path] --include="*.tsx" | grep className
+
+# Lookup objects without satisfies
+grep -rn "const.*Classes = {" [path]/primitives --include="*.tsx" -A 5 | grep -v "satisfies"
+
+# Unused props (manual)
+grep -rn "interface.*Props" [path]/primitives --include="*.tsx" -A 10
+# Then verify each prop name appears in return statement
+```
+
+**Fix Pattern**:
+- Split long strings into arrays: `["class1", "class2"].join(" ")`
+- Add `satisfies Record<ColorType, string>` to lookup objects
+- Replace all "emerald" with "green" + update RGB to green-500 (34,197,94)
+- Wire all props to rendering
+
+---
+
+## 8. FUNCTIONAL LOGIC
+
+### Rules
+- **Interactive UI must be functional** - Especially in demos/examples
+- **State changes must affect rendering**
+  - Filter state → must filter data before .map()
+  - Sort state → must sort data
+  - Drag-drop → must have state + onDrop handler
+- **Props must do what they advertise** - If edgePosition accepts "left", it must work
+
+### Anti-Patterns
+```tsx
+// ❌ Filter that doesn't filter
+const [filter, setFilter] = useState("all");
+return <div>{items.map(...)}</div>  // items not filtered!
+
+// ❌ Drag-drop without state
+{[1,2,3].map(num => <DraggableCard />)}  // Always snaps back!
+
+// ❌ Prop that does nothing
+edgePosition="left"  // But only "top" is implemented!
+```
+
+### Good Examples
+```tsx
+// ✅ Working filter
+const [filter, setFilter] = useState("all");
+const filtered = useMemo(() =>
+  filter === "all" ? items : items.filter(i => i.type === filter),
+[items, filter]);
+return <div>{filtered.map(...)}</div>
+
+// ✅ Working drag-drop
+const [items, setItems] = useState([...]);
+const handleDrop = (id, index) => { /* reorder logic */ };
+return <>{items.map((item, i) => <DraggableCard onDrop={handleDrop} />)}</>
+
+// ✅ All edge positions work
+if (edgePosition === "top") { /* top impl */ }
+if (edgePosition === "left") { /* left impl */ }
+// etc for all accepted values
+```
+
+### Manual Checks
+```bash
+# Look for state that never affects rendering
+# Pattern: setState called but variable not used in .filter/.sort/.map
+
+# Check prop implementations
+# Pattern: Interface accepts values but switch/if only handles subset
+```
+
+**Fix Pattern**: Wire state to data transformations (filter/sort/map), add missing implementations
+
+---
+
+## AUTOMATED SCAN REFERENCE
+
+Run ALL these scans during review:
+
+### Critical (Breaking)
+- Dynamic classes: `grep -rn "className.*\`.*\${.*}\`\|bg-\${.*}\|ring-\${.*}" [path]`
+- Non-responsive grids: `grep -rn "grid-cols-[2-9]" [path] | grep -v "md:\|lg:"`
+- Unconstrained scroll: `grep -rn "overflow-x-auto" [path]` (verify w-full parent)
+- Native HTML: `grep -rn "<select>\|type=\"checkbox\"" [path]`
+- Emerald usage: `grep -rn "emerald" [path] --include="*.tsx" --include="*.ts"` (must use "green")
+
+### High Priority
+- Missing keyboard: `grep -rn "onClick.*role=\"button\"" [path]` (verify onKeyDown)
+- Clickable icons: `grep -rn "<[A-Z].*onClick={" [path] --include="*.tsx" | grep -v "<button\|<Button"`
+- Missing dark mode: `grep -rn "bg-.*-[0-9]" [path] | grep -v "dark:"`
+- Hardcoded glass: `grep -rn "backdrop-blur.*bg-white/.*border" [path]`
+- Missing min-w-0: `grep -rn "flex-1" [path] | grep -v "min-w-0"`
+- Duplicate styling: `grep -rn "const edgeColors = {\|const.*Variants = {" [path]/primitives`
+- Controlled-only form components: `grep -rn "checked.*props\|value.*props" [path]/primitives --include="*.tsx" -A 20` (verify internal state)
+- Icon-only buttons without aria-label: `grep -rn "<Button" [path] --include="*.tsx" -A 2 | grep "Icon className"` (verify aria-label)
+- Toggle buttons without aria-pressed: `grep -rn "setViewMode\|setLayoutMode" [path] --include="*.tsx"` (verify aria-pressed)
+- Expandable controls without aria-expanded: `grep -rn "setExpanded\|setSidebarExpanded" [path] --include="*.tsx"` (verify aria-expanded)
+- Icons without aria-hidden: `grep -rn 'aria-label="' [path] --include="*.tsx" -A 3 | grep "Icon"` (verify aria-hidden)
+
+### Medium Priority
+- TypeScript: `npx tsc --noEmit [path] 2>&1 | grep "error TS"`
+- Line length: `grep -rn ".\{121,\}" [path] --include="*.tsx" | grep className`
+- Missing satisfies: `grep -rn "const.*Classes = {" [path]/primitives -A 5 | grep -v "satisfies"`
+- Props unused: Manual check interfaces vs usage
+
+---
+
+## QUICK REFERENCE
+
+### Breakpoints
+- sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px
+
+### Color Variant Checklist (for primitives with colors)
+Every color object MUST have:
+- [ ] `checked` or `active` state classes
+- [ ] `glow` effect
+- [ ] `focusRing` - STATIC class like `"focus-visible:ring-cyan-500"`
+- [ ] `hover` state
+- [ ] All 6 colors: purple, blue, cyan, green, orange, pink
+
+### Common Patterns
+
+**Horizontal Scroll (Archon Standard)**
+```tsx
+<div className="w-full">
+  <div className="overflow-x-auto scrollbar-hide">
+    <div className="flex gap-4 min-w-max">
+      {items.map(i => <Card className="w-72 shrink-0" />)}
+```
+
+**Responsive Grid**
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+```
+
+**Flex + Scroll Container**
+```tsx
+<div className="flex gap-6">
+  <aside className="w-64 shrink-0">Sidebar</aside>
+  <main className="flex-1 min-w-0">  {/* min-w-0 REQUIRED */}
+    {/* scroll containers here */}
+```
+
+**Color Variants (Static Lookup)**
+```tsx
+const variants = {
+  cyan: {
+    checked: "data-[state=checked]:bg-cyan-500/20",
+    glow: "shadow-[0_0_15px_rgba(34,211,238,0.5)]",
+    focusRing: "focus-visible:ring-cyan-500",  // STATIC!
+    hover: "hover:bg-cyan-500/10",
+  },
+  // ... repeat for all colors
+};
+```
+
+**Keyboard Support**
+```tsx
+<div
+  role="button"
+  tabIndex={0}
+  onClick={handler}
+  onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && handler()}
+  aria-selected={isSelected}
+>
+```
+
+---
+
+## SCORING VIOLATIONS
+
+### Critical (-3 points each)
+- Dynamic class construction
+- Missing keyboard support on interactive
+- Non-responsive grids causing horizontal scroll
+- TypeScript errors
+
+### High (-2 points each)
+- Unconstrained scroll containers
+- Props that do nothing
+- Non-functional UI logic (filter/sort/drag-drop)
+- Missing dark mode variants
+
+### Medium (-1 point each)
+- Native HTML form elements
+- Hardcoded glassmorphism
+- Missing text truncation
+- Color type inconsistencies
+
+**Grading Scale:**
+- 0 critical violations: A (9-10/10)
+- 1 critical: B (7-8/10)
+- 2-3 critical: C (5-6/10)
+- 4+ critical: F (1-4/10)
+
+---
+
+## ADDING NEW RULES
+
+When code review finds an issue not caught by automated review:
+
+1. **Identify which section** it belongs to (Tailwind? Layout? A11y?)
+2. **Add to that section**:
+   - Rule (what to do)
+   - Anti-Pattern example
+   - Good example
+   - Automated scan (if possible)
+3. **Add scan to AUTOMATED SCAN REFERENCE**
+4. **Done** - Next review will catch it
+
+**Goal**: Eventually eliminate manual code reviews entirely.
diff --git a/archon-ui-main/package-lock.json b/archon-ui-main/package-lock.json
index b29650ab8e..245127d55b 100644
--- a/archon-ui-main/package-lock.json
+++ b/archon-ui-main/package-lock.json
@@ -10,10 +10,14 @@
       "dependencies": {
         "@mdxeditor/editor": "^3.42.0",
         "@radix-ui/react-alert-dialog": "^1.1.15",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-radio-group": "^1.3.8",
         "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-toast": "^1.2.15",
         "@radix-ui/react-tooltip": "^1.2.8",
@@ -38,6 +42,8 @@
       },
       "devDependencies": {
         "@biomejs/biome": "2.2.2",
+        "@tailwindcss/postcss": "4.1.2",
+        "@tailwindcss/vite": "4.1.2",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^14.3.1",
         "@testing-library/user-event": "^14.5.2",
@@ -55,7 +61,7 @@
         "eslint-plugin-react-refresh": "^0.4.1",
         "jsdom": "^24.1.0",
         "postcss": "latest",
-        "tailwindcss": "3.4.17",
+        "tailwindcss": "4.1.2",
         "ts-node": "^10.9.1",
         "typescript": "^5.5.4",
         "vite": "^5.2.0",
@@ -63,9 +69,9 @@
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
-      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.3.tgz",
+      "integrity": "sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA==",
       "dev": true,
       "license": "MIT"
     },
@@ -133,9 +139,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.4.tgz",
-      "integrity": "sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==",
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.27.3.tgz",
+      "integrity": "sha512-V42wFfx1ymFte+ecf6iXghnnP8kWTO+ZLXIyZq+1LAXHHvTZdVxicn4yiVYdYMGaCO3tmqub11AorKkv+iodqw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -143,22 +149,22 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
-      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.4.tgz",
+      "integrity": "sha512-bXYxrXFubeYdvB0NhD/NBB3Qi6aZeV20GOWVI47t2dkecCEoneR4NPVcb7abpXDEvejgrUfFtG6vG/zxAKmg+g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.3",
+        "@babel/generator": "^7.27.3",
         "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helpers": "^7.28.4",
-        "@babel/parser": "^7.28.4",
+        "@babel/helper-module-transforms": "^7.27.3",
+        "@babel/helpers": "^7.27.4",
+        "@babel/parser": "^7.27.4",
         "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.4",
-        "@babel/types": "^7.28.4",
-        "@jridgewell/remapping": "^2.3.5",
+        "@babel/traverse": "^7.27.4",
+        "@babel/types": "^7.27.3",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -184,16 +190,16 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
-      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.3.tgz",
+      "integrity": "sha512-xnlJYj5zepml8NXtjkG0WquFUv8RskFqyFcVgTBp5k+NaA/8uw/K+OSVf8AMGw5e9HKP2ETd5xpK5MLZQD6b4Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.3",
-        "@babel/types": "^7.28.2",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
+        "@babel/parser": "^7.27.3",
+        "@babel/types": "^7.27.3",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^3.0.2"
       },
       "engines": {
@@ -227,16 +233,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
@@ -252,15 +248,15 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
-      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.3.tgz",
+      "integrity": "sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.27.1",
         "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.28.3"
+        "@babel/traverse": "^7.27.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -310,27 +306,27 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
-      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.4.tgz",
+      "integrity": "sha512-Y+bO6U+I7ZKaM5G5rDUZiYfUvQPUibYmAFe7EnKdnKBbVXDZxvp+MWOH5gYciY0EPk4EScsuFMQBbEfpdRKSCQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.4"
+        "@babel/types": "^7.27.3"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
-      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
+      "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.4"
+        "@babel/types": "^7.28.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -372,9 +368,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
-      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.4.tgz",
+      "integrity": "sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -396,28 +392,28 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz",
-      "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==",
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
+      "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.3",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.4",
+        "@babel/generator": "^7.27.3",
+        "@babel/parser": "^7.27.4",
         "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.4",
-        "debug": "^4.3.1"
+        "@babel/types": "^7.27.3",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
-      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+      "version": "7.28.1",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
+      "integrity": "sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -599,9 +595,9 @@
       }
     },
     "node_modules/@codemirror/autocomplete": {
-      "version": "6.18.7",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.7.tgz",
-      "integrity": "sha512-8EzdeIoWPJDsMBwz3zdzwXnUpCzMiCyz5/A3FIPpriaclFCGDkAzK13sMcnsu5rowqiyeQN2Vs2TsOcoDPZirQ==",
+      "version": "6.18.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz",
+      "integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/language": "^6.0.0",
@@ -673,9 +669,9 @@
       }
     },
     "node_modules/@codemirror/lang-html": {
-      "version": "6.4.10",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.10.tgz",
-      "integrity": "sha512-h/SceTVsN5r+WE+TVP2g3KDvNoSzbSrtZXCKo4vkKdbfT5t4otuVgngGdFukOO/rwRD2++pCxoh6xD4TEVMkQA==",
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
@@ -738,9 +734,9 @@
       }
     },
     "node_modules/@codemirror/lang-liquid": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-liquid/-/lang-liquid-6.3.0.tgz",
-      "integrity": "sha512-fY1YsUExcieXRTsCiwX/bQ9+PbCTA/Fumv7C7mTUZHoFkibfESnaXwpr2aKH6zZVwysEunsHHkaIpM/pl3xETQ==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-liquid/-/lang-liquid-6.2.3.tgz",
+      "integrity": "sha512-yeN+nMSrf/lNii3FJxVVEGQwFG0/2eDyH6gNOj+TGCa0hlNO4bhQnoO5ISnd7JOG+7zTEcI/GOoyraisFVY7jQ==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
@@ -754,9 +750,9 @@
       }
     },
     "node_modules/@codemirror/lang-markdown": {
-      "version": "6.3.4",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.3.4.tgz",
-      "integrity": "sha512-fBm0BO03azXnTAsxhONDYHi/qWSI+uSEIpzKM7h/bkIc9fHnFp9y7KTMXKON0teNT97pFhc1a9DQTtWBYEZ7ug==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.3.3.tgz",
+      "integrity": "sha512-1fn1hQAPWlSSMCvnF810AkhWpNLkJpl66CRfIy3vVl20Sl4NwChkorCHqpMtNbXr1EuMJsrDnhEpjZxKZ2UX3A==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/autocomplete": "^6.7.1",
@@ -818,9 +814,9 @@
       }
     },
     "node_modules/@codemirror/lang-sql": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.10.0.tgz",
-      "integrity": "sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==",
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.9.0.tgz",
+      "integrity": "sha512-xmtpWqKSgum1B1J3Ro6rf7nuPqf2+kJQg5SjrofCAcyCThOe0ihSktSoXfXuhQBnwx1QbmreBbLJM5Jru6zitg==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
@@ -887,9 +883,9 @@
       }
     },
     "node_modules/@codemirror/language": {
-      "version": "6.11.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
-      "integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==",
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.2.tgz",
+      "integrity": "sha512-p44TsNArL4IVXDTbapUmEkAlvWs2CFQbcfc0ymDsis1kH2wh0gcY96AS29c/vp2d0y2Tquk1EDSaawpzilUiAw==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
@@ -984,9 +980,9 @@
       }
     },
     "node_modules/@codemirror/view": {
-      "version": "6.38.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.3.tgz",
-      "integrity": "sha512-x2t87+oqwB1mduiQZ6huIghjMt4uZKFEdj66IcXw7+a5iBEvv9lh7EWDRHI7crnD4BMGpnyq/RzmCGbiEZLcvQ==",
+      "version": "6.38.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.1.tgz",
+      "integrity": "sha512-RmTOkE7hRU3OVREqFVITWHz6ocgBjv08GoePscAakgVQfciA3SGCEk7mb9IzwW61cKKmlTpHXG6DUE5Ubx+MGQ==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/state": "^6.5.0",
@@ -1075,9 +1071,9 @@
       }
     },
     "node_modules/@csstools/color-helpers": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
-      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.0.2.tgz",
+      "integrity": "sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==",
       "dev": true,
       "funding": [
         {
@@ -1119,9 +1115,9 @@
       }
     },
     "node_modules/@csstools/css-color-parser": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
-      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.0.10.tgz",
+      "integrity": "sha512-TiJ5Ajr6WRd1r8HSiwJvZBiJOqtH86aHpUjq5aEKWHiII2Qfjqd/HCWKPOW8EP4vcspXbHnXrwIDlu5savQipg==",
       "dev": true,
       "funding": [
         {
@@ -1135,7 +1131,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/color-helpers": "^5.0.2",
         "@csstools/css-calc": "^2.1.4"
       },
       "engines": {
@@ -1581,9 +1577,9 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
-      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1633,28 +1629,20 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "type-fest": "^0.20.2"
       },
       "engines": {
-        "node": "*"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@eslint/js": {
@@ -1736,30 +1724,6 @@
         "node": ">=10.10.0"
       }
     },
-    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -1782,53 +1746,6 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
-      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
@@ -1853,25 +1770,18 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
         "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
@@ -1884,17 +1794,27 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
-      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1903,41 +1823,41 @@
       }
     },
     "node_modules/@lexical/clipboard": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.35.0.tgz",
-      "integrity": "sha512-ko7xSIIiayvDiqjNDX6fgH9RlcM6r9vrrvJYTcfGVBor5httx16lhIi0QJZ4+RNPvGtTjyFv4bwRmsixRRwImg==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.33.1.tgz",
+      "integrity": "sha512-Qd3/Cm3TW2DFQv58kMtLi86u5YOgpBdf+o7ySbXz55C613SLACsYQBB3X5Vu5hTx/t/ugYOpII4HkiatW6d9zA==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/html": "0.35.0",
-        "@lexical/list": "0.35.0",
-        "@lexical/selection": "0.35.0",
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/html": "0.33.1",
+        "@lexical/list": "0.33.1",
+        "@lexical/selection": "0.33.1",
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/code": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/code/-/code-0.35.0.tgz",
-      "integrity": "sha512-ox4DZwETQ9IA7+DS6PN8RJNwSAF7RMjL7YTVODIqFZ5tUFIf+5xoCHbz7Fll0Bvixlp12hVH90xnLwTLRGpkKw==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/code/-/code-0.33.1.tgz",
+      "integrity": "sha512-E0Y/+1znkqVpP52Y6blXGAduoZek9SSehJN+vbH+4iQKyFwTA7JB+jd5C5/K0ik55du9X7SN/oTynByg7lbcAA==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0",
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1",
         "prismjs": "^1.30.0"
       }
     },
     "node_modules/@lexical/devtools-core": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/devtools-core/-/devtools-core-0.35.0.tgz",
-      "integrity": "sha512-C2wwtsMCR6ZTfO0TqpSM17RLJWyfHmifAfCTjFtOJu15p3M6NO/nHYK5Mt7YMQteuS89mOjB4ng8iwoLEZ6QpQ==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/devtools-core/-/devtools-core-0.33.1.tgz",
+      "integrity": "sha512-3yHu5diNtjwhoe2q/x9as6n6rIfA+QO2CfaVjFRkam8rkAW6zUzQT1D0fQdE8nOfWvXBgY1mH/ZLP4dDXBdG5Q==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/html": "0.35.0",
-        "@lexical/link": "0.35.0",
-        "@lexical/mark": "0.35.0",
-        "@lexical/table": "0.35.0",
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/html": "0.33.1",
+        "@lexical/link": "0.33.1",
+        "@lexical/mark": "0.33.1",
+        "@lexical/table": "0.33.1",
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       },
       "peerDependencies": {
         "react": ">=17.x",
@@ -1945,144 +1865,144 @@
       }
     },
     "node_modules/@lexical/dragon": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/dragon/-/dragon-0.35.0.tgz",
-      "integrity": "sha512-SL6mT5pcqrt6hEbJ16vWxip5+r3uvMd0bQV5UUxuk+cxIeuP86iTgRh0HFR7SM2dRTYovL6/tM/O+8QLAUGTIg==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/dragon/-/dragon-0.33.1.tgz",
+      "integrity": "sha512-UQ6DLkcDAr83wA1vz3sUgtcpYcMifC4sF0MieZAoMzFrna6Ekqj7OJ7g8Lo7m7AeuT4NETRVDsjIEDdrQMKLLA==",
       "license": "MIT",
       "dependencies": {
-        "lexical": "0.35.0"
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/hashtag": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/hashtag/-/hashtag-0.35.0.tgz",
-      "integrity": "sha512-LYJWzXuO2ZjKsvQwrLkNZiS2TsjwYkKjlDgtugzejquTBQ/o/nfSn/MmVx6EkYLOYizaJemmZbz3IBh+u732FA==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/hashtag/-/hashtag-0.33.1.tgz",
+      "integrity": "sha512-M3IsDe4cifggMBZgYAVT7hCLWcwQ3dIcUPdr9Xc6wDQQQdEqOQYB0PO//9bSYUVq+BNiiTgysc+TtlM7PiJfiw==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/history": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/history/-/history-0.35.0.tgz",
-      "integrity": "sha512-onjDRLLxGbCfHexSxxrQaDaieIHyV28zCDrbxR5dxTfW8F8PxjuNyuaG0z6o468AXYECmclxkP+P4aT6poHEpQ==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/history/-/history-0.33.1.tgz",
+      "integrity": "sha512-Bk0h3D6cFkJ7w3HKvqQua7n6Xfz7nR7L3gLDBH9L0nsS4MM9+LteSEZPUe0kj4VuEjnxufYstTc9HA2aNLKxnQ==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/html": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/html/-/html-0.35.0.tgz",
-      "integrity": "sha512-rXGFE5S5rKsg3tVnr1s4iEgOfCApNXGpIFI3T2jGEShaCZ5HLaBY9NVBXnE9Nb49e9bkDkpZ8FZd1qokCbQXbw==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/html/-/html-0.33.1.tgz",
+      "integrity": "sha512-t14vu4eKa6BWz1N7/rwXgXif1k4dj73dRvllWJgfXum+a36vn1aySNYOlOfqWXF7k1b3uJmoqsWK7n/1ASnimw==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/selection": "0.35.0",
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/selection": "0.33.1",
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/link": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/link/-/link-0.35.0.tgz",
-      "integrity": "sha512-+0Wx6cBwO8TfdMzpkYFacsmgFh8X1rkiYbq3xoLvk3qV8upYxaMzK1s8Q1cpKmWyI0aZrU6z7fiK4vUqB7+69w==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/link/-/link-0.33.1.tgz",
+      "integrity": "sha512-JCTu7Fft2J2kgfqJiWnGei+UMIXVKiZKaXzuHCuGQTFu92DeCyd02azBaFazZHEkSqCIFZ0DqVV2SpIJmd0Ygw==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/list": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/list/-/list-0.35.0.tgz",
-      "integrity": "sha512-owsmc8iwgExBX8sFe8fKTiwJVhYULt9hD1RZ/HwfaiEtRZZkINijqReOBnW2mJfRxBzhFSWc4NG3ISB+fHYzqw==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/list/-/list-0.33.1.tgz",
+      "integrity": "sha512-PXp56dWADSThc9WhwWV4vXhUc3sdtCqsfPD3UQNGUZ9rsAY1479rqYLtfYgEmYPc8JWXikQCAKEejahCJIm8OQ==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/selection": "0.35.0",
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/selection": "0.33.1",
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/mark": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/mark/-/mark-0.35.0.tgz",
-      "integrity": "sha512-W0hwMTAVeexvpk9/+J6n1G/sNkpI/Meq1yeDazahFLLAwXLHtvhIAq2P/klgFknDy1hr8X7rcsQuN/bqKcKHYg==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/mark/-/mark-0.33.1.tgz",
+      "integrity": "sha512-tGdOf1e694lnm/HyWUKEkEWjDyfhCBFG7u8iRKNpsYTpB3M1FsJUXbphE2bb8MyWfhHbaNxnklupSSaSPzO88A==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/markdown": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/markdown/-/markdown-0.35.0.tgz",
-      "integrity": "sha512-BlNyXZAt4gWidMw0SRWrhBETY1BpPglFBZI7yzfqukFqgXRh7HUQA28OYeI/nsx9pgNob8TiUduUwShqqvOdEA==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/markdown/-/markdown-0.33.1.tgz",
+      "integrity": "sha512-p5zwWNF70pELRx60wxE8YOFVNiNDkw7gjKoYqkED23q5hj4mcqco9fQf6qeeZChjxLKjfyT6F1PpWgxmlBlxBw==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/code": "0.35.0",
-        "@lexical/link": "0.35.0",
-        "@lexical/list": "0.35.0",
-        "@lexical/rich-text": "0.35.0",
-        "@lexical/text": "0.35.0",
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/code": "0.33.1",
+        "@lexical/link": "0.33.1",
+        "@lexical/list": "0.33.1",
+        "@lexical/rich-text": "0.33.1",
+        "@lexical/text": "0.33.1",
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/offset": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/offset/-/offset-0.35.0.tgz",
-      "integrity": "sha512-DRE4Df6qYf2XiV6foh6KpGNmGAv2ANqt3oVXpyS6W8hTx3+cUuAA1APhCZmLNuU107um4zmHym7taCu6uXW5Yg==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/offset/-/offset-0.33.1.tgz",
+      "integrity": "sha512-3YIlUs43QdKSBLEfOkuciE2tn9loxVmkSs/HgaIiLYl0Edf1W00FP4ItSmYU4De5GopXsHq6+Y3ry4pU/ciUiQ==",
       "license": "MIT",
       "dependencies": {
-        "lexical": "0.35.0"
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/overflow": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/overflow/-/overflow-0.35.0.tgz",
-      "integrity": "sha512-B25YvnJQTGlZcrNv7b0PJBLWq3tl8sql497OHfYYLem7EOMPKKDGJScJAKM/91D4H/mMAsx5gnA/XgKobriuTg==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/overflow/-/overflow-0.33.1.tgz",
+      "integrity": "sha512-3BDq1lOw567FeCk4rN2ellKwoXTM9zGkGuKnSGlXS1JmtGGGSvT+uTANX3KOOfqTNSrOkrwoM+3hlFv7p6VpiQ==",
       "license": "MIT",
       "dependencies": {
-        "lexical": "0.35.0"
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/plain-text": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/plain-text/-/plain-text-0.35.0.tgz",
-      "integrity": "sha512-lwBCUNMJf7Gujp2syVWMpKRahfbTv5Wq+H3HK1Q1gKH1P2IytPRxssCHvexw9iGwprSyghkKBlbF3fGpEdIJvQ==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/plain-text/-/plain-text-0.33.1.tgz",
+      "integrity": "sha512-2HxdhAx6bwF8y5A9P0q3YHsYbhUo4XXm+GyKJO87an8JClL2W+GYLTSDbfNWTh4TtH95eG+UYLOjNEgyU6tsWA==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/clipboard": "0.35.0",
-        "@lexical/selection": "0.35.0",
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/clipboard": "0.33.1",
+        "@lexical/selection": "0.33.1",
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/react": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/react/-/react-0.35.0.tgz",
-      "integrity": "sha512-uYAZSqumH8tRymMef+A0f2hQvMwplKK9DXamcefnk3vSNDHHqRWQXpiUo6kD+rKWuQmMbVa5RW4xRQebXEW+1A==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/react/-/react-0.33.1.tgz",
+      "integrity": "sha512-ylnUmom5h8PY+Z14uDmKLQEoikTPN77GRM0NRCIdtbWmOQqOq/5BhuCzMZE1WvpL5C6n3GtK6IFnsMcsKmVOcw==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react": "^0.27.8",
-        "@lexical/devtools-core": "0.35.0",
-        "@lexical/dragon": "0.35.0",
-        "@lexical/hashtag": "0.35.0",
-        "@lexical/history": "0.35.0",
-        "@lexical/link": "0.35.0",
-        "@lexical/list": "0.35.0",
-        "@lexical/mark": "0.35.0",
-        "@lexical/markdown": "0.35.0",
-        "@lexical/overflow": "0.35.0",
-        "@lexical/plain-text": "0.35.0",
-        "@lexical/rich-text": "0.35.0",
-        "@lexical/table": "0.35.0",
-        "@lexical/text": "0.35.0",
-        "@lexical/utils": "0.35.0",
-        "@lexical/yjs": "0.35.0",
-        "lexical": "0.35.0",
+        "@lexical/devtools-core": "0.33.1",
+        "@lexical/dragon": "0.33.1",
+        "@lexical/hashtag": "0.33.1",
+        "@lexical/history": "0.33.1",
+        "@lexical/link": "0.33.1",
+        "@lexical/list": "0.33.1",
+        "@lexical/mark": "0.33.1",
+        "@lexical/markdown": "0.33.1",
+        "@lexical/overflow": "0.33.1",
+        "@lexical/plain-text": "0.33.1",
+        "@lexical/rich-text": "0.33.1",
+        "@lexical/table": "0.33.1",
+        "@lexical/text": "0.33.1",
+        "@lexical/utils": "0.33.1",
+        "@lexical/yjs": "0.33.1",
+        "lexical": "0.33.1",
         "react-error-boundary": "^3.1.4"
       },
       "peerDependencies": {
@@ -2091,67 +2011,67 @@
       }
     },
     "node_modules/@lexical/rich-text": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/rich-text/-/rich-text-0.35.0.tgz",
-      "integrity": "sha512-qEHu8g7vOEzz9GUz1VIUxZBndZRJPh9iJUFI+qTDHj+tQqnd5LCs+G9yz6jgNfiuWWpezTp0i1Vz/udNEuDPKQ==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/rich-text/-/rich-text-0.33.1.tgz",
+      "integrity": "sha512-ZBIsj4LwmamRBCGjJiPSLj7N/XkUDv/pnYn5Rp0BL42WpOiQLvOoGLrZxgUJZEmRPQnx42ZgLKVgrWHsyjuoAA==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/clipboard": "0.35.0",
-        "@lexical/selection": "0.35.0",
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/clipboard": "0.33.1",
+        "@lexical/selection": "0.33.1",
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/selection": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.35.0.tgz",
-      "integrity": "sha512-mMtDE7Q0nycXdFTTH/+ta6EBrBwxBB4Tg8QwsGntzQ1Cq//d838dpXpFjJOqHEeVHUqXpiuj+cBG8+bvz/rPRw==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.33.1.tgz",
+      "integrity": "sha512-KXPkdCDdVfIUXmkwePu9DAd3kLjL0aAqL5G9CMCFsj7RG9lLvvKk7kpivrAIbRbcsDzO44QwsFPisZHbX4ioXA==",
       "license": "MIT",
       "dependencies": {
-        "lexical": "0.35.0"
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/table": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/table/-/table-0.35.0.tgz",
-      "integrity": "sha512-9jlTlkVideBKwsEnEkqkdg7A3mije1SvmfiqoYnkl1kKJCLA5iH90ywx327PU0p+bdnURAytWUeZPXaEuEl2OA==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/table/-/table-0.33.1.tgz",
+      "integrity": "sha512-pzB11i1Y6fzmy0IPUKJyCdhVBgXaNOxJUxrQJWdKNYCh1eMwwMEQvj+8inItd/11aUkjcdHjwDTht8gL2UHKiQ==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/clipboard": "0.35.0",
-        "@lexical/utils": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/clipboard": "0.33.1",
+        "@lexical/utils": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/text": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/text/-/text-0.35.0.tgz",
-      "integrity": "sha512-uaMh46BkysV8hK8wQwp5g/ByZW+2hPDt8ahAErxtf8NuzQem1FHG/f5RTchmFqqUDVHO3qLNTv4AehEGmXv8MA==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/text/-/text-0.33.1.tgz",
+      "integrity": "sha512-CnyU3q3RytXXWVSvC5StOKISzFAPGK9MuesNDDGyZk7yDK+J98gV6df4RBKfqwcokFMThpkUlvMeKe1+S2y25A==",
       "license": "MIT",
       "dependencies": {
-        "lexical": "0.35.0"
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/utils": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/utils/-/utils-0.35.0.tgz",
-      "integrity": "sha512-2H393EYDnFznYCDFOW3MHiRzwEO5M/UBhtUjvTT+9kc+qhX4U3zc8ixQalo5UmZ5B2nh7L/inXdTFzvSRXtsRA==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/utils/-/utils-0.33.1.tgz",
+      "integrity": "sha512-eKysPjzEE9zD+2af3WRX5U3XbeNk0z4uv1nXGH3RG15uJ4Huzjht82hzsQpCFUobKmzYlQaQs5y2IYKE2puipQ==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/list": "0.35.0",
-        "@lexical/selection": "0.35.0",
-        "@lexical/table": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/list": "0.33.1",
+        "@lexical/selection": "0.33.1",
+        "@lexical/table": "0.33.1",
+        "lexical": "0.33.1"
       }
     },
     "node_modules/@lexical/yjs": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/@lexical/yjs/-/yjs-0.35.0.tgz",
-      "integrity": "sha512-3DSP7QpmTGYU9bN/yljP0PIao4tNIQtsR4ycauWNSawxs/GQCZtSmAPcLRnCm6qpqsDDjUtKjO/1Ej8FRp0m0w==",
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@lexical/yjs/-/yjs-0.33.1.tgz",
+      "integrity": "sha512-Zx1rabMm/Zjk7n7YQMIQLUN+tqzcg1xqcgNpEHSfK1GA8QMPXCPvXWFT3ZDC4tfZOSy/YIqpVUyWZAomFqRa+g==",
       "license": "MIT",
       "dependencies": {
-        "@lexical/offset": "0.35.0",
-        "@lexical/selection": "0.35.0",
-        "lexical": "0.35.0"
+        "@lexical/offset": "0.33.1",
+        "@lexical/selection": "0.33.1",
+        "lexical": "0.33.1"
       },
       "peerDependencies": {
         "yjs": ">=13.5.22"
@@ -2206,9 +2126,9 @@
       }
     },
     "node_modules/@lezer/html": {
-      "version": "1.3.11",
-      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.11.tgz",
-      "integrity": "sha512-SV04kK5EHDPPecMCiFNZAnQhUIxktP04yHxgOKK7TZ3+KUAlK9f4dcYbjAWwDx2C2pJmiOeSV05QEbHeQo5JqA==",
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
       "license": "MIT",
       "dependencies": {
         "@lezer/common": "^1.2.0",
@@ -2228,9 +2148,9 @@
       }
     },
     "node_modules/@lezer/javascript": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
-      "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.1.tgz",
+      "integrity": "sha512-ATOImjeVJuvgm3JQ/bpo2Tmv55HSScE2MTPnKRMRIPx2cLhHGyX2VnqpHhtIV1tVzIjZDbcWQm+NCTF40ggZVw==",
       "license": "MIT",
       "dependencies": {
         "@lezer/common": "^1.2.0",
@@ -2269,9 +2189,9 @@
       }
     },
     "node_modules/@lezer/php": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.5.tgz",
-      "integrity": "sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.4.tgz",
+      "integrity": "sha512-D2dJ0t8Z28/G1guztRczMFvPDUqzeMLSQbdWQmaiHV7urc8NlEOnjYk9UrZ531OcLiRxD4Ihcbv7AsDpNKDRaQ==",
       "license": "MIT",
       "dependencies": {
         "@lezer/common": "^1.2.0",
@@ -2341,9 +2261,9 @@
       "license": "MIT"
     },
     "node_modules/@mdxeditor/editor": {
-      "version": "3.46.1",
-      "resolved": "https://registry.npmjs.org/@mdxeditor/editor/-/editor-3.46.1.tgz",
-      "integrity": "sha512-TL0Ol88NhlXYfThD6kYGhxIQkUMjBkHZ2OsbvHU6mD2RpqcTp1/tinLmADzmoreKSl/52rcj+lTbrJwBmeiHRw==",
+      "version": "3.42.0",
+      "resolved": "https://registry.npmjs.org/@mdxeditor/editor/-/editor-3.42.0.tgz",
+      "integrity": "sha512-nQN07RkTm842T477IjPqp1FhWCQMpmbLToOVrc6EjSI60aHifwzva+eqYmElHFKE2jyGiD5FsaQXri1SSORJNg==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/commands": "^6.2.4",
@@ -2353,16 +2273,16 @@
         "@codemirror/state": "^6.4.0",
         "@codemirror/view": "^6.23.0",
         "@codesandbox/sandpack-react": "^2.20.0",
-        "@lexical/clipboard": "^0.35.0",
-        "@lexical/link": "^0.35.0",
-        "@lexical/list": "^0.35.0",
-        "@lexical/markdown": "^0.35.0",
-        "@lexical/plain-text": "^0.35.0",
-        "@lexical/react": "^0.35.0",
-        "@lexical/rich-text": "^0.35.0",
-        "@lexical/selection": "^0.35.0",
-        "@lexical/utils": "^0.35.0",
-        "@mdxeditor/gurx": "^1.2.4",
+        "@lexical/clipboard": "^0.33.1",
+        "@lexical/link": "^0.33.1",
+        "@lexical/list": "^0.33.1",
+        "@lexical/markdown": "^0.33.1",
+        "@lexical/plain-text": "^0.33.1",
+        "@lexical/react": "^0.33.1",
+        "@lexical/rich-text": "^0.33.1",
+        "@lexical/selection": "^0.33.1",
+        "@lexical/utils": "^0.33.1",
+        "@mdxeditor/gurx": "^1.1.4",
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-dialog": "^1.1.11",
         "@radix-ui/react-icons": "^1.3.2",
@@ -2377,7 +2297,7 @@
         "codemirror": "^6.0.1",
         "downshift": "^7.6.0",
         "js-yaml": "4.1.0",
-        "lexical": "^0.35.0",
+        "lexical": "^0.33.1",
         "mdast-util-directive": "^3.0.0",
         "mdast-util-from-markdown": "^2.0.0",
         "mdast-util-frontmatter": "^2.0.1",
@@ -2412,9 +2332,9 @@
       }
     },
     "node_modules/@mdxeditor/gurx": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@mdxeditor/gurx/-/gurx-1.2.4.tgz",
-      "integrity": "sha512-9ZykIFYhKaXaaSPCs1cuI+FvYDegJjbKwmA4ASE/zY+hJY6EYqvoye4esiO85CjhOw9aoD/izD/CU78/egVqmg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@mdxeditor/gurx/-/gurx-1.2.3.tgz",
+      "integrity": "sha512-5DQOlEx46oN9spggrC8husAGAhVoEFBGIYKN48es08XhRUbSU6l5bcIQYwRrQaY8clU1tExIcXzw8/fNnoxjpg==",
       "license": "MIT",
       "engines": {
         "node": ">=16"
@@ -2468,17 +2388,6 @@
       "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
       "license": "MIT"
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -2555,6 +2464,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -2785,6 +2724,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.1.16",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
@@ -2965,6 +2927,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -3080,6 +3074,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
@@ -3476,16 +3499,16 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.27",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
-      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "version": "1.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.9.tgz",
+      "integrity": "sha512-e9MeMtVWo186sgvFFJOPGy7/d2j2mZhLJIdVW0C/xDluuOvymEATqz6zKsP0ZmXGzQtqlyjz5sC1sYQUoJG98w==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.2.tgz",
-      "integrity": "sha512-o3pcKzJgSGt4d74lSZ+OCnHwkKBeAbFDmbEm5gg70eA8VkyCuC/zV9TwBnmw6VjDlRdF4Pshfb+WE9E6XY1PoQ==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.41.1.tgz",
+      "integrity": "sha512-NELNvyEWZ6R9QMkiytB4/L4zSEaBC03KIXEghptLGLZWJ6VPrL63ooZQCOnlx36aQPGhzuOMwDerC1Eb2VmrLw==",
       "cpu": [
         "arm"
       ],
@@ -3497,9 +3520,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.2.tgz",
-      "integrity": "sha512-cqFSWO5tX2vhC9hJTK8WAiPIm4Q8q/cU8j2HQA0L3E1uXvBYbOZMhE2oFL8n2pKB5sOCHY6bBuHaRwG7TkfJyw==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.41.1.tgz",
+      "integrity": "sha512-DXdQe1BJ6TK47ukAoZLehRHhfKnKg9BjnQYUu9gzhI8Mwa1d2fzxA1aw2JixHVl403bwp1+/o/NhhHtxWJBgEA==",
       "cpu": [
         "arm64"
       ],
@@ -3511,9 +3534,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.2.tgz",
-      "integrity": "sha512-vngduywkkv8Fkh3wIZf5nFPXzWsNsVu1kvtLETWxTFf/5opZmflgVSeLgdHR56RQh71xhPhWoOkEBvbehwTlVA==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.41.1.tgz",
+      "integrity": "sha512-5afxvwszzdulsU2w8JKWwY8/sJOLPzf0e1bFuvcW5h9zsEg+RQAojdW0ux2zyYAz7R8HvvzKCjLNJhVq965U7w==",
       "cpu": [
         "arm64"
       ],
@@ -3525,9 +3548,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.2.tgz",
-      "integrity": "sha512-h11KikYrUCYTrDj6h939hhMNlqU2fo/X4NB0OZcys3fya49o1hmFaczAiJWVAFgrM1NCP6RrO7lQKeVYSKBPSQ==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.41.1.tgz",
+      "integrity": "sha512-egpJACny8QOdHNNMZKf8xY0Is6gIMz+tuqXlusxquWu3F833DcMwmGM7WlvCO9sB3OsPjdC4U0wHw5FabzCGZg==",
       "cpu": [
         "x64"
       ],
@@ -3539,9 +3562,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.2.tgz",
-      "integrity": "sha512-/eg4CI61ZUkLXxMHyVlmlGrSQZ34xqWlZNW43IAU4RmdzWEx0mQJ2mN/Cx4IHLVZFL6UBGAh+/GXhgvGb+nVxw==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.41.1.tgz",
+      "integrity": "sha512-DBVMZH5vbjgRk3r0OzgjS38z+atlupJ7xfKIDJdZZL6sM6wjfDNo64aowcLPKIx7LMQi8vybB56uh1Ftck/Atg==",
       "cpu": [
         "arm64"
       ],
@@ -3553,9 +3576,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.2.tgz",
-      "integrity": "sha512-QOWgFH5X9+p+S1NAfOqc0z8qEpJIoUHf7OWjNUGOeW18Mx22lAUOiA9b6r2/vpzLdfxi/f+VWsYjUOMCcYh0Ng==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.41.1.tgz",
+      "integrity": "sha512-3FkydeohozEskBxNWEIbPfOE0aqQgB6ttTkJ159uWOFn42VLyfAiyD9UK5mhu+ItWzft60DycIN1Xdgiy8o/SA==",
       "cpu": [
         "x64"
       ],
@@ -3567,9 +3590,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.2.tgz",
-      "integrity": "sha512-kDWSPafToDd8LcBYd1t5jw7bD5Ojcu12S3uT372e5HKPzQt532vW+rGFFOaiR0opxePyUkHrwz8iWYEyH1IIQA==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.41.1.tgz",
+      "integrity": "sha512-wC53ZNDgt0pqx5xCAgNunkTzFE8GTgdZ9EwYGVcg+jEjJdZGtq9xPjDnFgfFozQI/Xm1mh+D9YlYtl+ueswNEg==",
       "cpu": [
         "arm"
       ],
@@ -3581,9 +3604,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.2.tgz",
-      "integrity": "sha512-gKm7Mk9wCv6/rkzwCiUC4KnevYhlf8ztBrDRT9g/u//1fZLapSRc+eDZj2Eu2wpJ+0RzUKgtNijnVIB4ZxyL+w==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.41.1.tgz",
+      "integrity": "sha512-jwKCca1gbZkZLhLRtsrka5N8sFAaxrGz/7wRJ8Wwvq3jug7toO21vWlViihG85ei7uJTpzbXZRcORotE+xyrLA==",
       "cpu": [
         "arm"
       ],
@@ -3595,9 +3618,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.2.tgz",
-      "integrity": "sha512-66lA8vnj5mB/rtDNwPgrrKUOtCLVQypkyDa2gMfOefXK6rcZAxKLO9Fy3GkW8VkPnENv9hBkNOFfGLf6rNKGUg==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.41.1.tgz",
+      "integrity": "sha512-g0UBcNknsmmNQ8V2d/zD2P7WWfJKU0F1nu0k5pW4rvdb+BIqMm8ToluW/eeRmxCared5dD76lS04uL4UaNgpNA==",
       "cpu": [
         "arm64"
       ],
@@ -3609,9 +3632,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.2.tgz",
-      "integrity": "sha512-s+OPucLNdJHvuZHuIz2WwncJ+SfWHFEmlC5nKMUgAelUeBUnlB4wt7rXWiyG4Zn07uY2Dd+SGyVa9oyLkVGOjA==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.41.1.tgz",
+      "integrity": "sha512-XZpeGB5TKEZWzIrj7sXr+BEaSgo/ma/kCgrZgL0oo5qdB1JlTzIYQKel/RmhT6vMAvOdM2teYlAaOGJpJ9lahg==",
       "cpu": [
         "arm64"
       ],
@@ -3622,10 +3645,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.2.tgz",
-      "integrity": "sha512-8wTRM3+gVMDLLDdaT6tKmOE3lJyRy9NpJUS/ZRWmLCmOPIJhVyXwjBo+XbrrwtV33Em1/eCTd5TuGJm4+DmYjw==",
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.41.1.tgz",
+      "integrity": "sha512-bkCfDJ4qzWfFRCNt5RVV4DOw6KEgFTUZi2r2RuYhGWC8WhCA8lCAJhDeAmrM/fdiAH54m0mA0Vk2FGRPyzI+tw==",
       "cpu": [
         "loong64"
       ],
@@ -3636,10 +3659,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.2.tgz",
-      "integrity": "sha512-6yqEfgJ1anIeuP2P/zhtfBlDpXUb80t8DpbYwXQ3bQd95JMvUaqiX+fKqYqUwZXqdJDd8xdilNtsHM2N0cFm6A==",
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.41.1.tgz",
+      "integrity": "sha512-3mr3Xm+gvMX+/8EKogIZSIEF0WUu0HL9di+YWlJpO8CQBnoLAEL/roTCxuLncEdgcfJcvA4UMOf+2dnjl4Ut1A==",
       "cpu": [
         "ppc64"
       ],
@@ -3651,9 +3674,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.2.tgz",
-      "integrity": "sha512-sshYUiYVSEI2B6dp4jMncwxbrUqRdNApF2c3bhtLAU0qA8Lrri0p0NauOsTWh3yCCCDyBOjESHMExonp7Nzc0w==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.41.1.tgz",
+      "integrity": "sha512-3rwCIh6MQ1LGrvKJitQjZFuQnT2wxfU+ivhNBzmxXTXPllewOF7JR1s2vMX/tWtUYFgphygxjqMl76q4aMotGw==",
       "cpu": [
         "riscv64"
       ],
@@ -3665,9 +3688,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.2.tgz",
-      "integrity": "sha512-duBLgd+3pqC4MMwBrKkFxaZerUxZcYApQVC5SdbF5/e/589GwVvlRUnyqMFbM8iUSb1BaoX/3fRL7hB9m2Pj8Q==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.41.1.tgz",
+      "integrity": "sha512-LdIUOb3gvfmpkgFZuccNa2uYiqtgZAz3PTzjuM5bH3nvuy9ty6RGc/Q0+HDFrHrizJGVpjnTZ1yS5TNNjFlklw==",
       "cpu": [
         "riscv64"
       ],
@@ -3679,9 +3702,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.2.tgz",
-      "integrity": "sha512-tzhYJJidDUVGMgVyE+PmxENPHlvvqm1KILjjZhB8/xHYqAGeizh3GBGf9u6WdJpZrz1aCpIIHG0LgJgH9rVjHQ==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.41.1.tgz",
+      "integrity": "sha512-oIE6M8WC9ma6xYqjvPhzZYk6NbobIURvP/lEbh7FWplcMO6gn7MM2yHKA1eC/GvYwzNKK/1LYgqzdkZ8YFxR8g==",
       "cpu": [
         "s390x"
       ],
@@ -3693,9 +3716,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.2.tgz",
-      "integrity": "sha512-opH8GSUuVcCSSyHHcl5hELrmnk4waZoVpgn/4FDao9iyE4WpQhyWJ5ryl5M3ocp4qkRuHfyXnGqg8M9oKCEKRA==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.41.1.tgz",
+      "integrity": "sha512-cWBOvayNvA+SyeQMp79BHPK8ws6sHSsYnK5zDcsC3Hsxr1dgTABKjMnMslPq1DvZIp6uO7kIWhiGwaTdR4Og9A==",
       "cpu": [
         "x64"
       ],
@@ -3707,9 +3730,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.2.tgz",
-      "integrity": "sha512-LSeBHnGli1pPKVJ79ZVJgeZWWZXkEe/5o8kcn23M8eMKCUANejchJbF/JqzM4RRjOJfNRhKJk8FuqL1GKjF5oQ==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.41.1.tgz",
+      "integrity": "sha512-y5CbN44M+pUCdGDlZFzGGBSKCA4A/J2ZH4edTYSSxFg7ce1Xt3GtydbVKWLlzL+INfFIZAEg1ZV6hh9+QQf9YQ==",
       "cpu": [
         "x64"
       ],
@@ -3720,24 +3743,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.2.tgz",
-      "integrity": "sha512-uPj7MQ6/s+/GOpolavm6BPo+6CbhbKYyZHUDvZ/SmJM7pfDBgdGisFX3bY/CBDMg2ZO4utfhlApkSfZ92yXw7Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ]
-    },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.2.tgz",
-      "integrity": "sha512-Z9MUCrSgIaUeeHAiNkm3cQyst2UhzjPraR3gYYfOjAuZI7tcFRTOD+4cHLPoS/3qinchth+V56vtqz1Tv+6KPA==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.41.1.tgz",
+      "integrity": "sha512-lZkCxIrjlJlMt1dLO/FbpZbzt6J/A8p4DnqzSa4PWqPEUUUnzXLeki/iyPLfV0BmHItlYgHUqJe+3KiyydmiNQ==",
       "cpu": [
         "arm64"
       ],
@@ -3749,9 +3758,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.2.tgz",
-      "integrity": "sha512-+GnYBmpjldD3XQd+HMejo+0gJGwYIOfFeoBQv32xF/RUIvccUz20/V6Otdv+57NE70D5pa8W/jVGDoGq0oON4A==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.41.1.tgz",
+      "integrity": "sha512-+psFT9+pIh2iuGsxFYYa/LhS5MFKmuivRsx9iPJWNSGbh2XVEjk90fmpUEjCnILPEPJnikAU6SFDiEUyOv90Pg==",
       "cpu": [
         "ia32"
       ],
@@ -3762,24 +3771,10 @@
         "win32"
       ]
     },
-    "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.2.tgz",
-      "integrity": "sha512-ApXFKluSB6kDQkAqZOKXBjiaqdF1BlKi+/eqnYe9Ee7U2K3pUDKsIyr8EYm/QDHTJIM+4X+lI0gJc3TTRhd+dA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.2.tgz",
-      "integrity": "sha512-ARz+Bs8kY6FtitYM96PqPEVvPXqEZmPZsSkXvyX19YzDqkCaIlhCieLLMI5hxO9SRZ2XtCtm8wxhy0iJ2jxNfw==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.41.1.tgz",
+      "integrity": "sha512-Wq2zpapRYLfi4aKxf2Xff0tN+7slj2d4R87WEzqw7ZLsVvO5zwYCIuEGSZYiK41+GlwUo1HiR+GdkLEJnCKTCw==",
       "cpu": [
         "x64"
       ],
@@ -3803,63 +3798,315 @@
       "integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==",
       "license": "MIT"
     },
-    "node_modules/@tanstack/query-core": {
-      "version": "5.90.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.2.tgz",
-      "integrity": "sha512-k/TcR3YalnzibscALLwxeiLUub6jN5EDLwKDiO7q5f4ICEoptJ+n9+7vcEFy5/x/i6Q+Lb/tXrsKCggf5uQJXQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/query-devtools": {
-      "version": "5.90.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.90.1.tgz",
-      "integrity": "sha512-GtINOPjPUH0OegJExZ70UahT9ykmAhmtNVcmtdnOZbxLwT7R5OmRztR5Ahe3/Cu7LArEmR6/588tAycuaWb1xQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/react-query": {
-      "version": "5.90.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.2.tgz",
-      "integrity": "sha512-CLABiR+h5PYfOWr/z+vWFt5VsOA2ekQeRQBFSKlcoW6Ndx/f8rfyVmq4LbgOM4GG2qtxAxjLYLOpCNTYm4uKzw==",
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.2.tgz",
+      "integrity": "sha512-ZwFnxH+1z8Ehh8bNTMX3YFrYdzAv7JLY5X5X7XSFY+G9QGJVce/P9xb2mh+j5hKt8NceuHmdtllJvAHWKtsNrQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.90.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19"
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.29.2",
+        "tailwindcss": "4.1.2"
       }
     },
-    "node_modules/@tanstack/react-query-devtools": {
-      "version": "5.90.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.90.2.tgz",
-      "integrity": "sha512-vAXJzZuBXtCQtrY3F/yUNJCV4obT/A/n81kb3+YqLbro5Z2+phdAbceO+deU3ywPw8B42oyJlp4FhO0SoivDFQ==",
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.2.tgz",
+      "integrity": "sha512-Zwz//1QKo6+KqnCKMT7lA4bspGfwEgcPAHlSthmahtgrpKDfwRGk8PKQrW8Zg/ofCDIlg6EtjSTKSxxSufC+CQ==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@tanstack/query-devtools": "5.90.1"
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.2",
+        "@tailwindcss/oxide-darwin-x64": "4.1.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.2.tgz",
+      "integrity": "sha512-IxkXbntHX8lwGmwURUj4xTr6nezHhLYqeiJeqa179eihGv99pRlKV1W69WByPJDQgSf4qfmwx904H6MkQqTA8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.2.tgz",
+      "integrity": "sha512-ZRtiHSnFYHb4jHKIdzxlFm6EDfijTCOT4qwUhJ3GWxfDoW2yT3z/y8xg0nE7e72unsmSj6dtfZ9Y5r75FIrlpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.2.tgz",
+      "integrity": "sha512-BiKUNZf1A0pBNzndBvnPnBxonCY49mgbOsPfILhcCE5RM7pQlRoOgN7QnwNhY284bDbfQSEOWnFR0zbPo6IDTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.2.tgz",
+      "integrity": "sha512-Z30VcpUfRGkiddj4l5NRCpzbSGjhmmklVoqkVQdkEC0MOelpY+fJrVhzSaXHmWrmSvnX8yiaEqAbdDScjVujYQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.2.tgz",
+      "integrity": "sha512-w3wsK1ChOLeQ3gFOiwabtWU5e8fY3P1Ss8jR3IFIn/V0va3ir//hZ8AwURveS4oK1Pu6b8i+yxesT4qWnLVUow==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.2.tgz",
+      "integrity": "sha512-oY/u+xJHpndTj7B5XwtmXGk8mQ1KALMfhjWMMpE8pdVAznjJsF5KkCceJ4Fmn5lS1nHMCwZum5M3/KzdmwDMdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.2.tgz",
+      "integrity": "sha512-k7G6vcRK/D+JOWqnKzKN/yQq1q4dCkI49fMoLcfs2pVcaUAXEqCP9NmA8Jv+XahBv5DtDjSAY3HJbjosEdKczg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.2.tgz",
+      "integrity": "sha512-fLL+c678TkYKgkDLLNxSjPPK/SzTec7q/E5pTwvpTqrth867dftV4ezRyhPM5PaiCqX651Y8Yk0wRQMcWUGnmQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.2.tgz",
+      "integrity": "sha512-0tU1Vjd1WucZ2ooq6y4nI9xyTSaH2g338bhrqk+2yzkMHskBm+pMsOCfY7nEIvALkA1PKPOycR4YVdlV7Czo+A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.2.tgz",
+      "integrity": "sha512-r8QaMo3QKiHqUcn+vXYCypCEha+R0sfYxmaZSgZshx9NfkY+CHz91aS2xwNV/E4dmUDkTPUag7sSdiCHPzFVTg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.2.tgz",
+      "integrity": "sha512-lYCdkPxh9JRHXoBsPE8Pu/mppUsC2xihYArNAESub41PKhHTnvn6++5RpmFM+GLSt3ewyS8fwCVvht7ulWm6cw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.2.tgz",
+      "integrity": "sha512-vgkMo6QRhG6uv97im6Y4ExDdq71y9v2IGZc+0wn7lauQFYJM/1KdUVhrOkexbUso8tUsMOWALxyHVkQEbsM7gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.2",
+        "@tailwindcss/oxide": "4.1.2",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.2"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.2.tgz",
+      "integrity": "sha512-3r/ZdMW0gxY8uOx1To0lpYa4coq4CzINcCX4laM1rS340Kcn0ac4A/MMFfHN8qba51aorZMYwMcOxYk4wJ9FYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.2",
+        "@tailwindcss/oxide": "4.1.2",
+        "tailwindcss": "4.1.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.87.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.87.0.tgz",
+      "integrity": "sha512-gRZig2csRl71i/HEAHlE9TOmMqKKs9WkMAqIUlzagH+sNtgjvqxwaVo2HmfNGe+iDWUak0ratSkiRv0m/Y8ijg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.86.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.86.0.tgz",
+      "integrity": "sha512-/JDw9BP80eambEK/EsDMGAcsL2VFT+8F5KCOwierjPU7QP8Wt1GT32yJpn3qOinBM8/zS3Jy36+F0GiyJp411A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.87.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.87.0.tgz",
+      "integrity": "sha512-3uRCGHo7KWHl6h7ptzLd5CbrjTQP5Q/37aC1cueClkSN4t/OaNFmfGolgs1AoA0kFjP/OZxTY2ytQoifyJzpWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.87.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.87.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.87.0.tgz",
+      "integrity": "sha512-OeOSKsPyLcTVLdn391iNeRqYFEmpYJrY9t+FjKpaC6ql0SyRu2XT3mKYJIfYczhMMlwOIlbJkNaifBveertV8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.86.0"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.90.2",
+        "@tanstack/react-query": "^5.87.0",
         "react": "^18 || ^19"
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
-      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -3868,9 +4115,9 @@
         "@babel/runtime": "^7.12.5",
         "@types/aria-query": "^5.0.1",
         "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
         "dom-accessibility-api": "^0.5.9",
         "lz-string": "^1.5.0",
-        "picocolors": "1.1.1",
         "pretty-format": "^27.0.2"
       },
       "engines": {
@@ -3878,17 +4125,18 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.8.0.tgz",
-      "integrity": "sha512-WgXcWzVM6idy5JaftTVC8Vs83NKRmGJz4Hqs4oyOuO2J4r/y79vvKZsb+CaGyCSEbUPI6OsewfPd0G1A0/TUZQ==",
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
+      "integrity": "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@adobe/css-tools": "^4.4.0",
         "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
         "css.escape": "^1.5.1",
         "dom-accessibility-api": "^0.6.3",
-        "picocolors": "^1.1.1",
+        "lodash": "^4.17.21",
         "redent": "^3.0.0"
       },
       "engines": {
@@ -3897,6 +4145,20 @@
         "yarn": ">=1"
       }
     },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
@@ -4038,13 +4300,13 @@
       }
     },
     "node_modules/@types/babel__traverse": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
-      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.7.tgz",
+      "integrity": "sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.2"
+        "@babel/types": "^7.20.7"
       }
     },
     "node_modules/@types/debug": {
@@ -4057,9 +4319,9 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
-      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
       "license": "MIT"
     },
     "node_modules/@types/estree-jsx": {
@@ -4103,9 +4365,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.17.tgz",
-      "integrity": "sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==",
+      "version": "20.19.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.0.tgz",
+      "integrity": "sha512-hfrc+1tud1xcdVTABC2JiomZJEklMcXYNTVtZLAeqTVWD+qL5jkHKT+1lOtqDdGxt+mB53DTtiz673vfjU8D1Q==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -4113,15 +4375,15 @@
       }
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.24",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz",
-      "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
+      "version": "18.3.23",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
+      "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -4305,6 +4567,32 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@typescript-eslint/utils": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
@@ -4356,16 +4644,16 @@
       "license": "ISC"
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
-      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.0.tgz",
+      "integrity": "sha512-JuLWaEqypaJmOJPLWwO335Ig6jSgC1FTONCWAxnqcQthLTK/Yc9aH6hr9z/87xciejbQcnP3GnA1FWUSWeXaeg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.28.0",
-        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
-        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@babel/core": "^7.26.10",
+        "@babel/plugin-transform-react-jsx-self": "^7.25.9",
+        "@babel/plugin-transform-react-jsx-source": "^7.25.9",
+        "@rolldown/pluginutils": "1.0.0-beta.9",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.17.0"
       },
@@ -4373,7 +4661,7 @@
         "node": "^14.18.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
       }
     },
     "node_modules/@vitest/coverage-v8": {
@@ -4600,9 +4888,9 @@
       "license": "MIT"
     },
     "node_modules/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -4634,9 +4922,9 @@
       }
     },
     "node_modules/agent-base": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
-      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
+      "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4692,34 +4980,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -4883,37 +5143,15 @@
       ],
       "license": "MIT"
     },
-    "node_modules/baseline-browser-mapping": {
-      "version": "2.8.6",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.6.tgz",
-      "integrity": "sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
-      }
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
     "node_modules/braces": {
@@ -4930,9 +5168,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.26.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.2.tgz",
-      "integrity": "sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==",
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.0.tgz",
+      "integrity": "sha512-PJ8gYKeS5e/whHBh8xrwYK+dAvEj7JXtz6uTucnMRB8OiGTsKccFekoRrjajPBHV8oOY+2tI4uxeceSimKwMFA==",
       "dev": true,
       "funding": [
         {
@@ -4950,10 +5188,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.8.3",
-        "caniuse-lite": "^1.0.30001741",
-        "electron-to-chromium": "^1.5.218",
-        "node-releases": "^2.0.21",
+        "caniuse-lite": "^1.0.30001718",
+        "electron-to-chromium": "^1.5.160",
+        "node-releases": "^2.0.19",
         "update-browserslist-db": "^1.1.3"
       },
       "bin": {
@@ -5057,20 +5294,10 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001745",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001745.tgz",
-      "integrity": "sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==",
+      "version": "1.0.30001720",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001720.tgz",
+      "integrity": "sha512-Ec/2yV2nNPwb4DnTANEV99ZWwm3ZWfdlfkQbWSDDt+PsXEVYwlhPH8tdMaPunYTKKmz7AnHi2oNEi1GcmKCD8g==",
       "dev": true,
       "funding": [
         {
@@ -5187,44 +5414,6 @@
         "node": "*"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -5316,16 +5505,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/compute-scroll-into-view": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-2.0.4.tgz",
@@ -5388,27 +5567,14 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/cssstyle": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
-      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.3.1.tgz",
+      "integrity": "sha512-ZgW+Jgdd7i52AaLYCriF8Mxqft0gD/R9i9wi6RWBhs1pqdPEzPjym7rvRKi397WmQFf3SlyUsszhw+VVCbx79Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@asamuzakjp/css-color": "^3.2.0",
+        "@asamuzakjp/css-color": "^3.1.2",
         "rrweb-cssom": "^0.8.0"
       },
       "engines": {
@@ -5466,9 +5632,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -5483,16 +5649,16 @@
       }
     },
     "node_modules/decimal.js": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
-      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.5.0.tgz",
+      "integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/decode-named-character-reference": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
-      "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.1.0.tgz",
+      "integrity": "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==",
       "license": "MIT",
       "dependencies": {
         "character-entities": "^2.0.0"
@@ -5610,6 +5776,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -5629,13 +5805,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -5669,13 +5838,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dnd-core": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
@@ -5750,31 +5912,31 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.223",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.223.tgz",
-      "integrity": "sha512-qKm55ic6nbEmagFlTFczML33rF90aU+WtrJ9MdTCThrcvDNdUHN4p6QfVN78U06ZmguqXIyMPyYhw2TrbDUwPQ==",
+      "version": "1.5.161",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.161.tgz",
+      "integrity": "sha512-hwtetwfKNZo/UlwHIVBlKZVdy7o8bIZxxKs0Mv/ROPiQQQmDgdm5a+KvKtBsxM8ZjFzTaCeLoodZ8jiBE3o9rA==",
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
     },
     "node_modules/entities": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
-      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz",
+      "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==",
       "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
@@ -6033,25 +6195,21 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.21",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.21.tgz",
-      "integrity": "sha512-MWDWTtNC4voTcWDxXbdmBNe8b/TxfxRFUL6hXgKWJjN9c1AagYEmpiFWBWzDw+5H3SulWUe1pJKTnoSdmk88UA==",
+      "version": "0.4.20",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.20.tgz",
+      "integrity": "sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "eslint": ">=8.40"
       }
     },
-    "node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
+      "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -6059,12 +6217,16 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -6072,28 +6234,30 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+    "node_modules/eslint/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
       }
     },
-    "node_modules/eslint/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "type-fest": "^0.20.2"
       },
       "engines": {
-        "node": "*"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/esniff": {
@@ -6142,6 +6306,16 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/esquery/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -6155,7 +6329,7 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/estraverse": {
+    "node_modules/esrecurse/node_modules/estraverse": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
@@ -6419,34 +6593,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/form-data": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -6669,44 +6825,14 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=4"
       }
     },
     "node_modules/globby": {
@@ -6743,6 +6869,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -7152,19 +7285,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -7195,22 +7315,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-date-object": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
@@ -7248,16 +7352,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -7542,9 +7636,9 @@
       }
     },
     "node_modules/istanbul-reports": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
-      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
+      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -7555,30 +7649,14 @@
         "node": ">=8"
       }
     },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/js-tokens": {
@@ -7703,70 +7781,289 @@
       "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
       "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=6"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lexical": {
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/lexical/-/lexical-0.33.1.tgz",
+      "integrity": "sha512-+kiCS/GshQmCs/meMb8MQT4AMvw3S3Ef0lSCv2Xi6Itvs59OD+NjQWNfYkDteIbKtVE/w0Yiqh56VyGwIb8UcA==",
+      "license": "MIT"
+    },
+    "node_modules/lib0": {
+      "version": "0.2.114",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.114.tgz",
+      "integrity": "sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/levn": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      },
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lexical": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/lexical/-/lexical-0.35.0.tgz",
-      "integrity": "sha512-3VuV8xXhh5xJA6tzvfDvE0YBCMkIZUmxtRilJQDDdCgJCc+eut6qAv2qbN+pbqvarqcQqPN1UF+8YvsjmyOZpw==",
-      "license": "MIT"
-    },
-    "node_modules/lib0": {
-      "version": "0.2.114",
-      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.114.tgz",
-      "integrity": "sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "isomorphic.js": "^0.2.4"
-      },
-      "bin": {
-        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
-        "0gentesthtml": "bin/gentesthtml.js",
-        "0serve": "bin/0serve.js"
-      },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=16"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "type": "GitHub Sponsors ❤",
-        "url": "https://github.com/sponsors/dmonad"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT",
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
     "node_modules/local-pkg": {
       "version": "0.5.1",
@@ -7801,6 +8098,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -7869,13 +8173,13 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.19",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/magicast": {
@@ -8940,9 +9244,9 @@
       }
     },
     "node_modules/mime-db": {
-      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -8961,16 +9265,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/mime-types/node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -8995,42 +9289,29 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "brace-expansion": "^1.1.7"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": "*"
       }
     },
     "node_modules/mlly": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
-      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
+      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.15.0",
-        "pathe": "^2.0.3",
-        "pkg-types": "^1.3.1",
-        "ufo": "^1.6.1"
+        "acorn": "^8.14.0",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
+        "ufo": "^1.5.4"
       }
     },
     "node_modules/mlly/node_modules/pathe": {
@@ -9080,22 +9361,10 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
-      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
       "funding": [
         {
           "type": "github",
@@ -9124,22 +9393,12 @@
       "license": "ISC"
     },
     "node_modules/node-releases": {
-      "version": "2.0.21",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
-      "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==",
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -9180,9 +9439,9 @@
       }
     },
     "node_modules/nwsapi": {
-      "version": "2.2.22",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.22.tgz",
-      "integrity": "sha512-ujSMe1OWVn55euT1ihwCI1ZcAaAU3nxUiDwfDQldc51ZXaB9m2AyOn6/jh1BLe2t/G8xd6uKG1UBF2aZJeg2SQ==",
+      "version": "2.2.20",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.20.tgz",
+      "integrity": "sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==",
       "dev": true,
       "license": "MIT"
     },
@@ -9195,16 +9454,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -9348,13 +9597,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0"
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9436,37 +9678,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -9514,26 +9725,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/pkg-types": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
@@ -9581,135 +9772,15 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.11",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
-      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
+      ],
       "license": "MIT",
       "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^10 || ^12 || >=14"
       }
     },
     "node_modules/postcss-value-parser": {
@@ -9953,9 +10024,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.63.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
-      "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
+      "version": "7.62.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
+      "integrity": "sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -10121,29 +10192,6 @@
         }
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -10228,27 +10276,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.16.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -10288,13 +10315,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.52.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.2.tgz",
-      "integrity": "sha512-I25/2QgoROE1vYV+NQ1En9T9UFB9Cmfm2CJ83zZOlaDpvz29wGQSZXWKw7MiNXau7wYgB/T9fVIdIuEQ+KbiiA==",
+      "version": "4.41.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.1.tgz",
+      "integrity": "sha512-cPmwD3FnFv8rKMBc1MxWCwVQFxwf1JEmSX3iQXrRVVG15zerAIXRjMFVWnd5Q5QvgKF7Aj+5ykXFhUl+QGnyOw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.8"
+        "@types/estree": "1.0.7"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -10304,28 +10331,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.52.2",
-        "@rollup/rollup-android-arm64": "4.52.2",
-        "@rollup/rollup-darwin-arm64": "4.52.2",
-        "@rollup/rollup-darwin-x64": "4.52.2",
-        "@rollup/rollup-freebsd-arm64": "4.52.2",
-        "@rollup/rollup-freebsd-x64": "4.52.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.52.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.52.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.52.2",
-        "@rollup/rollup-linux-arm64-musl": "4.52.2",
-        "@rollup/rollup-linux-loong64-gnu": "4.52.2",
-        "@rollup/rollup-linux-ppc64-gnu": "4.52.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.52.2",
-        "@rollup/rollup-linux-riscv64-musl": "4.52.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.52.2",
-        "@rollup/rollup-linux-x64-gnu": "4.52.2",
-        "@rollup/rollup-linux-x64-musl": "4.52.2",
-        "@rollup/rollup-openharmony-arm64": "4.52.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.52.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.52.2",
-        "@rollup/rollup-win32-x64-gnu": "4.52.2",
-        "@rollup/rollup-win32-x64-msvc": "4.52.2",
+        "@rollup/rollup-android-arm-eabi": "4.41.1",
+        "@rollup/rollup-android-arm64": "4.41.1",
+        "@rollup/rollup-darwin-arm64": "4.41.1",
+        "@rollup/rollup-darwin-x64": "4.41.1",
+        "@rollup/rollup-freebsd-arm64": "4.41.1",
+        "@rollup/rollup-freebsd-x64": "4.41.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.41.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.41.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.41.1",
+        "@rollup/rollup-linux-arm64-musl": "4.41.1",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.41.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.41.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.41.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.41.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.41.1",
+        "@rollup/rollup-linux-x64-gnu": "4.41.1",
+        "@rollup/rollup-linux-x64-musl": "4.41.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.41.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.41.1",
+        "@rollup/rollup-win32-x64-msvc": "4.41.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -10676,76 +10701,6 @@
       "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
       "license": "MIT"
     },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
-      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/stringify-entities": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
@@ -10773,20 +10728,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-final-newline": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
@@ -10870,66 +10811,6 @@
         "inline-style-parser": "0.2.4"
       }
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -10943,19 +10824,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -10970,9 +10838,9 @@
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
-      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.0.tgz",
+      "integrity": "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -10980,41 +10848,24 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.2.tgz",
+      "integrity": "sha512-VCsK+fitIbQF7JlxXaibFhxrPq4E2hDcG8apzHUdWFMCQWD8uLdlHg4iSkZ53cgLCCcZ+FZK7vG8VjvLcnBgKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/test-exclude": {
@@ -11032,30 +10883,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/test-exclude/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/test-exclude/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -11063,29 +10890,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -11198,13 +11002,6 @@
         "typescript": ">=4.2.0"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/ts-node": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
@@ -11305,9 +11102,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -11555,13 +11352,6 @@
         }
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/uvu": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
@@ -11611,9 +11401,9 @@
       }
     },
     "node_modules/vfile-message": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
-      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -11625,9 +11415,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.20",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.20.tgz",
-      "integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
+      "version": "5.4.19",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
+      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11943,107 +11733,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
-      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -12052,9 +11741,9 @@
       "license": "ISC"
     },
     "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "version": "8.18.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
+      "integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -12097,19 +11786,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yjs": {
       "version": "13.6.27",
       "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.27.tgz",
@@ -12152,9 +11828,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "version": "3.25.46",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.46.tgz",
+      "integrity": "sha512-IqRxcHEIjqLd4LNS/zKffB3Jzg3NwqJxQQ0Ns7pdrvgGkwQsEBdEQcOHaBVqvvZArShRzI39+aMST3FBGmTrLQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/archon-ui-main/package.json b/archon-ui-main/package.json
index a0f86e81d6..bf4dcdb86d 100644
--- a/archon-ui-main/package.json
+++ b/archon-ui-main/package.json
@@ -30,10 +30,14 @@
   "dependencies": {
     "@mdxeditor/editor": "^3.42.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -74,8 +78,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
     "jsdom": "^24.1.0",
+    "@tailwindcss/postcss": "4.1.2",
+    "@tailwindcss/vite": "4.1.2",
     "postcss": "latest",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.1.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.5.4",
     "vite": "^5.2.0",
diff --git a/archon-ui-main/postcss.config.js b/archon-ui-main/postcss.config.js
index 2e7af2b7f1..1c8784688c 100644
--- a/archon-ui-main/postcss.config.js
+++ b/archon-ui-main/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }
diff --git a/archon-ui-main/src/App.tsx b/archon-ui-main/src/App.tsx
index ea2539cc1a..36e0d37542 100644
--- a/archon-ui-main/src/App.tsx
+++ b/archon-ui-main/src/App.tsx
@@ -13,6 +13,7 @@ import { ToastProvider } from './features/ui/components/ToastProvider';
 import { SettingsProvider, useSettings } from './contexts/SettingsContext';
 import { TooltipProvider } from './features/ui/primitives/tooltip';
 import { ProjectPage } from './pages/ProjectPage';
+import StyleGuidePage from './pages/StyleGuidePage';
 import { DisconnectScreenOverlay } from './components/DisconnectScreenOverlay';
 import { ErrorBoundaryWithBugReport } from './components/bug-report/ErrorBoundaryWithBugReport';
 import { MigrationBanner } from './components/ui/MigrationBanner';
@@ -21,14 +22,19 @@ import { useMigrationStatus } from './hooks/useMigrationStatus';
 
 
 const AppRoutes = () => {
-  const { projectsEnabled } = useSettings();
-  
+  const { projectsEnabled, styleGuideEnabled } = useSettings();
+
   return (
     <Routes>
       <Route path="/" element={<KnowledgeBasePage />} />
       <Route path="/onboarding" element={<OnboardingPage />} />
       <Route path="/settings" element={<SettingsPage />} />
       <Route path="/mcp" element={<MCPPage />} />
+      {styleGuideEnabled ? (
+        <Route path="/style-guide" element={<StyleGuidePage />} />
+      ) : (
+        <Route path="/style-guide" element={<Navigate to="/" replace />} />
+      )}
       {projectsEnabled ? (
         <>
           <Route path="/projects" element={<ProjectPage />} />
diff --git a/archon-ui-main/src/components/layout/Navigation.tsx b/archon-ui-main/src/components/layout/Navigation.tsx
index e2f1e80676..3547b5fb26 100644
--- a/archon-ui-main/src/components/layout/Navigation.tsx
+++ b/archon-ui-main/src/components/layout/Navigation.tsx
@@ -1,4 +1,4 @@
-import { BookOpen, Settings } from "lucide-react";
+import { BookOpen, Palette, Settings } from "lucide-react";
 import type React from "react";
 import { Link, useLocation } from "react-router-dom";
 // TEMPORARY: Use old SettingsContext until settings are migrated
@@ -24,7 +24,7 @@ interface NavigationProps {
  */
 export function Navigation({ className }: NavigationProps) {
   const location = useLocation();
-  const { projectsEnabled } = useSettings();
+  const { projectsEnabled, styleGuideEnabled } = useSettings();
 
   // Navigation items configuration
   const navigationItems: NavigationItem[] = [
@@ -54,6 +54,12 @@ export function Navigation({ className }: NavigationProps) {
       label: "MCP Server",
       enabled: true,
     },
+    {
+      path: "/style-guide",
+      icon: <Palette className="h-5 w-5" />,
+      label: "Style Guide",
+      enabled: styleGuideEnabled,
+    },
     {
       path: "/settings",
       icon: <Settings className="h-5 w-5" />,
@@ -62,6 +68,9 @@ export function Navigation({ className }: NavigationProps) {
     },
   ];
 
+  // Filter out disabled navigation items
+  const enabledNavigationItems = navigationItems.filter((item) => item.enabled);
+
   const isProjectsActive = location.pathname.startsWith("/projects");
 
   return (
@@ -125,15 +134,14 @@ export function Navigation({ className }: NavigationProps) {
 
       {/* Navigation Items */}
       <nav className="flex flex-col gap-4">
-        {navigationItems.map((item) => {
+        {enabledNavigationItems.map((item) => {
           const isActive = location.pathname === item.path;
-          const isEnabled = item.enabled !== false;
 
           return (
             <Tooltip key={item.path}>
               <TooltipTrigger asChild>
                 <Link
-                  to={isEnabled ? item.path : "#"}
+                  to={item.path}
                   className={cn(
                     "relative p-3 rounded-lg transition-all duration-300",
                     "flex items-center justify-center",
@@ -148,13 +156,7 @@ export function Navigation({ className }: NavigationProps) {
                           "hover:text-blue-600 dark:hover:text-blue-400",
                           "hover:bg-white/10 dark:hover:bg-white/5",
                         ],
-                    !isEnabled && "opacity-50 cursor-not-allowed pointer-events-none",
                   )}
-                  onClick={(e) => {
-                    if (!isEnabled) {
-                      e.preventDefault();
-                    }
-                  }}
                 >
                   {item.icon}
                   {/* Active state decorations with neon line */}
diff --git a/archon-ui-main/src/components/settings/FeaturesSection.tsx b/archon-ui-main/src/components/settings/FeaturesSection.tsx
index 0a61cf5cb2..1f410bafb2 100644
--- a/archon-ui-main/src/components/settings/FeaturesSection.tsx
+++ b/archon-ui-main/src/components/settings/FeaturesSection.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Moon, Sun, FileText, Layout, Bot, Settings, Palette, Flame, Monitor } from 'lucide-react';
-import { Toggle } from '../ui/Toggle';
+import { Switch } from '@/features/ui/primitives/switch';
 import { Card } from '../ui/Card';
 import { useTheme } from '../../contexts/ThemeContext';
 import { credentialsService } from '../../services/credentialsService';
 import { useToast } from '../../features/shared/hooks/useToast';
 import { serverHealthService } from '../../services/serverHealthService';
+import { useSettings } from '../../contexts/SettingsContext';
 
 export const FeaturesSection = () => {
   const {
@@ -13,24 +14,30 @@ export const FeaturesSection = () => {
     setTheme
   } = useTheme();
   const { showToast } = useToast();
+  const { styleGuideEnabled, setStyleGuideEnabled: setStyleGuideContext } = useSettings();
   const isDarkMode = theme === 'dark';
   const [projectsEnabled, setProjectsEnabled] = useState(true);
-  
+  const [styleGuideEnabledLocal, setStyleGuideEnabledLocal] = useState(styleGuideEnabled);
+
   // Commented out for future release
   const [agUILibraryEnabled, setAgUILibraryEnabled] = useState(false);
   const [agentsEnabled, setAgentsEnabled] = useState(false);
-  
+
   const [logfireEnabled, setLogfireEnabled] = useState(false);
   const [disconnectScreenEnabled, setDisconnectScreenEnabled] = useState(true);
   const [loading, setLoading] = useState(true);
   const [projectsSchemaValid, setProjectsSchemaValid] = useState(true);
   const [projectsSchemaError, setProjectsSchemaError] = useState<string | null>(null);
 
-  // Load settings on mount
+  // Load settings on mount and sync with context
   useEffect(() => {
     loadSettings();
   }, []);
 
+  useEffect(() => {
+    setStyleGuideEnabledLocal(styleGuideEnabled);
+  }, [styleGuideEnabled]);
+
   const loadSettings = async () => {
     try {
       setLoading(true);
@@ -174,7 +181,7 @@ export const FeaturesSection = () => {
 
   const handleDisconnectScreenToggle = async (checked: boolean) => {
     if (loading) return;
-    
+
     try {
       setLoading(true);
       setDisconnectScreenEnabled(checked);
@@ -182,7 +189,7 @@ export const FeaturesSection = () => {
       await serverHealthService.updateSettings(checked);
 
       showToast(
-        checked ? 'Disconnect Screen Enabled' : 'Disconnect Screen Disabled', 
+        checked ? 'Disconnect Screen Enabled' : 'Disconnect Screen Disabled',
         checked ? 'success' : 'warning'
       );
     } catch (error) {
@@ -194,6 +201,29 @@ export const FeaturesSection = () => {
     }
   };
 
+  const handleStyleGuideToggle = async (checked: boolean) => {
+    if (loading) return;
+
+    try {
+      setLoading(true);
+      setStyleGuideEnabledLocal(checked);
+
+      // Update context which will save to backend
+      await setStyleGuideContext(checked);
+
+      showToast(
+        checked ? 'Style Guide Enabled' : 'Style Guide Disabled',
+        checked ? 'success' : 'warning'
+      );
+    } catch (error) {
+      console.error('Failed to update style guide setting:', error);
+      setStyleGuideEnabledLocal(!checked);
+      showToast('Failed to update style guide setting', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <>
       <div className="grid grid-cols-2 gap-4">
@@ -208,7 +238,14 @@ export const FeaturesSection = () => {
               </p>
             </div>
             <div className="flex-shrink-0">
-              <Toggle checked={isDarkMode} onCheckedChange={handleThemeToggle} accentColor="purple" icon={isDarkMode ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />} />
+              <Switch
+                size="lg"
+                checked={isDarkMode}
+                onCheckedChange={handleThemeToggle}
+                color="purple"
+                iconOn={<Moon className="w-5 h-5" />}
+                iconOff={<Sun className="w-5 h-5" />}
+              />
             </div>
           </div>
 
@@ -228,16 +265,39 @@ export const FeaturesSection = () => {
               )}
             </div>
             <div className="flex-shrink-0">
-              <Toggle 
-                checked={projectsEnabled} 
-                onCheckedChange={handleProjectsToggle} 
-                accentColor="blue" 
+              <Switch
+                size="lg"
+                checked={projectsEnabled}
+                onCheckedChange={handleProjectsToggle}
+                color="blue"
                 icon={<FileText className="w-5 h-5" />}
                 disabled={loading || !projectsSchemaValid}
               />
             </div>
           </div>
 
+          {/* Style Guide Toggle */}
+          <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-cyan-500/10 to-cyan-600/5 backdrop-blur-sm border border-cyan-500/20 shadow-lg">
+            <div className="flex-1 min-w-0">
+              <p className="font-medium text-gray-800 dark:text-white">
+                Style Guide
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Show UI style guide and components in navigation
+              </p>
+            </div>
+            <div className="flex-shrink-0">
+              <Switch
+                size="lg"
+                checked={styleGuideEnabledLocal}
+                onCheckedChange={handleStyleGuideToggle}
+                color="cyan"
+                icon={<Palette className="w-5 h-5" />}
+                disabled={loading}
+              />
+            </div>
+          </div>
+
           {/* COMMENTED OUT FOR FUTURE RELEASE - AG-UI Library Toggle */}
           {/*
           <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-pink-500/10 to-pink-600/5 backdrop-blur-sm border border-pink-500/20 shadow-lg">
@@ -283,10 +343,11 @@ export const FeaturesSection = () => {
               </p>
             </div>
             <div className="flex-shrink-0">
-              <Toggle 
-                checked={logfireEnabled} 
-                onCheckedChange={handleLogfireToggle} 
-                accentColor="orange" 
+              <Switch
+                size="lg"
+                checked={logfireEnabled}
+                onCheckedChange={handleLogfireToggle}
+                color="orange"
                 icon={<Flame className="w-5 h-5" />}
                 disabled={loading}
               />
@@ -304,10 +365,11 @@ export const FeaturesSection = () => {
               </p>
             </div>
             <div className="flex-shrink-0">
-              <Toggle 
-                checked={disconnectScreenEnabled} 
-                onCheckedChange={handleDisconnectScreenToggle} 
-                accentColor="green" 
+              <Switch
+                size="lg"
+                checked={disconnectScreenEnabled}
+                onCheckedChange={handleDisconnectScreenToggle}
+                color="green"
                 icon={<Monitor className="w-5 h-5" />}
                 disabled={loading}
               />
diff --git a/archon-ui-main/src/contexts/SettingsContext.tsx b/archon-ui-main/src/contexts/SettingsContext.tsx
index fa44a4389b..ff8f226408 100644
--- a/archon-ui-main/src/contexts/SettingsContext.tsx
+++ b/archon-ui-main/src/contexts/SettingsContext.tsx
@@ -3,7 +3,9 @@ import { credentialsService } from '../services/credentialsService';
 
 interface SettingsContextType {
   projectsEnabled: boolean;
-  setProjectsEnabled: (enabled: boolean) => void;
+  setProjectsEnabled: (enabled: boolean) => Promise<void>;
+  styleGuideEnabled: boolean;
+  setStyleGuideEnabled: (enabled: boolean) => Promise<void>;
   loading: boolean;
   refreshSettings: () => Promise<void>;
 }
@@ -24,24 +26,35 @@ interface SettingsProviderProps {
 
 export const SettingsProvider: React.FC<SettingsProviderProps> = ({ children }) => {
   const [projectsEnabled, setProjectsEnabledState] = useState(true);
+  const [styleGuideEnabled, setStyleGuideEnabledState] = useState(false);
   const [loading, setLoading] = useState(true);
 
   const loadSettings = async () => {
     try {
       setLoading(true);
-      
-      // Load Projects setting
-      const projectsResponse = await credentialsService.getCredential('PROJECTS_ENABLED').catch(() => ({ value: undefined }));
-      
+
+      // Load Projects and Style Guide settings
+      const [projectsResponse, styleGuideResponse] = await Promise.all([
+        credentialsService.getCredential('PROJECTS_ENABLED').catch(() => ({ value: undefined })),
+        credentialsService.getCredential('STYLE_GUIDE_ENABLED').catch(() => ({ value: undefined }))
+      ]);
+
       if (projectsResponse.value !== undefined) {
         setProjectsEnabledState(projectsResponse.value === 'true');
       } else {
         setProjectsEnabledState(true); // Default to true
       }
-      
+
+      if (styleGuideResponse.value !== undefined) {
+        setStyleGuideEnabledState(styleGuideResponse.value === 'true');
+      } else {
+        setStyleGuideEnabledState(false); // Default to false
+      }
+
     } catch (error) {
       console.error('Failed to load settings:', error);
       setProjectsEnabledState(true);
+      setStyleGuideEnabledState(false);
     } finally {
       setLoading(false);
     }
@@ -72,6 +85,27 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({ children })
     }
   };
 
+  const setStyleGuideEnabled = async (enabled: boolean) => {
+    try {
+      // Update local state immediately
+      setStyleGuideEnabledState(enabled);
+
+      // Save to backend
+      await credentialsService.createCredential({
+        key: 'STYLE_GUIDE_ENABLED',
+        value: enabled.toString(),
+        is_encrypted: false,
+        category: 'features',
+        description: 'Show UI style guide and components in navigation'
+      });
+    } catch (error) {
+      console.error('Failed to update style guide setting:', error);
+      // Revert on error
+      setStyleGuideEnabledState(!enabled);
+      throw error;
+    }
+  };
+
   const refreshSettings = async () => {
     await loadSettings();
   };
@@ -79,6 +113,8 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({ children })
   const value: SettingsContextType = {
     projectsEnabled,
     setProjectsEnabled,
+    styleGuideEnabled,
+    setStyleGuideEnabled,
     loading,
     refreshSettings
   };
diff --git a/archon-ui-main/src/contexts/ThemeContext.tsx b/archon-ui-main/src/contexts/ThemeContext.tsx
index 726d8d9614..fc92eca10d 100644
--- a/archon-ui-main/src/contexts/ThemeContext.tsx
+++ b/archon-ui-main/src/contexts/ThemeContext.tsx
@@ -8,25 +8,22 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 export const ThemeProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
-  const [theme, setTheme] = useState<Theme>('dark');
-  useEffect(() => {
-    // Check if theme is stored in localStorage
+  // Read from localStorage immediately to avoid flash
+  const [theme, setTheme] = useState<Theme>(() => {
     const savedTheme = localStorage.getItem('theme') as Theme | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
-    } else {
-      // Default to dark mode
-      setTheme('dark');
-      localStorage.setItem('theme', 'dark');
-    }
-  }, []);
+    return savedTheme || 'dark';
+  });
   useEffect(() => {
     // Apply theme class to document element
     const root = window.document.documentElement;
-    // Remove both classes first
-    root.classList.remove('dark', 'light');
-    // Add the current theme class
-    root.classList.add(theme);
+
+    // Tailwind v4: Only toggle .dark class, don't add .light
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+
     // Save to localStorage
     localStorage.setItem('theme', theme);
   }, [theme]);
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
index 05c882de96..43deeb2426 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
@@ -8,9 +8,9 @@ import { format } from "date-fns";
 import { motion } from "framer-motion";
 import { Clock, Code, ExternalLink, File, FileText, Globe } from "lucide-react";
 import { useState } from "react";
+import { isOptimistic } from "@/features/shared/utils/optimistic";
 import { KnowledgeCardProgress } from "../../progress/components/KnowledgeCardProgress";
 import type { ActiveOperation } from "../../progress/types";
-import { isOptimistic } from "@/features/shared/utils/optimistic";
 import { StatPill } from "../../ui/primitives";
 import { OptimisticIndicator } from "../../ui/primitives/OptimisticIndicator";
 import { cn } from "../../ui/primitives/styles";
diff --git a/archon-ui-main/src/features/projects/tasks/utils/task-styles.tsx b/archon-ui-main/src/features/projects/tasks/utils/task-styles.tsx
index 7d9082accf..3c6a8a0890 100644
--- a/archon-ui-main/src/features/projects/tasks/utils/task-styles.tsx
+++ b/archon-ui-main/src/features/projects/tasks/utils/task-styles.tsx
@@ -39,7 +39,7 @@ export const getOrderColor = (order: number) => {
   if (order <= 3) return "bg-rose-500";
   if (order <= 6) return "bg-orange-500";
   if (order <= 10) return "bg-blue-500";
-  return "bg-emerald-500";
+  return "bg-green-500";
 };
 
 // Get glow effect based on task priority/order
@@ -47,7 +47,7 @@ export const getOrderGlow = (order: number) => {
   if (order <= 3) return "shadow-[0_0_10px_rgba(244,63,94,0.7)]";
   if (order <= 6) return "shadow-[0_0_10px_rgba(249,115,22,0.7)]";
   if (order <= 10) return "shadow-[0_0_10px_rgba(59,130,246,0.7)]";
-  return "shadow-[0_0_10px_rgba(16,185,129,0.7)]";
+  return "shadow-[0_0_10px_rgba(34,197,94,0.7)]";
 };
 
 // Get column header color based on status
@@ -74,6 +74,6 @@ export const getColumnGlow = (status: "todo" | "doing" | "review" | "done") => {
     case "review":
       return "bg-purple-500/30 shadow-[0_0_10px_2px_rgba(168,85,247,0.2)]";
     case "done":
-      return "bg-green-500/30 shadow-[0_0_10px_2px_rgba(16,185,129,0.2)]";
+      return "bg-green-500/30 shadow-[0_0_10px_2px_rgba(34,197,94,0.2)]";
   }
 };
diff --git a/archon-ui-main/src/features/shared/api/apiClient.ts b/archon-ui-main/src/features/shared/api/apiClient.ts
index 5d7d47137f..e766fbedfe 100644
--- a/archon-ui-main/src/features/shared/api/apiClient.ts
+++ b/archon-ui-main/src/features/shared/api/apiClient.ts
@@ -60,10 +60,10 @@ export async function callAPIWithETag<T = unknown>(endpoint: string, options: Re
 
     // Only set Content-Type for requests that have a body (POST, PUT, PATCH, etc.)
     // GET and DELETE requests should not have Content-Type header
-    const method = options.method?.toUpperCase() || 'GET';
+    const method = options.method?.toUpperCase() || "GET";
     const hasBody = options.body !== undefined && options.body !== null;
-    if (hasBody && !headers['Content-Type']) {
-      headers['Content-Type'] = 'application/json';
+    if (hasBody && !headers["Content-Type"]) {
+      headers["Content-Type"] = "application/json";
     }
 
     // Make the request with timeout
diff --git a/archon-ui-main/src/features/style-guide/components.json b/archon-ui-main/src/features/style-guide/components.json
new file mode 100644
index 0000000000..0d04e97e9f
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/components.json
@@ -0,0 +1,210 @@
+{
+  "$schema": "https://json-schema.org/draft-07/schema#",
+  "version": "1.0.0",
+  "description": "Archon UI Component Reference for AI Agents and Developers",
+  "categories": {
+    "navigation": {
+      "description": "Navigation components for app and page-level navigation",
+      "components": [
+        {
+          "name": "MainNavigation",
+          "path": "archon-ui-main/src/components/layout/Navigation.tsx",
+          "usage": "Fixed left sidebar navigation with glassmorphism, tooltips, and active state indicators",
+          "props": ["className?"],
+          "example": "Fixed position, icon-based, tooltip on hover, neon glow on active"
+        },
+        {
+          "name": "PageTabs",
+          "path": "archon-ui-main/src/features/ui/primitives/tabs.tsx (Radix Tabs)",
+          "usage": "Top-level page navigation tabs (e.g., Docs/Tasks in Projects)",
+          "props": ["defaultValue", "value", "onValueChange"],
+          "example": "See Projects page (Docs/Tasks tabs) - archon-ui-main/src/features/projects/views/ProjectsView.tsx:188-210"
+        },
+        {
+          "name": "ViewToggleButtons",
+          "path": "archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx:88-118",
+          "usage": "Toggle between grid and table views",
+          "props": ["viewMode", "onViewModeChange"],
+          "example": "Grid/List icon buttons with active state styling"
+        }
+      ]
+    },
+    "layouts": {
+      "description": "Page layout patterns",
+      "components": [
+        {
+          "name": "CardGridLayout",
+          "path": "archon-ui-main/src/features/projects/components/ProjectList.tsx:100-117",
+          "usage": "Horizontal scrolling card grid for project cards or similar items",
+          "pattern": "flex gap-4 overflow-x-auto with min-w-max",
+          "example": "Projects page - horizontal scrollable cards",
+          "variant": "horizontal (default)"
+        },
+        {
+          "name": "SidebarListLayout",
+          "path": "archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx",
+          "usage": "Sidebar navigation list with compact cards and search",
+          "pattern": "Fixed left column (w-72) with vertical list, Input for search, main content on right (flex-1)",
+          "example": "Projects page sidebar variant - vertical list with smaller cards",
+          "variant": "sidebar (alternative to horizontal cards)"
+        },
+        {
+          "name": "BentoGridLayout",
+          "path": "archon-ui-main/src/pages/SettingsPage.tsx:125-223",
+          "usage": "Two-column responsive grid for collapsible settings cards",
+          "pattern": "grid grid-cols-1 lg:grid-cols-2 gap-6",
+          "example": "Settings page - left/right column layout"
+        },
+        {
+          "name": "ResponsiveGridLayout",
+          "path": "archon-ui-main/src/features/knowledge/components/KnowledgeList.tsx:158-183",
+          "usage": "Responsive grid for card items (1/2/3/4 columns)",
+          "pattern": "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
+          "example": "Knowledge page grid view"
+        },
+        {
+          "name": "TableLayout",
+          "path": "archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx:68-209",
+          "usage": "Table with glassmorphism styling, hover states, and action buttons",
+          "pattern": "overflow-x-auto wrapper with full-width table",
+          "example": "Knowledge page table view"
+        }
+      ]
+    },
+    "cards": {
+      "description": "Card components for various use cases",
+      "components": [
+        {
+          "name": "ProjectCard",
+          "path": "archon-ui-main/src/features/projects/components/ProjectCard.tsx",
+          "usage": "Card with real-time data (task counts), selection states, pinned indicator",
+          "features": ["glassmorphism", "hover effects", "neon glow borders", "task count pills", "pin badge"],
+          "example": "w-72 min-h-[180px] with gradient backgrounds"
+        },
+        {
+          "name": "CollapsibleSettingsCard",
+          "path": "archon-ui-main/src/components/ui/CollapsibleSettingsCard.tsx",
+          "usage": "Collapsible card with PowerButton toggle and flicker animation",
+          "features": ["expand/collapse", "localStorage persistence", "accent colors"],
+          "example": "Settings page cards"
+        },
+        {
+          "name": "GlassCard (Primitive)",
+          "path": "archon-ui-main/src/features/ui/primitives/card.tsx",
+          "usage": "Base glassmorphism card with configurable blur, transparency, tints, edges",
+          "props": ["blur?", "transparency?", "glassTint?", "edgePosition?", "edgeColor?", "size?"],
+          "example": "See GlassCardConfigurator for all options"
+        }
+      ]
+    },
+    "information_display": {
+      "description": "Patterns for displaying structured information",
+      "components": [
+        {
+          "name": "DocumentBrowser",
+          "path": "archon-ui-main/src/features/knowledge/components/DocumentBrowser.tsx",
+          "usage": "Modal for displaying documents, code, logs, or structured information with tabs and search",
+          "features": [
+            "Dialog modal",
+            "Tabs navigation",
+            "Search filtering",
+            "Expandable content",
+            "Code syntax highlighting"
+          ],
+          "radix_used": ["Dialog", "Tabs", "Input"],
+          "pattern": "Dialog + Tabs + Search input + Collapsible items with expand/collapse",
+          "example": "Knowledge inspector, document viewer, code browser, log viewer"
+        }
+      ]
+    },
+    "buttons": {
+      "description": "Button components and variants",
+      "components": [
+        {
+          "name": "Button (Primitive)",
+          "path": "archon-ui-main/src/features/ui/primitives/button.tsx",
+          "usage": "Base button with glassmorphism variants",
+          "variants": ["default", "destructive", "outline", "ghost", "cyan", "purple", "green"],
+          "sizes": ["sm", "md", "lg", "icon"],
+          "example": "See ButtonConfigurator for all variants"
+        }
+      ]
+    },
+    "radix_primitives": {
+      "description": "Radix UI primitives with Archon glassmorphism styling",
+      "components": [
+        {
+          "name": "Tabs",
+          "path": "archon-ui-main/src/features/ui/primitives/tabs.tsx",
+          "usage": "Tab navigation with color variants and neon glow effects",
+          "radix_package": "@radix-ui/react-tabs",
+          "parts": ["Tabs", "TabsList", "TabsTrigger", "TabsContent"],
+          "props": ["defaultValue", "value", "onValueChange", "color (cyan|blue|purple|orange|green|pink)"],
+          "example": "Projects page Docs/Tasks tabs"
+        },
+        {
+          "name": "Select",
+          "path": "archon-ui-main/src/features/ui/primitives/select.tsx",
+          "usage": "Dropdown select with glassmorphism and color variants",
+          "radix_package": "@radix-ui/react-select",
+          "parts": ["Select", "SelectTrigger", "SelectValue", "SelectContent", "SelectItem"],
+          "props": ["value", "onValueChange", "color (purple|blue|green|pink|orange|cyan)"],
+          "example": "Configurators use Select for all dropdowns"
+        },
+        {
+          "name": "Dialog",
+          "path": "archon-ui-main/src/features/ui/primitives/dialog.tsx",
+          "usage": "Modal dialogs with glassmorphism backdrop",
+          "radix_package": "@radix-ui/react-dialog",
+          "parts": ["Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "DialogDescription"],
+          "props": ["open", "onOpenChange"],
+          "example": "NewProjectModal, EditTaskModal"
+        },
+        {
+          "name": "Checkbox",
+          "path": "archon-ui-main/src/features/ui/primitives/checkbox.tsx",
+          "usage": "Styled checkbox with color variants",
+          "radix_package": "@radix-ui/react-checkbox",
+          "parts": ["Checkbox"],
+          "props": ["checked", "onCheckedChange", "color (cyan|purple|blue|green|etc)"],
+          "example": "Settings toggles, NavigationConfigurator"
+        },
+        {
+          "name": "Switch",
+          "path": "archon-ui-main/src/features/ui/primitives/switch.tsx",
+          "usage": "Toggle switch with smooth animations",
+          "radix_package": "@radix-ui/react-switch",
+          "parts": ["Switch"],
+          "props": ["checked", "onCheckedChange"],
+          "example": "Feature toggles in Settings"
+        },
+        {
+          "name": "Tooltip",
+          "path": "archon-ui-main/src/features/ui/primitives/tooltip.tsx",
+          "usage": "Hover tooltips with glassmorphism",
+          "radix_package": "@radix-ui/react-tooltip",
+          "parts": ["TooltipProvider", "Tooltip", "TooltipTrigger", "TooltipContent"],
+          "props": ["delayDuration", "side", "align"],
+          "example": "Navigation sidebar icons"
+        },
+        {
+          "name": "DropdownMenu",
+          "path": "archon-ui-main/src/features/ui/primitives/dropdown-menu.tsx",
+          "usage": "Context menus with glassmorphism",
+          "radix_package": "@radix-ui/react-dropdown-menu",
+          "parts": ["DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem"],
+          "example": "ProjectCardActions, context menus"
+        },
+        {
+          "name": "ToggleGroup",
+          "path": "archon-ui-main/src/features/ui/primitives/toggle-group.tsx",
+          "usage": "Mutually exclusive button group",
+          "radix_package": "@radix-ui/react-toggle-group",
+          "parts": ["ToggleGroup", "ToggleGroupItem"],
+          "props": ["type (single|multiple)", "value", "onValueChange"],
+          "example": "KnowledgeHeader type filter"
+        }
+      ]
+    }
+  }
+}
diff --git a/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx b/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx
new file mode 100644
index 0000000000..da082c8c98
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx
@@ -0,0 +1,51 @@
+import { Layout, Palette } from "lucide-react";
+import { useState } from "react";
+import { PillNavigation, type PillNavigationItem } from "@/features/ui/primitives/pill-navigation";
+import { ThemeToggle } from "../../../components/ui/ThemeToggle";
+import { LayoutsTab } from "../tabs/LayoutsTab";
+import { StyleGuideTab } from "../tabs/StyleGuideTab";
+
+export const StyleGuideView = () => {
+  const [activeTab, setActiveTab] = useState<"style-guide" | "layouts">("style-guide");
+
+  const navigationItems: PillNavigationItem[] = [
+    { id: "style-guide", label: "Style Guide", icon: <Palette className="w-4 h-4" /> },
+    { id: "layouts", label: "Layouts", icon: <Layout className="w-4 h-4" /> },
+  ];
+
+  return (
+    <div className="space-y-12">
+      {/* Header */}
+      <div className="relative">
+        <div className="absolute top-0 right-0">
+          <ThemeToggle accentColor="blue" />
+        </div>
+        <div className="text-center space-y-4">
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">Archon UI Style Guide</h1>
+          <p className="text-gray-600 dark:text-gray-400 text-lg max-w-2xl mx-auto">
+            Design system foundations and layout patterns for building consistent interfaces.
+          </p>
+        </div>
+      </div>
+
+      {/* Tab Navigation - Blue Pill Navigation */}
+      <div className="flex justify-center">
+        <PillNavigation
+          items={navigationItems}
+          activeSection={activeTab}
+          onSectionClick={(id) => setActiveTab(id as typeof activeTab)}
+          colorVariant="blue"
+          showIcons={true}
+          showText={true}
+          hasSubmenus={false}
+        />
+      </div>
+
+      {/* Tab Content */}
+      <div>
+        {activeTab === "style-guide" && <StyleGuideTab />}
+        {activeTab === "layouts" && <LayoutsTab />}
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/index.ts b/archon-ui-main/src/features/style-guide/index.ts
new file mode 100644
index 0000000000..4578ae94c7
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/index.ts
@@ -0,0 +1,5 @@
+export { PillNavigation, type PillNavigationItem } from "@/features/ui/primitives/pill-navigation";
+export { StyleGuideView } from "./components/StyleGuideView";
+export { SideNavigation } from "./shared/SideNavigation";
+export { LayoutsTab } from "./tabs/LayoutsTab";
+export { StyleGuideTab } from "./tabs/StyleGuideTab";
diff --git a/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx b/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx
new file mode 100644
index 0000000000..3f749c0eae
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx
@@ -0,0 +1,241 @@
+import { Code, FileText, Globe, Search } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/features/ui/primitives/button";
+import { Dialog, DialogContent } from "@/features/ui/primitives/dialog";
+import { Input } from "@/features/ui/primitives/input";
+import { cn } from "@/features/ui/primitives/styles";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/features/ui/primitives/tabs";
+
+const MOCK_DOCUMENTS = [
+  {
+    id: "1",
+    title: "[Radix Homepage](https://www.radix-ui.com/)[Made by WorkOS](https://workos.com)",
+    preview: "[Radix Homepage](https://www.radix-ui.com/)[Made by WorkOS]...",
+    content:
+      "[Radix Homepage](https://www.radix-ui.com/)[Made by WorkOS](https://workos.com)\n\n[ThemesThemes](https://www.radix-ui.com/)[PrimitivesPrimitives](https://www.radix-ui.com/primitives)[IconsIcons](https://www.radix-ui.com/icons)[ColorsColors](https://www.radix-ui.com/colors)\n\n[Documentation](https://www.radix-ui.com/themes/docs/overview/getting-started)[Playground](https://www.radix-ui.com/themes/playground)[Blog](https://www.radix-ui.com/blog)[](https://github.com/radix-ui/themes)",
+    sourceType: "Web" as const,
+    category: "Technical" as const,
+    url: "https://www.radix-ui.com/primitives/docs/guides/styling",
+  },
+  {
+    id: "2",
+    title: "Deleted report #34",
+    preview: "7-4d586f394674?&w=64&h=64&dpr=2&q=70&crop=faces...",
+    content: "Detailed report content...",
+    sourceType: "Document" as const,
+    category: "Technical" as const,
+  },
+  {
+    id: "3",
+    title: "Latest updates",
+    preview: "[Radix Homepage](https://www.radix-ui.com/)[Made by WorkOS]...",
+    content: "Latest updates and changes...",
+    sourceType: "Web" as const,
+    category: "Technical" as const,
+    url: "https://www.radix-ui.com",
+  },
+];
+
+const MOCK_CODE = [
+  {
+    id: "1",
+    language: "typescript",
+    summary: "React component example",
+    code: `const Example = () => {\n  return <div>Hello</div>;\n};`,
+  },
+  {
+    id: "2",
+    language: "python",
+    summary: "FastAPI endpoint",
+    code: `@app.get("/api/test")\nasync def test():\n    return {"status": "ok"}`,
+  },
+];
+
+export const DocumentBrowserExample = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-gray-600 dark:text-gray-400">
+        <strong>Use this pattern for:</strong> Document browser with header showing source type pills (Web
+        Page/Document), knowledge type badges (Technical/Business), and StatPills for counts. Uses Radix primitives for
+        all components.
+      </p>
+
+      <Button onClick={() => setOpen(true)}>Open Document Browser Example</Button>
+
+      <DocumentBrowserModal open={open} onOpenChange={setOpen} />
+    </div>
+  );
+};
+
+const DocumentBrowserModal = ({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) => {
+  const [activeTab, setActiveTab] = useState<"documents" | "code">("documents");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedDoc, setSelectedDoc] = useState(MOCK_DOCUMENTS[0]);
+  const [selectedCode, setSelectedCode] = useState(MOCK_CODE[0]);
+
+  const filteredDocuments = MOCK_DOCUMENTS.filter((doc) => doc.title.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const filteredCode = MOCK_CODE.filter((example) => example.summary.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-6xl h-[80vh] flex flex-col p-0">
+        {/* Header - EXACT layout from InspectorHeader.tsx line 31-93 */}
+        <div className="px-6 py-4 border-b border-white/10">
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex-1">
+              <h2 className="text-xl font-semibold text-white mb-2">Radix UI</h2>
+              <div className="flex flex-wrap items-center gap-3">
+                {/* Source Type Badge - exact classes from InspectorHeader line 37-56 */}
+                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
+                  <Globe className="w-3.5 h-3.5" />
+                  Web
+                </span>
+
+                {/* Knowledge Type Badge - exact classes from InspectorHeader line 59-78 */}
+                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
+                  <span>Technical</span>
+                </span>
+
+                {/* URL - exact classes from InspectorHeader line 81-90 */}
+                <a
+                  href="https://www.radix-ui.com/primitives/docs/guides/styling"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-xs text-cyan-400 hover:text-cyan-300 truncate max-w-xs"
+                >
+                  https://www.radix-ui.com/primitives/docs/guides/styling
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Tabs and Content */}
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as typeof activeTab)}
+          className="flex-1 flex flex-col px-6"
+        >
+          <div className="flex justify-start mb-4 mt-6">
+            <TabsList>
+              <TabsTrigger value="documents" color="cyan">
+                <FileText className="w-4 h-4" />
+                Documents
+              </TabsTrigger>
+              <TabsTrigger value="code" color="cyan">
+                <Code className="w-4 h-4" />
+                Code Examples
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* Documents Tab - Left Sidebar + Right Content */}
+          <TabsContent value="documents" className="flex-1 flex">
+            {/* Left Sidebar */}
+            <div className="w-80 flex flex-col pr-4 border-r border-gray-700">
+              <div className="relative mb-4">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Input
+                  placeholder="Search documents..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+
+              <div className="flex-1 overflow-y-auto space-y-2">
+                {filteredDocuments.map((doc) => (
+                  <button
+                    key={doc.id}
+                    type="button"
+                    onClick={() => setSelectedDoc(doc)}
+                    className={cn(
+                      "w-full text-left p-3 rounded-lg transition-colors",
+                      selectedDoc.id === doc.id ? "bg-cyan-500/10 border border-cyan-500/30" : "hover:bg-white/5",
+                    )}
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <FileText className="w-4 h-4 text-cyan-400" />
+                      <span className="font-medium text-sm text-white line-clamp-1">{doc.title}</span>
+                    </div>
+                    <p className="text-xs text-gray-400 line-clamp-2">{doc.preview}</p>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Right Content */}
+            <div className="flex-1 overflow-y-auto pl-6">
+              {/* Header with badges and URL */}
+              <div className="mb-6">
+                <div className="flex items-center gap-2 mb-3">
+                  <span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-cyan-100 text-cyan-700 dark:bg-cyan-500/10 dark:text-cyan-400">
+                    <Globe className="w-3.5 h-3.5" />
+                    {selectedDoc.sourceType}
+                  </span>
+                  <span className="px-2 py-1 text-xs rounded-md font-medium bg-cyan-500/10 text-cyan-600 dark:text-cyan-400">
+                    {selectedDoc.category}
+                  </span>
+                </div>
+                {selectedDoc.url && (
+                  <a
+                    href={selectedDoc.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-cyan-400 hover:text-cyan-300 inline-block mb-4"
+                  >
+                    {selectedDoc.url}
+                  </a>
+                )}
+              </div>
+
+              <div className="prose prose-invert max-w-none">
+                <p className="text-gray-300 whitespace-pre-wrap">{selectedDoc.content}</p>
+              </div>
+            </div>
+          </TabsContent>
+
+          {/* Code Tab - Left Sidebar + Right Content */}
+          <TabsContent value="code" className="flex-1 flex">
+            {/* Left Sidebar */}
+            <div className="w-80 flex flex-col pr-4 border-r border-gray-700">
+              <div className="flex-1 overflow-y-auto space-y-2">
+                {filteredCode.map((code) => (
+                  <button
+                    key={code.id}
+                    type="button"
+                    onClick={() => setSelectedCode(code)}
+                    className={cn(
+                      "w-full text-left p-3 rounded-lg transition-colors",
+                      selectedCode.id === code.id ? "bg-cyan-500/10 border border-cyan-500/30" : "hover:bg-white/5",
+                    )}
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <Code className="w-4 h-4 text-cyan-400" />
+                      <span className="px-2 py-0.5 text-xs bg-cyan-500/20 text-cyan-400 rounded">{code.language}</span>
+                    </div>
+                    <p className="text-xs text-gray-400 line-clamp-2">{code.summary}</p>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Right Content */}
+            <div className="flex-1 overflow-y-auto pl-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-lg font-semibold text-white">{selectedCode.summary}</h3>
+                <span className="px-2 py-1 text-xs bg-cyan-500/20 text-cyan-400 rounded">{selectedCode.language}</span>
+              </div>
+              <pre className="bg-black/30 rounded-lg p-4 overflow-x-auto scrollbar-hide">
+                <code className="text-gray-300 text-sm">{selectedCode.code}</code>
+              </pre>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
new file mode 100644
index 0000000000..0f394cf633
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
@@ -0,0 +1,310 @@
+import { Asterisk, Calendar, Code, FileCode, FileText, Globe, Grid, List, Terminal } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Button } from "@/features/ui/primitives/button";
+import { DataCard, DataCardContent, DataCardFooter, DataCardHeader } from "@/features/ui/primitives/data-card";
+import { GroupedCard } from "@/features/ui/primitives/grouped-card";
+import { Input } from "@/features/ui/primitives/input";
+import { StatPill } from "@/features/ui/primitives/pill";
+import { cn } from "@/features/ui/primitives/styles";
+import { ToggleGroup, ToggleGroupItem } from "@/features/ui/primitives/toggle-group";
+
+const MOCK_KNOWLEDGE_ITEMS = [
+  {
+    id: "1",
+    title: "React Documentation",
+    type: "technical",
+    url: "https://react.dev",
+    date: "2024-01-15",
+    chunks: 145,
+    codeExamples: 23,
+  },
+  {
+    id: "2",
+    title: "Product Requirements",
+    type: "business",
+    url: null,
+    date: "2024-01-20",
+    chunks: 23,
+    codeExamples: 0,
+  },
+  {
+    id: "3",
+    title: "FastAPI Guide",
+    type: "technical",
+    url: "https://fastapi.tiangolo.com",
+    date: "2024-01-18",
+    chunks: 89,
+    codeExamples: 15,
+  },
+  {
+    id: "4",
+    title: "TailwindCSS Docs",
+    type: "technical",
+    url: "https://tailwindcss.com",
+    date: "2024-01-22",
+    chunks: 112,
+    codeExamples: 31,
+  },
+  {
+    id: "5",
+    title: "Marketing Strategy",
+    type: "business",
+    url: null,
+    date: "2024-01-10",
+    chunks: 15,
+    codeExamples: 0,
+  },
+  {
+    id: "6",
+    title: "TypeScript Handbook",
+    type: "technical",
+    url: "https://www.typescriptlang.org/docs",
+    date: "2024-01-25",
+    chunks: 203,
+    codeExamples: 47,
+  },
+];
+
+export const KnowledgeLayoutExample = () => {
+  const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
+  const [typeFilter, setTypeFilter] = useState("all");
+
+  const filteredItems = useMemo(() => {
+    if (typeFilter === "all") return MOCK_KNOWLEDGE_ITEMS;
+    return MOCK_KNOWLEDGE_ITEMS.filter((item) => item.type === typeFilter);
+  }, [typeFilter]);
+
+  return (
+    <div className="space-y-4">
+      {/* Explanation Text */}
+      <p className="text-sm text-gray-600 dark:text-gray-400">
+        <strong>Use this layout for:</strong> Switchable views (grid/table/list), filterable data, search interfaces.
+        Users can toggle between dense (table) and spacious (grid) layouts.
+      </p>
+
+      {/* Header with Controls */}
+      <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+        <Input placeholder="Search knowledge base..." className="max-w-xs" />
+
+        <div className="flex gap-2 items-center">
+          {/* Type Filter */}
+          <ToggleGroup
+            type="single"
+            size="sm"
+            value={typeFilter}
+            onValueChange={(v) => v && setTypeFilter(v)}
+            aria-label="Filter type"
+          >
+            <ToggleGroupItem value="all" aria-label="All" title="All">
+              <Asterisk className="w-4 h-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="technical" aria-label="Technical" title="Technical">
+              <Terminal className="w-4 h-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="business" aria-label="Business" title="Business">
+              <FileCode className="w-4 h-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+
+          {/* View Toggle */}
+          <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setViewMode("grid")}
+              className={cn("px-3", viewMode === "grid" && "bg-cyan-500/20 text-cyan-400")}
+            >
+              <Grid className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setViewMode("table")}
+              className={cn("px-3", viewMode === "table" && "bg-cyan-500/20 text-cyan-400")}
+            >
+              <List className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Conditional View Rendering */}
+      {viewMode === "grid" ? (
+        // Grid View - Responsive columns
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {filteredItems.map((item) => (
+            <KnowledgeCard key={item.id} item={item} />
+          ))}
+        </div>
+      ) : (
+        // Table View - matching TaskView standard pattern
+        <div className="w-full">
+          <div className="overflow-x-auto scrollbar-hide">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Title</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Source</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Chunks</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredItems.map((item, index) => (
+                  <KnowledgeTableRow key={item.id} item={item} index={index} />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Grouped Card Example */}
+      <div className="mt-8 space-y-4">
+        <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Grouped Knowledge Cards</h3>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Multiple related items stacked together with progressive scaling and fading edge lights
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <GroupedCard
+            cards={[
+              { id: "1", title: "React Hooks Guide", edgeColor: "cyan" },
+              { id: "2", title: "React Components", edgeColor: "cyan" },
+              { id: "3", title: "React Patterns", edgeColor: "cyan" },
+            ]}
+            className="h-[280px]"
+          />
+          <GroupedCard
+            cards={[
+              { id: "4", title: "API Documentation", edgeColor: "purple" },
+              { id: "5", title: "API Examples", edgeColor: "purple" },
+            ]}
+            className="h-[280px]"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Grid Card Component - using DataCard primitive
+const KnowledgeCard = ({ item }: { item: (typeof MOCK_KNOWLEDGE_ITEMS)[0] }) => {
+  const isUrl = !!item.url;
+  const isTechnical = item.type === "technical";
+
+  const getEdgeColor = (): "cyan" | "purple" | "blue" | "pink" => {
+    if (isTechnical) return isUrl ? "cyan" : "purple";
+    return isUrl ? "blue" : "pink";
+  };
+
+  return (
+    <DataCard
+      edgePosition="top"
+      edgeColor={getEdgeColor()}
+      blur="md"
+      className="cursor-pointer hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-shadow"
+    >
+      <DataCardHeader>
+        <div className="flex items-center gap-2 mb-3">
+          <div
+            className={cn(
+              "flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium",
+              isUrl
+                ? "bg-cyan-100 text-cyan-700 dark:bg-cyan-500/10 dark:text-cyan-400"
+                : "bg-purple-100 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400",
+            )}
+          >
+            {isUrl ? <Globe className="w-3.5 h-3.5" /> : <FileText className="w-3.5 h-3.5" />}
+            <span>{isUrl ? "Web Page" : "Document"}</span>
+          </div>
+          <span
+            className={cn(
+              "px-2 py-1 text-xs rounded-md font-medium",
+              item.type === "technical"
+                ? "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400"
+                : "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+            )}
+          >
+            {item.type}
+          </span>
+        </div>
+
+        <h4 className="font-medium text-gray-900 dark:text-white mb-2 line-clamp-2">{item.title}</h4>
+
+        {item.url && <div className="text-xs text-gray-600 dark:text-gray-400 truncate">{item.url}</div>}
+      </DataCardHeader>
+
+      <DataCardContent />
+
+      <DataCardFooter>
+        <div className="flex items-center justify-between text-xs">
+          <div className="flex items-center gap-1 text-gray-600 dark:text-gray-400">
+            <Calendar className="w-3 h-3" />
+            <span>{item.date}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <StatPill
+              color="orange"
+              value={item.chunks}
+              icon={<FileText className="w-3.5 h-3.5" />}
+              size="sm"
+              onClick={() => console.log("View documents")}
+              className="cursor-pointer hover:scale-105 transition-transform"
+            />
+            <StatPill
+              color="blue"
+              value={item.codeExamples}
+              icon={<Code className="w-3.5 h-3.5" />}
+              size="sm"
+              onClick={() => console.log("View code examples")}
+              className="cursor-pointer hover:scale-105 transition-transform"
+            />
+          </div>
+        </div>
+      </DataCardFooter>
+    </DataCard>
+  );
+};
+
+// Table Row Component - matching TaskView standard pattern
+const KnowledgeTableRow = ({ item, index }: { item: (typeof MOCK_KNOWLEDGE_ITEMS)[0]; index: number }) => {
+  return (
+    <tr
+      className={cn(
+        "group transition-all duration-200 cursor-pointer",
+        index % 2 === 0 ? "bg-white/50 dark:bg-black/50" : "bg-gray-50/80 dark:bg-gray-900/30",
+        "hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20",
+        "border-b border-gray-200 dark:border-gray-800",
+      )}
+    >
+      <td className="px-4 py-2">
+        <div className="flex items-center gap-2">
+          {item.url ? (
+            <Globe className="w-4 h-4 text-cyan-500 flex-shrink-0" />
+          ) : (
+            <FileText className="w-4 h-4 text-purple-500 flex-shrink-0" />
+          )}
+          <span className="font-medium text-sm text-gray-900 dark:text-white">{item.title}</span>
+        </div>
+      </td>
+      <td className="px-4 py-2">
+        <span
+          className={cn(
+            "px-2 py-1 text-xs rounded-md font-medium inline-block",
+            item.type === "technical"
+              ? "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400"
+              : "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+          )}
+        >
+          {item.type}
+        </span>
+      </td>
+      <td className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 max-w-xs truncate">
+        {item.url || "Uploaded Document"}
+      </td>
+      <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">{item.chunks}</td>
+      <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">{item.date}</td>
+    </tr>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx b/archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx
new file mode 100644
index 0000000000..8ae2fc4111
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx
@@ -0,0 +1,78 @@
+import { ChevronRight } from "lucide-react";
+
+export const NavigationExplanation = () => {
+  return (
+    <div className="space-y-8">
+      {/* Navigation Hierarchy at Top */}
+      <div className="bg-white/80 dark:bg-black/40 border border-gray-300 dark:border-gray-700 rounded-lg p-6">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Navigation Hierarchy</h3>
+        <div className="flex items-center gap-2 text-sm flex-wrap">
+          <span className="px-3 py-1 bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 rounded border border-cyan-400/30 font-medium">
+            Main Nav
+          </span>
+          <ChevronRight className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          <span className="px-3 py-1 bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded border border-purple-400/30 font-medium">
+            Content Area
+          </span>
+          <ChevronRight className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          <span className="px-3 py-1 bg-blue-500/20 text-blue-700 dark:text-blue-400 rounded border border-blue-400/30 font-medium">
+            Page Tabs
+          </span>
+          <ChevronRight className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          <span className="px-3 py-1 bg-green-500/20 text-green-700 dark:text-green-400 rounded border border-green-400/30 font-medium">
+            View Controls
+          </span>
+        </div>
+      </div>
+
+      {/* Wireframe Mockup */}
+      <div className="relative h-[500px]">
+        {/* Main Navigation - Floating Left (Centered Vertically) */}
+        <div className="absolute left-0 top-1/2 -translate-y-1/2 w-[72px] flex flex-col items-center gap-2">
+          <div className="text-xs font-semibold text-cyan-700 dark:text-cyan-400">Main Navigation</div>
+          <div className="w-full h-[250px] bg-cyan-200 dark:bg-cyan-900/30 rounded-lg border-2 border-cyan-500/50 flex items-center justify-center p-2">
+            <span className="text-[10px] text-cyan-700 dark:text-cyan-400 text-center">Floating</span>
+          </div>
+        </div>
+
+        {/* Content Area - Full Width (with left padding for nav) */}
+        <div className="pl-20 h-full flex flex-col gap-2">
+          <div className="text-xs font-semibold text-purple-700 dark:text-purple-400">Content Area</div>
+          <div className="flex-1 bg-purple-100 dark:bg-purple-900/20 rounded-lg border-2 border-purple-500/50 p-4 space-y-3">
+            {/* Page Tabs - Pill Shaped */}
+            <div className="space-y-1">
+              <div className="text-[10px] font-semibold text-blue-700 dark:text-blue-400">
+                Page Navigation (Pill Tabs)
+              </div>
+              <div className="h-10 w-48 mx-auto bg-blue-200 dark:bg-blue-900/30 rounded-full border-2 border-blue-500/50 flex items-center justify-center">
+                <span className="text-xs text-blue-700 dark:text-blue-400">Docs | Tasks</span>
+              </div>
+            </div>
+
+            {/* View Controls */}
+            <div className="flex items-center justify-end gap-2">
+              <div className="text-[10px] font-semibold text-green-700 dark:text-green-400">View Controls</div>
+              <div className="h-8 w-20 bg-green-200 dark:bg-green-900/30 rounded-lg border-2 border-green-500/50 flex items-center justify-center">
+                <span className="text-xs text-green-700 dark:text-green-400">Grid/List</span>
+              </div>
+            </div>
+
+            {/* Content Placeholder */}
+            <div className="flex-1 bg-gray-200 dark:bg-gray-800 rounded-lg border-2 border-gray-400 dark:border-gray-600 flex items-center justify-center">
+              <span className="text-sm text-gray-600 dark:text-gray-400">Page Content</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Key Point */}
+      <div className="bg-orange-100 dark:bg-orange-500/10 border border-orange-400/50 rounded-lg p-4">
+        <p className="text-sm text-gray-800 dark:text-gray-200">
+          <strong className="text-orange-700 dark:text-orange-400">Important:</strong> Main navigation is OUTSIDE the
+          content area (fixed position). All page layouts (including sidebar variants) exist INSIDE the content area and
+          use relative positioning to avoid overlapping with the main nav.
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
new file mode 100644
index 0000000000..d4d4175cfc
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
@@ -0,0 +1,939 @@
+import {
+  Activity,
+  CheckCircle2,
+  Copy,
+  Edit,
+  FileText,
+  LayoutGrid,
+  List,
+  ListTodo,
+  Pin,
+  Search,
+  Table as TableIcon,
+  Tag,
+  Trash2,
+  User,
+} from "lucide-react";
+import { useState } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Button } from "@/features/ui/primitives/button";
+import { DraggableCard } from "@/features/ui/primitives/draggable-card";
+import { Input } from "@/features/ui/primitives/input";
+import { StatPill } from "@/features/ui/primitives/pill";
+import { PillNavigation, type PillNavigationItem } from "@/features/ui/primitives/pill-navigation";
+import { SelectableCard } from "@/features/ui/primitives/selectable-card";
+import { cn } from "@/features/ui/primitives/styles";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/features/ui/primitives/tooltip";
+
+const MOCK_PROJECTS = [
+  {
+    id: "1",
+    title: "Design System Refactor",
+    pinned: true,
+    taskCounts: { todo: 5, doing: 2, review: 1, done: 12 },
+  },
+  {
+    id: "2",
+    title: "API Integration Layer",
+    pinned: false,
+    taskCounts: { todo: 3, doing: 1, review: 0, done: 8 },
+  },
+  {
+    id: "3",
+    title: "Mobile App Development",
+    pinned: false,
+    taskCounts: { todo: 8, doing: 0, review: 0, done: 0 },
+  },
+  {
+    id: "4",
+    title: "Documentation Updates",
+    pinned: false,
+    taskCounts: { todo: 2, doing: 1, review: 2, done: 15 },
+  },
+];
+
+const MOCK_TASKS = [
+  {
+    id: "1",
+    title: "Update color palette",
+    status: "todo" as const,
+    assignee: "User",
+    feature: "Design",
+    priority: "high" as const,
+  },
+  {
+    id: "2",
+    title: "Refactor button component",
+    status: "todo" as const,
+    assignee: "AI",
+    feature: "Components",
+    priority: "medium" as const,
+  },
+  {
+    id: "3",
+    title: "Implement glassmorphism effects",
+    status: "doing" as const,
+    assignee: "User",
+    feature: "Styling",
+    priority: "high" as const,
+  },
+  {
+    id: "4",
+    title: "Add documentation",
+    status: "review" as const,
+    assignee: "User",
+    feature: "Docs",
+    priority: "low" as const,
+  },
+  {
+    id: "5",
+    title: "Setup project structure",
+    status: "done" as const,
+    assignee: "AI",
+    feature: "Setup",
+    priority: "high" as const,
+  },
+  {
+    id: "6",
+    title: "Create initial components",
+    status: "done" as const,
+    assignee: "User",
+    feature: "Components",
+    priority: "medium" as const,
+  },
+];
+
+const MOCK_DOCUMENTS = [
+  { id: "1", title: "Project Overview", type: "spec" as const },
+  { id: "2", title: "API Documentation", type: "api" as const },
+  { id: "3", title: "Design Notes", type: "note" as const },
+];
+
+export const ProjectsLayoutExample = () => {
+  const [selectedId, setSelectedId] = useState("1");
+  const [activeTab, setActiveTab] = useState<"docs" | "tasks">("tasks");
+  const [viewMode, setViewMode] = useState<"board" | "table">("board");
+  const [selectedDoc, setSelectedDoc] = useState(MOCK_DOCUMENTS[0]);
+  const [layoutMode, setLayoutMode] = useState<"horizontal" | "sidebar">("horizontal");
+  const [sidebarExpanded, setSidebarExpanded] = useState(true);
+
+  const selectedProject = MOCK_PROJECTS.find((p) => p.id === selectedId);
+
+  const tabItems: PillNavigationItem[] = [
+    { id: "docs", label: "Docs", icon: <FileText className="w-4 h-4" /> },
+    { id: "tasks", label: "Tasks", icon: <ListTodo className="w-4 h-4" /> },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Layout Mode Toggle */}
+      <div className="flex justify-end">
+        <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setLayoutMode("horizontal")}
+            className={cn("px-3", layoutMode === "horizontal" && "bg-purple-500/20 text-purple-400")}
+            aria-label="Switch to horizontal layout"
+            aria-pressed={layoutMode === "horizontal"}
+          >
+            <LayoutGrid className="w-4 h-4" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setLayoutMode("sidebar")}
+            className={cn("px-3", layoutMode === "sidebar" && "bg-purple-500/20 text-purple-400")}
+            aria-label="Switch to sidebar layout"
+            aria-pressed={layoutMode === "sidebar"}
+          >
+            <List className="w-4 h-4" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+
+      {layoutMode === "horizontal" ? (
+        <>
+          {/* Horizontal Project Cards - ONLY cards scroll, not whole page */}
+          <div className="w-full max-w-full">
+            <div className="overflow-x-auto overflow-y-visible py-8 -mx-6 px-6 scrollbar-hide">
+              <div className="flex gap-4 min-w-max">
+                {MOCK_PROJECTS.map((project) => (
+                  <ProjectCardExample
+                    key={project.id}
+                    project={project}
+                    isSelected={selectedId === project.id}
+                    onSelect={() => setSelectedId(project.id)}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Orange Pill Navigation centered, View Toggle on right */}
+          <div className="flex items-center justify-between">
+            <div className="flex-1" />
+            <PillNavigation
+              items={tabItems}
+              activeSection={activeTab}
+              onSectionClick={(id) => setActiveTab(id as typeof activeTab)}
+              colorVariant="orange"
+              size="small"
+              showIcons={true}
+              showText={true}
+              hasSubmenus={false}
+            />
+            <div className="flex-1 flex justify-end">
+              {/* View Toggle aligned right */}
+              {activeTab === "tasks" && (
+                <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setViewMode("board")}
+                    className={cn("px-3", viewMode === "board" && "bg-cyan-500/20 text-cyan-400")}
+                    aria-label="Board view"
+                    aria-pressed={viewMode === "board"}
+                  >
+                    <LayoutGrid className="w-4 h-4" aria-hidden="true" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setViewMode("table")}
+                    className={cn("px-3", viewMode === "table" && "bg-cyan-500/20 text-cyan-400")}
+                    aria-label="Table view"
+                    aria-pressed={viewMode === "table"}
+                  >
+                    <TableIcon className="w-4 h-4" aria-hidden="true" />
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Tab Content - NO extra margin */}
+          <div>
+            {activeTab === "tasks" && (viewMode === "board" ? <KanbanBoardView /> : <TaskTableView />)}
+            {activeTab === "docs" && <EmbeddedDocumentBrowser doc={selectedDoc} onDocSelect={setSelectedDoc} />}
+          </div>
+        </>
+      ) : (
+        /* Sidebar Mode */
+        <div className="flex gap-6">
+          {/* Left Sidebar - Collapsible Project List */}
+          {sidebarExpanded && (
+            <div className="w-64 flex-shrink-0 space-y-2">
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-sm font-semibold text-gray-800 dark:text-white">Projects</h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setSidebarExpanded(false)}
+                  className="px-2"
+                  aria-label="Collapse sidebar"
+                  aria-expanded={sidebarExpanded}
+                >
+                  <List className="w-3 h-3" aria-hidden="true" />
+                </Button>
+              </div>
+              <div className="space-y-2">
+                {MOCK_PROJECTS.map((project) => (
+                  <SidebarProjectCard
+                    key={project.id}
+                    project={project}
+                    isSelected={selectedId === project.id}
+                    onSelect={() => setSelectedId(project.id)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Main Content Area */}
+          <div className="flex-1">
+            {/* Header with project name, tabs, and view toggle inline */}
+            <div className="flex items-center gap-4 mb-4">
+              {!sidebarExpanded && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setSidebarExpanded(true)}
+                  className="px-2 flex-shrink-0"
+                >
+                  <List className="w-3 h-3 mr-1" />
+                  <span className="text-sm font-medium">{selectedProject?.title}</span>
+                </Button>
+              )}
+
+              {/* Orange Pill Navigation - ALWAYS CENTERED */}
+              <div className="flex-1 flex justify-center">
+                <PillNavigation
+                  items={tabItems}
+                  activeSection={activeTab}
+                  onSectionClick={(id) => setActiveTab(id as typeof activeTab)}
+                  colorVariant="orange"
+                  size="small"
+                  showIcons={true}
+                  showText={true}
+                  hasSubmenus={false}
+                />
+              </div>
+
+              {/* View Toggle - INLINE to right of pill nav */}
+              {activeTab === "tasks" && (
+                <div className="flex gap-1 p-1 bg-black/30 rounded-lg border border-white/10 flex-shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setViewMode("board")}
+                    className={cn("px-3", viewMode === "board" && "bg-cyan-500/20 text-cyan-400")}
+                    aria-label="Board view"
+                    aria-pressed={viewMode === "board"}
+                  >
+                    <LayoutGrid className="w-4 h-4" aria-hidden="true" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setViewMode("table")}
+                    className={cn("px-3", viewMode === "table" && "bg-cyan-500/20 text-cyan-400")}
+                    aria-label="Table view"
+                    aria-pressed={viewMode === "table"}
+                  >
+                    <TableIcon className="w-4 h-4" aria-hidden="true" />
+                  </Button>
+                </div>
+              )}
+            </div>
+
+            {/* Tab Content - Full Width, NO extra spacing */}
+            <div>
+              {activeTab === "tasks" && (viewMode === "board" ? <KanbanBoardView /> : <TaskTableView />)}
+              {activeTab === "docs" && <EmbeddedDocumentBrowser doc={selectedDoc} onDocSelect={setSelectedDoc} />}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Sidebar Project Card - mini card style with StatPills
+const SidebarProjectCard = ({
+  project,
+  isSelected,
+  onSelect,
+}: {
+  project: (typeof MOCK_PROJECTS)[0];
+  isSelected: boolean;
+  onSelect: () => void;
+}) => {
+  const getBackgroundClass = () => {
+    if (project.pinned)
+      return "bg-gradient-to-b from-purple-100/80 via-purple-50/30 to-purple-100/50 dark:from-purple-900/30 dark:via-purple-900/20 dark:to-purple-900/10";
+    if (isSelected)
+      return "bg-gradient-to-b from-white/70 via-purple-50/20 to-white/50 dark:from-white/5 dark:via-purple-900/5 dark:to-black/20";
+    return "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30";
+  };
+
+  return (
+    <SelectableCard
+      isSelected={isSelected}
+      isPinned={project.pinned}
+      showAuroraGlow={isSelected}
+      onSelect={onSelect}
+      size="none"
+      blur="md"
+      className={cn("p-2", getBackgroundClass())}
+    >
+      <div className="space-y-2">
+        {/* Title */}
+        <div className="flex items-center justify-between">
+          <h4
+            className={cn(
+              "font-medium text-sm line-clamp-1",
+              isSelected ? "text-purple-700 dark:text-purple-300" : "text-gray-700 dark:text-gray-300",
+            )}
+          >
+            {project.title}
+          </h4>
+          {project.pinned && (
+            <div
+              className="flex items-center gap-1 px-1.5 py-0.5 bg-purple-500 text-white text-[9px] font-bold rounded-full"
+              aria-label="Pinned"
+            >
+              <Pin className="w-2.5 h-2.5" aria-hidden="true" />
+            </div>
+          )}
+        </div>
+
+        {/* Status Pills - horizontal layout with icons */}
+        <div className="flex items-center gap-1.5">
+          <StatPill color="pink" value={project.taskCounts.todo} size="sm" icon={<ListTodo className="w-3 h-3" />} />
+          <StatPill
+            color="blue"
+            value={project.taskCounts.doing + project.taskCounts.review}
+            size="sm"
+            icon={<Activity className="w-3 h-3" />}
+          />
+          <StatPill
+            color="green"
+            value={project.taskCounts.done}
+            size="sm"
+            icon={<CheckCircle2 className="w-3 h-3" />}
+          />
+        </div>
+      </div>
+    </SelectableCard>
+  );
+};
+
+// Project Card using SelectableCard primitive
+const ProjectCardExample = ({
+  project,
+  isSelected,
+  onSelect,
+}: {
+  project: (typeof MOCK_PROJECTS)[0];
+  isSelected: boolean;
+  onSelect: () => void;
+}) => {
+  // Custom gradients for pinned vs selected vs default
+  const getBackgroundClass = () => {
+    if (project.pinned)
+      return "bg-gradient-to-b from-purple-100/80 via-purple-50/30 to-purple-100/50 dark:from-purple-900/30 dark:via-purple-900/20 dark:to-purple-900/10";
+    if (isSelected)
+      return "bg-gradient-to-b from-white/70 via-purple-50/20 to-white/50 dark:from-white/5 dark:via-purple-900/5 dark:to-black/20";
+    return "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30";
+  };
+
+  return (
+    <SelectableCard
+      isSelected={isSelected}
+      isPinned={project.pinned}
+      showAuroraGlow={isSelected}
+      onSelect={onSelect}
+      size="none"
+      blur="xl"
+      className={cn("w-72 min-h-[180px] flex flex-col shrink-0", getBackgroundClass())}
+    >
+      {/* Main content */}
+      <div className="flex-1 p-3 pb-2">
+        {/* Title */}
+        <div className="flex flex-col items-center justify-center mb-4 min-h-[48px]">
+          <h3
+            className={cn(
+              "font-medium text-center leading-tight line-clamp-2 transition-all duration-300",
+              isSelected
+                ? "text-gray-900 dark:text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.8)]"
+                : project.pinned
+                  ? "text-purple-700 dark:text-purple-300"
+                  : "text-gray-500 dark:text-gray-400",
+            )}
+          >
+            {project.title}
+          </h3>
+        </div>
+
+        {/* Task count pills */}
+        <div className="flex items-stretch gap-2 w-full">
+          {/* Todo pill */}
+          <div className="relative flex-1">
+            <div
+              className={cn(
+                "absolute inset-0 bg-pink-600 rounded-full blur-md",
+                isSelected ? "opacity-30 dark:opacity-75" : "opacity-0",
+              )}
+            />
+            <div
+              className={cn(
+                "relative flex items-center h-12 backdrop-blur-sm rounded-full border shadow-sm transition-all duration-300",
+                isSelected
+                  ? "bg-white/70 dark:bg-zinc-900/90 border-pink-300 dark:border-pink-500/50 dark:shadow-[0_0_10px_rgba(236,72,153,0.5)]"
+                  : "bg-white/30 dark:bg-zinc-900/30 border-gray-300/50 dark:border-gray-700/50",
+              )}
+            >
+              <div className="flex flex-col items-center justify-center px-2 min-w-[40px]">
+                <ListTodo
+                  className={cn(
+                    "w-4 h-4",
+                    isSelected ? "text-pink-600 dark:text-pink-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "text-[8px] font-medium",
+                    isSelected ? "text-pink-600 dark:text-pink-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  ToDo
+                </span>
+              </div>
+              <div className="flex-1 flex items-center justify-center border-l border-pink-300 dark:border-pink-500/30">
+                <span
+                  className={cn(
+                    "text-lg font-bold",
+                    isSelected ? "text-pink-600 dark:text-pink-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  {project.taskCounts.todo}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Doing pill */}
+          <div className="relative flex-1">
+            <div
+              className={cn(
+                "absolute inset-0 bg-blue-600 rounded-full blur-md",
+                isSelected ? "opacity-30 dark:opacity-75" : "opacity-0",
+              )}
+            />
+            <div
+              className={cn(
+                "relative flex items-center h-12 backdrop-blur-sm rounded-full border shadow-sm transition-all duration-300",
+                isSelected
+                  ? "bg-white/70 dark:bg-zinc-900/90 border-blue-300 dark:border-blue-500/50 dark:shadow-[0_0_10px_rgba(59,130,246,0.5)]"
+                  : "bg-white/30 dark:bg-zinc-900/30 border-gray-300/50 dark:border-gray-700/50",
+              )}
+            >
+              <div className="flex flex-col items-center justify-center px-2 min-w-[40px]">
+                <Activity
+                  className={cn(
+                    "w-4 h-4",
+                    isSelected ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "text-[8px] font-medium",
+                    isSelected ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  Doing
+                </span>
+              </div>
+              <div className="flex-1 flex items-center justify-center border-l border-blue-300 dark:border-blue-500/30">
+                <span
+                  className={cn(
+                    "text-lg font-bold",
+                    isSelected ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  {project.taskCounts.doing + project.taskCounts.review}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Done pill */}
+          <div className="relative flex-1">
+            <div
+              className={cn(
+                "absolute inset-0 bg-green-600 rounded-full blur-md",
+                isSelected ? "opacity-30 dark:opacity-75" : "opacity-0",
+              )}
+            />
+            <div
+              className={cn(
+                "relative flex items-center h-12 backdrop-blur-sm rounded-full border shadow-sm transition-all duration-300",
+                isSelected
+                  ? "bg-white/70 dark:bg-zinc-900/90 border-green-300 dark:border-green-500/50 dark:shadow-[0_0_10px_rgba(34,197,94,0.5)]"
+                  : "bg-white/30 dark:bg-zinc-900/30 border-gray-300/50 dark:border-gray-700/50",
+              )}
+            >
+              <div className="flex flex-col items-center justify-center px-2 min-w-[40px]">
+                <CheckCircle2
+                  className={cn(
+                    "w-4 h-4",
+                    isSelected ? "text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "text-[8px] font-medium",
+                    isSelected ? "text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  Done
+                </span>
+              </div>
+              <div className="flex-1 flex items-center justify-center border-l border-green-300 dark:border-green-500/30">
+                <span
+                  className={cn(
+                    "text-lg font-bold",
+                    isSelected ? "text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-600",
+                  )}
+                >
+                  {project.taskCounts.done}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom bar with action icons */}
+      <div className="flex items-center justify-between px-3 py-2 mt-auto border-t border-gray-200/30 dark:border-gray-700/20">
+        {/* Pinned indicator with icon */}
+        {project.pinned ? (
+          <div className="flex items-center gap-1 px-2 py-0.5 bg-purple-500 text-white text-[10px] font-bold rounded-full shadow-lg shadow-purple-500/30">
+            <Pin className="w-2.5 h-2.5" />
+            <span>PINNED</span>
+          </div>
+        ) : (
+          <div />
+        )}
+
+        {/* Action icons */}
+        <div className="flex items-center gap-2">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={(e) => e.stopPropagation()}
+                  className="p-1.5 rounded-md hover:bg-red-500/10 text-gray-500 hover:text-red-500 transition-colors"
+                  aria-label="Delete project"
+                >
+                  <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Delete project</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={(e) => e.stopPropagation()}
+                  className={cn(
+                    "p-1.5 rounded-md transition-colors",
+                    project.pinned
+                      ? "bg-purple-500/10 text-purple-500"
+                      : "hover:bg-purple-500/10 text-gray-500 hover:text-purple-500",
+                  )}
+                  aria-label={project.pinned ? "Unpin project" : "Pin project"}
+                >
+                  <Pin className="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{project.pinned ? "Unpin project" : "Pin project"}</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={(e) => e.stopPropagation()}
+                  className="p-1.5 rounded-md hover:bg-cyan-500/10 text-gray-500 hover:text-cyan-500 transition-colors"
+                  aria-label="Duplicate project"
+                >
+                  <Copy className="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Duplicate project</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    </SelectableCard>
+  );
+};
+
+// Kanban Board - NO BACKGROUNDS, wrapped in DndProvider
+const KanbanBoardView = () => {
+  const columns = [
+    { status: "todo" as const, title: "Todo", color: "text-pink-500", glow: "bg-pink-500" },
+    { status: "doing" as const, title: "Doing", color: "text-blue-500", glow: "bg-blue-500" },
+    { status: "review" as const, title: "Review", color: "text-purple-500", glow: "bg-purple-500" },
+    { status: "done" as const, title: "Done", color: "text-green-500", glow: "bg-green-500" },
+  ];
+
+  const getTasksByStatus = (status: (typeof columns)[0]["status"]) => {
+    return MOCK_TASKS.filter((t) => t.status === status);
+  };
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 min-h-[500px]">
+        {columns.map(({ status, title, color, glow }) => (
+          <div key={status} className="flex flex-col">
+            {/* Column Header - transparent */}
+            <div className="text-center py-3 relative">
+              <h3 className={cn("font-mono text-sm font-medium", color)}>{title}</h3>
+              <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">{getTasksByStatus(status).length}</div>
+              <div
+                className={cn("absolute bottom-0 left-[15%] right-[15%] w-[70%] mx-auto h-[1px]", glow, "shadow-md")}
+              />
+            </div>
+
+            {/* Tasks */}
+            <div className="flex-1 p-2 space-y-2">
+              {getTasksByStatus(status).map((task, idx) => (
+                <TaskCardExample key={task.id} task={task} index={idx} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </DndProvider>
+  );
+};
+
+// Task Card using DraggableCard primitive with actions
+const TaskCardExample = ({ task, index }: { task: (typeof MOCK_TASKS)[0]; index: number }) => {
+  const getPriorityColor = (priority: string) => {
+    if (priority === "high") return { color: "bg-red-500", glow: "shadow-[0_0_10px_rgba(239,68,68,0.3)]" };
+    if (priority === "medium") return { color: "bg-yellow-500", glow: "shadow-[0_0_10px_rgba(234,179,8,0.3)]" };
+    return { color: "bg-green-500", glow: "shadow-[0_0_10px_rgba(34,197,94,0.3)]" };
+  };
+
+  const priorityStyle = getPriorityColor(task.priority);
+
+  return (
+    <div className="relative group">
+      <DraggableCard itemType="task" itemId={task.id} index={index} size="none" className="min-h-[140px]">
+        {/* Priority indicator on left edge */}
+        <div
+          className={cn(
+            "absolute left-0 top-0 bottom-0 w-[3px] rounded-l-lg opacity-80 group-hover:w-[4px] group-hover:opacity-100 transition-all duration-300",
+            priorityStyle.color,
+            priorityStyle.glow,
+          )}
+        />
+
+        {/* Content */}
+        <div className="flex flex-col h-full p-3">
+          {/* Header with feature tag and actions */}
+          <div className="flex items-center gap-2 mb-2 pl-1.5">
+            {task.feature && (
+              <div className="px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1 backdrop-blur-md bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 shadow-sm">
+                <Tag className="w-3 h-3" />
+                {task.feature}
+              </div>
+            )}
+
+            {/* Action buttons - matching TaskCard.tsx pattern */}
+            <div className="ml-auto flex items-center gap-1">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={(e) => e.stopPropagation()}
+                      className="p-1 rounded hover:bg-cyan-500/10 text-gray-500 hover:text-cyan-500 transition-colors"
+                      aria-label="Edit task"
+                    >
+                      <Edit className="w-3 h-3" aria-hidden="true" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Edit task</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={(e) => e.stopPropagation()}
+                      className="p-1 rounded hover:bg-red-500/10 text-gray-500 hover:text-red-500 transition-colors"
+                      aria-label="Delete task"
+                    >
+                      <Trash2 className="w-3 h-3" aria-hidden="true" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Delete task</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+          </div>
+
+          {/* Title */}
+          <h4 className="text-xs font-medium text-gray-900 dark:text-white mb-2 pl-1.5 line-clamp-2">{task.title}</h4>
+
+          {/* Spacer */}
+          <div className="flex-1" />
+
+          {/* Footer with assignee and priority */}
+          <div className="flex items-center justify-between mt-auto pt-2 pl-1.5 pr-3">
+            {/* Assignee card-style - matching TaskCard.tsx */}
+            <div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-white/50 dark:bg-black/30 border border-gray-200 dark:border-gray-700 text-xs">
+              <User className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+              <span className="text-gray-700 dark:text-gray-300">{task.assignee}</span>
+            </div>
+
+            {/* Priority dot */}
+            <div className={cn("w-2 h-2 rounded-full", priorityStyle.color)} />
+          </div>
+        </div>
+      </DraggableCard>
+    </div>
+  );
+};
+
+// Task Table View - matching real TableView
+const TaskTableView = () => {
+  return (
+    <div className="w-full">
+      <div className="overflow-x-auto scrollbar-hide">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
+              <th className="w-1" />
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Title</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300 w-32">Status</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300 w-40">Feature</th>
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300 w-36">
+                Assignee
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {MOCK_TASKS.map((task, index) => {
+              const getPriorityColor = (priority: string) => {
+                if (priority === "high") return { color: "bg-red-500", glow: "shadow-[0_0_10px_rgba(239,68,68,0.3)]" };
+                if (priority === "medium")
+                  return { color: "bg-yellow-500", glow: "shadow-[0_0_10px_rgba(234,179,8,0.3)]" };
+                return { color: "bg-green-500", glow: "shadow-[0_0_10px_rgba(34,197,94,0.3)]" };
+              };
+
+              const priorityStyle = getPriorityColor(task.priority);
+
+              return (
+                <tr
+                  key={task.id}
+                  className={cn(
+                    "group transition-all duration-200",
+                    index % 2 === 0 ? "bg-white/50 dark:bg-black/50" : "bg-gray-50/80 dark:bg-gray-900/30",
+                    "hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20",
+                    "border-b border-gray-200 dark:border-gray-800",
+                  )}
+                >
+                  {/* Priority indicator */}
+                  <td className="w-1 p-0">
+                    <div className={cn("w-1 h-full", priorityStyle.color, priorityStyle.glow)} />
+                  </td>
+
+                  {/* Title */}
+                  <td className="px-4 py-2">
+                    <span className="font-medium text-sm text-gray-900 dark:text-white">{task.title}</span>
+                  </td>
+
+                  {/* Status */}
+                  <td className="px-4 py-2 w-32">
+                    <span
+                      className={cn(
+                        "px-2 py-1 text-xs rounded-md font-medium inline-block",
+                        task.status === "todo" && "bg-pink-500/10 text-pink-600 dark:text-pink-400",
+                        task.status === "doing" && "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+                        task.status === "review" && "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+                        task.status === "done" && "bg-green-500/10 text-green-600 dark:text-green-400",
+                      )}
+                    >
+                      {task.status}
+                    </span>
+                  </td>
+
+                  {/* Feature */}
+                  <td className="px-4 py-2 w-40">
+                    <div className="flex items-center gap-1">
+                      {task.feature && (
+                        <>
+                          <Tag className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+                          <span className="text-sm text-gray-700 dark:text-gray-300">{task.feature}</span>
+                        </>
+                      )}
+                    </div>
+                  </td>
+
+                  {/* Assignee - card style like real component */}
+                  <td className="px-4 py-2 w-36">
+                    <div className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-white/70 dark:bg-black/40 border border-gray-300 dark:border-gray-600 backdrop-blur-sm">
+                      <User className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+                      <span className="text-xs text-gray-700 dark:text-gray-300">{task.assignee}</span>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+// Embedded Document Browser
+const EmbeddedDocumentBrowser = ({
+  doc,
+  onDocSelect,
+}: {
+  doc: (typeof MOCK_DOCUMENTS)[0];
+  onDocSelect: (doc: (typeof MOCK_DOCUMENTS)[0]) => void;
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredDocs = MOCK_DOCUMENTS.filter((d) => d.title.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <div className="flex h-[600px] gap-6">
+      {/* Left Sidebar */}
+      <div className="w-64 flex flex-col space-y-4">
+        <div className="flex items-center gap-2">
+          <FileText className="w-5 h-5 text-gray-700 dark:text-gray-300" />
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-white">Documents</h3>
+        </div>
+
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+          <Input
+            type="text"
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+            aria-label="Search documents"
+          />
+        </div>
+
+        <p className="text-xs text-gray-500 dark:text-gray-400">{MOCK_DOCUMENTS.length} documents</p>
+
+        <div className="flex-1 space-y-1">
+          {filteredDocs.map((d) => {
+            const isActive = d.id === doc.id;
+            return (
+              <button
+                key={d.id}
+                type="button"
+                onClick={() => onDocSelect(d)}
+                className={cn(
+                  "w-full text-left px-3 py-2 rounded-lg transition-all duration-200",
+                  isActive
+                    ? "bg-cyan-500/10 dark:bg-cyan-400/10 text-cyan-700 dark:text-cyan-300 border-l-2 border-cyan-500"
+                    : "text-gray-600 dark:text-gray-400 hover:bg-white/5 dark:hover:bg-white/5 border-l-2 border-transparent",
+                )}
+              >
+                <div className="font-medium text-sm line-clamp-1">{d.title}</div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{d.type}</div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Right Content */}
+      <div className="flex-1 overflow-y-auto">
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">{doc.title}</h2>
+        <div className="text-gray-600 dark:text-gray-400 space-y-4">
+          <p>
+            Document type:{" "}
+            <span className="px-2 py-1 text-xs bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded">
+              {doc.type}
+            </span>
+          </p>
+          <p>This area shows the full document content with rich formatting and embedded media.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
new file mode 100644
index 0000000000..5e0120197c
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
@@ -0,0 +1,208 @@
+import { Code, Database, FileText, Flame, Globe, Key, Monitor, Moon, Palette, Settings } from "lucide-react";
+import { useId } from "react";
+import { CollapsibleSettingsCard } from "@/components/ui/CollapsibleSettingsCard";
+import { Card } from "@/features/ui/primitives/card";
+import { Input } from "@/features/ui/primitives/input";
+import { Label } from "@/features/ui/primitives/label";
+import { Switch } from "@/features/ui/primitives/switch";
+
+export const SettingsLayoutExample = () => {
+  const openaiKeyId = useId();
+  const googleKeyId = useId();
+  const dbUrlId = useId();
+  const autoBackupId = useId();
+  const extractCodeId = useId();
+  const maxExamplesId = useId();
+  const matchCountId = useId();
+  const rerankId = useId();
+  const maxDepthId = useId();
+  const followLinksId = useId();
+
+  return (
+    <div className="space-y-4">
+      {/* Explanation Text */}
+      <p className="text-sm text-gray-600 dark:text-gray-400">
+        <strong>Use this layout for:</strong> Settings pages, dashboard widgets, grouped configuration sections.
+        Two-column responsive grid with collapsible cards.
+      </p>
+
+      {/* Bento Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Features Section */}
+        <CollapsibleSettingsCard title="Features" icon={Palette} accentColor="purple" defaultExpanded={true}>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {/* Dark Mode */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-purple-500/10 to-purple-600/5 backdrop-blur-sm border border-purple-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Dark Mode</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Switch between themes</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" defaultChecked color="purple" iconOn={<Moon className="w-5 h-5" />} />
+              </div>
+            </div>
+
+            {/* Projects */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-blue-500/10 to-blue-600/5 backdrop-blur-sm border border-blue-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Projects</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Enable Projects functionality</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" defaultChecked color="blue" icon={<FileText className="w-5 h-5" />} />
+              </div>
+            </div>
+
+            {/* Style Guide */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-cyan-500/10 to-cyan-600/5 backdrop-blur-sm border border-cyan-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Style Guide</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Show UI components</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" defaultChecked color="cyan" icon={<Palette className="w-5 h-5" />} />
+              </div>
+            </div>
+
+            {/* Pydantic Logfire */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-orange-500/10 to-orange-600/5 backdrop-blur-sm border border-orange-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Pydantic Logfire</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Logging platform</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" color="orange" icon={<Flame className="w-5 h-5" />} />
+              </div>
+            </div>
+
+            {/* Disconnect Screen */}
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-green-500/10 to-green-600/5 backdrop-blur-sm border border-green-500/20 shadow-lg">
+              <div className="flex-1 min-w-0">
+                <p className="font-medium text-gray-800 dark:text-white text-sm">Disconnect Screen</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Show when disconnected</p>
+              </div>
+              <div className="flex-shrink-0">
+                <Switch size="lg" defaultChecked color="green" icon={<Monitor className="w-5 h-5" />} />
+              </div>
+            </div>
+          </div>
+        </CollapsibleSettingsCard>
+
+        {/* API Keys Section */}
+        <CollapsibleSettingsCard title="API Keys" icon={Key} accentColor="pink" defaultExpanded={true}>
+          <Card edgePosition="top" edgeColor="pink">
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+              Manage your API keys and credentials for various services used by Archon.
+            </p>
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor={openaiKeyId} className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                  OPENAI_API_KEY
+                </Label>
+                <Input
+                  id={openaiKeyId}
+                  type="password"
+                  placeholder="Enter new value (encrypted)"
+                  className="mt-2"
+                  defaultValue="••••••••••••••••••"
+                />
+              </div>
+              <div>
+                <Label htmlFor={googleKeyId} className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                  GOOGLE_API_KEY
+                </Label>
+                <Input
+                  id={googleKeyId}
+                  type="password"
+                  placeholder="Enter new value (encrypted)"
+                  className="mt-2"
+                  defaultValue="••••••••••••••••"
+                />
+              </div>
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+
+        {/* Database Settings */}
+        <CollapsibleSettingsCard title="Database Settings" icon={Database} accentColor="blue" defaultExpanded={false}>
+          <Card edgePosition="top" edgeColor="blue">
+            <div>
+              <Label htmlFor={dbUrlId} className="text-sm font-medium">
+                Database URL
+              </Label>
+              <Input
+                id={dbUrlId}
+                placeholder="postgresql://..."
+                className="mt-2"
+                defaultValue="postgresql://localhost:5432/archon"
+              />
+            </div>
+            <div className="flex items-center justify-between mt-4">
+              <Label htmlFor={autoBackupId} className="text-sm font-medium">
+                Auto Backup
+              </Label>
+              <Switch id={autoBackupId} />
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+
+        {/* Code Extraction */}
+        <CollapsibleSettingsCard title="Code Extraction" icon={Code} accentColor="green" defaultExpanded={false}>
+          <Card edgePosition="top" edgeColor="green">
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+              Configure how code blocks are extracted from crawled documents.
+            </p>
+            <div className="flex items-center justify-between mb-4">
+              <Label htmlFor={extractCodeId} className="text-sm font-medium">
+                Extract Code Examples
+              </Label>
+              <Switch id={extractCodeId} defaultChecked />
+            </div>
+            <div>
+              <Label htmlFor={maxExamplesId} className="text-sm font-medium">
+                Max Examples per Source
+              </Label>
+              <Input id={maxExamplesId} type="number" placeholder="50" className="mt-2" defaultValue="50" />
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+
+        {/* RAG Configuration */}
+        <CollapsibleSettingsCard title="RAG Configuration" icon={Settings} accentColor="orange" defaultExpanded={true}>
+          <Card edgePosition="top" edgeColor="orange">
+            <div>
+              <Label htmlFor={matchCountId} className="text-sm font-medium">
+                Match Count
+              </Label>
+              <Input id={matchCountId} type="number" placeholder="5" className="mt-2" defaultValue="5" />
+            </div>
+            <div className="flex items-center justify-between mt-4">
+              <Label htmlFor={rerankId} className="text-sm font-medium">
+                Enable Reranking
+              </Label>
+              <Switch id={rerankId} defaultChecked />
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+
+        {/* Crawling Settings */}
+        <CollapsibleSettingsCard title="Crawling Settings" icon={Globe} accentColor="pink" defaultExpanded={false}>
+          <Card edgePosition="top" edgeColor="pink">
+            <div>
+              <Label htmlFor={maxDepthId} className="text-sm font-medium">
+                Max Crawl Depth
+              </Label>
+              <Input id={maxDepthId} type="number" placeholder="3" className="mt-2" defaultValue="3" />
+            </div>
+            <div className="flex items-center justify-between mt-4">
+              <Label htmlFor={followLinksId} className="text-sm font-medium">
+                Follow External Links
+              </Label>
+              <Switch id={followLinksId} />
+            </div>
+          </Card>
+        </CollapsibleSettingsCard>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx b/archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx
new file mode 100644
index 0000000000..d838678efe
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx
@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { cn } from "@/features/ui/primitives/styles";
+
+export interface SideNavigationSection {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+interface SideNavigationProps {
+  sections: SideNavigationSection[];
+  activeSection: string;
+  onSectionClick: (sectionId: string) => void;
+}
+
+export const SideNavigation = ({ sections, activeSection, onSectionClick }: SideNavigationProps) => {
+  return (
+    <div className="w-32 flex-shrink-0">
+      <div className="sticky top-4 space-y-0.5">
+        {sections.map((section) => {
+          const isActive = activeSection === section.id;
+          return (
+            <button
+              key={section.id}
+              type="button"
+              onClick={() => onSectionClick(section.id)}
+              className={cn(
+                "w-full text-left px-2 py-1.5 rounded-md transition-all duration-200",
+                "flex items-center gap-1.5",
+                isActive
+                  ? "bg-blue-500/10 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300 border-l-2 border-blue-500"
+                  : "text-gray-600 dark:text-gray-400 hover:bg-white/5 dark:hover:bg-white/5 border-l-2 border-transparent",
+              )}
+            >
+              {section.icon && <span className="flex-shrink-0 w-3 h-3">{section.icon}</span>}
+              <span className="text-xs font-medium truncate">{section.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx
new file mode 100644
index 0000000000..32f675ec16
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx
@@ -0,0 +1,112 @@
+import { Plus } from "lucide-react";
+import { Button } from "@/features/ui/primitives/button";
+import { Card } from "@/features/ui/primitives/card";
+
+export const StaticButtons = () => {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Buttons</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Button types used across the application</p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Glass Button (Outer Glow) */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Glass Button (Outer Glow)</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            Primary action button with gradient fill and external glow on hover
+          </p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="default" size="sm">
+              Small
+            </Button>
+            <Button variant="default">Default</Button>
+            <Button variant="default" size="lg">
+              Large
+            </Button>
+            <Button variant="default">
+              <Plus className="w-4 h-4 mr-2" />
+              With Icon
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">
+            variant="default" • Outer glow on hover
+          </p>
+        </Card>
+
+        {/* Outline Button (Inner Glow) */}
+        <Card className="p-6 shadow-[inset_0_0_15px_rgba(34,211,238,0.1)] dark:shadow-[inset_0_0_20px_rgba(34,211,238,0.15)]">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Outline Button (Inner Glow)</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            Transparent button with border and internal glow on hover
+          </p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="outline" size="sm">
+              Small
+            </Button>
+            <Button variant="outline">Default</Button>
+            <Button variant="outline" size="lg">
+              Large
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">
+            variant="outline" • Inner glow effect
+          </p>
+        </Card>
+
+        {/* Ghost Button */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Ghost Button</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">Minimal button with hover background only</p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="ghost" size="sm">
+              Small
+            </Button>
+            <Button variant="ghost">Default</Button>
+            <Button variant="ghost" size="lg">
+              Large
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">variant="ghost"</p>
+        </Card>
+
+        {/* Icon Button */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Icon Only</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">Square button for icon-only actions</p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="outline" size="icon">
+              <Plus className="w-4 h-4" />
+            </Button>
+            <Button variant="default" size="icon">
+              <Plus className="w-4 h-4" />
+            </Button>
+            <Button variant="ghost" size="icon">
+              <Plus className="w-4 h-4" />
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">size="icon"</p>
+        </Card>
+
+        {/* Destructive */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Destructive</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            For dangerous or destructive actions (delete, remove, etc.)
+          </p>
+          <div className="flex gap-3 items-center flex-wrap">
+            <Button variant="destructive" size="sm">
+              Delete
+            </Button>
+            <Button variant="destructive">Remove</Button>
+            <Button variant="destructive" size="lg">
+              Destroy
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">variant="destructive"</p>
+        </Card>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx
new file mode 100644
index 0000000000..a08d08a246
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx
@@ -0,0 +1,306 @@
+import { useState } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Card } from "@/features/ui/primitives/card";
+import { DraggableCard } from "@/features/ui/primitives/draggable-card";
+import { SelectableCard } from "@/features/ui/primitives/selectable-card";
+import { cn } from "@/features/ui/primitives/styles";
+
+// Base Glass Card with transparency tabs
+const BaseGlassCardShowcase = () => {
+  const [activeTab, setActiveTab] = useState<"light" | "frosted" | "solid">("light");
+
+  return (
+    <div>
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Base Glass Card</h4>
+
+      {/* Tabs */}
+      <div className="flex gap-2 mb-3">
+        {(["light", "frosted", "solid"] as const).map((tab) => (
+          <button
+            key={tab}
+            type="button"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors",
+              activeTab === tab
+                ? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/50"
+                : "bg-gray-200/50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/50 dark:hover:bg-gray-600/50",
+            )}
+          >
+            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {/* Card Display */}
+      <Card
+        size="md"
+        transparency={activeTab}
+        blur="md"
+        className={activeTab === "solid" ? "border-2 border-gray-400 dark:border-gray-600" : ""}
+      >
+        <h5 className="font-medium text-gray-900 dark:text-white mb-2">Card Title</h5>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          {activeTab === "light" && "Light glass - low opacity (8%), see grid through"}
+          {activeTab === "frosted" && "Frosted glass - white frosted in light mode, black frosted in dark mode"}
+          {activeTab === "solid" && "Solid - high opacity (90%), opaque background"}
+        </p>
+      </Card>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono">
+        {`<Card transparency="${activeTab}" />`}
+      </p>
+    </div>
+  );
+};
+
+// Outer Glow Card with size tabs
+const OuterGlowCardShowcase = () => {
+  const [activeSize, setActiveSize] = useState<"sm" | "md" | "lg" | "xl">("md");
+
+  return (
+    <div>
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Outer Glow Card</h4>
+
+      {/* Size Tabs */}
+      <div className="flex gap-2 mb-3">
+        {(["sm", "md", "lg", "xl"] as const).map((size) => (
+          <button
+            key={size}
+            type="button"
+            onClick={() => setActiveSize(size)}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors",
+              activeSize === size
+                ? "bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/50"
+                : "bg-gray-200/50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/50 dark:hover:bg-gray-600/50",
+            )}
+          >
+            {size.toUpperCase()}
+          </button>
+        ))}
+      </div>
+
+      {/* Card Display */}
+      <Card glowColor="cyan" glowType="outer" glowSize={activeSize}>
+        <h5 className="font-medium text-gray-900 dark:text-white mb-2">Active Card</h5>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Outer glow - {activeSize.toUpperCase()} (hover for brighter, same size)
+        </p>
+      </Card>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono">
+        {`<Card glowColor="cyan" glowType="outer" glowSize="${activeSize}" />`}
+      </p>
+    </div>
+  );
+};
+
+// Inner Glow Card with size tabs
+const InnerGlowCardShowcase = () => {
+  const [activeSize, setActiveSize] = useState<"sm" | "md" | "lg" | "xl">("md");
+
+  return (
+    <div>
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Inner Glow Card</h4>
+
+      {/* Size Tabs */}
+      <div className="flex gap-2 mb-3">
+        {(["sm", "md", "lg", "xl"] as const).map((size) => (
+          <button
+            key={size}
+            type="button"
+            onClick={() => setActiveSize(size)}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors",
+              activeSize === size
+                ? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/50"
+                : "bg-gray-200/50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/50 dark:hover:bg-gray-600/50",
+            )}
+          >
+            {size.toUpperCase()}
+          </button>
+        ))}
+      </div>
+
+      {/* Card Display */}
+      <Card glowColor="blue" glowType="inner" glowSize={activeSize}>
+        <h5 className="font-medium text-gray-900 dark:text-white mb-2">Featured Card</h5>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Inner glow - {activeSize.toUpperCase()} (hover for brighter, same size)
+        </p>
+      </Card>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono">
+        {`<Card glowColor="blue" glowType="inner" glowSize="${activeSize}" />`}
+      </p>
+    </div>
+  );
+};
+
+// Edge-Lit Card with color tabs
+const EdgeLitCardShowcase = () => {
+  const [activeColor, setActiveColor] = useState<"cyan" | "purple" | "pink" | "blue">("cyan");
+
+  const colorDescriptions = {
+    cyan: "Technical web pages",
+    purple: "Uploaded documents",
+    pink: "Business content",
+    blue: "Information pages",
+  };
+
+  // Static color classes (NOT dynamic) - Tailwind requirement
+  const tabColorClasses = {
+    cyan: "bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/50",
+    purple: "bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/50",
+    pink: "bg-pink-500/20 text-pink-700 dark:text-pink-300 border border-pink-500/50",
+    blue: "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/50",
+  };
+
+  return (
+    <div>
+      <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Top Edge Glow Card</h4>
+
+      {/* Color Tabs */}
+      <div className="flex gap-2 mb-3">
+        {(["cyan", "purple", "pink", "blue"] as const).map((color) => (
+          <button
+            key={color}
+            type="button"
+            onClick={() => setActiveColor(color)}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors",
+              activeColor === color
+                ? tabColorClasses[color]
+                : "bg-gray-200/50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/50 dark:hover:bg-gray-600/50",
+            )}
+          >
+            {color.charAt(0).toUpperCase() + color.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {/* Card Display */}
+      <Card edgePosition="top" edgeColor={activeColor}>
+        <h5 className="font-medium text-gray-900 dark:text-white mb-2">
+          {activeColor.charAt(0).toUpperCase() + activeColor.slice(1)} Edge Light
+        </h5>
+        <p className="text-sm text-gray-600 dark:text-gray-400">{colorDescriptions[activeColor]}</p>
+      </Card>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono">
+        {`<Card edgePosition="top" edgeColor="${activeColor}" />`}
+      </p>
+    </div>
+  );
+};
+
+export const StaticCards = () => {
+  const [selectedCardId, setSelectedCardId] = useState("card-2");
+  const [draggableCards, setDraggableCards] = useState([
+    { id: "drag-1", label: "Draggable 1" },
+    { id: "drag-2", label: "Draggable 2" },
+    { id: "drag-3", label: "Draggable 3" },
+  ]);
+
+  const handleCardDrop = (draggedId: string, targetIndex: number) => {
+    setDraggableCards((cards) => {
+      const currentIndex = cards.findIndex((card) => card.id === draggedId);
+      if (currentIndex === -1 || currentIndex === targetIndex) {
+        return cards;
+      }
+      const updated = [...cards];
+      const [moved] = updated.splice(currentIndex, 1);
+      updated.splice(targetIndex, 0, moved);
+      return updated;
+    });
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Cards</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Glass card variants and advanced card components</p>
+      </div>
+
+      {/* Responsive Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Base Glass Card - Transparency Variants */}
+        <BaseGlassCardShowcase />
+
+        {/* Outer Glow Card - Size Variants */}
+        <OuterGlowCardShowcase />
+
+        {/* Inner Glow Card - Size Variants */}
+        <InnerGlowCardShowcase />
+
+        {/* Top Edge Glow Card - Color Variants */}
+        <EdgeLitCardShowcase />
+      </div>
+
+      {/* Advanced Card Components */}
+      <div className="space-y-6 mt-8">
+        <div>
+          <h3 className="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Advanced Card Components</h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
+            Specialized cards that extend the base Card primitive with additional behaviors
+          </p>
+        </div>
+
+        {/* Selectable Cards */}
+        <div>
+          <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">SelectableCard</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            Card with selection states, hover effects, and optional aurora glow. Click cards to select.
+          </p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {["card-1", "card-2", "card-3"].map((id) => (
+              <SelectableCard
+                key={id}
+                isSelected={selectedCardId === id}
+                showAuroraGlow={selectedCardId === id}
+                onSelect={() => setSelectedCardId(id)}
+                size="sm"
+                className="min-h-[120px]"
+              >
+                <h5 className="font-medium text-gray-900 dark:text-white mb-2">
+                  {id === selectedCardId ? "Selected" : "Click to Select"}
+                </h5>
+                <p className="text-xs text-gray-600 dark:text-gray-400">Card {id.split("-")[1]}</p>
+              </SelectableCard>
+            ))}
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">
+            {"<SelectableCard isSelected={...} showAuroraGlow onSelect={...} />"}
+          </p>
+        </div>
+
+        {/* Draggable Cards */}
+        <div>
+          <h4 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">DraggableCard</h4>
+          <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+            Card with drag-and-drop functionality. Try dragging cards to reorder.
+          </p>
+          <DndProvider backend={HTML5Backend}>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+              {draggableCards.map((card, index) => (
+                <DraggableCard
+                  key={card.id}
+                  itemType="example-card"
+                  itemId={card.id}
+                  index={index}
+                  onDrop={handleCardDrop}
+                  size="sm"
+                  className="min-h-[120px] cursor-move"
+                >
+                  <h5 className="font-medium text-gray-900 dark:text-white mb-2">{card.label}</h5>
+                  <p className="text-xs text-gray-600 dark:text-gray-400">Drag me to reorder</p>
+                </DraggableCard>
+              ))}
+            </div>
+          </DndProvider>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">
+            {'<DraggableCard itemType="..." itemId="..." index={...} onDrop={...} />'}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx
new file mode 100644
index 0000000000..cbfcdc5f29
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx
@@ -0,0 +1,94 @@
+import { Card } from "@/features/ui/primitives/card";
+import { cn } from "@/features/ui/primitives/styles";
+
+const GRAY_CLASSES: Record<number, string> = {
+  50: "bg-gray-50",
+  100: "bg-gray-100",
+  200: "bg-gray-200",
+  300: "bg-gray-300",
+  400: "bg-gray-400",
+  500: "bg-gray-500",
+  600: "bg-gray-600",
+  700: "bg-gray-700",
+  800: "bg-gray-800",
+  900: "bg-gray-900",
+};
+
+export const StaticColors = () => {
+  const semanticColors = [
+    { name: "Primary", hex: "#3b82f6", tailwind: "blue-500", usage: "Primary actions, links, focus states" },
+    { name: "Secondary", hex: "#6b7280", tailwind: "gray-500", usage: "Secondary actions, neutral elements" },
+    { name: "Success", hex: "#22c55e", tailwind: "green-500", usage: "Success states, confirmations" },
+    { name: "Warning", hex: "#f97316", tailwind: "orange-500", usage: "Warnings, cautions" },
+    { name: "Error", hex: "#ef4444", tailwind: "red-500", usage: "Errors, destructive actions" },
+  ];
+
+  const accentColors = [
+    { name: "Cyan", hex: "#06b6d4", tailwind: "cyan-500", usage: "Active states, highlights" },
+    { name: "Purple", hex: "#a855f7", tailwind: "purple-500", usage: "Creative elements, special features" },
+    { name: "Pink", hex: "#ec4899", tailwind: "pink-500", usage: "Emphasis, special content" },
+  ];
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Colors</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Color palette with semantic and accent colors</p>
+      </div>
+
+      {/* Semantic Colors */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Semantic Colors</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {semanticColors.map((color) => (
+            <Card key={color.name} className="p-4">
+              <div className="flex items-center gap-4">
+                <div className="w-16 h-16 rounded-lg border border-white/20" style={{ backgroundColor: color.hex }} />
+                <div className="flex-1">
+                  <h4 className="font-semibold text-gray-900 dark:text-white">{color.name}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 font-mono mt-1">{color.hex}</p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">{color.usage}</p>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Accent Colors */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Accent Colors</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {accentColors.map((color) => (
+            <Card key={color.name} className="p-4">
+              <div className="flex flex-col gap-3">
+                <div
+                  className={cn("w-full h-12 rounded-lg border border-white/20")}
+                  style={{ backgroundColor: color.hex }}
+                />
+                <div>
+                  <h4 className="font-semibold text-gray-900 dark:text-white text-sm">{color.name}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 font-mono">{color.hex}</p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">{color.usage}</p>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Grayscale */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Grayscale</h3>
+        <div className="flex gap-1">
+          {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((weight) => (
+            <div key={weight} className="flex-1">
+              <div className={cn("h-12 rounded", GRAY_CLASSES[weight])} />
+              <p className="text-xs text-center mt-1 text-gray-500 dark:text-gray-400">{weight}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticEffects.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticEffects.tsx
new file mode 100644
index 0000000000..0888e88b68
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticEffects.tsx
@@ -0,0 +1,110 @@
+import { motion } from "framer-motion";
+import { RotateCcw } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/features/ui/primitives/button";
+import { Card } from "@/features/ui/primitives/card";
+
+export const StaticEffects = () => {
+  const [animationKey, setAnimationKey] = useState(0);
+
+  const replayAnimation = () => {
+    setAnimationKey((prev) => prev + 1);
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Effects & Animations</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Visual effects and animations used in the application</p>
+      </div>
+
+      {/* Hover Effects */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Hover Effects</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card className="p-6 hover:shadow-[0_0_20px_rgba(34,211,238,0.6)] transition-all duration-300 cursor-pointer">
+            <h4 className="text-sm font-semibold mb-2 text-gray-900 dark:text-white">Glow Hover</h4>
+            <p className="text-xs text-gray-600 dark:text-gray-400">Hover to see cyan glow</p>
+          </Card>
+
+          <Card className="p-6 hover:scale-105 transition-transform duration-200 cursor-pointer">
+            <h4 className="text-sm font-semibold mb-2 text-gray-900 dark:text-white">Scale Hover</h4>
+            <p className="text-xs text-gray-600 dark:text-gray-400">Hover to scale up</p>
+          </Card>
+
+          <Card className="p-6 hover:border-purple-500 hover:shadow-[0_0_15px_rgba(168,85,247,0.5)] transition-all duration-300 cursor-pointer">
+            <h4 className="text-sm font-semibold mb-2 text-gray-900 dark:text-white">Border Glow</h4>
+            <p className="text-xs text-gray-600 dark:text-gray-400">Hover for purple border glow</p>
+          </Card>
+        </div>
+      </div>
+
+      {/* Loading States */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Loading States</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card className="p-6">
+            <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Spinner</h4>
+            <div className="flex justify-center py-4">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-500" />
+            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono text-center">animate-spin</p>
+          </Card>
+
+          <Card className="p-6">
+            <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Pulse</h4>
+            <div className="flex justify-center py-4">
+              <div className="w-8 h-8 bg-blue-500 rounded-full animate-pulse" />
+            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono text-center">animate-pulse</p>
+          </Card>
+
+          <Card className="p-6">
+            <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Progress Bar</h4>
+            <div className="py-4">
+              <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
+                <motion.div
+                  className="h-full bg-gradient-to-r from-cyan-500 to-blue-500"
+                  initial={{ width: "0%" }}
+                  animate={{ width: "70%" }}
+                  transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY, repeatDelay: 0.5 }}
+                />
+              </div>
+            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono text-center">Framer Motion</p>
+          </Card>
+        </div>
+      </div>
+
+      {/* Entrance Animations */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Stagger Entrance</h3>
+          <Button size="sm" variant="outline" onClick={replayAnimation} className="flex items-center gap-2">
+            <RotateCcw className="w-4 h-4" />
+            Replay
+          </Button>
+        </div>
+        <div className="space-y-2" key={animationKey}>
+          {[1, 2, 3, 4].map((i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.4, delay: i * 0.1 }}
+            >
+              <Card className="p-4">
+                <p className="text-sm text-gray-700 dark:text-gray-300">
+                  Staggered item {i} - Fades in from left with delay
+                </p>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-4 font-mono">
+          Used for project cards, task lists, knowledge items
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx
new file mode 100644
index 0000000000..17eaf1ce3a
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx
@@ -0,0 +1,154 @@
+import { useId } from "react";
+import { Button } from "@/features/ui/primitives/button";
+import { Card } from "@/features/ui/primitives/card";
+import { Checkbox } from "@/features/ui/primitives/checkbox";
+import { Input } from "@/features/ui/primitives/input";
+import { Label } from "@/features/ui/primitives/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/features/ui/primitives/select";
+import { Switch } from "@/features/ui/primitives/switch";
+
+export const StaticForms = () => {
+  const exampleInputId = useId();
+  const exampleDisabledId = useId();
+  const exampleTextareaId = useId();
+  const check1Id = useId();
+  const check2Id = useId();
+  const check3Id = useId();
+  const switch1Id = useId();
+  const switch2Id = useId();
+  const switch3Id = useId();
+  const selectCyanId = useId();
+  const selectPurpleId = useId();
+  const formInputId = useId();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Form Elements</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Form inputs and controls used in the application</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Text Input */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Text Input</h4>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor={exampleInputId}>Label</Label>
+              <Input id={exampleInputId} placeholder="Enter text..." className="mt-1" />
+            </div>
+            <div>
+              <Label htmlFor={exampleDisabledId}>Disabled</Label>
+              <Input id={exampleDisabledId} placeholder="Disabled..." disabled className="mt-1" />
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<Input />"}</p>
+        </Card>
+
+        {/* Textarea */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Textarea</h4>
+          <div>
+            <Label htmlFor={exampleTextareaId}>Description</Label>
+            <textarea
+              id={exampleTextareaId}
+              placeholder="Enter description..."
+              rows={4}
+              className="mt-1 w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-black/30 px-3 py-2 text-sm backdrop-blur-sm focus:border-cyan-500 focus:outline-none"
+            />
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<textarea />"}</p>
+        </Card>
+
+        {/* Checkbox */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Checkbox</h4>
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Checkbox id={check1Id} defaultChecked color="cyan" />
+              <Label htmlFor={check1Id}>Checked</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id={check2Id} color="purple" />
+              <Label htmlFor={check2Id}>Unchecked</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id={check3Id} disabled defaultChecked />
+              <Label htmlFor={check3Id}>Disabled</Label>
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<Checkbox />"}</p>
+        </Card>
+
+        {/* Switch Toggle */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Switch Toggle</h4>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor={switch1Id}>Enable Feature</Label>
+              <Switch id={switch1Id} defaultChecked />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label htmlFor={switch2Id}>Dark Mode</Label>
+              <Switch id={switch2Id} />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label htmlFor={switch3Id}>Disabled</Label>
+              <Switch id={switch3Id} disabled />
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<Switch />"}</p>
+        </Card>
+
+        {/* Select Dropdown */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Select Dropdown</h4>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor={selectCyanId}>Cyan Variant</Label>
+              <Select defaultValue="option2">
+                <SelectTrigger id={selectCyanId} color="cyan" className="mt-1">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="option1">Option 1</SelectItem>
+                  <SelectItem value="option2">Option 2</SelectItem>
+                  <SelectItem value="option3">Option 3</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label htmlFor={selectPurpleId}>Purple Variant</Label>
+              <Select defaultValue="option1">
+                <SelectTrigger id={selectPurpleId} color="purple" className="mt-1">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent color="purple">
+                  <SelectItem value="option1">Option 1</SelectItem>
+                  <SelectItem value="option2">Option 2</SelectItem>
+                  <SelectItem value="option3">Option 3</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">{"<Select /> with color variants"}</p>
+        </Card>
+
+        {/* Submit Button */}
+        <Card className="p-6">
+          <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Form Submission</h4>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor={formInputId}>Email</Label>
+              <Input id={formInputId} type="email" placeholder="email@example.com" className="mt-1" />
+            </div>
+            <Button variant="default" className="w-full">
+              Submit
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 font-mono">Complete form example</p>
+        </Card>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsx
new file mode 100644
index 0000000000..1ff6ed0ef9
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsx
@@ -0,0 +1,38 @@
+import { Card } from "@/features/ui/primitives/card";
+
+export const StaticSpacing = () => {
+  const spacingScale = [
+    { value: 1, px: 4, rem: 0.25 },
+    { value: 2, px: 8, rem: 0.5 },
+    { value: 3, px: 12, rem: 0.75 },
+    { value: 4, px: 16, rem: 1 },
+    { value: 6, px: 24, rem: 1.5 },
+    { value: 8, px: 32, rem: 2 },
+    { value: 12, px: 48, rem: 3 },
+    { value: 16, px: 64, rem: 4 },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Spacing</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Consistent spacing scale based on 4px increments</p>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {spacingScale.map((space) => (
+          <Card key={space.value} className="p-4">
+            <div className="mb-3">
+              <div className="bg-blue-500 rounded" style={{ height: `${space.px}px` }} />
+            </div>
+            <div className="text-xs space-y-1">
+              <div className="font-mono text-gray-900 dark:text-white">p-{space.value}</div>
+              <div className="text-gray-500 dark:text-gray-400">{space.px}px</div>
+              <div className="text-gray-500 dark:text-gray-400">{space.rem}rem</div>
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticTables.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticTables.tsx
new file mode 100644
index 0000000000..1c196d27c3
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticTables.tsx
@@ -0,0 +1,70 @@
+export const StaticTables = () => {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Tables</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Table styles with glassmorphism and hover states</p>
+      </div>
+
+      {/* Standard Table - matching TaskView pattern */}
+      <div>
+        <h3 className="text-sm font-semibold mb-3 text-gray-800 dark:text-gray-200">Standard Table</h3>
+        <div className="w-full">
+          <div className="overflow-x-auto scrollbar-hide">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Name</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Status</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Count</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="bg-white/50 dark:bg-black/50 hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20 border-b border-gray-200 dark:border-gray-800 transition-all duration-200">
+                  <td className="px-4 py-2">
+                    <span className="font-medium text-sm text-gray-900 dark:text-white">React Documentation</span>
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="px-2 py-1 text-xs rounded-md font-medium bg-green-500/10 text-green-600 dark:text-green-400">
+                      Active
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">145</td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">2024-01-15</td>
+                </tr>
+                <tr className="bg-gray-50/80 dark:bg-gray-900/30 hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20 border-b border-gray-200 dark:border-gray-800 transition-all duration-200">
+                  <td className="px-4 py-2">
+                    <span className="font-medium text-sm text-gray-900 dark:text-white">API Integration</span>
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="px-2 py-1 text-xs rounded-md font-medium bg-yellow-500/10 text-yellow-600 dark:text-yellow-400">
+                      Processing
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">89</td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">2024-01-18</td>
+                </tr>
+                <tr className="bg-white/50 dark:bg-black/50 hover:bg-gradient-to-r hover:from-cyan-50/70 hover:to-purple-50/70 dark:hover:from-cyan-900/20 dark:hover:to-purple-900/20 border-b border-gray-200 dark:border-gray-800 transition-all duration-200">
+                  <td className="px-4 py-2">
+                    <span className="font-medium text-sm text-gray-900 dark:text-white">TypeScript Guide</span>
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="px-2 py-1 text-xs rounded-md font-medium bg-cyan-500/10 text-cyan-600 dark:text-cyan-400">
+                      Complete
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">203</td>
+                  <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">2024-01-20</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-3">
+          Features: Gradient header, alternating rows, hover gradient, consistent spacing
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx
new file mode 100644
index 0000000000..1c04dc0c33
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx
@@ -0,0 +1,92 @@
+import { useId, useState } from "react";
+import { PowerButton } from "@/components/ui/PowerButton";
+import { Card } from "@/features/ui/primitives/card";
+import { Label } from "@/features/ui/primitives/label";
+import { Switch } from "@/features/ui/primitives/switch";
+
+export const StaticToggles = () => {
+  const toggle1Id = useId();
+  const toggle2Id = useId();
+
+  const [powerStates, setPowerStates] = useState({
+    purple: true,
+    cyan: false,
+    green: true,
+    orange: false,
+  });
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Toggles</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Toggle controls used in the application</p>
+      </div>
+
+      {/* Power Button */}
+      <Card className="p-6">
+        <h4 className="text-sm font-semibold mb-4 text-gray-900 dark:text-white">Power Button</h4>
+        <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+          Animated toggle with glowing power icon. Used for collapsible settings cards.
+        </p>
+        <div className="flex gap-6 items-center justify-center py-4">
+          <div className="flex flex-col items-center gap-2">
+            <PowerButton
+              isOn={powerStates.purple}
+              onClick={() => setPowerStates((s) => ({ ...s, purple: !s.purple }))}
+              color="purple"
+              size={40}
+            />
+            <span className="text-xs text-gray-500">Purple</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <PowerButton
+              isOn={powerStates.cyan}
+              onClick={() => setPowerStates((s) => ({ ...s, cyan: !s.cyan }))}
+              color="cyan"
+              size={40}
+            />
+            <span className="text-xs text-gray-500">Cyan</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <PowerButton
+              isOn={powerStates.green}
+              onClick={() => setPowerStates((s) => ({ ...s, green: !s.green }))}
+              color="green"
+              size={40}
+            />
+            <span className="text-xs text-gray-500">Green</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <PowerButton
+              isOn={powerStates.orange}
+              onClick={() => setPowerStates((s) => ({ ...s, orange: !s.orange }))}
+              color="orange"
+              size={40}
+            />
+            <span className="text-xs text-gray-500">Orange</span>
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-4 font-mono">{"<PowerButton />"}</p>
+      </Card>
+
+      {/* Switch Toggle */}
+      <Card className="p-6">
+        <h4 className="text-sm font-semibold mb-4 text-gray-900 dark:text-white">Switch</h4>
+        <p className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+          Standard toggle switch for settings and binary options
+        </p>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label htmlFor={toggle1Id}>Enable Feature</Label>
+            <Switch id={toggle1Id} defaultChecked />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label htmlFor={toggle2Id}>Auto Save</Label>
+            <Switch id={toggle2Id} />
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-4 font-mono">{"<Switch />"}</p>
+      </Card>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/showcases/StaticTypography.tsx b/archon-ui-main/src/features/style-guide/showcases/StaticTypography.tsx
new file mode 100644
index 0000000000..68951e698e
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/showcases/StaticTypography.tsx
@@ -0,0 +1,61 @@
+import { Card } from "@/features/ui/primitives/card";
+
+export const StaticTypography = () => {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Typography</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">Typography scale used across the application</p>
+      </div>
+
+      <Card className="p-6 space-y-6">
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">H1 • text-4xl font-bold</div>
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white">Heading 1</h1>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">H2 • text-3xl font-bold</div>
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Heading 2</h2>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">H3 • text-2xl font-semibold</div>
+          <h3 className="text-2xl font-semibold text-gray-900 dark:text-white">Heading 3</h3>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">H4 • text-xl font-semibold</div>
+          <h4 className="text-xl font-semibold text-gray-900 dark:text-white">Heading 4</h4>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">Body • text-base</div>
+          <p className="text-base text-gray-700 dark:text-gray-300">
+            Body text for paragraphs and general content. This is the default text style used throughout the
+            application.
+          </p>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">Small • text-sm</div>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Small text for secondary information and descriptions
+          </p>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">Caption • text-xs</div>
+          <p className="text-xs text-gray-500 dark:text-gray-500">Caption text for labels, timestamps, and metadata</p>
+        </div>
+
+        <div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-mono">Code • font-mono</div>
+          <code className="font-mono text-sm bg-black/20 px-2 py-1 rounded text-cyan-400">
+            const example = "code text";
+          </code>
+        </div>
+      </Card>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/standards/modalStandards.ts b/archon-ui-main/src/features/style-guide/standards/modalStandards.ts
new file mode 100644
index 0000000000..3c46663648
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/standards/modalStandards.ts
@@ -0,0 +1,32 @@
+export const MODAL_TYPES = {
+  confirmation: {
+    size: "sm" as const,
+    glowColor: "red" as const,
+    purpose: "Destructive actions",
+  },
+  formCreate: {
+    size: "md" as const,
+    glowColor: "green" as const,
+    purpose: "Creating resources",
+  },
+  formEdit: {
+    size: "md" as const,
+    glowColor: "blue" as const,
+    purpose: "Editing resources",
+  },
+  display: {
+    size: "lg" as const,
+    glowColor: "purple" as const,
+    purpose: "Detailed information",
+  },
+  codeViewer: {
+    size: "xl" as const,
+    glowColor: "cyan" as const,
+    purpose: "Code display",
+  },
+  settings: {
+    size: "lg" as const,
+    glowColor: "blue" as const,
+    purpose: "App settings",
+  },
+};
diff --git a/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx b/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx
new file mode 100644
index 0000000000..6402066607
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx
@@ -0,0 +1,90 @@
+import { Database, FileText, FolderKanban, Navigation, Settings } from "lucide-react";
+import { useState } from "react";
+import { DocumentBrowserExample } from "../layouts/DocumentBrowserExample";
+import { KnowledgeLayoutExample } from "../layouts/KnowledgeLayoutExample";
+import { NavigationExplanation } from "../layouts/NavigationExplanation";
+import { ProjectsLayoutExample } from "../layouts/ProjectsLayoutExample";
+import { SettingsLayoutExample } from "../layouts/SettingsLayoutExample";
+import { SideNavigation, type SideNavigationSection } from "../shared/SideNavigation";
+
+export const LayoutsTab = () => {
+  const [activeSection, setActiveSection] = useState("navigation");
+
+  const sections: SideNavigationSection[] = [
+    { id: "navigation", label: "Navigation", icon: <Navigation className="w-4 h-4" /> },
+    { id: "projects", label: "Projects", icon: <FolderKanban className="w-4 h-4" /> },
+    { id: "settings", label: "Settings", icon: <Settings className="w-4 h-4" /> },
+    { id: "knowledge", label: "Knowledge", icon: <Database className="w-4 h-4" /> },
+    { id: "document-browser", label: "Document Browser", icon: <FileText className="w-4 h-4" /> },
+  ];
+
+  // Render content based on active section
+  const renderContent = () => {
+    switch (activeSection) {
+      case "navigation":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Navigation Patterns</h2>
+            <NavigationExplanation />
+          </div>
+        );
+      case "projects":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Projects Layout</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Project selection with Kanban board and table views. Uses orange pill navigation for Docs/Tasks tabs.
+            </p>
+            <ProjectsLayoutExample />
+          </div>
+        );
+      case "settings":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Settings Layout</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Bento grid (2-column responsive) with collapsible cards using PowerButton toggles.
+            </p>
+            <SettingsLayoutExample />
+          </div>
+        );
+      case "knowledge":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Knowledge Layout</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Switchable views (grid/table) with filters and search. Cards have top glass glow bars.
+            </p>
+            <KnowledgeLayoutExample />
+          </div>
+        );
+      case "document-browser":
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Document Browser</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Modal or embedded display for documents and code with tabs, search, and expandable content.
+            </p>
+            <DocumentBrowserExample />
+          </div>
+        );
+      default:
+        return (
+          <div>
+            <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Navigation Patterns</h2>
+            <NavigationExplanation />
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className="flex gap-6">
+      {/* Side Navigation */}
+      <SideNavigation sections={sections} activeSection={activeSection} onSectionClick={setActiveSection} />
+
+      {/* Main Content */}
+      <div className="flex-1 min-w-0 max-w-6xl">{renderContent()}</div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx b/archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx
new file mode 100644
index 0000000000..6f3bbbfcd0
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx
@@ -0,0 +1,74 @@
+import {
+  Box,
+  CreditCard,
+  FormInput,
+  MousePointer,
+  Palette,
+  Power,
+  Sparkles,
+  Table as TableIcon,
+  Type,
+} from "lucide-react";
+import { useState } from "react";
+import { SideNavigation, type SideNavigationSection } from "../shared/SideNavigation";
+import { StaticButtons } from "../showcases/StaticButtons";
+import { StaticCards } from "../showcases/StaticCards";
+import { StaticColors } from "../showcases/StaticColors";
+import { StaticEffects } from "../showcases/StaticEffects";
+import { StaticForms } from "../showcases/StaticForms";
+import { StaticSpacing } from "../showcases/StaticSpacing";
+import { StaticTables } from "../showcases/StaticTables";
+import { StaticToggles } from "../showcases/StaticToggles";
+import { StaticTypography } from "../showcases/StaticTypography";
+
+export const StyleGuideTab = () => {
+  const [activeSection, setActiveSection] = useState("typography");
+
+  const sections: SideNavigationSection[] = [
+    { id: "typography", label: "Typography", icon: <Type className="w-3 h-3" /> },
+    { id: "colors", label: "Colors", icon: <Palette className="w-3 h-3" /> },
+    { id: "spacing", label: "Spacing", icon: <Box className="w-3 h-3" /> },
+    { id: "buttons", label: "Buttons", icon: <MousePointer className="w-3 h-3" /> },
+    { id: "cards", label: "Cards", icon: <CreditCard className="w-3 h-3" /> },
+    { id: "tables", label: "Tables", icon: <TableIcon className="w-3 h-3" /> },
+    { id: "forms", label: "Forms", icon: <FormInput className="w-3 h-3" /> },
+    { id: "toggles", label: "Toggles", icon: <Power className="w-3 h-3" /> },
+    { id: "effects", label: "Effects", icon: <Sparkles className="w-3 h-3" /> },
+  ];
+
+  // Render content based on active section
+  const renderContent = () => {
+    switch (activeSection) {
+      case "typography":
+        return <StaticTypography />;
+      case "colors":
+        return <StaticColors />;
+      case "spacing":
+        return <StaticSpacing />;
+      case "buttons":
+        return <StaticButtons />;
+      case "cards":
+        return <StaticCards />;
+      case "tables":
+        return <StaticTables />;
+      case "forms":
+        return <StaticForms />;
+      case "toggles":
+        return <StaticToggles />;
+      case "effects":
+        return <StaticEffects />;
+      default:
+        return <StaticTypography />;
+    }
+  };
+
+  return (
+    <div className="flex gap-6">
+      {/* Side Navigation */}
+      <SideNavigation sections={sections} activeSection={activeSection} onSectionClick={setActiveSection} />
+
+      {/* Main Content */}
+      <div className="flex-1 max-w-5xl">{renderContent()}</div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/style-guide/types/index.ts b/archon-ui-main/src/features/style-guide/types/index.ts
new file mode 100644
index 0000000000..ae0ba18356
--- /dev/null
+++ b/archon-ui-main/src/features/style-guide/types/index.ts
@@ -0,0 +1,25 @@
+// Type definitions for style guide components
+
+// Card types
+export type GlowColor = "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+export type GlowType = "none" | "inner" | "outer";
+export type EdgePosition = "none" | "top" | "left" | "right" | "bottom";
+export type EdgeColor = "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+export type CardSize = "sm" | "md" | "lg" | "xl";
+export type Transparency = "clear" | "light" | "medium" | "frosted" | "solid";
+export type BlurLevel = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export type GlassTint = "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+// Button types
+export type ButtonVariant = "default" | "destructive" | "outline" | "ghost" | "link" | "cyan" | "knowledge";
+export type ButtonSize = "xs" | "sm" | "default" | "lg" | "icon";
+
+// Form types
+export type InputType = "text" | "email" | "password" | "number" | "search" | "url" | "tel";
+export type LabelPosition = "left" | "right" | "top" | "bottom";
+
+// Modal types
+export type ModalSize = "sm" | "md" | "lg" | "xl";
+
+// Toggle types
+export type ToggleSize = "sm" | "md" | "lg";
diff --git a/archon-ui-main/src/features/ui/primitives/card.tsx b/archon-ui-main/src/features/ui/primitives/card.tsx
new file mode 100644
index 0000000000..acb8ff68d9
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/card.tsx
@@ -0,0 +1,138 @@
+import React from "react";
+import { cn, glassCard } from "./styles";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  // Glass properties
+  blur?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  transparency?: "clear" | "light" | "medium" | "frosted" | "solid";
+  glassTint?: "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+  // Glow properties (uses pre-defined static classes from styles.ts)
+  glowColor?: "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+  glowType?: "outer" | "inner";
+  glowSize?: "sm" | "md" | "lg" | "xl";
+
+  // Edge-lit properties
+  edgePosition?: "none" | "top" | "left" | "right" | "bottom";
+  edgeColor?: "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+  // Size (padding)
+  size?: "none" | "sm" | "md" | "lg" | "xl";
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      className,
+      blur = "md",
+      transparency = "light",
+      glassTint = "none",
+      glowColor = "none",
+      glowType = "outer",
+      glowSize = "md",
+      edgePosition = "none",
+      edgeColor = "cyan",
+      size = "md",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const hasEdge = edgePosition !== "none";
+    const hasGlow = glowColor !== "none";
+
+    // Use pre-defined static classes from styles.ts
+    const glowVariant = glassCard.variants[glowColor] || glassCard.variants.none;
+
+    // Get glow class from static lookups in styles.ts
+    const getGlowClass = () => {
+      if (!hasGlow || hasEdge) return "";
+
+      if (glowType === "inner") {
+        return glassCard.innerGlowSizes?.[glowColor]?.[glowSize] || "";
+      }
+
+      // Outer glow
+      return glassCard.outerGlowSizes?.[glowColor]?.[glowSize] || glowVariant.glow;
+    };
+
+    // Get size-matched hover glow class
+    const getHoverGlowClass = () => {
+      if (!hasGlow || hasEdge) return "";
+
+      if (glowType === "inner") {
+        return glassCard.innerGlowHover?.[glowColor]?.[glowSize] || "";
+      }
+
+      // Outer glow hover
+      return glassCard.outerGlowHover?.[glowColor]?.[glowSize] || glowVariant.hover;
+    };
+
+    const edgeStyle = glassCard.edgeColors[edgeColor];
+
+    if (hasEdge) {
+      // Edge-lit card with actual div elements (not pseudo-elements)
+      // Extract flex/layout classes from className to apply to inner content div
+      const flexClasses =
+        className?.match(/(flex|flex-col|flex-row|flex-1|items-\S+|justify-\S+|gap-\S+)/g)?.join(" ") || "";
+      const otherClasses =
+        className?.replace(/(flex|flex-col|flex-row|flex-1|items-\S+|justify-\S+|gap-\S+)/g, "").trim() || "";
+
+      // Edge line and glow configuration per position
+      const edgeConfig = {
+        top: {
+          line: "absolute inset-x-0 top-0 h-[2px]",
+          glow: "absolute inset-x-0 top-0 h-16 bg-gradient-to-b to-transparent",
+        },
+        bottom: {
+          line: "absolute inset-x-0 bottom-0 h-[2px]",
+          glow: "absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t to-transparent",
+        },
+        left: {
+          line: "absolute inset-y-0 left-0 w-[2px]",
+          glow: "absolute inset-y-0 left-0 w-16 bg-gradient-to-r to-transparent",
+        },
+        right: {
+          line: "absolute inset-y-0 right-0 w-[2px]",
+          glow: "absolute inset-y-0 right-0 w-16 bg-gradient-to-l to-transparent",
+        },
+      };
+
+      const config = edgeConfig[edgePosition];
+
+      return (
+        <div ref={ref} className={cn("relative rounded-xl overflow-hidden", edgeStyle.border, otherClasses)} {...props}>
+          {/* Edge light bar */}
+          <div className={cn(config.line, "pointer-events-none z-10", edgeStyle.solid)} />
+          {/* Glow bleeding into card */}
+          <div className={cn(config.glow, "blur-lg pointer-events-none z-10", edgeStyle.gradient)} />
+          {/* Content with tinted background - INHERIT flex classes */}
+          <div className={cn("backdrop-blur-sm", edgeStyle.bg, glassCard.sizes[size], flexClasses)}>{children}</div>
+        </div>
+      );
+    }
+
+    // Standard card (no edge-lit) - use static classes from styles.ts
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          glassCard.base,
+          glassCard.blur[blur],
+          glassTint !== "none" ? glassCard.tints[glassTint][transparency] : glassCard.transparency[transparency],
+          glassCard.sizes[size],
+          // Border and glow classes from static lookups
+          !hasEdge && glowVariant.border,
+          !hasEdge && getGlowClass(),
+          !hasEdge && getHoverGlowClass(), // Size-matched hover
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Card.displayName = "Card";
diff --git a/archon-ui-main/src/features/ui/primitives/checkbox.tsx b/archon-ui-main/src/features/ui/primitives/checkbox.tsx
new file mode 100644
index 0000000000..2994cdcab8
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/checkbox.tsx
@@ -0,0 +1,120 @@
+import * as CheckboxPrimitives from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import * as React from "react";
+import { cn, glassmorphism } from "./styles";
+
+export type CheckboxColor = "purple" | "blue" | "green" | "pink" | "orange" | "cyan";
+
+interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitives.Root> {
+  color?: CheckboxColor;
+  indeterminate?: boolean;
+}
+
+const checkboxVariants = {
+  purple: {
+    checked: "data-[state=checked]:bg-purple-500/20 data-[state=checked]:border-purple-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(168,85,247,0.5)]",
+    indicator: "text-purple-400 drop-shadow-[0_0_3px_rgba(168,85,247,0.7)]",
+    focusRing: "focus-visible:ring-purple-500",
+  },
+  blue: {
+    checked: "data-[state=checked]:bg-blue-500/20 data-[state=checked]:border-blue-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(59,130,246,0.5)]",
+    indicator: "text-blue-400 drop-shadow-[0_0_3px_rgba(59,130,246,0.7)]",
+    focusRing: "focus-visible:ring-blue-500",
+  },
+  green: {
+    checked: "data-[state=checked]:bg-green-500/20 data-[state=checked]:border-green-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(34,197,94,0.5)]",
+    indicator: "text-green-400 drop-shadow-[0_0_3px_rgba(34,197,94,0.7)]",
+    focusRing: "focus-visible:ring-green-500",
+  },
+  pink: {
+    checked: "data-[state=checked]:bg-pink-500/20 data-[state=checked]:border-pink-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(236,72,153,0.5)]",
+    indicator: "text-pink-400 drop-shadow-[0_0_3px_rgba(236,72,153,0.7)]",
+    focusRing: "focus-visible:ring-pink-500",
+  },
+  orange: {
+    checked: "data-[state=checked]:bg-orange-500/20 data-[state=checked]:border-orange-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(249,115,22,0.5)]",
+    indicator: "text-orange-400 drop-shadow-[0_0_3px_rgba(249,115,22,0.7)]",
+    focusRing: "focus-visible:ring-orange-500",
+  },
+  cyan: {
+    checked: "data-[state=checked]:bg-cyan-500/20 data-[state=checked]:border-cyan-500",
+    glow: "data-[state=checked]:shadow-[0_0_15px_rgba(34,211,238,0.5)]",
+    indicator: "text-cyan-400 drop-shadow-[0_0_3px_rgba(34,211,238,0.7)]",
+    focusRing: "focus-visible:ring-cyan-500",
+  },
+};
+
+/**
+ * 🤖 AI CONTEXT: Glassmorphic Checkbox Component
+ *
+ * DESIGN DECISIONS:
+ * 1. TRANSPARENCY - Glass effect with subtle background
+ *    - Unchecked: Almost invisible (bg-white/10)
+ *    - Checked: Color tinted glass (color-500/20)
+ *
+ * 2. NEON GLOW - Tron-style accent on activation
+ *    - Box shadow creates outer glow
+ *    - Drop shadow on check icon for depth
+ *
+ * 3. ANIMATION - Smooth state transitions
+ *    - Scale animation on check/uncheck
+ *    - Fade in/out for indicator
+ *    - 300ms transitions for smoothness
+ *
+ * 4. STATES - Support for three states
+ *    - Unchecked: Empty box
+ *    - Checked: Check icon with glow
+ *    - Indeterminate: Minus icon (partial selection)
+ */
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitives.Root>, CheckboxProps>(
+  ({ className, color = "cyan", indeterminate, checked, ...props }, ref) => {
+    const colorStyles = checkboxVariants[color];
+
+    return (
+      <CheckboxPrimitives.Root
+        className={cn(
+          "peer h-5 w-5 shrink-0 rounded-md",
+          "bg-black/10 dark:bg-white/10 backdrop-blur-xl",
+          "border-2 border-gray-300/30 dark:border-white/10",
+          "transition-all duration-300",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          colorStyles.focusRing,
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "hover:border-gray-400/50 dark:hover:border-white/20",
+          colorStyles.checked,
+          colorStyles.glow,
+          "data-[state=indeterminate]:bg-opacity-50",
+          glassmorphism.interactive.base,
+          className,
+        )}
+        checked={indeterminate ? "indeterminate" : checked}
+        {...props}
+        ref={ref}
+      >
+        <CheckboxPrimitives.Indicator
+          className={cn(
+            "flex items-center justify-center",
+            "data-[state=checked]:animate-in data-[state=checked]:zoom-in-0",
+            "data-[state=unchecked]:animate-out data-[state=unchecked]:zoom-out-0",
+            "data-[state=indeterminate]:animate-in data-[state=indeterminate]:zoom-in-0",
+          )}
+        >
+          {indeterminate ? (
+            <Minus className={cn("h-3.5 w-3.5", colorStyles.indicator)} />
+          ) : (
+            <Check className={cn("h-4 w-4", colorStyles.indicator)} />
+          )}
+        </CheckboxPrimitives.Indicator>
+      </CheckboxPrimitives.Root>
+    );
+  },
+);
+
+Checkbox.displayName = CheckboxPrimitives.Root.displayName;
+
+export { Checkbox, checkboxVariants };
diff --git a/archon-ui-main/src/features/ui/primitives/data-card.tsx b/archon-ui-main/src/features/ui/primitives/data-card.tsx
new file mode 100644
index 0000000000..adab70b332
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/data-card.tsx
@@ -0,0 +1,151 @@
+import React from "react";
+import { cn, glassCard } from "./styles";
+
+interface DataCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  // Edge-lit properties
+  edgePosition?: "none" | "top" | "left" | "right" | "bottom";
+  edgeColor?: "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+  // Glow properties
+  glowColor?: "none" | "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+
+  // Glass properties
+  blur?: "none" | "sm" | "md" | "lg" | "xl";
+  transparency?: "clear" | "light" | "medium" | "frosted" | "solid";
+}
+
+interface DataCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface DataCardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface DataCardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
+  (
+    {
+      className,
+      edgePosition = "none",
+      edgeColor = "cyan",
+      glowColor = "none",
+      blur = "md",
+      transparency = "light",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const hasEdge = edgePosition !== "none";
+    const hasGlow = glowColor !== "none";
+    const glowVariant = glowColor !== "none" ? glassCard.variants[glowColor] : glassCard.variants.none;
+
+    if (hasEdge && edgePosition === "top") {
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            glassCard.base,
+            glassCard.edgeColors[edgeColor].border || "border-gray-300/20 dark:border-white/10",
+            "min-h-[240px]",
+            className,
+          )}
+          {...props}
+        >
+          {/* Top edge light with glow */}
+          <div
+            className={cn(
+              "absolute inset-x-0 top-0 h-[2px] pointer-events-none z-10",
+              glassCard.edgeLit.position.top,
+              glassCard.edgeLit.color[edgeColor].line,
+              glassCard.edgeLit.color[edgeColor].glow,
+            )}
+          />
+          {/* Glow bleeding down */}
+          <div
+            className={cn(
+              "absolute inset-x-0 top-0 h-16 bg-gradient-to-b to-transparent blur-lg pointer-events-none z-10",
+              glassCard.edgeLit.color[edgeColor].gradient.vertical,
+            )}
+          />
+
+          {/* Content wrapper with flex layout */}
+          <div
+            className={cn(
+              "flex flex-col min-h-[240px]",
+              glassCard.blur[blur],
+              glassCard.tints[edgeColor]?.light || glassCard.transparency[transparency],
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      );
+    }
+
+    // Standard card (no edge-lit)
+    const glowClasses = !hasEdge && hasGlow ? [glowVariant.border, glowVariant.glow, glowVariant.hover] : [];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative rounded-xl overflow-hidden min-h-[240px]",
+          glassCard.blur[blur],
+          glassCard.transparency[transparency],
+          "flex flex-col",
+          hasGlow ? "" : "border border-gray-300/20 dark:border-white/10",
+          ...glowClasses,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+DataCard.displayName = "DataCard";
+
+// Header component
+export const DataCardHeader = React.forwardRef<HTMLDivElement, DataCardHeaderProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("relative p-4 pb-2", className)} {...props}>
+        {children}
+      </div>
+    );
+  },
+);
+
+DataCardHeader.displayName = "DataCardHeader";
+
+// Content component (flexible - grows to fill space)
+export const DataCardContent = React.forwardRef<HTMLDivElement, DataCardContentProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("flex-1 px-4", className)} {...props}>
+        {children}
+      </div>
+    );
+  },
+);
+
+DataCardContent.displayName = "DataCardContent";
+
+// Footer component (anchored to bottom)
+export const DataCardFooter = React.forwardRef<HTMLDivElement, DataCardFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "px-4 py-3 bg-gray-100/50 dark:bg-black/30 border-t border-gray-200/50 dark:border-white/10",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+DataCardFooter.displayName = "DataCardFooter";
diff --git a/archon-ui-main/src/features/ui/primitives/draggable-card.tsx b/archon-ui-main/src/features/ui/primitives/draggable-card.tsx
new file mode 100644
index 0000000000..99d27e481c
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/draggable-card.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { useDrag, useDrop } from "react-dnd";
+import { Card, type CardProps } from "./card";
+
+interface DraggableCardProps extends Omit<CardProps, "ref"> {
+  // Drag and drop
+  itemType: string;
+  itemId: string;
+  index: number;
+  onDrop?: (draggedId: string, targetIndex: number) => void;
+
+  // Visual states
+  isDragging?: boolean;
+  onDragStart?: () => void;
+  onDragEnd?: () => void;
+}
+
+export const DraggableCard = React.forwardRef<HTMLDivElement, DraggableCardProps>(
+  ({ itemType, itemId, index, onDrop, onDragStart, onDragEnd, children, className, ...cardProps }, ref) => {
+    const [{ isDragging }, drag] = useDrag({
+      type: itemType,
+      item: { id: itemId, index },
+      collect: (monitor) => ({
+        isDragging: !!monitor.isDragging(),
+      }),
+      end: () => {
+        onDragEnd?.();
+      },
+    });
+
+    const [{ isOver }, drop] = useDrop({
+      accept: itemType,
+      hover: (draggedItem: { id: string; index: number }) => {
+        if (draggedItem.id === itemId) return;
+        if (draggedItem.index === index) return;
+
+        if (onDrop) {
+          onDrop(draggedItem.id, index);
+          draggedItem.index = index;
+        }
+      },
+      collect: (monitor) => ({
+        isOver: !!monitor.isOver(),
+      }),
+    });
+
+    const combinedRef = (node: HTMLDivElement | null) => {
+      drag(drop(node));
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+
+    return (
+      <div ref={combinedRef} className={isDragging ? "opacity-50 scale-95 transition-all" : "transition-all"}>
+        <Card {...cardProps} className={className}>
+          {children}
+        </Card>
+      </div>
+    );
+  },
+);
+
+DraggableCard.displayName = "DraggableCard";
diff --git a/archon-ui-main/src/features/ui/primitives/grouped-card.tsx b/archon-ui-main/src/features/ui/primitives/grouped-card.tsx
new file mode 100644
index 0000000000..0c1df9f407
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/grouped-card.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { DataCard } from "./data-card";
+import { cn } from "./styles";
+
+interface GroupedCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  cards: Array<{
+    id: string;
+    title: string;
+    edgeColor: "purple" | "blue" | "cyan" | "green" | "orange" | "pink" | "red";
+    children?: React.ReactNode;
+  }>;
+  maxVisible?: number;
+}
+
+/**
+ * GroupedCard - Stacked card component showing multiple cards in shuffle deck style
+ *
+ * Features:
+ * - Shows 2-3 cards stacked on top of each other
+ * - Top edge lights visible with fading effect
+ * - Progressive scaling (each card ~5% smaller)
+ * - Cards raised up behind top card with z-index layering
+ */
+export const GroupedCard = React.forwardRef<HTMLDivElement, GroupedCardProps>(
+  ({ cards, maxVisible = 3, className, ...props }, ref) => {
+    const visibleCards = cards.slice(0, maxVisible);
+    const cardCount = visibleCards.length;
+
+    return (
+      <div ref={ref} className={cn("relative", className)} {...props}>
+        {visibleCards.map((card, index) => {
+          const isTop = index === 0;
+          const zIndex = cardCount - index;
+          const scale = 1 - index * 0.03; // 3% smaller per card
+          const yOffset = index * 16; // 16px raised per card to show edge lights
+          const opacity = 1 - index * 0.15; // Fade background cards slightly
+
+          return (
+            <div
+              key={card.id}
+              className="absolute inset-0 transition-all duration-300"
+              style={{
+                zIndex,
+                transform: `scale(${scale}) translateY(-${yOffset}px)`,
+                opacity: isTop ? 1 : opacity,
+              }}
+            >
+              <DataCard
+                edgePosition="top"
+                edgeColor={card.edgeColor}
+                blur="lg"
+                className={cn("transition-all duration-300", !isTop && "pointer-events-none")}
+              >
+                {card.children || (
+                  <div className="p-4">
+                    <h4 className="font-medium text-white">{card.title}</h4>
+                  </div>
+                )}
+              </DataCard>
+            </div>
+          );
+        })}
+        {/* Spacer to maintain height based on bottom card */}
+        <div style={{ paddingBottom: `${(cardCount - 1) * 16}px`, opacity: 0 }}>
+          <DataCard edgePosition="top" edgeColor={visibleCards[0]?.edgeColor || "cyan"}>
+            <div className="p-4">
+              <h4>{visibleCards[0]?.title || "Placeholder"}</h4>
+            </div>
+          </DataCard>
+        </div>
+      </div>
+    );
+  },
+);
+
+GroupedCard.displayName = "GroupedCard";
diff --git a/archon-ui-main/src/features/ui/primitives/index.ts b/archon-ui-main/src/features/ui/primitives/index.ts
index 163ce03ff7..e80760de91 100644
--- a/archon-ui-main/src/features/ui/primitives/index.ts
+++ b/archon-ui-main/src/features/ui/primitives/index.ts
@@ -14,13 +14,18 @@ export * from "./alert-dialog";
 
 // Export all primitives
 export * from "./button";
+export * from "./card";
 export * from "./combobox";
+export * from "./data-card";
 export * from "./dialog";
+export * from "./draggable-card";
 export * from "./dropdown-menu";
+export * from "./grouped-card";
 export * from "./input";
 export * from "./inspector-dialog";
 export * from "./pill";
 export * from "./select";
+export * from "./selectable-card";
 // Export style utilities
 export * from "./styles";
 export * from "./tabs";
diff --git a/archon-ui-main/src/features/ui/primitives/label.tsx b/archon-ui-main/src/features/ui/primitives/label.tsx
new file mode 100644
index 0000000000..d91c16b419
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/label.tsx
@@ -0,0 +1,20 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import React from "react";
+import { cn } from "./styles";
+
+export const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none",
+      "text-gray-700 dark:text-gray-200",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
diff --git a/archon-ui-main/src/features/ui/primitives/pill-navigation.tsx b/archon-ui-main/src/features/ui/primitives/pill-navigation.tsx
new file mode 100644
index 0000000000..2f3fae23a3
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/pill-navigation.tsx
@@ -0,0 +1,164 @@
+import { ChevronRight } from "lucide-react";
+import type { ReactNode } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/features/ui/primitives/select";
+import { cn } from "@/features/ui/primitives/styles";
+
+export interface PillNavigationItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  items?: string[];
+}
+
+interface PillNavigationProps {
+  items: PillNavigationItem[];
+  activeSection: string;
+  activeItem?: string;
+  onSectionClick: (sectionId: string) => void;
+  onItemClick?: (item: string) => void;
+  colorVariant?: "blue" | "orange" | "cyan" | "purple" | "green";
+  size?: "small" | "default" | "large";
+  showIcons?: boolean;
+  showText?: boolean;
+  hasSubmenus?: boolean;
+  openDropdown?: string | null;
+}
+
+export const PillNavigation = ({
+  items,
+  activeSection,
+  activeItem,
+  onSectionClick,
+  onItemClick,
+  colorVariant = "cyan",
+  size = "default",
+  showIcons = true,
+  showText = true,
+  hasSubmenus = true,
+  openDropdown,
+}: PillNavigationProps) => {
+  const getColorClasses = (variant: string, isSelected: boolean) => {
+    const colors = {
+      blue: isSelected
+        ? "bg-blue-500/20 dark:bg-blue-400/20 text-blue-700 dark:text-blue-300 border border-blue-400/50 shadow-[0_0_10px_rgba(59,130,246,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+      orange: isSelected
+        ? "bg-orange-500/20 dark:bg-orange-400/20 text-orange-700 dark:text-orange-300 border border-orange-400/50 shadow-[0_0_10px_rgba(251,146,60,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+      cyan: isSelected
+        ? "bg-cyan-500/20 dark:bg-cyan-400/20 text-cyan-700 dark:text-cyan-300 border border-cyan-400/50 shadow-[0_0_10px_rgba(34,211,238,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+      purple: isSelected
+        ? "bg-purple-500/20 dark:bg-purple-400/20 text-purple-700 dark:text-purple-300 border border-purple-400/50 shadow-[0_0_10px_rgba(147,51,234,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+      green: isSelected
+        ? "bg-green-500/20 dark:bg-green-400/20 text-green-700 dark:text-green-300 border border-green-400/50 shadow-[0_0_10px_rgba(34,197,94,0.5)]"
+        : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
+    };
+    return colors[variant as keyof typeof colors] || colors.cyan;
+  };
+
+  const getSizeClasses = (sizeVariant: string) => {
+    const sizes = {
+      small: "px-4 py-2 text-xs",
+      default: "px-6 py-3 text-sm",
+      large: "px-8 py-4 text-base",
+    };
+    return sizes[sizeVariant as keyof typeof sizes] || sizes.default;
+  };
+
+  return (
+    <div className="backdrop-blur-sm bg-white/40 dark:bg-white/5 border border-white/30 dark:border-white/15 rounded-full p-1 shadow-lg transition-all duration-300 ease-in-out">
+      <div className="flex gap-1 items-center">
+        {items.map((item) => {
+          const isSelected = activeSection === item.id;
+          const hasDropdown = hasSubmenus && item.items && item.items.length > 0;
+          const isThisExpanded = openDropdown === item.id && hasDropdown;
+
+          return (
+            <div key={item.id} className="relative">
+              {/* Extended pill for selected item with dropdown */}
+              {isSelected && hasDropdown ? (
+                <div
+                  className={cn(
+                    "flex items-center gap-2 rounded-full transition-all duration-200",
+                    "font-medium whitespace-nowrap",
+                    getSizeClasses(size),
+                    getColorClasses(colorVariant, true),
+                  )}
+                >
+                  {showIcons && item.icon}
+                  {showText && item.label}
+
+                  {/* Dropdown selector inside the pill */}
+                  {onItemClick && (
+                    <div className="flex items-center ml-4 pl-4 border-l border-current/30">
+                      <Select value={activeItem || ""} onValueChange={onItemClick}>
+                        <SelectTrigger
+                          className="bg-transparent border-none outline-none font-medium cursor-pointer text-inherit w-auto px-0 hover:border-none focus:border-none focus:shadow-none"
+                          showChevron={false}
+                          color={colorVariant}
+                        >
+                          <SelectValue placeholder="Select..." />
+                        </SelectTrigger>
+                        <SelectContent color={colorVariant}>
+                          {item.items?.map((subItem) => (
+                            <SelectItem key={subItem} value={subItem} color={colorVariant}>
+                              {subItem}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+
+                  <button
+                    type="button"
+                    className={cn(
+                      "ml-2 flex h-6 w-6 items-center justify-center rounded-full transition-transform duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent focus:ring-current",
+                      isThisExpanded ? "-rotate-90" : "rotate-0",
+                    )}
+                    aria-label={isThisExpanded ? `Collapse ${item.label}` : `Expand ${item.label}`}
+                    aria-expanded={isThisExpanded}
+                    onClick={() => onSectionClick(item.id)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        onSectionClick(item.id);
+                      }
+                    }}
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </button>
+                </div>
+              ) : (
+                /* Regular pill for non-selected items */
+                <button
+                  type="button"
+                  onClick={() => onSectionClick(item.id)}
+                  className={cn(
+                    "flex items-center gap-2 rounded-full transition-all duration-200",
+                    "font-medium whitespace-nowrap",
+                    getSizeClasses(size),
+                    getColorClasses(colorVariant, isSelected),
+                  )}
+                >
+                  {showIcons && item.icon}
+                  {showText && item.label}
+                  {hasDropdown && (
+                    <ChevronRight
+                      className={cn(
+                        "w-4 h-4 transition-transform duration-300",
+                        isThisExpanded ? "-rotate-90" : "rotate-0",
+                      )}
+                    />
+                  )}
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/archon-ui-main/src/features/ui/primitives/pill.tsx b/archon-ui-main/src/features/ui/primitives/pill.tsx
index 5c7a7040db..597faa8d4d 100644
--- a/archon-ui-main/src/features/ui/primitives/pill.tsx
+++ b/archon-ui-main/src/features/ui/primitives/pill.tsx
@@ -1,7 +1,7 @@
 import type React from "react";
 import { cn } from "./styles";
 
-export type PillColor = "blue" | "orange" | "cyan" | "purple" | "pink" | "emerald" | "gray";
+export type PillColor = "blue" | "orange" | "cyan" | "purple" | "pink" | "green" | "gray";
 
 export interface StatPillProps extends React.HTMLAttributes<HTMLDivElement> {
   color?: PillColor;
@@ -47,11 +47,11 @@ const COLOR_MAP: Record<PillColor, { bg: string; text: string; border: string; g
     border: "border-pink-300/60 dark:border-purple-500/50",
     glow: "shadow-[0_0_10px_rgba(236,72,153,0.35)]",
   },
-  emerald: {
-    bg: "from-emerald-100/80 to-white/60 dark:from-emerald-500/20 dark:to-emerald-500/10",
-    text: "text-emerald-700 dark:text-emerald-200",
-    border: "border-emerald-300/60 dark:border-emerald-500/50",
-    glow: "shadow-[0_0_10px_rgba(16,185,129,0.35)]",
+  green: {
+    bg: "from-green-100/80 to-white/60 dark:from-green-500/20 dark:to-green-500/10",
+    text: "text-green-700 dark:text-green-200",
+    border: "border-green-300/60 dark:border-green-500/50",
+    glow: "shadow-[0_0_10px_rgba(34,197,94,0.35)]",
   },
   gray: {
     bg: "from-gray-100/80 to-white/60 dark:from-gray-500/20 dark:to-gray-500/10",
diff --git a/archon-ui-main/src/features/ui/primitives/radio-group.tsx b/archon-ui-main/src/features/ui/primitives/radio-group.tsx
new file mode 100644
index 0000000000..b3349a0991
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/radio-group.tsx
@@ -0,0 +1,32 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import React from "react";
+import { cn, glassmorphism } from "./styles";
+
+export const RadioGroup = RadioGroupPrimitive.Root;
+
+export const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      "aspect-square h-4 w-4 rounded-full",
+      "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60",
+      "dark:from-white/10 dark:to-black/30",
+      glassmorphism.border.default,
+      glassmorphism.interactive.base,
+      "focus:outline-none focus:ring-2 focus:ring-cyan-500",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:border-cyan-500",
+      className,
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <Circle className="h-2.5 w-2.5 fill-cyan-500 text-cyan-500" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+));
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
diff --git a/archon-ui-main/src/features/ui/primitives/select.tsx b/archon-ui-main/src/features/ui/primitives/select.tsx
index c9781b64a1..bc0fbe886f 100644
--- a/archon-ui-main/src/features/ui/primitives/select.tsx
+++ b/archon-ui-main/src/features/ui/primitives/select.tsx
@@ -1,82 +1,152 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown } from "lucide-react";
 import React from "react";
-import { cn } from "./styles";
+import { cn, glassmorphism } from "./styles";
+
+export type SelectColor = "purple" | "blue" | "green" | "pink" | "orange" | "cyan";
 
 // Select Root - just re-export
 export const Select = SelectPrimitive.Root;
 export const SelectValue = SelectPrimitive.Value;
 
+const selectColorVariants = {
+  purple: {
+    trigger:
+      "hover:border-purple-400/50 hover:shadow-[0_0_15px_rgba(168,85,247,0.3)] focus:border-purple-500 focus:shadow-[0_0_20px_rgba(168,85,247,0.4)]",
+    item: "hover:bg-purple-500/20 dark:hover:bg-purple-400/20 data-[state=checked]:bg-purple-500/30 dark:data-[state=checked]:bg-purple-400/30 data-[state=checked]:text-purple-700 dark:data-[state=checked]:text-purple-300",
+  },
+  blue: {
+    trigger:
+      "hover:border-blue-400/50 hover:shadow-[0_0_15px_rgba(59,130,246,0.3)] focus:border-blue-500 focus:shadow-[0_0_20px_rgba(59,130,246,0.4)]",
+    item: "hover:bg-blue-500/20 dark:hover:bg-blue-400/20 data-[state=checked]:bg-blue-500/30 dark:data-[state=checked]:bg-blue-400/30 data-[state=checked]:text-blue-700 dark:data-[state=checked]:text-blue-300",
+  },
+  green: {
+    trigger:
+      "hover:border-green-400/50 hover:shadow-[0_0_15px_rgba(34,197,94,0.3)] focus:border-green-500 focus:shadow-[0_0_20px_rgba(34,197,94,0.4)]",
+    item: "hover:bg-green-500/20 dark:hover:bg-green-400/20 data-[state=checked]:bg-green-500/30 dark:data-[state=checked]:bg-green-400/30 data-[state=checked]:text-green-700 dark:data-[state=checked]:text-green-300",
+  },
+  pink: {
+    trigger:
+      "hover:border-pink-400/50 hover:shadow-[0_0_15px_rgba(236,72,153,0.3)] focus:border-pink-500 focus:shadow-[0_0_20px_rgba(236,72,153,0.4)]",
+    item: "hover:bg-pink-500/20 dark:hover:bg-pink-400/20 data-[state=checked]:bg-pink-500/30 dark:data-[state=checked]:bg-pink-400/30 data-[state=checked]:text-pink-700 dark:data-[state=checked]:text-pink-300",
+  },
+  orange: {
+    trigger:
+      "hover:border-orange-400/50 hover:shadow-[0_0_15px_rgba(249,115,22,0.3)] focus:border-orange-500 focus:shadow-[0_0_20px_rgba(249,115,22,0.4)]",
+    item: "hover:bg-orange-500/20 dark:hover:bg-orange-400/20 data-[state=checked]:bg-orange-500/30 dark:data-[state=checked]:bg-orange-400/30 data-[state=checked]:text-orange-700 dark:data-[state=checked]:text-orange-300",
+  },
+  cyan: {
+    trigger:
+      "hover:border-cyan-400/50 hover:shadow-[0_0_15px_rgba(34,211,238,0.3)] focus:border-cyan-500 focus:shadow-[0_0_20px_rgba(34,211,238,0.4)]",
+    item: "hover:bg-cyan-500/20 dark:hover:bg-cyan-400/20 data-[state=checked]:bg-cyan-500/30 dark:data-[state=checked]:bg-cyan-400/30 data-[state=checked]:text-cyan-700 dark:data-[state=checked]:text-cyan-300",
+  },
+};
+
+/**
+ * 🤖 AI CONTEXT: Enhanced Select Trigger
+ *
+ * GLASSMORPHISM ENHANCEMENTS:
+ * 1. TRANSPARENCY - True glass effect with backdrop blur
+ * 2. NEON BORDERS - Color-coded focus states
+ * 3. GLOW EFFECTS - Box shadows for depth
+ * 4. COLOR VARIANTS - Support for theme colors
+ */
 // Select Trigger with glassmorphism styling
 export const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
     showChevron?: boolean;
+    color?: SelectColor;
   }
->(({ className = "", children, showChevron = true, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex items-center justify-between gap-2 px-3 py-2 rounded-lg",
-      "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60",
-      "dark:from-white/10 dark:to-black/30",
-      "border border-gray-200 dark:border-gray-700",
-      "transition-all duration-200",
-      "hover:border-cyan-400/50 hover:shadow-[0_0_10px_rgba(34,211,238,0.2)]",
-      "focus:outline-none focus:border-cyan-500 focus:shadow-[0_0_15px_rgba(34,211,238,0.3)]",
-      "disabled:opacity-50 disabled:cursor-not-allowed",
-      "data-[placeholder]:text-gray-500 dark:data-[placeholder]:text-gray-400",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    {showChevron && (
-      <SelectPrimitive.Icon className="ml-auto">
-        <ChevronDown className="w-3 h-3 opacity-60" />
-      </SelectPrimitive.Icon>
-    )}
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+>(({ className = "", children, showChevron = true, color = "cyan", ...props }, ref) => {
+  const colorStyles = selectColorVariants[color];
 
-// Select Content with glassmorphism and Portal for z-index solution
-export const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className = "", children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
+  return (
+    <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
-        "relative z-[10000] min-w-[8rem] overflow-hidden rounded-lg",
-        // Matching our card glassmorphism
-        "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60",
-        "dark:from-white/10 dark:to-black/30",
-        "border border-gray-200 dark:border-zinc-800/50",
-        // Tron shadow with subtle cyan glow
-        "shadow-[0_10px_30px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]",
-        "shadow-cyan-500/5 dark:shadow-cyan-500/10",
-        // Text colors matching rest of app
-        "text-gray-900 dark:text-gray-100",
-        // Animation
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2",
-        "data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2",
-        "data-[side=top]:slide-in-from-bottom-2",
+        "flex items-center justify-between gap-2 px-3 py-2 rounded-lg",
+        "backdrop-blur-xl bg-black/10 dark:bg-white/10",
+        "border border-gray-300/30 dark:border-white/10",
+        "transition-all duration-300",
+        colorStyles.trigger,
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        "data-[placeholder]:text-gray-500 dark:data-[placeholder]:text-gray-400",
+        glassmorphism.interactive.base,
         className,
       )}
-      position={position}
-      sideOffset={5}
       {...props}
     >
-      <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
+      {children}
+      {showChevron && (
+        <SelectPrimitive.Icon className="ml-auto">
+          <ChevronDown className="w-3 h-3 opacity-60 transition-transform duration-300 data-[state=open]:rotate-180" />
+        </SelectPrimitive.Icon>
+      )}
+    </SelectPrimitive.Trigger>
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+/**
+ * 🤖 AI CONTEXT: Enhanced Select Content
+ *
+ * GLASS DROPDOWN DESIGN:
+ * 1. TRANSPARENCY - Full glass effect on dropdown
+ * 2. BACKDROP BLUR - Heavy blur for content behind
+ * 3. NEON GLOW - Subtle color-matched glow
+ * 4. PORTAL - Ensures z-index above all content
+ */
+// Select Content with glassmorphism and Portal for z-index solution
+export const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    color?: SelectColor;
+  }
+>(({ className = "", children, position = "popper", color = "cyan", ...props }, ref) => {
+  const glowColor = {
+    purple: "shadow-purple-500/20 dark:shadow-purple-500/30",
+    blue: "shadow-blue-500/20 dark:shadow-blue-500/30",
+    green: "shadow-green-500/20 dark:shadow-green-500/30",
+    pink: "shadow-pink-500/20 dark:shadow-pink-500/30",
+    orange: "shadow-orange-500/20 dark:shadow-orange-500/30",
+    cyan: "shadow-cyan-500/20 dark:shadow-cyan-500/30",
+  }[color];
+
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          "relative z-[10000] min-w-[8rem] overflow-hidden rounded-lg",
+          // True glassmorphism
+          "backdrop-blur-xl bg-black/20 dark:bg-white/10",
+          "border border-gray-300/30 dark:border-white/10",
+          // Neon shadow with color glow
+          "shadow-[0_10px_30px_-15px_rgba(0,0,0,0.3)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]",
+          glowColor,
+          // Text colors
+          "text-gray-900 dark:text-gray-100",
+          // Animation
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2",
+          "data-[side=top]:slide-in-from-bottom-2",
+          glassmorphism.animation.fadeIn,
+          className,
+        )}
+        position={position}
+        sideOffset={5}
+        {...props}
+      >
+        <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 // Select Item with hover effects
@@ -84,41 +154,43 @@ export const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
     icon?: React.ReactNode;
+    color?: SelectColor;
   }
->(({ className = "", children, icon, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex items-center text-sm outline-none",
-      "transition-all duration-150 cursor-pointer rounded-md",
-      "pl-8 pr-3 py-2", // Added left padding for checkmark space
-      // Text colors
-      "text-gray-700 dark:text-gray-200",
-      // Hover state with subtle cyan tint
-      "hover:bg-cyan-500/20 dark:hover:bg-cyan-400/20",
-      "hover:text-gray-900 dark:hover:text-white",
-      // Focus state
-      "focus:bg-cyan-500/20 dark:focus:bg-cyan-400/20",
-      "focus:text-gray-900 dark:focus:text-white",
-      // Disabled state
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      // Selected/checked state with stronger cyan
-      "data-[state=checked]:bg-cyan-500/30 dark:data-[state=checked]:bg-cyan-400/30",
-      "data-[state=checked]:text-cyan-700 dark:data-[state=checked]:text-cyan-300",
-      "data-[state=checked]:font-medium",
-      className,
-    )}
-    {...props}
-  >
-    <SelectPrimitive.ItemIndicator className="absolute left-2 flex h-4 w-4 items-center justify-center">
-      <Check className="h-4 w-4" />
-    </SelectPrimitive.ItemIndicator>
-    <SelectPrimitive.ItemText className="flex items-center gap-2">
-      {icon && <span className="flex-shrink-0">{icon}</span>}
-      {children}
-    </SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
+>(({ className = "", children, icon, color = "cyan", ...props }, ref) => {
+  const colorStyles = selectColorVariants[color];
+
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex items-center text-sm outline-none",
+        "transition-all duration-150 cursor-pointer rounded-md",
+        "pl-8 pr-3 py-2", // Added left padding for checkmark space
+        // Text colors
+        "text-gray-700 dark:text-gray-200",
+        // Hover and focus states with color tint
+        "hover:text-gray-900 dark:hover:text-white",
+        "focus:text-gray-900 dark:focus:text-white",
+        // Disabled state
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        // Selected/checked state with stronger color
+        "data-[state=checked]:font-medium",
+        colorStyles.item,
+        glassmorphism.interactive.base,
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemIndicator className="absolute left-2 flex h-4 w-4 items-center justify-center">
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText className="flex items-center gap-2">
+        {icon && <span className="flex-shrink-0">{icon}</span>}
+        {children}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+});
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 // Export group and label for completeness
@@ -129,7 +201,7 @@ export const SelectLabel = React.forwardRef<
 >(({ className = "", ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={`px-2 py-1.5 text-xs font-semibold text-gray-600 dark:text-gray-400 ${className}`}
+    className={cn("px-2 py-1.5 text-xs font-semibold text-gray-600 dark:text-gray-400", className)}
     {...props}
   />
 ));
diff --git a/archon-ui-main/src/features/ui/primitives/selectable-card.tsx b/archon-ui-main/src/features/ui/primitives/selectable-card.tsx
new file mode 100644
index 0000000000..bf1dc043ce
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/selectable-card.tsx
@@ -0,0 +1,90 @@
+import { motion } from "framer-motion";
+import React from "react";
+import { Card, type CardProps } from "./card";
+import { cn } from "./styles";
+
+interface SelectableCardProps extends Omit<CardProps, "ref"> {
+  // Selection state
+  isSelected?: boolean;
+  onSelect?: () => void;
+
+  // Visual states
+  isPinned?: boolean;
+  showAuroraGlow?: boolean; // Aurora effect for selected state
+
+  // Selection colors
+  selectedBorderColor?: string;
+  selectedShadow?: string;
+  pinnedBorderColor?: string;
+  pinnedShadow?: string;
+}
+
+export const SelectableCard = React.forwardRef<HTMLDivElement, SelectableCardProps>(
+  (
+    {
+      isSelected = false,
+      isPinned = false,
+      showAuroraGlow = false,
+      onSelect,
+      selectedBorderColor = "border-purple-400/60 dark:border-purple-500/60",
+      selectedShadow = "shadow-[0_0_15px_rgba(168,85,247,0.4),0_0_10px_rgba(147,51,234,0.3)] dark:shadow-[0_0_20px_rgba(168,85,247,0.5),0_0_15px_rgba(147,51,234,0.4)]",
+      pinnedBorderColor = "border-purple-500/80 dark:border-purple-500/80",
+      pinnedShadow = "shadow-[0_0_15px_rgba(168,85,247,0.3)]",
+      children,
+      className,
+      ...cardProps
+    },
+    ref,
+  ) => {
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onSelect?.();
+      }
+    };
+
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: motion.div required for framer-motion animations - semantic button would break animation behavior
+      <motion.div
+        role="button"
+        tabIndex={0}
+        onClick={onSelect}
+        onKeyDown={handleKeyDown}
+        aria-selected={isSelected}
+        className={cn(
+          "cursor-pointer transition-all duration-300 overflow-visible",
+          isSelected ? "scale-[1.02]" : "hover:scale-[1.01]",
+        )}
+        whileHover={{ scale: isSelected ? 1.02 : 1.01 }}
+      >
+        <div className="relative">
+          {/* Aurora glow effect for selected state */}
+          {isSelected && showAuroraGlow && (
+            <div
+              aria-hidden="true"
+              className="absolute inset-0 rounded-xl overflow-hidden opacity-30 dark:opacity-40 pointer-events-none"
+            >
+              <div className="absolute -inset-[100px] bg-[radial-gradient(circle,rgba(168,85,247,0.8)_0%,rgba(147,51,234,0.6)_40%,transparent_70%)] blur-3xl animate-[pulse_8s_ease-in-out_infinite]" />
+            </div>
+          )}
+
+          <Card
+            ref={ref}
+            {...cardProps}
+            className={cn(
+              isPinned && pinnedBorderColor,
+              isPinned && pinnedShadow,
+              isSelected && !isPinned && selectedBorderColor,
+              isSelected && !isPinned && selectedShadow,
+              className,
+            )}
+          >
+            {children}
+          </Card>
+        </div>
+      </motion.div>
+    );
+  },
+);
+
+SelectableCard.displayName = "SelectableCard";
diff --git a/archon-ui-main/src/features/ui/primitives/styles.ts b/archon-ui-main/src/features/ui/primitives/styles.ts
index 26e2b1cfff..aea974a4c0 100644
--- a/archon-ui-main/src/features/ui/primitives/styles.ts
+++ b/archon-ui-main/src/features/ui/primitives/styles.ts
@@ -8,28 +8,27 @@
  * - For runtime theme values, use useThemeAware hook
  */
 
-// Base glassmorphism classes with Tron aesthetic
+// Base glassmorphism classes with Tron aesthetic - TRUE GLASS EFFECT
 export const glassmorphism = {
-  // Background variations - matching existing Card.tsx patterns
+  // Background variations - TRUE TRANSPARENCY for glass effect
   background: {
-    subtle: "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30",
-    strong: "backdrop-blur-md bg-gradient-to-b from-white/95 to-white/90 dark:from-gray-800/95 dark:to-gray-900/95",
-    card: "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30",
-    // Tron-style colored backgrounds
-    cyan: "backdrop-blur-md bg-gradient-to-b from-cyan-100/80 dark:from-cyan-500/20 to-white/60 dark:to-cyan-500/5",
-    blue: "backdrop-blur-md bg-gradient-to-b from-blue-100/80 dark:from-blue-500/20 to-white/60 dark:to-blue-500/5",
-    purple:
-      "backdrop-blur-md bg-gradient-to-b from-purple-100/80 dark:from-purple-500/20 to-white/60 dark:to-purple-500/5",
+    subtle: "backdrop-blur-xl bg-white/5 dark:bg-white/10",
+    strong: "backdrop-blur-xl bg-white/10 dark:bg-white/20",
+    card: "backdrop-blur-xl bg-white/5 dark:bg-white/10",
+    // Tron-style colored backgrounds - VERY transparent with strong blur
+    cyan: "backdrop-blur-xl bg-cyan-400/5 dark:bg-cyan-400/10",
+    blue: "backdrop-blur-xl bg-blue-400/5 dark:bg-blue-400/10",
+    purple: "backdrop-blur-xl bg-purple-400/5 dark:bg-purple-400/10",
   },
 
-  // Border styles with neon glow
+  // Border styles for glass effect - more prominent for edge definition
   border: {
-    default: "border border-gray-200 dark:border-gray-700",
-    cyan: "border-cyan-300 dark:border-cyan-500/30",
-    blue: "border-blue-300 dark:border-blue-500/30",
-    purple: "border-purple-300 dark:border-purple-500/30",
-    focus: "focus:border-cyan-500 focus:shadow-[0_0_20px_5px_rgba(34,211,238,0.5)]",
-    hover: "hover:border-cyan-400/70 hover:shadow-[0_0_15px_rgba(34,211,238,0.4)]",
+    default: "border border-white/10 dark:border-white/[0.06]",
+    cyan: "border border-cyan-400/50 dark:border-cyan-400/40",
+    blue: "border border-blue-400/50 dark:border-blue-400/40",
+    purple: "border border-purple-400/50 dark:border-purple-400/40",
+    focus: "focus:border-cyan-400 focus:shadow-[0_0_30px_10px_rgba(34,211,238,0.6)]",
+    hover: "hover:border-cyan-400/80 hover:shadow-[0_0_25px_5px_rgba(34,211,238,0.5)]",
   },
 
   // Interactive states
@@ -59,14 +58,34 @@ export const glassmorphism = {
     md: "shadow-md dark:shadow-lg",
     lg: "shadow-lg dark:shadow-2xl",
     elevated: "shadow-[0_10px_30px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]",
-    // Neon glow effects matching Card.tsx
+    // Strong neon glow effects for true Tron aesthetic
     glow: {
-      cyan: "shadow-[0_0_10px_2px_rgba(34,211,238,0.4)] dark:shadow-[0_0_20px_5px_rgba(34,211,238,0.7)]",
-      blue: "shadow-[0_0_10px_2px_rgba(59,130,246,0.4)] dark:shadow-[0_0_20px_5px_rgba(59,130,246,0.7)]",
-      purple: "shadow-[0_0_10px_2px_rgba(168,85,247,0.4)] dark:shadow-[0_0_20px_5px_rgba(168,85,247,0.7)]",
-      green: "shadow-[0_0_10px_2px_rgba(16,185,129,0.4)] dark:shadow-[0_0_20px_5px_rgba(16,185,129,0.7)]",
-      pink: "shadow-[0_0_10px_2px_rgba(236,72,153,0.4)] dark:shadow-[0_0_20px_5px_rgba(236,72,153,0.7)]",
-      orange: "shadow-[0_0_10px_2px_rgba(251,146,60,0.4)] dark:shadow-[0_0_20px_5px_rgba(251,146,60,0.7)]",
+      purple: "shadow-[0_0_30px_10px_rgba(168,85,247,0.5)] dark:shadow-[0_0_40px_15px_rgba(168,85,247,0.7)]",
+      blue: "shadow-[0_0_30px_10px_rgba(59,130,246,0.5)] dark:shadow-[0_0_40px_15px_rgba(59,130,246,0.7)]",
+      green: "shadow-[0_0_30px_10px_rgba(34,197,94,0.5)] dark:shadow-[0_0_40px_15px_rgba(34,197,94,0.7)]",
+      red: "shadow-[0_0_30px_10px_rgba(239,68,68,0.5)] dark:shadow-[0_0_40px_15px_rgba(239,68,68,0.7)]",
+      orange: "shadow-[0_0_30px_10px_rgba(251,146,60,0.5)] dark:shadow-[0_0_40px_15px_rgba(251,146,60,0.7)]",
+      cyan: "shadow-[0_0_30px_10px_rgba(34,211,238,0.5)] dark:shadow-[0_0_40px_15px_rgba(34,211,238,0.7)]",
+      pink: "shadow-[0_0_30px_10px_rgba(236,72,153,0.5)] dark:shadow-[0_0_40px_15px_rgba(236,72,153,0.7)]",
+    },
+  },
+
+  // Edge glow positions - now part of glassCard for better integration
+  edgePositions: {
+    none: "",
+    top: "before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-[2px]",
+    left: "before:content-[''] before:absolute before:top-0 before:left-0 before:bottom-0 before:w-[2px]",
+    right: "before:content-[''] before:absolute before:top-0 before:right-0 before:bottom-0 before:w-[2px]",
+    bottom: "before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[2px]",
+  },
+
+  // Configurable sizes for cards
+  sizes: {
+    card: {
+      sm: "p-4 max-w-sm",
+      md: "p-6 max-w-md",
+      lg: "p-8 max-w-lg",
+      xl: "p-10 max-w-xl",
     },
   },
 
@@ -99,6 +118,453 @@ export const glassmorphism = {
   },
 };
 
+// Card-specific glass styles with accent colors
+export const glassCard = {
+  // Base glass card (true transparency) - NO blur here, controlled separately
+  base: "relative rounded-lg overflow-hidden border transition-all duration-300",
+
+  // Blur intensity levels - Visible glass effect
+  blur: {
+    none: "backdrop-blur-none", // No blur (0px)
+    sm: "backdrop-blur-sm", // 4px - Light glass
+    md: "backdrop-blur-md", // 12px - Medium glass (visible blur)
+    lg: "backdrop-blur-lg", // 16px - Strong glass
+    xl: "backdrop-blur-xl", // 24px - Very strong glass
+    "2xl": "backdrop-blur-2xl", // 40px - Heavy glass
+    "3xl": "backdrop-blur-3xl", // 64px - Maximum glass
+  },
+
+  // Glass transparency levels - Theme-aware for better color visibility
+  transparency: {
+    clear: "bg-white/[0.02] dark:bg-white/[0.01]", // Very transparent - see through
+    light: "bg-white/[0.08] dark:bg-white/[0.05]", // Light glass - see through clearly
+    medium: "bg-white/[0.15] dark:bg-white/[0.08]", // Medium glass - lighter in dark mode
+    frosted: "bg-white/[0.40] dark:bg-black/[0.40]", // Frosted - white in light, black in dark
+    solid: "bg-white/[0.90] dark:bg-black/[0.95]", // Solid - opaque
+  },
+
+  // Edge color mappings for DataCard (edge-lit cards with colored gradients)
+  edgeColors: {
+    purple: {
+      solid: "bg-purple-500",
+      gradient: "from-purple-500/40",
+      border: "border-purple-500/30",
+      bg: "bg-gradient-to-br from-purple-500/8 to-purple-600/3",
+    },
+    blue: {
+      solid: "bg-blue-500",
+      gradient: "from-blue-500/40",
+      border: "border-blue-500/30",
+      bg: "bg-gradient-to-br from-blue-500/8 to-blue-600/3",
+    },
+    cyan: {
+      solid: "bg-cyan-500",
+      gradient: "from-cyan-500/40",
+      border: "border-cyan-500/30",
+      bg: "bg-gradient-to-br from-cyan-500/8 to-cyan-600/3",
+    },
+    green: {
+      solid: "bg-green-500",
+      gradient: "from-green-500/40",
+      border: "border-green-500/30",
+      bg: "bg-gradient-to-br from-green-500/8 to-green-600/3",
+    },
+    orange: {
+      solid: "bg-orange-500",
+      gradient: "from-orange-500/40",
+      border: "border-orange-500/30",
+      bg: "bg-gradient-to-br from-orange-500/8 to-orange-600/3",
+    },
+    pink: {
+      solid: "bg-pink-500",
+      gradient: "from-pink-500/40",
+      border: "border-pink-500/30",
+      bg: "bg-gradient-to-br from-pink-500/8 to-pink-600/3",
+    },
+    red: {
+      solid: "bg-red-500",
+      gradient: "from-red-500/40",
+      border: "border-red-500/30",
+      bg: "bg-gradient-to-br from-red-500/8 to-red-600/3",
+    },
+  },
+
+  // Colored glass tints - BRIGHT NEON COLORS with higher opacity
+  tints: {
+    none: "",
+    purple: {
+      clear: "bg-purple-500/[0.03] dark:bg-purple-400/[0.04]", // 3-4% - barely visible tint
+      light: "bg-purple-500/[0.08] dark:bg-purple-400/[0.10]", // 8-10% - subtle colored glass
+      medium: "bg-purple-500/[0.15] dark:bg-purple-400/[0.20]", // 15-20% - standard colored glass
+      frosted: "bg-purple-500/[0.25] dark:bg-purple-400/[0.35]", // 25-35% - frosted colored glass
+      solid: "bg-purple-500/[0.40] dark:bg-purple-400/[0.60]", // 40-60% - bright neon glow
+    },
+    blue: {
+      clear: "bg-blue-500/[0.03] dark:bg-blue-400/[0.04]",
+      light: "bg-blue-500/[0.08] dark:bg-blue-400/[0.10]",
+      medium: "bg-blue-500/[0.15] dark:bg-blue-400/[0.20]",
+      frosted: "bg-blue-500/[0.25] dark:bg-blue-400/[0.35]",
+      solid: "bg-blue-500/[0.40] dark:bg-blue-400/[0.60]",
+    },
+    cyan: {
+      clear: "bg-cyan-500/[0.03] dark:bg-cyan-400/[0.04]",
+      light: "bg-cyan-500/[0.08] dark:bg-cyan-400/[0.10]",
+      medium: "bg-cyan-500/[0.15] dark:bg-cyan-400/[0.20]",
+      frosted: "bg-cyan-500/[0.25] dark:bg-cyan-400/[0.35]",
+      solid: "bg-cyan-500/[0.40] dark:bg-cyan-400/[0.60]",
+    },
+    green: {
+      clear: "bg-green-500/[0.03] dark:bg-green-400/[0.04]",
+      light: "bg-green-500/[0.08] dark:bg-green-400/[0.10]",
+      medium: "bg-green-500/[0.15] dark:bg-green-400/[0.20]",
+      frosted: "bg-green-500/[0.25] dark:bg-green-400/[0.35]",
+      solid: "bg-green-500/[0.40] dark:bg-green-400/[0.60]",
+    },
+    orange: {
+      clear: "bg-orange-500/[0.03] dark:bg-orange-400/[0.04]",
+      light: "bg-orange-500/[0.08] dark:bg-orange-400/[0.10]",
+      medium: "bg-orange-500/[0.15] dark:bg-orange-400/[0.20]",
+      frosted: "bg-orange-500/[0.25] dark:bg-orange-400/[0.35]",
+      solid: "bg-orange-500/[0.40] dark:bg-orange-400/[0.60]",
+    },
+    pink: {
+      clear: "bg-pink-500/[0.03] dark:bg-pink-400/[0.04]",
+      light: "bg-pink-500/[0.08] dark:bg-pink-400/[0.10]",
+      medium: "bg-pink-500/[0.15] dark:bg-pink-400/[0.20]",
+      frosted: "bg-pink-500/[0.25] dark:bg-pink-400/[0.35]",
+      solid: "bg-pink-500/[0.40] dark:bg-pink-400/[0.60]",
+    },
+    red: {
+      clear: "bg-red-500/[0.03] dark:bg-red-400/[0.04]",
+      light: "bg-red-500/[0.08] dark:bg-red-400/[0.10]",
+      medium: "bg-red-500/[0.15] dark:bg-red-400/[0.20]",
+      frosted: "bg-red-500/[0.25] dark:bg-red-400/[0.35]",
+      solid: "bg-red-500/[0.40] dark:bg-red-400/[0.60]",
+    },
+  },
+
+  // Neon glow effects - BRIGHTER & MORE INTENSE (default = md size)
+  variants: {
+    none: {
+      border: "border-gray-300/20 dark:border-white/10",
+      glow: "",
+      hover: "hover:bg-white/[0.04] dark:hover:bg-white/[0.02]",
+    },
+    purple: {
+      border: "border-purple-500/50 dark:border-purple-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(168,85,247,0.4)] dark:shadow-[0_0_60px_25px_rgba(168,85,247,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(168,85,247,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(168,85,247,0.8)]",
+    },
+    blue: {
+      border: "border-blue-500/50 dark:border-blue-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(59,130,246,0.4)] dark:shadow-[0_0_60px_25px_rgba(59,130,246,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(59,130,246,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(59,130,246,0.8)]",
+    },
+    green: {
+      border: "border-green-500/50 dark:border-green-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(34,197,94,0.4)] dark:shadow-[0_0_60px_25px_rgba(34,197,94,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(34,197,94,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(34,197,94,0.8)]",
+    },
+    cyan: {
+      border: "border-cyan-500/50 dark:border-cyan-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(34,211,238,0.4)] dark:shadow-[0_0_60px_25px_rgba(34,211,238,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(34,211,238,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(34,211,238,0.8)]",
+    },
+    orange: {
+      border: "border-orange-500/50 dark:border-orange-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(251,146,60,0.4)] dark:shadow-[0_0_60px_25px_rgba(251,146,60,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(251,146,60,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(251,146,60,0.8)]",
+    },
+    pink: {
+      border: "border-pink-500/50 dark:border-pink-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(236,72,153,0.4)] dark:shadow-[0_0_60px_25px_rgba(236,72,153,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(236,72,153,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(236,72,153,0.8)]",
+    },
+    red: {
+      border: "border-red-500/50 dark:border-red-400/40",
+      glow: "shadow-[0_0_40px_15px_rgba(239,68,68,0.4)] dark:shadow-[0_0_60px_25px_rgba(239,68,68,0.7)]",
+      hover: "hover:shadow-[0_0_50px_20px_rgba(239,68,68,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(239,68,68,0.8)]",
+    },
+  },
+
+  // Outer glow size variants (static classes for each color)
+  outerGlowSizes: {
+    cyan: {
+      sm: "shadow-[0_0_20px_rgba(34,211,238,0.3)]",
+      md: "shadow-[0_0_40px_rgba(34,211,238,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(34,211,238,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(34,211,238,0.6)]",
+    },
+    purple: {
+      sm: "shadow-[0_0_20px_rgba(168,85,247,0.3)]",
+      md: "shadow-[0_0_40px_rgba(168,85,247,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(168,85,247,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(168,85,247,0.6)]",
+    },
+    blue: {
+      sm: "shadow-[0_0_20px_rgba(59,130,246,0.3)]",
+      md: "shadow-[0_0_40px_rgba(59,130,246,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(59,130,246,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(59,130,246,0.6)]",
+    },
+    pink: {
+      sm: "shadow-[0_0_20px_rgba(236,72,153,0.3)]",
+      md: "shadow-[0_0_40px_rgba(236,72,153,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(236,72,153,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(236,72,153,0.6)]",
+    },
+    green: {
+      sm: "shadow-[0_0_20px_rgba(34,197,94,0.3)]",
+      md: "shadow-[0_0_40px_rgba(34,197,94,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(34,197,94,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(34,197,94,0.6)]",
+    },
+    orange: {
+      sm: "shadow-[0_0_20px_rgba(251,146,60,0.3)]",
+      md: "shadow-[0_0_40px_rgba(251,146,60,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(251,146,60,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(251,146,60,0.6)]",
+    },
+    red: {
+      sm: "shadow-[0_0_20px_rgba(239,68,68,0.3)]",
+      md: "shadow-[0_0_40px_rgba(239,68,68,0.4)]",
+      lg: "shadow-[0_0_70px_rgba(239,68,68,0.5)]",
+      xl: "shadow-[0_0_100px_rgba(239,68,68,0.6)]",
+    },
+  },
+
+  // Inner glow variants (static classes for each color) - WIDER range than outer
+  innerGlowSizes: {
+    cyan: {
+      sm: "shadow-[inset_0_0_15px_rgba(34,211,238,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(34,211,238,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(34,211,238,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(34,211,238,0.5)]",
+    },
+    purple: {
+      sm: "shadow-[inset_0_0_15px_rgba(168,85,247,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(168,85,247,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(168,85,247,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(168,85,247,0.5)]",
+    },
+    blue: {
+      sm: "shadow-[inset_0_0_15px_rgba(59,130,246,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(59,130,246,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(59,130,246,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(59,130,246,0.5)]",
+    },
+    pink: {
+      sm: "shadow-[inset_0_0_15px_rgba(236,72,153,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(236,72,153,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(236,72,153,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(236,72,153,0.5)]",
+    },
+    green: {
+      sm: "shadow-[inset_0_0_15px_rgba(34,197,94,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(34,197,94,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(34,197,94,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(34,197,94,0.5)]",
+    },
+    orange: {
+      sm: "shadow-[inset_0_0_15px_rgba(251,146,60,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(251,146,60,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(251,146,60,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(251,146,60,0.5)]",
+    },
+    red: {
+      sm: "shadow-[inset_0_0_15px_rgba(239,68,68,0.2)]",
+      md: "shadow-[inset_0_0_40px_rgba(239,68,68,0.3)]",
+      lg: "shadow-[inset_0_0_80px_rgba(239,68,68,0.4)]",
+      xl: "shadow-[inset_0_0_120px_rgba(239,68,68,0.5)]",
+    },
+  },
+
+  // Hover glow variants - size-matched (brighter, same size)
+  outerGlowHover: {
+    cyan: {
+      sm: "hover:shadow-[0_0_20px_rgba(34,211,238,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(34,211,238,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(34,211,238,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(34,211,238,0.8)]",
+    },
+    purple: {
+      sm: "hover:shadow-[0_0_20px_rgba(168,85,247,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(168,85,247,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(168,85,247,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(168,85,247,0.8)]",
+    },
+    blue: {
+      sm: "hover:shadow-[0_0_20px_rgba(59,130,246,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(59,130,246,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(59,130,246,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(59,130,246,0.8)]",
+    },
+    pink: {
+      sm: "hover:shadow-[0_0_20px_rgba(236,72,153,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(236,72,153,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(236,72,153,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(236,72,153,0.8)]",
+    },
+    green: {
+      sm: "hover:shadow-[0_0_20px_rgba(34,197,94,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(34,197,94,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(34,197,94,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(34,197,94,0.8)]",
+    },
+    orange: {
+      sm: "hover:shadow-[0_0_20px_rgba(251,146,60,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(251,146,60,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(251,146,60,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(251,146,60,0.8)]",
+    },
+    red: {
+      sm: "hover:shadow-[0_0_20px_rgba(239,68,68,0.5)]",
+      md: "hover:shadow-[0_0_40px_rgba(239,68,68,0.6)]",
+      lg: "hover:shadow-[0_0_70px_rgba(239,68,68,0.7)]",
+      xl: "hover:shadow-[0_0_100px_rgba(239,68,68,0.8)]",
+    },
+  },
+
+  innerGlowHover: {
+    cyan: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(34,211,238,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(34,211,238,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(34,211,238,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(34,211,238,0.7)]",
+    },
+    purple: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(168,85,247,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(168,85,247,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(168,85,247,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(168,85,247,0.7)]",
+    },
+    blue: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(59,130,246,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(59,130,246,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(59,130,246,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(59,130,246,0.7)]",
+    },
+    pink: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(236,72,153,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(236,72,153,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(236,72,153,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(236,72,153,0.7)]",
+    },
+    green: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(34,197,94,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(34,197,94,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(34,197,94,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(34,197,94,0.7)]",
+    },
+    orange: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(251,146,60,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(251,146,60,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(251,146,60,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(251,146,60,0.7)]",
+    },
+    red: {
+      sm: "hover:shadow-[inset_0_0_15px_rgba(239,68,68,0.4)]",
+      md: "hover:shadow-[inset_0_0_40px_rgba(239,68,68,0.5)]",
+      lg: "hover:shadow-[inset_0_0_80px_rgba(239,68,68,0.6)]",
+      xl: "hover:shadow-[inset_0_0_120px_rgba(239,68,68,0.7)]",
+    },
+  },
+
+  // Size variants
+  sizes: {
+    none: "p-0",
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+    xl: "p-10",
+  },
+
+  // Edge-lit effects for cards (top, left, right, bottom edges)
+  edgeLit: {
+    position: {
+      none: "",
+      top: "before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-[2px] before:rounded-t-lg",
+      left: "before:content-[''] before:absolute before:top-0 before:left-0 before:bottom-0 before:w-[2px] before:rounded-l-lg",
+      right:
+        "before:content-[''] before:absolute before:top-0 before:right-0 before:bottom-0 before:w-[2px] before:rounded-r-lg",
+      bottom:
+        "before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[2px] before:rounded-b-lg",
+    },
+    color: {
+      purple: {
+        line: "before:bg-purple-500 dark:before:bg-purple-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(168,85,247,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-purple-500 dark:before:via-purple-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-purple-500 dark:before:via-purple-400 before:to-transparent",
+        },
+      },
+      blue: {
+        line: "before:bg-blue-500 dark:before:bg-blue-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(59,130,246,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-blue-500 dark:before:via-blue-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-blue-500 dark:before:via-blue-400 before:to-transparent",
+        },
+      },
+      cyan: {
+        line: "before:bg-cyan-500 dark:before:bg-cyan-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(34,211,238,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-cyan-500 dark:before:via-cyan-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-cyan-500 dark:before:via-cyan-400 before:to-transparent",
+        },
+      },
+      green: {
+        line: "before:bg-green-500 dark:before:bg-green-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(34,197,94,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-green-500 dark:before:via-green-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-green-500 dark:before:via-green-400 before:to-transparent",
+        },
+      },
+      orange: {
+        line: "before:bg-orange-500 dark:before:bg-orange-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(251,146,60,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-orange-500 dark:before:via-orange-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-orange-500 dark:before:via-orange-400 before:to-transparent",
+        },
+      },
+      pink: {
+        line: "before:bg-pink-500 dark:before:bg-pink-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(236,72,153,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-pink-500 dark:before:via-pink-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-pink-500 dark:before:via-pink-400 before:to-transparent",
+        },
+      },
+      red: {
+        line: "before:bg-red-500 dark:before:bg-red-400",
+        glow: "before:shadow-[0_0_15px_4px_rgba(239,68,68,0.8)]",
+        gradient: {
+          horizontal:
+            "before:bg-gradient-to-r before:from-transparent before:via-red-500 dark:before:via-red-400 before:to-transparent",
+          vertical:
+            "before:bg-gradient-to-b before:from-transparent before:via-red-500 dark:before:via-red-400 before:to-transparent",
+        },
+      },
+    },
+  },
+};
+
 // Compound styles for common patterns
 export const compoundStyles = {
   // Standard interactive element (buttons, menu items, etc.)
@@ -127,7 +593,7 @@ export const compoundStyles = {
     ${glassmorphism.interactive.disabled}
   `,
 
-  // Cards and containers
+  // Cards - use glassCard instead
   card: `
     ${glassmorphism.background.card}
     ${glassmorphism.border.default}
diff --git a/archon-ui-main/src/features/ui/primitives/switch.tsx b/archon-ui-main/src/features/ui/primitives/switch.tsx
new file mode 100644
index 0000000000..f621dd0ac1
--- /dev/null
+++ b/archon-ui-main/src/features/ui/primitives/switch.tsx
@@ -0,0 +1,195 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+import { cn, glassmorphism } from "./styles";
+
+export type SwitchSize = "sm" | "md" | "lg";
+export type SwitchColor = "purple" | "blue" | "green" | "pink" | "orange" | "cyan";
+
+interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+  size?: SwitchSize;
+  color?: SwitchColor;
+  icon?: React.ReactNode;
+  iconOn?: React.ReactNode;
+  iconOff?: React.ReactNode;
+}
+
+const switchVariants = {
+  size: {
+    sm: {
+      root: "h-4 w-8",
+      thumb: "h-3 w-3 data-[state=checked]:translate-x-4",
+      icon: "",
+    },
+    md: {
+      root: "h-6 w-11",
+      thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+      icon: "h-3 w-3",
+    },
+    lg: {
+      root: "h-8 w-14",
+      thumb: "h-7 w-7 data-[state=checked]:translate-x-6",
+      icon: "h-5 w-5",
+    },
+  },
+  color: {
+    purple: {
+      checked: "data-[state=checked]:bg-purple-500/20 data-[state=checked]:border-purple-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(168,85,247,0.5)]",
+      thumb: "data-[state=checked]:border-purple-400 data-[state=checked]:shadow-[0_0_10px_rgba(168,85,247,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-purple-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(168,85,247,0.7)]",
+      focusRing: "focus-visible:ring-purple-500",
+    },
+    blue: {
+      checked: "data-[state=checked]:bg-blue-500/20 data-[state=checked]:border-blue-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(59,130,246,0.5)]",
+      thumb: "data-[state=checked]:border-blue-400 data-[state=checked]:shadow-[0_0_10px_rgba(59,130,246,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-blue-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(59,130,246,0.7)]",
+      focusRing: "focus-visible:ring-blue-500",
+    },
+    green: {
+      checked: "data-[state=checked]:bg-green-500/20 data-[state=checked]:border-green-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(34,197,94,0.5)]",
+      thumb: "data-[state=checked]:border-green-400 data-[state=checked]:shadow-[0_0_10px_rgba(34,197,94,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-green-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(34,197,94,0.7)]",
+      focusRing: "focus-visible:ring-green-500",
+    },
+    pink: {
+      checked: "data-[state=checked]:bg-pink-500/20 data-[state=checked]:border-pink-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(236,72,153,0.5)]",
+      thumb: "data-[state=checked]:border-pink-400 data-[state=checked]:shadow-[0_0_10px_rgba(236,72,153,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-pink-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(236,72,153,0.7)]",
+      focusRing: "focus-visible:ring-pink-500",
+    },
+    orange: {
+      checked: "data-[state=checked]:bg-orange-500/20 data-[state=checked]:border-orange-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(249,115,22,0.5)]",
+      thumb: "data-[state=checked]:border-orange-400 data-[state=checked]:shadow-[0_0_10px_rgba(249,115,22,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-orange-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(249,115,22,0.7)]",
+      focusRing: "focus-visible:ring-orange-500",
+    },
+    cyan: {
+      checked: "data-[state=checked]:bg-cyan-500/20 data-[state=checked]:border-cyan-500/50",
+      glow: "data-[state=checked]:shadow-[0_0_20px_rgba(34,211,238,0.5)]",
+      thumb: "data-[state=checked]:border-cyan-400 data-[state=checked]:shadow-[0_0_10px_rgba(34,211,238,0.5)]",
+      icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-cyan-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(34,211,238,0.7)]",
+      focusRing: "focus-visible:ring-cyan-500",
+    },
+  },
+};
+
+/**
+ * 🤖 AI CONTEXT: Enhanced Switch Component
+ *
+ * GLASS PROPERTIES for true glassmorphism:
+ * 1. TRANSPARENCY - Subtle background opacity
+ *    - unchecked: Almost invisible (bg-white/10)
+ *    - checked: Color tinted glass (color-500/20)
+ *
+ * 2. SIZE VARIANTS - Three sizes for different use cases
+ *    - sm: 16px height, no icons
+ *    - md: 24px height, smaller icons (12x12px)
+ *    - lg: 32px height, full icons (20x20px)
+ *
+ * 3. GLOW EFFECTS - Neon accents that animate
+ *    - Box shadow for outer glow
+ *    - Drop shadow for icon glow
+ *    - Transition animations for smooth state changes
+ *
+ * 4. ICON SUPPORT - Dynamic icon switching
+ *    - iconOn: Displayed when checked
+ *    - iconOff: Displayed when unchecked
+ *    - icon: Same icon for both states
+ *
+ * 5. CONTROLLED/UNCONTROLLED MODE SUPPORT
+ *    - Controlled: Pass checked prop + onCheckedChange handler
+ *    - Uncontrolled: Pass defaultChecked, component manages own state
+ */
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+  ({ className, size = "md", color = "cyan", icon, iconOn, iconOff, checked, defaultChecked, onCheckedChange, ...props }, ref) => {
+    const sizeStyles = switchVariants.size[size];
+    const colorStyles = switchVariants.color[color];
+
+    // Detect controlled vs uncontrolled mode
+    const isControlled = checked !== undefined;
+
+    // Internal state for uncontrolled mode
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
+
+    // Get the actual checked state (controlled or uncontrolled)
+    const actualChecked = isControlled ? checked : internalChecked;
+
+    // Handle state changes for both controlled and uncontrolled modes
+    const handleCheckedChange = React.useCallback(
+      (newChecked: boolean) => {
+        // Update internal state for uncontrolled mode
+        if (!isControlled) {
+          setInternalChecked(newChecked);
+        }
+        // Call parent's handler if provided
+        onCheckedChange?.(newChecked);
+      },
+      [isControlled, onCheckedChange]
+    );
+
+    const displayIcon = React.useMemo(() => {
+      if (size === "sm") return null;
+      return actualChecked ? iconOn || icon : iconOff || icon;
+    }, [size, actualChecked, icon, iconOn, iconOff]);
+
+    return (
+      <SwitchPrimitives.Root
+        className={cn(
+          "relative inline-flex shrink-0 cursor-pointer items-center rounded-full",
+          "bg-black/10 dark:bg-white/10 backdrop-blur-xl",
+          "border border-gray-300/30 dark:border-white/10",
+          "transition-all duration-500 ease-in-out",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          colorStyles.focusRing,
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          colorStyles.checked,
+          colorStyles.glow,
+          sizeStyles.root,
+          glassmorphism.interactive.base,
+          className,
+        )}
+        checked={actualChecked}
+        onCheckedChange={handleCheckedChange}
+        {...props}
+        ref={ref}
+      >
+        <SwitchPrimitives.Thumb
+          className={cn(
+            "pointer-events-none relative flex items-center justify-center rounded-full",
+            // Glass effect for thumb with proper fill
+            "bg-gradient-to-br from-gray-100/80 to-white/60 dark:from-gray-700/80 dark:to-gray-800/60",
+            "backdrop-blur-sm border-2",
+            "border-gray-400/50 dark:border-white/30",
+            "shadow-lg ring-0 transition-all duration-500 cubic-bezier(0.23, 1, 0.32, 1)",
+            "data-[state=unchecked]:translate-x-0",
+            // Checked state gets color tinted glass
+            "data-[state=checked]:from-white/90 data-[state=checked]:to-white/70 dark:data-[state=checked]:from-gray-100/20 dark:data-[state=checked]:to-gray-200/10",
+            colorStyles.thumb,
+            sizeStyles.thumb,
+          )}
+        >
+          {displayIcon && (
+            <div
+              className={cn(
+                "flex items-center justify-center transition-all duration-500",
+                // Icons have color in both states with different opacity
+                colorStyles.icon,
+                sizeStyles.icon,
+              )}
+            >
+              {displayIcon}
+            </div>
+          )}
+        </SwitchPrimitives.Thumb>
+      </SwitchPrimitives.Root>
+    );
+  },
+);
+
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch, switchVariants };
diff --git a/archon-ui-main/src/features/ui/primitives/tabs.tsx b/archon-ui-main/src/features/ui/primitives/tabs.tsx
index b74f7138b7..78d79ff541 100644
--- a/archon-ui-main/src/features/ui/primitives/tabs.tsx
+++ b/archon-ui-main/src/features/ui/primitives/tabs.tsx
@@ -5,82 +5,97 @@ import { cn } from "./styles";
 // Root
 export const Tabs = TabsPrimitive.Root;
 
-// List
+// List - styled like pill navigation
 export const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.List ref={ref} className={cn("relative", className)} role="tablist" {...props}>
-    {/* Subtle neon glow effect */}
-    <div className="absolute inset-0 rounded-lg opacity-30 blur-[1px] bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 pointer-events-none" />
-    {props.children}
-  </TabsPrimitive.List>
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "backdrop-blur-sm bg-white/40 dark:bg-white/5 border border-white/30 dark:border-white/15",
+      "rounded-full p-1 shadow-lg inline-flex gap-1",
+      className,
+    )}
+    role="tablist"
+    {...props}
+  />
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
 
 // Trigger
+type TabColor = "blue" | "purple" | "pink" | "orange" | "cyan" | "green";
+
 export const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
-    color?: "blue" | "purple" | "pink" | "orange" | "cyan" | "green";
+    color?: TabColor;
   }
 >(({ className, color = "blue", ...props }, ref) => {
-  const colorMap = {
-    blue: {
-      text: "data-[state=active]:text-blue-600 dark:data-[state=active]:text-blue-400",
-      glow: "data-[state=active]:bg-blue-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(59,130,246,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(59,130,246,0.7)]",
-      hover: "hover:text-blue-500 dark:hover:text-blue-400/70",
-    },
-    purple: {
-      text: "data-[state=active]:text-purple-600 dark:data-[state=active]:text-purple-400",
-      glow: "data-[state=active]:bg-purple-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(168,85,247,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(168,85,247,0.7)]",
-      hover: "hover:text-purple-500 dark:hover:text-purple-400/70",
-    },
-    pink: {
-      text: "data-[state=active]:text-pink-600 dark:data-[state=active]:text-pink-400",
-      glow: "data-[state=active]:bg-pink-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(236,72,153,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(236,72,153,0.7)]",
-      hover: "hover:text-pink-500 dark:hover:text-pink-400/70",
-    },
-    orange: {
-      text: "data-[state=active]:text-orange-600 dark:data-[state=active]:text-orange-400",
-      glow: "data-[state=active]:bg-orange-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(249,115,22,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(249,115,22,0.7)]",
-      hover: "hover:text-orange-500 dark:hover:text-orange-400/70",
-    },
-    cyan: {
-      text: "data-[state=active]:text-cyan-600 dark:data-[state=active]:text-cyan-400",
-      glow: "data-[state=active]:bg-cyan-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(34,211,238,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(34,211,238,0.7)]",
-      hover: "hover:text-cyan-500 dark:hover:text-cyan-400/70",
-    },
-    green: {
-      text: "data-[state=active]:text-emerald-600 dark:data-[state=active]:text-emerald-400",
-      glow: "data-[state=active]:bg-emerald-500 data-[state=active]:shadow-[0_0_10px_2px_rgba(16,185,129,0.4)] dark:data-[state=active]:shadow-[0_0_20px_5px_rgba(16,185,129,0.7)]",
-      hover: "hover:text-emerald-500 dark:hover:text-emerald-400/70",
-    },
-  };
+  const activeClasses = {
+    blue: [
+      "data-[state=active]:bg-blue-500/20 dark:data-[state=active]:bg-blue-400/20",
+      "data-[state=active]:text-blue-700 dark:data-[state=active]:text-blue-300",
+      "data-[state=active]:border data-[state=active]:border-blue-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(59,130,246,0.5)]",
+    ].join(" "),
+    purple: [
+      "data-[state=active]:bg-purple-500/20 dark:data-[state=active]:bg-purple-400/20",
+      "data-[state=active]:text-purple-700 dark:data-[state=active]:text-purple-300",
+      "data-[state=active]:border data-[state=active]:border-purple-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(168,85,247,0.5)]",
+    ].join(" "),
+    pink: [
+      "data-[state=active]:bg-pink-500/20 dark:data-[state=active]:bg-pink-400/20",
+      "data-[state=active]:text-pink-700 dark:data-[state=active]:text-pink-300",
+      "data-[state=active]:border data-[state=active]:border-pink-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(236,72,153,0.5)]",
+    ].join(" "),
+    orange: [
+      "data-[state=active]:bg-orange-500/20 dark:data-[state=active]:bg-orange-400/20",
+      "data-[state=active]:text-orange-700 dark:data-[state=active]:text-orange-300",
+      "data-[state=active]:border data-[state=active]:border-orange-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(251,146,60,0.5)]",
+    ].join(" "),
+    cyan: [
+      "data-[state=active]:bg-cyan-500/20 dark:data-[state=active]:bg-cyan-400/20",
+      "data-[state=active]:text-cyan-700 dark:data-[state=active]:text-cyan-300",
+      "data-[state=active]:border data-[state=active]:border-cyan-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(34,211,238,0.5)]",
+    ].join(" "),
+    green: [
+      "data-[state=active]:bg-green-500/20 dark:data-[state=active]:bg-green-400/20",
+      "data-[state=active]:text-green-700 dark:data-[state=active]:text-green-300",
+      "data-[state=active]:border data-[state=active]:border-green-400/50",
+      "data-[state=active]:shadow-[0_0_10px_rgba(34,197,94,0.5)]",
+    ].join(" "),
+  } satisfies Record<TabColor, string>;
+
+  const focusRingClasses = {
+    blue: "focus-visible:ring-blue-500",
+    purple: "focus-visible:ring-purple-500",
+    pink: "focus-visible:ring-pink-500",
+    orange: "focus-visible:ring-orange-500",
+    cyan: "focus-visible:ring-cyan-500",
+    green: "focus-visible:ring-green-500",
+  } satisfies Record<TabColor, string>;
 
   return (
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        "relative px-24 py-10 font-mono transition-all duration-300 z-10",
-        "text-gray-600 dark:text-gray-400",
+        "flex items-center gap-2 px-4 py-1.5 rounded-full transition-all duration-200",
+        "text-xs font-medium whitespace-nowrap",
+        "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        focusRingClasses[color],
         "disabled:pointer-events-none disabled:opacity-50",
-        colorMap[color].text,
-        colorMap[color].hover,
+        activeClasses[color],
         className,
       )}
       {...props}
     >
       {props.children}
-      {/* Active state neon indicator - only show when active */}
-      <span
-        className={cn(
-          "absolute bottom-0 left-0 right-0 w-full h-[2px]",
-          "data-[state=active]:block hidden",
-          colorMap[color].glow,
-        )}
-      />
     </TabsPrimitive.Trigger>
   );
 });
@@ -94,7 +109,8 @@ export const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2",
+      "focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}
diff --git a/archon-ui-main/src/features/ui/primitives/toggle-group.tsx b/archon-ui-main/src/features/ui/primitives/toggle-group.tsx
index 25133a4812..83a8b10b93 100644
--- a/archon-ui-main/src/features/ui/primitives/toggle-group.tsx
+++ b/archon-ui-main/src/features/ui/primitives/toggle-group.tsx
@@ -2,10 +2,14 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React from "react";
 import { cn, glassmorphism } from "./styles";
 
-export interface ToggleGroupProps extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> {
+type ToggleGroupProps = (
+  | ToggleGroupPrimitive.ToggleGroupSingleProps
+  | ToggleGroupPrimitive.ToggleGroupMultipleProps
+) & {
   variant?: "subtle" | "solid";
   size?: "sm" | "md";
-}
+  className?: string;
+};
 
 export const ToggleGroup = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Root>, ToggleGroupProps>(
   ({ className, variant = "subtle", size = "sm", ...props }, ref) => {
diff --git a/archon-ui-main/src/index.css b/archon-ui-main/src/index.css
index 0dde10c91f..803aa3f445 100644
--- a/archon-ui-main/src/index.css
+++ b/archon-ui-main/src/index.css
@@ -1,62 +1,111 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@layer base {
-  :root {
-    /* Light mode variables */
-    --background: 0 0% 98%;
-    --foreground: 240 10% 3.9%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --primary: 271 91% 65%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --accent: 271 91% 65%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-    --purple-accent: 271 91% 65%;
-    --green-accent: 160 84% 39%;
-    --pink-accent: 330 90% 65%;
-    --blue-accent: 217 91% 60%;
-  }
-  .dark {
-    /* Dark mode variables */
-    --background: 0 0% 0%;
-    --foreground: 0 0% 100%;
-    --muted: 240 4% 16%;
-    --muted-foreground: 240 5% 65%;
-    --popover: 0 0% 0%;
-    --popover-foreground: 0 0% 100%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --card: 0 0% 0%;
-    --card-foreground: 0 0% 100%;
-    --primary: 271 91% 65%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --accent: 271 91% 65%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --ring: 240 3.7% 15.9%;
-    --radius: 0.5rem;
-    --purple-accent: 271 91% 65%;
-    --green-accent: 160 84% 39%;
-    --pink-accent: 330 90% 65%;
-    --blue-accent: 217 91% 60%;
-  }
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  /* Light mode variables - bare HSL values (Tailwind adds hsl() wrapper) */
+  --background: 0 0% 98%;
+  --foreground: 240 10% 3.9%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --primary: 271 91% 65%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --accent: 271 91% 65%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+
+  /* Tron accent colors */
+  --purple-accent: 271 91% 65%;
+  --green-accent: 160 84% 39%;
+  --pink-accent: 330 90% 65%;
+  --blue-accent: 217 91% 60%;
+
+  color-scheme: light;
+}
+
+.dark {
+  /* Dark mode variables - bare HSL values */
+  --background: 0 0% 0%;
+  --foreground: 0 0% 100%;
+  --muted: 240 4% 16%;
+  --muted-foreground: 240 5% 65%;
+  --popover: 0 0% 0%;
+  --popover-foreground: 0 0% 100%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --card: 0 0% 0%;
+  --card-foreground: 0 0% 100%;
+  --primary: 271 91% 65%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --accent: 271 91% 65%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --ring: 240 3.7% 15.9%;
+
+  color-scheme: dark;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  /* Border radius */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+/* Animations - defined outside @theme */
+@keyframes caret-blink {
+  0%, 70%, 100% { opacity: 1; }
+  20%, 50% { opacity: 0; }
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+@keyframes shimmer {
+  100% { transform: translateX(100%); }
 }
+
 @layer base {
   * {
     @apply border-border;
@@ -66,15 +115,16 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
+
 @layer components {
-  /* Grid pattern for background (actually used in MainLayout) */
+  /* Grid pattern for background (used in MainLayout) */
   .neon-grid {
     background-image:
       linear-gradient(to right, #a855f720 1px, transparent 1px),
       linear-gradient(to bottom, #a855f720 1px, transparent 1px);
     background-size: 40px 40px;
   }
-  
+
   .dark .neon-grid {
     background-image:
       linear-gradient(to right, #a855f730 1px, transparent 1px),
@@ -82,6 +132,16 @@
   }
 }
 
+/* Hide scrollbar but keep scroll functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
 /* Animation delays (checked for usage) */
 .animation-delay-150 {
   animation-delay: 150ms;
diff --git a/archon-ui-main/src/pages/StyleGuidePage.tsx b/archon-ui-main/src/pages/StyleGuidePage.tsx
new file mode 100644
index 0000000000..aa738af0f8
--- /dev/null
+++ b/archon-ui-main/src/pages/StyleGuidePage.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyleGuideView } from '@/features/style-guide';
+
+const StyleGuidePage: React.FC = () => {
+  return <StyleGuideView />;
+};
+
+export default StyleGuidePage;
\ No newline at end of file
diff --git a/archon-ui-main/tailwind.config.js b/archon-ui-main/tailwind.config.js
index d658626df9..7c403ca3f5 100644
--- a/archon-ui-main/tailwind.config.js
+++ b/archon-ui-main/tailwind.config.js
@@ -1,80 +1,5 @@
-module.exports = {content: [
-  './index.html',
-  './src/**/*.{js,ts,jsx,tsx}'
-],
-  darkMode: "selector",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "caret-blink": {
-          "0%,70%,100%": { opacity: "1" },
-          "20%,50%": { opacity: "0" },
-        },
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        "shimmer": {
-          "100%": { transform: "translateX(100%)" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "caret-blink": "caret-blink 1.25s ease-out infinite",
-        "shimmer": "shimmer 2s infinite",
-      },
-    },
-  },
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  // Tailwind v4 uses @theme in CSS for most configuration
+  // This config is minimal and only for content scanning
 }
\ No newline at end of file
diff --git a/archon-ui-main/vite.config.ts b/archon-ui-main/vite.config.ts
index 464f3cfb48..536e56d156 100644
--- a/archon-ui-main/vite.config.ts
+++ b/archon-ui-main/vite.config.ts
@@ -2,6 +2,7 @@
 import path from "path";
 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 import { exec } from 'child_process';
 import { readFile } from 'fs/promises';
 import { existsSync, mkdirSync } from 'fs';
@@ -25,6 +26,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
   
   return {
     plugins: [
+      tailwindcss(),
       react(),
       // Custom plugin to add test endpoint
       {