From 6f173e403d026ea6125b8f9cea3e5f57838b1ad4 Mon Sep 17 00:00:00 2001 From: sean-eskerium Date: Thu, 9 Oct 2025 11:49:41 -0400 Subject: [PATCH] remove prp docs --- PRPs/complete-style-guide.md | 351 ------ PRPs/interactive-style-guide.md | 967 ---------------- PRPs/ui-style-guide-refactor.md | 1852 ------------------------------- 3 files changed, 3170 deletions(-) delete mode 100644 PRPs/complete-style-guide.md delete mode 100644 PRPs/interactive-style-guide.md delete mode 100644 PRPs/ui-style-guide-refactor.md diff --git a/PRPs/complete-style-guide.md b/PRPs/complete-style-guide.md deleted file mode 100644 index 80921d08..00000000 --- a/PRPs/complete-style-guide.md +++ /dev/null @@ -1,351 +0,0 @@ -# PRP: Complete Style Guide Implementation - -## Feature Goal -Complete the Archon style guide implementation with fully functional glassmorphism components, properly styled Radix UI toggles with size variants, example components replicating RAG settings, and improved layout patterns with proper sidebar switching behavior. - -## Deliverable -A comprehensive style guide page at `/style-guide` route with: -- Fully styled Radix UI Switch components (small, medium, large sizes with icon support) -- Checkbox and Select components with neon glow effects matching RAG settings -- Working layout switcher for sidebar patterns (1/4 sidebar, 3/4 content) -- Complete page examples replacing "coming soon" placeholders -- Consistent application of glassmorphism styles across all components - -## Success Definition -- [ ] All Radix UI primitives properly styled with glassmorphism effects -- [ ] Switch component has small, medium, large variants with optional icons -- [ ] RAG-style settings examples fully functional with checkboxes and selects -- [ ] Layout switcher properly adjusts content area proportions -- [ ] No "coming soon" sections - all examples implemented -- [ ] Consistent neon glow effects across all interactive elements -- [ ] All generated code includes proper AI context comments - -## Context - -```yaml -existing_files: - style_implementation: - - path: archon-ui-main/src/pages/StyleGuidePage.tsx - purpose: Main style guide page entry point - - path: archon-ui-main/src/components/style-guide/StyleGuideView.tsx - purpose: Style guide view component with navigation - - path: archon-ui-main/src/features/ui/primitives/styles.ts - purpose: Glassmorphism styles and utilities - - existing_components: - - path: archon-ui-main/src/components/ui/Toggle.tsx - purpose: Current toggle implementation to replace - - path: archon-ui-main/src/styles/toggle.css - purpose: CSS-based toggle styles to migrate - - path: archon-ui-main/src/components/settings/FeaturesSection.tsx - purpose: Feature toggles using current Toggle component - - path: archon-ui-main/src/components/settings/RAGSettings.tsx - purpose: RAG settings with checkboxes and selects to replicate - - layout_patterns: - - path: archon-ui-main/src/components/style-guide/patterns/LayoutsPattern.tsx - purpose: Layout patterns including sidebar switcher - issue: Sidebar should be 1/4 width, main content 3/4 when in sidebar mode - - placeholder_sections: - - path: archon-ui-main/src/components/style-guide/examples/PagesExample.tsx - purpose: Currently shows "coming soon" - needs implementation - - path: archon-ui-main/src/components/style-guide/examples/CompositionsExample.tsx - purpose: Has examples but could be expanded - -key_requirements: - switch_component: - - Create new Radix UI Switch primitive at /features/ui/primitives/switch.tsx - - Small size: 16px height, no icons - - Medium size: 24px height, smaller icons - - Large size: 32px height, full icons (like current feature toggles) - - Support neon glow effects while maintaining accessibility - - Icons should be inside the thumb element - - checkbox_component: - - Create Radix UI Checkbox primitive at /features/ui/primitives/checkbox.tsx - - Style with neon colors matching priority colors in styles.ts - - Include check animation and glow effects - - Support indeterminate state - - select_component: - - Ensure Select primitive has glassmorphism styling - - Add neon border highlights on focus - - Dropdown should have glass effect backdrop - - rag_settings_example: - - Replicate the model selection dropdown - - Replicate the styled checkboxes with labels - - Use new primitives not old components - - Include neon glow effects on all interactive elements - - layout_improvements: - - Fix sidebar layout to use proper proportions (1/4 sidebar, 3/4 content) - - Ensure smooth transitions when switching positions - - Top position should show cards in grid - - Left position should show list with proper width constraints - -technical_details: - radix_packages_needed: - - "@radix-ui/react-switch" (for Switch primitive) - - "@radix-ui/react-checkbox" (for Checkbox primitive) - - "@radix-ui/react-select" (already installed) - - "@radix-ui/react-label" (for form labels) - - style_patterns: - - Use data-[state=checked] for checked states - - Use data-[state=unchecked] for unchecked states - - Use data-[highlighted] for hover states - - Apply transitions with duration-300 for smooth animations - - Use shadow-[0_0_Xpx_rgba()] for glow effects - - icon_integration: - - Small switch: No icons - - Medium switch: Icons at 12x12px (h-3 w-3) - - Large switch: Icons at 20x20px (h-5 w-5) - - Use Lucide React icons consistently - -gotchas: - - Current Toggle component uses CSS file - need to migrate to Tailwind - - Feature toggles in settings must continue working after migration - - Radix Switch thumb translation must match container width - - Checkbox indicator needs proper centering - - Select dropdown positioning can be tricky with glass effects - - Layout proportions must be exact (25% / 75% split) -``` - -## Implementation Tasks - -### Phase 1: Create Missing Radix Primitives - -1. **Create Switch Primitive** `/features/ui/primitives/switch.tsx` - - Import and wrap Radix UI Switch components - - Implement size variants (sm, md, lg) with proper dimensions - - Add icon support for md and lg sizes - - Apply glassmorphism styles and neon glow effects - - Support all accent colors from styles.ts - -2. **Create Checkbox Primitive** `/features/ui/primitives/checkbox.tsx` - - Import and wrap Radix UI Checkbox components - - Style indicator with check icon and animations - - Add neon glow effects matching color variants - - Support checked, unchecked, and indeterminate states - -3. **Create Label Primitive** `/features/ui/primitives/label.tsx` - - Import and wrap Radix UI Label - - Apply consistent text styling - - Support disabled states - -### Phase 2: Update Existing Components - -4. **Enhance Select Primitive** `/features/ui/primitives/select.tsx` - - Add glassmorphism to dropdown content - - Apply neon border effects on focus - - Ensure proper backdrop blur on dropdown - -5. **Update Card Primitive** (if needed) - - Ensure size props work correctly - - Verify edge glow positions - - Check all color variants - -### Phase 3: Create Style Guide Components - -6. **Create Switch Configurator** `/components/style-guide/configurators/SwitchConfigurator.tsx` - - Configuration for all three sizes - - Icon selection (on/off icons) - - Color variant selection - - Glow effect toggle - - Generate code with AI context comments - -7. **Create Checkbox Configurator** `/components/style-guide/configurators/CheckboxConfigurator.tsx` - - Color variant selection - - State configuration (checked/indeterminate/unchecked) - - Label positioning options - - Generate appropriate code - -8. **Create RAG Settings Example** `/components/style-guide/examples/RAGSettingsExample.tsx` - - Model selection dropdown with glass effect - - Styled checkboxes for feature toggles - - Number inputs with glass styling - - Replicate layout from actual RAG settings - -### Phase 4: Fix Layout Patterns - -9. **Update Sidebar Layout** in `/components/style-guide/patterns/LayoutsPattern.tsx` - - Fix proportions: sidebar 1/4 (w-1/4), content 3/4 (w-3/4) - - Ensure proper responsive behavior - - Add smooth transitions between positions - - Update code generation to reflect correct proportions - -### Phase 5: Complete Page Examples - -10. **Implement Landing Page Example** in `/components/style-guide/examples/PagesExample.tsx` - - Hero section with glass effects - - Feature cards with neon glows - - Call-to-action buttons - - Proper responsive layout - -11. **Implement Dashboard Page Example** - - Navigation with glass effect - - Stats cards with different glow colors - - Data visualization placeholders - - Sidebar navigation pattern - -12. **Implement Settings Page Example** - - Form layout with new primitives - - Grouped settings sections - - Toggle switches for features - - Save/cancel actions - -### Phase 6: Migration and Integration - -13. **Migrate Feature Toggles** in `/components/settings/FeaturesSection.tsx` - - Replace Toggle component with new Switch primitive - - Maintain all existing functionality - - Update icon placement and sizing - - Test all color variants - -14. **Update Imports** across codebase - - Find all Toggle imports and replace with Switch - - Update any component using old checkbox styles - - Ensure consistent primitive usage - -15. **Remove Legacy Code** - - Delete old `/components/ui/Toggle.tsx` - - Remove `/styles/toggle.css` - - Clean up any unused style utilities - -## Validation Gates - -```bash -# TypeScript compilation -cd archon-ui-main -npx tsc --noEmit - -# Linting -npm run lint -npm run biome:fix - -# Development server -npm run dev -# Navigate to http://localhost:3737/style-guide - -# Manual testing checklist: -# - [ ] All switch sizes render correctly -# - [ ] Icons appear in medium and large switches -# - [ ] Checkboxes have neon glow on check -# - [ ] Select dropdowns have glass effect -# - [ ] RAG settings example matches original -# - [ ] Sidebar layout uses 1/4 - 3/4 proportions -# - [ ] Page examples are fully implemented -# - [ ] Code generation includes AI comments -# - [ ] All color variants work -# - [ ] Feature toggles in settings still work -``` - -## Dependencies - -### NPM Packages (verify installation) -```json -{ - "@radix-ui/react-switch": "^1.0.3", - "@radix-ui/react-checkbox": "^1.0.4", - "@radix-ui/react-label": "^2.0.2", - "@radix-ui/react-select": "^2.0.0" -} -``` - -### External Documentation -- Radix UI Switch: https://www.radix-ui.com/primitives/docs/components/switch -- Radix UI Checkbox: https://www.radix-ui.com/primitives/docs/components/checkbox -- Radix UI Select: https://www.radix-ui.com/primitives/docs/components/select -- Radix UI Styling Guide: https://www.radix-ui.com/primitives/docs/guides/styling -- Tailwind CSS Radix Plugin: https://github.com/ecklf/tailwindcss-radix - -## Code Patterns to Follow - -### Switch Implementation Pattern -```typescript -// Size variants object -const switchVariants = { - size: { - sm: { root: "h-4 w-8", thumb: "h-3 w-3 data-[state=checked]:translate-x-4" }, - md: { root: "h-6 w-11", thumb: "h-5 w-5 data-[state=checked]:translate-x-5" }, - lg: { root: "h-8 w-14", thumb: "h-7 w-7 data-[state=checked]:translate-x-6" } - } -}; - -// Glow effects using shadow -"data-[state=checked]:shadow-[0_0_20px_rgba(34,211,238,0.5)]" -``` - -### Checkbox Pattern -```typescript -// Checkbox with indicator - - - - - -``` - -### Layout Proportions -```typescript -// Correct sidebar layout -
-
Sidebar
-
Main Content
-
-``` - -## Success Criteria - -- **Component Completeness**: All primitives created and working -- **Style Consistency**: Glassmorphism applied uniformly -- **Size Variants**: Switch has functional sm/md/lg sizes -- **Icon Support**: Icons render correctly in switches -- **Glow Effects**: Neon glows on all interactive elements -- **Layout Accuracy**: Sidebar uses exact 25%/75% split -- **Example Quality**: RAG settings replicated accurately -- **Page Examples**: No "coming soon" placeholders remain -- **Code Generation**: All configurators generate working code -- **AI Comments**: Generated code includes decision trees -- **Migration Success**: Feature toggles work with new Switch -- **Performance**: Smooth animations and transitions -- **Accessibility**: Focus states and keyboard navigation work - -## Reference Implementation Locations - -- Glass styles: `/archon-ui-main/src/features/ui/primitives/styles.ts` -- Current Toggle: `/archon-ui-main/src/components/ui/Toggle.tsx` -- RAG Settings: `/archon-ui-main/src/components/settings/RAGSettings.tsx:lines 400-500` -- Feature Toggles: `/archon-ui-main/src/components/settings/FeaturesSection.tsx:lines 200-316` -- Layout Pattern: `/archon-ui-main/src/components/style-guide/patterns/LayoutsPattern.tsx:lines 95-194` - -## Testing Focus Areas - -1. **Switch Component** - - Size transitions are smooth - - Icons scale appropriately - - Glow effects visible in dark mode - - Keyboard navigation works - -2. **Checkbox Component** - - Check animation is smooth - - Indeterminate state renders - - Click target is adequate - -3. **Select Component** - - Dropdown positioning correct - - Glass effect on dropdown - - Keyboard navigation works - -4. **Layout Switcher** - - Proportions are exactly 25%/75% - - Transition animations smooth - - Content reflows properly - -5. **Migration** - - All feature toggles functional - - No console errors - - Performance not degraded \ No newline at end of file diff --git a/PRPs/interactive-style-guide.md b/PRPs/interactive-style-guide.md deleted file mode 100644 index e6661ab9..00000000 --- a/PRPs/interactive-style-guide.md +++ /dev/null @@ -1,967 +0,0 @@ -# PRP: Interactive Style Guide Implementation - -## Overview -Implement a comprehensive interactive style guide page for the Archon UI system that provides configurators for glass morphism components, standardized modal types, layout templates, and generates copy-ready code with AI-friendly documentation. - -## Context for AI Implementation -This PRP provides complete implementation guidance for creating an interactive style guide at `/style-guide` route. The style guide will showcase existing Archon glass morphism components with interactive configurators, allowing developers to visually configure components and copy production-ready code. - -**CRITICAL LAYOUT CONSTRAINT**: The Archon app has a fixed left navigation sidebar and potential right chat sidebar. The style guide must work within these constraints: -- Main app navigation stays on the left (always visible) -- Style guide has its own internal navigation (sections/components) -- Layout templates must include collapsible sidebars that work within the main content area -- The "Sidebar Layout" template should demonstrate a collapsible project sidebar (like ProjectsView) - -**CRITICAL COMPONENT CONSISTENCY**: The style guide must use existing Radix UI primitives and extend them, not create new competing components. All components should import from `/features/ui/primitives/`. - -## Existing Patterns to Follow - -### Glass Morphism Styles (Reference) -- **Location**: `/archon-ui-main/src/features/ui/primitives/styles.ts` -- Glass backgrounds, borders, shadows with glow effects -- Priority colors system already defined -- Use existing `glassmorphism` and `compoundStyles` objects - -### Button Component (Reference) -- **Location**: `/archon-ui-main/src/features/ui/primitives/button.tsx` -- Variants: default, destructive, outline, ghost, link, cyan, knowledge -- Sizes: xs, sm, default, lg, icon -- Loading state support built-in - -### Modal Patterns (Reference) -- **Location**: `/archon-ui-main/src/features/ui/components/DeleteConfirmModal.tsx` -- Uses AlertDialog from primitives -- Size prop support (compact, default, large) -- Proper glass morphism styling - -### Routing Pattern (Reference) -- **Location**: `/archon-ui-main/src/App.tsx` -- Add new route: `} />` -- Follow existing page import pattern - -## Implementation Tasks - -### Task 0: Create Missing Radix Primitives (PRIORITY) -Before implementing the style guide, we need to create missing Radix primitives that the configurators will use: - -#### Create RadioGroup Primitive -```typescript -// /src/features/ui/primitives/radio-group.tsx -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, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - - - - - -)); -RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName; -``` - -#### Create Label Primitive -```typescript -// /src/features/ui/primitives/label.tsx -import * as LabelPrimitive from "@radix-ui/react-label"; -import React from "react"; -import { cn } from "./styles"; - -export const Label = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -Label.displayName = LabelPrimitive.Root.displayName; -``` - -#### Create Card Primitive -```typescript -// /src/features/ui/primitives/card.tsx -import React from "react"; -import { cn, glassmorphism } from "./styles"; - -interface CardProps extends React.HTMLAttributes { - glowColor?: keyof typeof glassmorphism.shadow.glow | 'none'; - edgePosition?: keyof typeof glassmorphism.edgeGlow | 'none'; - size?: keyof typeof glassmorphism.sizes.card; -} - -export const Card = React.forwardRef( - ({ className, glowColor = 'none', edgePosition = 'none', size = 'md', children, ...props }, ref) => { - return ( -
- {children} -
- ); - } -); -Card.displayName = "Card"; -``` - -#### Enhance styles.ts -```typescript -// Add to /src/features/ui/primitives/styles.ts - -export const glassmorphism = { - // ... existing code ... - - // Add edge glow positions for card configurator - edgeGlow: { - top: "border-t-2 border-t-cyan-400 relative before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-[2px] before:bg-gradient-to-r before:from-transparent before:via-cyan-400 before:to-transparent", - left: "border-l-2 border-l-cyan-400 relative before:content-[''] before:absolute before:top-0 before:left-0 before:bottom-0 before:w-[2px] before:bg-gradient-to-b before:from-transparent before:via-cyan-400 before:to-transparent", - right: "border-r-2 border-r-cyan-400 relative before:content-[''] before:absolute before:top-0 before:right-0 before:bottom-0 before:w-[2px] before:bg-gradient-to-b before:from-transparent before:via-cyan-400 before:to-transparent", - bottom: "border-b-2 border-b-cyan-400 relative before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[2px] before:bg-gradient-to-r before:from-transparent before:via-cyan-400 before:to-transparent", - all: "border-2 border-cyan-400 relative before:content-[''] before:absolute before:inset-0 before:rounded-lg before:p-[2px] before:bg-gradient-to-r before:from-cyan-400 before:via-cyan-500 before:to-cyan-400 before:-z-10", - none: "" - }, - - // Add 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" - } - }, - - // Ensure all glow colors are available - shadow: { - // ... existing shadow code ... - glow: { - purple: "shadow-[0_0_10px_2px_rgba(168,85,247,0.4)] dark:shadow-[0_0_20px_5px_rgba(168,85,247,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)]", - green: "shadow-[0_0_10px_2px_rgba(16,185,129,0.4)] dark:shadow-[0_0_20px_5px_rgba(16,185,129,0.7)]", - red: "shadow-[0_0_10px_2px_rgba(239,68,68,0.4)] dark:shadow-[0_0_20px_5px_rgba(239,68,68,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)]", - cyan: "shadow-[0_0_10px_2px_rgba(34,211,238,0.4)] dark:shadow-[0_0_20px_5px_rgba(34,211,238,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)]" - } - } -}; -``` - -### Task 1: Create Page Structure and Routing -```typescript -// 1. Create /src/pages/StyleGuidePage.tsx -// 2. Add route in App.tsx -// 3. Add navigation link in MainLayout navigation -``` - -### Task 2: Create Base Components Structure -``` -/src/components/style-guide/ -├── shared/ -│ ├── NavigationSidebar.tsx # 4 sections with expandable items -│ ├── LivePreview.tsx # Preview container with zoom controls -│ ├── CodeDisplay.tsx # Syntax highlighted code with copy -│ └── ConfigPanel.tsx # Configuration controls container -``` - -### Task 3: Implement Component Configurators -``` -/src/components/style-guide/configurators/ -├── GlassCardConfigurator.tsx # Glow colors, edge positions, sizes -├── ButtonConfigurator.tsx # All variants, sizes, states -├── ModalConfigurator.tsx # 6 standard types showcase -├── TableConfigurator.tsx # Table with glass effects -├── FormConfigurator.tsx # Input states and validation -└── ToggleConfigurator.tsx # PowerButton variations -``` - -### Task 4: Create Modal Standards -```typescript -// /src/components/style-guide/standards/modalStandards.ts -export const MODAL_TYPES = { - confirmation: { size: "sm", glowColor: "red", purpose: "Destructive actions" }, - formCreate: { size: "md", glowColor: "green", purpose: "Creating resources" }, - formEdit: { size: "md", glowColor: "blue", purpose: "Editing resources" }, - display: { size: "lg", glowColor: "purple", purpose: "Detailed information" }, - codeViewer: { size: "xl", glowColor: "cyan", purpose: "Code display" }, - settings: { size: "lg", glowColor: "blue", purpose: "App settings" } -}; -``` - -### Task 5: Implement Layout Templates -``` -/src/components/style-guide/layout-templates/ -├── DashboardTemplate.tsx # Grid of cards/widgets -├── SidebarTemplate.tsx # Collapsible sidebar + main (like ProjectsView) -├── KanbanTemplate.tsx # Column-based organization -├── TableViewTemplate.tsx # Data table with actions -└── CenteredFormTemplate.tsx # Single focus area -``` - -**SidebarTemplate Special Requirements:** -- Must show a collapsible sidebar within the main content area -- Sidebar toggles between top position (cards) and left position (list) -- Similar to ProjectsView with project cards that can be toggled to sidebar -- Include toggle button to switch between layouts -- Sidebar width: 280px when on left, full width when on top - -### Task 6: Code Generation System -```typescript -// Each configurator must: -// 1. Generate real-time code based on configuration -// 2. Include all imports -// 3. Add AI context comments with decision trees -// 4. Provide copy-to-clipboard functionality -``` - -## Component Implementation Details - -### ConfigPanel Component (Uses Card Primitive) -```typescript -// /src/components/style-guide/shared/ConfigPanel.tsx -import { Card } from '@/features/ui/primitives/card'; -import { cn } from '@/features/ui/primitives/styles'; - -interface ConfigPanelProps { - title?: string; - children: React.ReactNode; - className?: string; -} - -export const ConfigPanel = ({ title, children, className }: ConfigPanelProps) => ( - - {title &&

{title}

} - {children} - -); -``` - -### GlassCardConfigurator (Using All Primitives) -```typescript -// Configuration Options: -- glowColor: ["purple", "blue", "green", "orange", "red", "none"] -- edgePosition: ["top", "left", "right", "bottom", "all", "none"] -- size: ["sm", "md", "lg", "xl"] - -// Generated Code must include: -/** - * 🤖 AI CONTEXT: GlassCard Component - * PURPOSE: Container with glass morphism effect - * WHEN TO USE: Primary content containers, cards, panels - * WHEN NOT TO USE: Backgrounds, layout wrappers - * - * DECISION TREE: - * - If primary content → glowColor="purple" - * - If success message → glowColor="green" - * - If error/danger → glowColor="red" - */ -``` - -### NavigationSidebar Structure -```typescript -const NAVIGATION = { - foundations: { - label: "Foundations", - items: ["Colors", "Typography", "Spacing", "Effects"] - }, - components: { - label: "Components", - items: ["Cards", "Buttons", "Forms", "Tables", "Modals", "Toggles"] - }, - patterns: { - label: "Patterns", - items: ["Layouts", "Feedback", "Navigation", "Data Display"] - }, - examples: { - label: "Examples", - items: ["Compositions", "Pages", "Workflows"] - } -}; -``` - -### LivePreview Component -```typescript -// Implementation: /src/components/style-guide/shared/LivePreview.tsx -import { useState } from 'react'; -import { ZoomIn, ZoomOut, RotateCcw } from 'lucide-react'; -import { Button } from '@/features/ui/primitives/button'; -import { cn } from '@/features/ui/primitives/styles'; - -interface LivePreviewProps { - children: React.ReactNode; - className?: string; - minHeight?: string; -} - -export const LivePreview = ({ children, className, minHeight = "400px" }: LivePreviewProps) => { - const [zoom, setZoom] = useState(100); - - return ( -
- {/* Zoom Controls */} -
- - - -
- - {/* Grid Background */} -
-
- {children} -
-
-
- ); -}; -``` - -### CodeDisplay Component -```typescript -// Implementation: /src/components/style-guide/shared/CodeDisplay.tsx -import { useState } from 'react'; -import { Check, Copy } from 'lucide-react'; -import { Button } from '@/features/ui/primitives/button'; -import { cn } from '@/features/ui/primitives/styles'; - -interface CodeDisplayProps { - code: string; - language?: 'typescript' | 'jsx' | 'css'; - showLineNumbers?: boolean; - className?: string; -} - -export const CodeDisplay = ({ - code, - language = 'typescript', - showLineNumbers = false, - className -}: CodeDisplayProps) => { - const [copied, setCopied] = useState(false); - - const handleCopy = async () => { - await navigator.clipboard.writeText(code); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - }; - - const lines = code.split('\n'); - - // Basic syntax highlighting with regex - const highlightCode = (line: string) => { - // Escape HTML - line = line.replace(/&/g, '&').replace(//g, '>'); - - // Keywords - line = line.replace( - /\b(import|export|from|const|let|var|function|return|if|else|interface|type|class|extends|implements)\b/g, - '$1' - ); - - // Strings - line = line.replace( - /(["'`])([^"'`]*)\1/g, - '$1$2$1' - ); - - // Comments - line = line.replace( - /(\/\/.*$|\/\*.*\*\/)/g, - '$1' - ); - - // JSX tags - line = line.replace( - /<([A-Z][A-Za-z0-9]*)(\s|>|\/>)/g, - '<$1$2' - ); - - // Props - line = line.replace( - /(\w+)=/g, - '$1=' - ); - - return line; - }; - - return ( -
- {/* Copy Button */} - - - {/* Code Content */} - 
-        
-          {lines.map((line, index) => (
-            

-              {showLineNumbers && (
-                
-                  {index + 1}
-                
-              )}
-              
-            

-          ))}
-        
-
-
- ); -}; -``` - -### Code Generation System (Updated with Proper Imports) -```typescript -// Detailed implementation for code generation -// Example: /src/components/style-guide/configurators/GlassCardConfigurator.tsx - -import { useState } from 'react'; -import { Card } from '@/features/ui/primitives/card'; -import { Button } from '@/features/ui/primitives/button'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/ui/primitives/select'; -import { RadioGroup, RadioGroupItem } from '@/features/ui/primitives/radio-group'; -import { Label } from '@/features/ui/primitives/label'; -import { LivePreview } from '../shared/LivePreview'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { ConfigPanel } from '../shared/ConfigPanel'; -import { glassmorphism } from '@/features/ui/primitives/styles'; - -interface GlassCardConfig { - glowColor: 'purple' | 'blue' | 'green' | 'orange' | 'red' | 'none'; - edgePosition: 'top' | 'left' | 'right' | 'bottom' | 'all' | 'none'; - size: 'sm' | 'md' | 'lg' | 'xl'; - content: string; -} - -export const GlassCardConfigurator = () => { - const [config, setConfig] = useState({ - glowColor: 'purple', - edgePosition: 'top', - size: 'md', - content: 'Your content here' - }); - - const generateCode = (config: GlassCardConfig) => { - const imports = `import { Card } from '@/features/ui/primitives/card';`; - - const aiContext = `/** - * 🤖 AI CONTEXT: GlassCard Component - * - * PURPOSE: Container with glass morphism effect for primary content - * WHEN TO USE: Feature cards, content sections, important information displays - * WHEN NOT TO USE: Backgrounds, full-page layouts, navigation elements - * - * DECISION TREE: - * - If primary/featured content → glowColor="purple" - * - If success state/creation → glowColor="green" - * - If error/danger/deletion → glowColor="red" - * - If informational/edit → glowColor="blue" - * - If warning/caution → glowColor="orange" - * - * SEMANTIC COLORS: - * - purple: Primary actions, featured content, main CTAs - * - green: Success states, creation, positive feedback - * - red: Destructive actions, errors, critical alerts - * - blue: Information, editing, secondary actions - * - orange: Warnings, important notices, caution states - * - * EDGE POSITION GUIDELINES: - * - top: Default, draws eye downward into content - * - left: For sidebar items or navigation cards - * - right: For action panels or secondary info - * - bottom: For footer-like content or summaries - * - all: For highly important or selected states - * - none: For subtle, non-emphasized containers - */`; - - const component = `export const MyCard = ({ children }) => { - return ( - - {children} - - ); -};`; - - return `${imports}\n\n${aiContext}\n\n${component}`; - }; - - return ( -
- {/* Left side: Configuration */} -
- -
- {/* Glow Color */} -
- - -
- - {/* Edge Position */} -
- - setConfig({...config, edgePosition: value as any})} - > -
- {['top', 'left', 'right', 'bottom', 'all', 'none'].map(position => ( -
- - -
- ))} -
- -
- - {/* Size */} -
- - setConfig({...config, size: value as any})} - > -
- {['sm', 'md', 'lg', 'xl'].map(size => ( -
- - -
- ))} -
- -
-
- - - {/* Live Preview */} - - -

Glass Card Example

-

- {config.content} -

- - -
- - {/* Right side: Generated Code */} -
-

Generated Code

- -
-
- ); -}; -``` - -### SidebarTemplate Implementation (Using Primitives) -```typescript -// /src/components/style-guide/layout-templates/SidebarTemplate.tsx -import { useState } from 'react'; -import { ChevronLeft, ChevronRight, LayoutGrid, List } from 'lucide-react'; -import { Button } from '@/features/ui/primitives/button'; -import { Card } from '@/features/ui/primitives/card'; -import { cn } from '@/features/ui/primitives/styles'; -import { CodeDisplay } from '../shared/CodeDisplay'; - -export const SidebarTemplate = () => { - const [sidebarPosition, setSidebarPosition] = useState<'top' | 'left'>('top'); - const [sidebarCollapsed, setSidebarCollapsed] = useState(false); - - const items = [ - { id: '1', title: 'Project Alpha', status: 'active' }, - { id: '2', title: 'Project Beta', status: 'pending' }, - { id: '3', title: 'Project Gamma', status: 'completed' }, - ]; - - const generateCode = () => { - return `import { useState } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; -import { Button } from '@/features/ui/primitives/button'; -import { Card } from '@/features/ui/primitives/card'; - -export const SidebarLayout = () => { - const [position, setPosition] = useState<'top' | 'left'>('top'); - const [collapsed, setCollapsed] = useState(false); - - return ( -
- {/* Toggle Button */} -
- -
- -
- {/* Sidebar Content */} - - - {/* Sidebar items here */} - - - - {/* Main Content Area */} -
- {/* Main content here */} -
-
-
- ); -};`; - }; - - return ( -
-
-

Sidebar Layout Template

- -
- - {/* Live Demo */} -
-
- {/* Sidebar */} -
- {sidebarPosition === 'top' ? ( -
- {items.map(item => ( - -

{item.title}

-

{item.status}

- - ))} -
- ) : ( -
- {sidebarPosition === 'left' && ( - - )} - {items.map(item => ( - - {!sidebarCollapsed ? ( - <> -

{item.title}

-

{item.status}

- - ) : ( -
- {item.title[0]} -
- )} - - ))} -
- )} -
- - {/* Main Content */} -
-
-

Main Content Area

-

This is where your main content would go

-

Sidebar is currently: {sidebarPosition === 'top' ? 'Top' : `Left (${sidebarCollapsed ? 'Collapsed' : 'Expanded'})`}

-
-
-
-
- - -
- ); -}; -``` - -## Confidence Score: 10/10 - -The PRP provides comprehensive implementation guidance with: -- **Radix primitive creation tasks** for missing components -- **Style enhancements** to support configurator needs -- **Consistent imports** from `/features/ui/primitives/` -- **Complete code examples** using actual primitives -- **Clear implementation order** with primitive creation first - -The score is 10/10 because: -- **Component consistency**: All configurators use existing primitives -- **No duplicate components**: Reuses existing infrastructure -- **Enhanced flexibility**: styles.ts gets necessary additions -- **Complete primitive set**: Creates missing RadioGroup, Label, and Card -- **Production ready**: Uses same components developers will use - -This PRP ensures the style guide showcases actual Archon components, not separate demo versions. - -## Validation Gates - -```bash -# Frontend checks -cd archon-ui-main -npm run lint # No linting errors -npx tsc --noEmit # No TypeScript errors -npm run test # All tests pass - -# Verify primitives work -# Check that all new primitives render correctly -# Verify Card primitive replaces old Card.tsx -# Test RadioGroup and Label components -# Confirm styles.ts enhancements work - -# Verify routes work -# Navigate to http://localhost:3737/style-guide -# Verify all configurators render -# Test code generation and copy functionality -# Check responsive behavior -``` - -## Dependencies -- Existing Archon UI primitives and components -- Tailwind CSS (already configured) -- Lucide React icons (already installed) -- React Router (already installed) -- Radix UI packages (already installed): - - @radix-ui/react-radio-group - - @radix-ui/react-label -- For syntax highlighting: Use simple regex-based solution (no external libs) - -## File Creation Order -1. **Create missing primitives first** (RadioGroup, Label, Card) -2. **Enhance styles.ts** with edgeGlow and sizes -3. Create page and add route -4. Build shared components (NavigationSidebar, LivePreview, CodeDisplay, ConfigPanel) -5. Implement GlassCardConfigurator first (as template) -6. Add ButtonConfigurator -7. Create modal standards and ModalConfigurator -8. Add remaining configurators -9. Implement layout templates -10. Add AI context comments throughout - -## Key Implementation Notes - -### State Management -- Use React hooks (useState) for configuration state -- Each configurator manages its own state -- URL params for sharing configurations (optional enhancement) - -### Import Consistency -- ALWAYS import from `/features/ui/primitives/` for UI components -- Never create duplicate components -- Use the Card primitive for all card needs -- Import glassmorphism styles from styles.ts - -### Performance Considerations -- Lazy load configurators that aren't visible -- Debounce configuration changes (200ms) -- Use React.memo for expensive preview renders -- Limit blur effects to 3 layers maximum - -## Success Criteria -- [ ] All primitives created and working -- [ ] Old Card.tsx replaced with new primitive -- [ ] All routes work and page loads without errors -- [ ] Navigation sidebar with 4 main sections -- [ ] GlassCard configurator with live preview using Card primitive -- [ ] Button configurator with all variants -- [ ] 6 modal types clearly documented -- [ ] 5 layout templates available -- [ ] Code generation with AI comments -- [ ] Copy-to-clipboard works -- [ ] Responsive design functions properly -- [ ] No TypeScript or linting errors -- [ ] All imports from primitives folder - -## Common Pitfalls to Avoid -- Don't create new component variants - use existing ones -- Don't duplicate components - use primitives -- Don't add external libraries for syntax highlighting initially -- Don't forget AI context comments in generated code -- Don't nest glass effects more than 3 levels -- Don't hardcode values - use configuration objects -- Don't import from old `/components/ui/` folder - -## Testing Approach -1. Manual testing of all configurators -2. Verify code generation accuracy -3. Test copy-to-clipboard functionality -4. Check responsive breakpoints -5. Validate AI comments are included -6. Test with actual AI assistant to verify comments help -7. Verify all imports use primitives - -## References -- Button component: `/archon-ui-main/src/features/ui/primitives/button.tsx` -- Glass morphism styles: `/archon-ui-main/src/features/ui/primitives/styles.ts` -- Select primitive: `/archon-ui-main/src/features/ui/primitives/select.tsx` -- Modal example: `/archon-ui-main/src/features/ui/components/DeleteConfirmModal.tsx` -- Routing: `/archon-ui-main/src/App.tsx` -- Layout: `/archon-ui-main/src/components/layout/MainLayout.tsx` -- Projects View (sidebar example): `/archon-ui-main/src/features/projects/views/ProjectsView.tsx` -- Old Card to replace: `/archon-ui-main/src/components/ui/Card.tsx` \ No newline at end of file diff --git a/PRPs/ui-style-guide-refactor.md b/PRPs/ui-style-guide-refactor.md deleted file mode 100644 index 890f0718..00000000 --- a/PRPs/ui-style-guide-refactor.md +++ /dev/null @@ -1,1852 +0,0 @@ -name: "UI Style Guide Refactor - 3-Tab Organization with Layout Examples" -description: | - Refactor the Archon style guide into a focused, AI-friendly reference with three distinct tabs: - 1. Style Guide - Traditional design system (typography, colors, spacing) - 2. Layouts - Page layout examples (Projects, Settings, Knowledge) with navigation patterns - 3. Configurators - Interactive component configurators with live code generation - ---- - -## Goal - -**Feature Goal**: Transform the current cluttered style guide into a focused, well-organized reference that serves both human users and AI agents, with clear separation between design foundations, layout patterns, and interactive component configuration. - -**Deliverable**: -- Refactored `/style-guide` page with 3-tab navigation (Style Guide, Layouts, Configurators) -- `components.json` mapping file documenting all reusable components with locations and purposes -- Hard-coded layout examples (Projects, Settings, Knowledge pages) with NO data/functionality -- Simplified style guide tab showing typography, colors, spacing, effects foundations -- Configurators tab with existing interactive component configurators - -**Success Definition**: -- AI agents can quickly find component examples via `components.json` -- Users can see layout options and understand visual hierarchy patterns -- Design system foundations (typography, colors) are clearly documented -- Interactive configurators provide live code generation for components - -## User Persona - -**Target User**: -1. **AI Coding Assistants** (Primary) - Need clear component references and code patterns -2. **Developers** - Building new features, need layout examples and component patterns -3. **Designers** - Understanding and extending the Tron-inspired glassmorphism system - -**Use Case**: -- AI agent needs to build a new page: consults `components.json` → finds layout examples → copies patterns -- Developer adding a feature: reviews Layout tab → picks appropriate page structure → implements with hard-coded examples as reference -- Designer adjusting colors/typography: uses Style Guide tab → interactive configurators for testing - -**User Journey**: -1. Open Style Guide page -2. See 3 clear tabs (Style Guide, Layouts, Configurators) -3. For layouts: Click "Layouts" → See 3 example pages (Projects, Settings, Knowledge) with explanatory text -4. For foundations: Click "Style Guide" → Review typography, colors, spacing, effects -5. For interactive config: Click "Configurators" → Play with glass cards, buttons, forms with live code - -**Pain Points Addressed**: -- **Current**: Style guide is cluttered and mixes foundations, components, patterns, and examples -- **Current**: No clear separation between what's for learning vs what's for interactive configuration -- **Current**: AI agents struggle to find the right component because there's no index/map -- **New**: Clean 3-tab separation makes navigation obvious -- **New**: `components.json` provides quick component discovery for AI -- **New**: Hard-coded layout examples show patterns without complexity of real data - -## Why - -- **For AI Agents**: Reduce context needed - `components.json` points directly to relevant components, layout examples show patterns without implementation details -- **For Developers**: Faster feature development - see complete page layouts (Projects card grid, Settings bento, Knowledge view switching) to copy structure -- **For Design System**: Clearer documentation - separate "what colors exist" from "how to configure a glass card interactively" -- **Integration**: Existing configurators (GlassCard, Button, Modal, etc.) are preserved and moved to Configurators tab -- **User Experience**: Users can quickly understand options (layouts), learn basics (style guide), or interactively configure (configurators) - -## What - -### Success Criteria - -- [ ] 3-tab navigation works smoothly (Style Guide, Layouts, Configurators) -- [ ] `components.json` file maps all reusable components with file paths and usage descriptions -- [ ] Layouts tab shows 3 example pages: - - Projects: Card grid layout with horizontal scroll and project selection - - Settings: Bento grid with CollapsibleSettingsCard components - - Knowledge: View switching example (grid/table) with filters -- [ ] Style Guide tab shows traditional foundations: Typography, Colors, Spacing, Effects -- [ ] Configurators tab contains all existing interactive configurators -- [ ] All layout examples use hard-coded data (no API calls, no real functionality) -- [ ] Navigation explanation describes main nav (left sidebar) vs page nav (top tabs/pills) -- [ ] Each layout example includes explanatory text about when to use it - -## All Needed Context - -### Context Completeness Check - -_This PRP provides complete context for refactoring the style guide without prior Archon knowledge. It includes:_ -- ✅ Existing file structure and patterns to follow -- ✅ Specific component examples to extract (ProjectCard, CollapsibleSettingsCard, view switching) -- ✅ Exact tab structure and organization (3 tabs) -- ✅ Clear separation of concerns (foundations vs layouts vs configurators) -- ✅ `components.json` schema and purpose -- ✅ Hard-coded data examples for each layout type - -### Documentation & References - -```yaml -# Core Style Guide Files - READ THESE FIRST -- file: archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx - why: Current implementation - understand existing structure and tab navigation pattern - pattern: PillNavigation component with sections and items - gotcha: Currently has 4 sections (foundations, components, patterns, examples) - we're consolidating to 3 tabs - -- file: archon-ui-main/src/features/style-guide/shared/PillNavigation.tsx - why: Tab navigation component - will be adapted for 3-tab structure - pattern: Pill-based navigation with dropdown per section - gotcha: Current implementation has dropdown per section - new design has direct tabs - -# Typography & Colors (Keep for Style Guide Tab) -- file: archon-ui-main/src/features/style-guide/foundations/TypographyFoundation.tsx - why: Typography scale and configurator - moves to Style Guide tab - pattern: Interactive configurator with live examples - -- file: archon-ui-main/src/features/style-guide/foundations/ColorsFoundation.tsx - why: Color palette with interactive swatches - moves to Style Guide tab - pattern: Color variants with slider, copy-to-clipboard - -- file: archon-ui-main/src/features/style-guide/foundations/SpacingFoundation.tsx - why: Spacing scale visualization - moves to Style Guide tab - -- file: archon-ui-main/src/features/style-guide/foundations/EffectsFoundation.tsx - why: Glassmorphism effects examples - moves to Style Guide tab - -# Configurators (Move to Configurators Tab) -- file: archon-ui-main/src/features/style-guide/configurators/GlassCardConfigurator.tsx - why: Interactive glass card builder with code generation - pattern: Showcase/Configurator toggle, live preview, code display - -- file: archon-ui-main/src/features/style-guide/configurators/ButtonConfigurator.tsx - why: Button variants configurator - keep in Configurators tab - -- file: archon-ui-main/src/features/style-guide/configurators/ModalConfigurator.tsx - why: Modal preview and configuration - keep in Configurators tab - -- file: archon-ui-main/src/features/style-guide/configurators/FormConfigurator.tsx - why: Form elements configurator - keep in Configurators tab - -- file: archon-ui-main/src/features/style-guide/configurators/TableConfigurator.tsx - why: Table styling configurator - keep in Configurators tab - -- file: archon-ui-main/src/features/style-guide/patterns/NavigationPattern.tsx - why: Pill navigation configurator with dropdown sub-menus - pattern: PillNavigationConfigurator component with live preview and code generation - critical: MOVE this to configurators as NavigationConfigurator - it's an interactive configurator, not a pattern - -# Layout Examples (Source Components for Layouts Tab) -- file: archon-ui-main/src/features/projects/components/ProjectCard.tsx - why: Example card component with glassmorphism, task counts, selection states - pattern: Card with gradient backgrounds, hover effects, neon glow borders - gotcha: Uses real data and optimistic updates - strip to hard-coded example - -- file: archon-ui-main/src/features/projects/components/ProjectList.tsx - why: Horizontal scrolling card grid layout pattern - pattern: Flex container with overflow-x-auto, gap-4 spacing - -- file: archon-ui-main/src/components/ui/CollapsibleSettingsCard.tsx - why: Collapsible card component for bento grid - pattern: PowerButton toggle, AnimatePresence for expand/collapse - gotcha: Uses localStorage - remove for hard-coded example - -- file: archon-ui-main/src/pages/SettingsPage.tsx - why: Bento grid layout example (2-column responsive) - pattern: grid grid-cols-1 lg:grid-cols-2 gap-6 - -- file: archon-ui-main/src/features/knowledge/views/KnowledgeView.tsx - why: View mode switching pattern (grid vs table) - pattern: useState for viewMode, conditional rendering - gotcha: Has real data fetching - create simplified hard-coded version - -- file: archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx - why: View toggle buttons (grid/table icons) - pattern: Button group with active state styling - -- file: archon-ui-main/src/features/knowledge/components/DocumentBrowser.tsx - why: Information display modal with tabs, search, and expandable content - pattern: Dialog + Tabs + Search + Collapsible content items - critical: KEY PATTERN for displaying structured information in modals (documents, code examples, logs, etc.) - -# Navigation Patterns -- file: archon-ui-main/src/components/layout/Navigation.tsx - why: Main sidebar navigation with glassmorphism - pattern: Fixed left sidebar, tooltip on hover, active state with neon glow - -- file: archon-ui-main/src/components/layout/MainLayout.tsx - why: Overall page layout structure - pattern: Fixed nav sidebar, content area with padding - -- file: archon-ui-main/src/features/projects/views/ProjectsView.tsx - why: Top tabs navigation example (Docs/Tasks tabs) - pattern: Radix Tabs component with TabsList and TabsTrigger - -# Glassmorphism System -- file: archon-ui-main/src/features/ui/primitives/styles.ts - why: Complete glassmorphism design system with all utilities - pattern: glassmorphism object with background, border, shadow, variants - critical: This is the foundation for all glass styling - reference extensively - -# Tailwind Configuration -- file: archon-ui-main/tailwind.config.js - why: Theme configuration, custom colors, animations - pattern: HSL-based color tokens, custom keyframes - -# Radix UI Primitives - ALL COMPONENTS MUST USE THESE -- file: archon-ui-main/src/features/ui/primitives/tabs.tsx - why: Radix Tabs primitive with glassmorphism styling - pattern: Tabs, TabsList, TabsTrigger, TabsContent components - critical: Use for all tab navigation (Style Guide, Layouts, Configurators main tabs AND within examples) - -- file: archon-ui-main/src/features/ui/primitives/select.tsx - why: Radix Select primitive with glassmorphism and color variants - pattern: Select, SelectTrigger, SelectValue, SelectContent, SelectItem - critical: Use for ALL dropdowns - never use native HTML select - -- file: archon-ui-main/src/features/ui/primitives/dialog.tsx - why: Radix Dialog primitive for modals - pattern: Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription - -- file: archon-ui-main/src/features/ui/primitives/button.tsx - why: Button primitive with glassmorphism variants - pattern: Supports variants (default, destructive, outline, ghost, cyan, purple, green) and sizes (sm, md, lg, icon) - -- file: archon-ui-main/src/features/ui/primitives/card.tsx - why: GlassCard primitive with configurable blur, transparency, tints, edges - pattern: Card component with extensive glassmorphism options - -- file: archon-ui-main/src/features/ui/primitives/checkbox.tsx - why: Radix Checkbox with glassmorphism and color variants - pattern: Checkbox component with color prop (cyan, purple, blue, green, etc.) - -- file: archon-ui-main/src/features/ui/primitives/switch.tsx - why: Radix Switch toggle with glassmorphism - pattern: Switch component with smooth animations - -- file: archon-ui-main/src/features/ui/primitives/tooltip.tsx - why: Radix Tooltip for hover hints - pattern: Tooltip, TooltipTrigger, TooltipContent, TooltipProvider - -- file: archon-ui-main/src/features/ui/primitives/dropdown-menu.tsx - why: Radix DropdownMenu for context menus - pattern: DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem - -- file: archon-ui-main/src/features/ui/primitives/toggle-group.tsx - why: Radix ToggleGroup for mutually exclusive selections - pattern: ToggleGroup, ToggleGroupItem with single/multiple type - -- file: archon-ui-main/src/features/ui/primitives/input.tsx - why: Styled input component (not Radix, but used with Radix forms) - pattern: Input component for text fields - -- file: archon-ui-main/src/features/ui/primitives/label.tsx - why: Label component for form fields - pattern: Label primitive for accessibility - -- file: archon-ui-main/src/features/ui/primitives/radio-group.tsx - why: Radix RadioGroup for mutually exclusive options - pattern: RadioGroup, RadioGroupItem - -- file: archon-ui-main/src/features/ui/primitives/alert-dialog.tsx - why: Radix AlertDialog for confirmation dialogs - pattern: AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogAction - -- url: https://www.radix-ui.com/primitives/docs/overview/introduction - why: Radix UI documentation - understand composition patterns - critical: All primitives use compound component pattern (Root + Sub-components) - source_id: 72f799530ca992a6 -``` - -### Current Codebase Tree - -``` -archon-ui-main/src/features/style-guide/ -├── components/ -│ └── StyleGuideView.tsx # Main view - refactor this -├── shared/ -│ ├── PillNavigation.tsx # Adapt for 3 tabs -│ ├── CodeDisplay.tsx # Reuse for code examples -│ └── ConfiguratorCard.tsx # Reuse for configurators -├── foundations/ # KEEP - move to Style Guide tab -│ ├── TypographyFoundation.tsx -│ ├── ColorsFoundation.tsx -│ ├── SpacingFoundation.tsx -│ └── EffectsFoundation.tsx -├── configurators/ # KEEP - move to Configurators tab -│ ├── GlassCardConfigurator.tsx -│ ├── ButtonConfigurator.tsx -│ ├── ModalConfigurator.tsx -│ ├── FormConfigurator.tsx -│ ├── TableConfigurator.tsx -│ ├── ToggleConfigurator.tsx -│ ├── SwitchConfigurator.tsx -│ ├── CheckboxConfigurator.tsx -│ └── NavigationConfigurator.tsx # MOVE from patterns/NavigationPattern.tsx -├── patterns/ # DELETE - will be replaced by Layouts tab -│ ├── LayoutsPattern.tsx -│ ├── FeedbackPattern.tsx -│ ├── NavigationPattern.tsx # MOVE to configurators/NavigationConfigurator.tsx -│ └── DataDisplayPattern.tsx -└── examples/ # DELETE - replaced by hard-coded layout examples - ├── CompositionsExample.tsx - ├── PagesExample.tsx - ├── WorkflowsExample.tsx - └── RAGSettingsExample.tsx -``` - -### Desired Codebase Tree - -``` -archon-ui-main/src/features/style-guide/ -├── components/ -│ └── StyleGuideView.tsx # REFACTORED - 3-tab structure -├── shared/ -│ ├── SimpleTabNavigation.tsx # NEW - simple 3-tab nav (no dropdowns) -│ ├── CodeDisplay.tsx # KEEP as-is -│ └── ConfiguratorCard.tsx # KEEP as-is -├── tabs/ # NEW DIRECTORY -│ ├── StyleGuideTab.tsx # NEW - contains foundations -│ ├── LayoutsTab.tsx # NEW - contains layout examples -│ └── ConfiguratorsTab.tsx # NEW - contains configurators -├── foundations/ # KEEP - used by StyleGuideTab -│ ├── TypographyFoundation.tsx # KEEP as-is -│ ├── ColorsFoundation.tsx # KEEP as-is -│ ├── SpacingFoundation.tsx # KEEP as-is -│ └── EffectsFoundation.tsx # KEEP as-is -├── configurators/ # KEEP - used by ConfiguratorsTab -│ ├── GlassCardConfigurator.tsx # KEEP as-is -│ ├── ButtonConfigurator.tsx # KEEP as-is -│ ├── ModalConfigurator.tsx # KEEP as-is -│ ├── FormConfigurator.tsx # KEEP as-is -│ ├── TableConfigurator.tsx # KEEP as-is -│ ├── ToggleConfigurator.tsx # KEEP as-is -│ ├── SwitchConfigurator.tsx # KEEP as-is -│ ├── CheckboxConfigurator.tsx # KEEP as-is -│ └── NavigationConfigurator.tsx # MOVED from patterns/NavigationPattern.tsx -└── layouts/ # NEW DIRECTORY - ├── ProjectsLayoutExample.tsx # NEW - hard-coded Projects page (horizontal + sidebar) - ├── SettingsLayoutExample.tsx # NEW - hard-coded Settings bento grid - ├── KnowledgeLayoutExample.tsx # NEW - hard-coded view switching - ├── DocumentBrowserExample.tsx # NEW - information display modal example - └── NavigationExplanation.tsx # NEW - nav patterns explanation - -archon-ui-main/public/ -└── components.json # NEW - component mapping for AI -``` - -### Known Gotchas & Library Quirks - -```typescript -// CRITICAL: Framer Motion AnimatePresence -// When removing items from arrays, use layout prop and unique keys - - {items.map((item) => ( - - {/* content */} - - ))} - - -// CRITICAL: Radix UI Tabs -// Always wrap TabsContent in conditional or it will still render in DOM -{activeTab === "docs" && ( - {/* content */} -)} - -// CRITICAL: Glassmorphism Styles -// Import from primitives/styles.ts, NOT from local constants -import { glassmorphism, glassCard, cn } from '@/features/ui/primitives/styles'; - -// CRITICAL: Hard-coded Data for Layouts -// NO real data, NO API calls, NO useState for data -// ONLY useState for UI state (view mode, selected tab, etc.) -const MOCK_PROJECTS = [ - { id: '1', title: 'Project Alpha', pinned: true, taskCounts: { todo: 5, doing: 2, review: 1, done: 12 } }, - { id: '2', title: 'Project Beta', pinned: false, taskCounts: { todo: 3, doing: 1, review: 0, done: 8 } }, -]; - -// CRITICAL: View Mode Pattern -// Always use type-safe union types for view modes -const [viewMode, setViewMode] = useState<"grid" | "table">("grid"); - -// CRITICAL: Lucide React Icons -// Standard sizes are w-4 h-4 (small), w-5 h-5 (medium), w-6 h-6 (large) -import { Grid, List, LayoutGrid, Table } from 'lucide-react'; - -// CRITICAL: Radix UI Compound Component Pattern -// All Radix components use composition pattern (Root + Sub-components) -// Example - Tabs: -import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/features/ui/primitives/tabs'; - - - Tasks - Docs - - {/* content */} - - -// Example - Select: -import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/features/ui/primitives/select'; - - -// CRITICAL: Never use native HTML elements for these interactions -// ❌ WRONG: -// ✅ CORRECT: Use Radix Select primitive -// ❌ WRONG: -// ✅ CORRECT: Use Radix Checkbox primitive -// ❌ WRONG: - ))} - - - ); - }; - ``` - -Task 3: CREATE archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx - - IMPLEMENT: Visual explanation of navigation patterns - - CONTENT: - - Main Navigation: Left sidebar, fixed position (left-6), icon-based, 72px wide - - Content Area: pl-[100px] to accommodate main nav, all page content lives here - - Page Navigation: Top tabs/pills for page sections (e.g., Docs/Tasks) - - View Controls: Toggle buttons for grid/table views - - CRITICAL: Explain that main nav is OUTSIDE content area, page layouts are INSIDE content area - - VISUAL: Show diagram/examples with code snippets - - PLACEMENT: Top of Layouts tab as introduction - -Task 4: CREATE archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx - - IMPLEMENT: Hard-coded Projects page layout example with dual layout modes - - MOCK DATA: 3-4 mock projects with task counts, one pinned - - FEATURES: - - Layout toggle: Horizontal cards (default) OR Sidebar list view - - Horizontal scrolling card grid with project selection highlighting - - Sidebar variant: Smaller card list on left with search bar - - RADIX: Use Tabs primitive for Docs/Tasks navigation example, Input for search - - LAYOUT MODES: - - "horizontal": Cards across top (current ProjectList pattern) - - "sidebar": Vertical list on left WITHIN content area (not covering main nav) - - CRITICAL POSITIONING: - - This component renders INSIDE the main content area (pl-[100px]) - - Main navigation is OUTSIDE at fixed left-6 (72px wide) - - Sidebar layout should use relative positioning, NOT fixed - - Sidebar project list: w-72 (288px) on left, flex-1 for content on right - - Total width respects parent container, doesn't overlap main nav - - STRIP: All real data fetching, optimistic updates, mutations - - KEEP: Visual styling, layout structure, selection state (local) - - PATTERN: - ```tsx - import { Input } from '@/features/ui/primitives/input'; - import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/features/ui/primitives/tabs'; - - const MOCK_PROJECTS = [ - { id: '1', title: 'Design System', pinned: true, taskCounts: { todo: 5, doing: 2, review: 1, done: 12 } }, - { id: '2', title: 'API Integration', pinned: false, taskCounts: { todo: 3, doing: 1, review: 0, done: 8 } }, - { id: '3', title: 'Mobile App', pinned: false, taskCounts: { todo: 8, doing: 0, review: 0, done: 0 } }, - ]; - const [selectedId, setSelectedId] = useState('1'); - const [layoutMode, setLayoutMode] = useState<'horizontal' | 'sidebar'>('horizontal'); - - // Layout toggle buttons (LayoutGrid icon for horizontal, List icon for sidebar) - // Horizontal layout: flex gap-4 overflow-x-auto (current pattern) - // Sidebar layout: flex gap-6 (left sidebar w-72, right content flex-1) - RELATIVE positioning - // Sidebar DOES NOT use fixed/absolute - it's a flex container within the content area - ``` - - EXPLANATION TEXT: "Use this layout for: Horizontal scrolling items (default), OR sidebar navigation for projects. Toggle shows both layout options. Sidebar respects main navigation (doesn't overlap). Cards with real-time data displays." - -Task 5: CREATE archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx - - IMPLEMENT: Hard-coded Settings bento grid layout - - MOCK SECTIONS: 4-6 collapsible card sections (Features, API Keys, RAG, Code Extraction, etc.) - - FEATURES: 2-column responsive grid, collapsible cards with PowerButton - - STRIP: All real settings data, localStorage, API calls - - KEEP: Visual layout, expand/collapse animation, accent colors - - PATTERN: - ```tsx -
- - {/* Mock content */} - - {/* More cards */} -
- ``` - - EXPLANATION TEXT: "Use this layout for: Settings pages, dashboard widgets, grouped configuration sections" - -Task 6: CREATE archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx - - IMPLEMENT: Hard-coded Knowledge page with view switching - - MOCK DATA: 6-8 mock knowledge items (docs, websites, etc.) - - FEATURES: View mode toggle (grid/table), filters, search (UI only, no real filtering) - - RADIX: Use ToggleGroup for type filter (All/Technical/Business) - - VIEW MODES: Grid (responsive columns) and Table (overflow-x-auto) - - STRIP: All real data fetching, delete actions, real search/filter logic - - KEEP: View switching logic, layout patterns, visual styling - - PATTERN: - ```tsx - const [viewMode, setViewMode] = useState<"grid" | "table">("grid"); - - {viewMode === "table" ? ( -
- {/* table content */}
-
- ) : ( -
- {/* grid items */} -
- )} - ``` - - EXPLANATION TEXT: "Use this layout for: Switchable views (grid/table/list), filterable data, search interfaces" - -Task 7: CREATE archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx - - IMPLEMENT: Hard-coded information display modal example - - MOCK DATA: 5-6 mock document chunks, 3-4 mock code examples - - FEATURES: Dialog modal with Tabs (Documents/Code), Search input, Expandable content - - RADIX: Dialog, Tabs, Input primitives - - STRIP: All real data fetching, real search logic - - KEEP: Visual structure, tab switching, expand/collapse interaction, search UI - - PATTERN: - ```tsx - import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/features/ui/primitives/dialog'; - import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/features/ui/primitives/tabs'; - import { Input } from '@/features/ui/primitives/input'; - import { Button } from '@/features/ui/primitives/button'; - - const MOCK_DOCUMENTS = [ - { id: '1', title: 'Getting Started', content: 'Full document content...', tags: ['guide', 'intro'] }, - { id: '2', title: 'API Reference', content: 'API documentation...', tags: ['api', 'reference'] }, - ]; - - const MOCK_CODE = [ - { id: '1', language: 'typescript', summary: 'React component example', code: 'const Example = () => {...}' }, - { id: '2', language: 'python', summary: 'FastAPI endpoint', code: '@app.get("/api/items")...' }, - ]; - - const [open, setOpen] = useState(false); - const [activeTab, setActiveTab] = useState<'documents' | 'code'>('documents'); - const [searchQuery, setSearchQuery] = useState(''); - const [expandedItems, setExpandedItems] = useState>(new Set()); - - // Dialog with max-w-4xl, h-[80vh], flex flex-col for full-height modal - // Search input in DialogHeader with Search icon (absolute left-3) - // Tabs with icon + label + counts: "Documents (5)", "Code Examples (3)" - // TabsContent with flex-1 overflow-hidden for scrollable content - // Expandable items: Set for tracking expanded state - // Toggle pattern: ChevronRight (collapsed) / ChevronDown (expanded) - // Content preview: first 200 chars with "Show more" link - // Code display: 
 with syntax highlighting classes
-
-    // Example Button to Open Modal:
-    
-    
-    ```
-  - EXPLANATION TEXT: "Use this pattern for: Displaying structured information in modals (documents, logs, code, API responses). Tabs organize different data types, search filters content, items expand/collapse for details."
-
-Task 8: CREATE archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx
-  - IMPLEMENT: Container component for foundations
-  - RENDER: TypographyFoundation, ColorsFoundation, SpacingFoundation, EffectsFoundation
-  - LAYOUT: Vertical stack with spacing
-  - PATTERN:
-    ```tsx
-    

-      
-      
-      
-      
-    

-    ```
-
-Task 9: CREATE archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx
-  - IMPLEMENT: Container component for layout examples
-  - RENDER: NavigationExplanation, ProjectsLayoutExample, SettingsLayoutExample, KnowledgeLayoutExample, DocumentBrowserExample
-  - LAYOUT: Vertical stack with large spacing and section headers
-  - PATTERN:
-    ```tsx
-    

-      
-      

-        
Projects Layout

-        

-          Horizontal scrolling cards OR sidebar navigation with search. Toggle to see both modes.
-        

-        
-      

-      

-        
Settings Layout

-        

-          Bento grid (2-column responsive) with collapsible cards.
-        

-        
-      

-      

-        
Knowledge Layout

-        

-          Switchable views (grid/table) with filters and search.
-        

-        
-      

-      

-        
Information Display Modal

-        

-          Modal with tabs, search, and expandable content for documents, code, logs.
-        

-        
-      

-    

-    ```
-
-Task 10: MOVE archon-ui-main/src/features/style-guide/patterns/NavigationPattern.tsx
-  - RENAME: NavigationPattern.tsx → NavigationConfigurator.tsx
-  - MOVE TO: archon-ui-main/src/features/style-guide/configurators/NavigationConfigurator.tsx
-  - KEEP: All existing functionality (pill navigation with dropdowns, color variants, size options)
-  - UPDATE EXPORT: Change export name if needed to match configurator pattern
-  - VERIFY: Import in ConfiguratorsTab works correctly
-
-Task 11: CREATE archon-ui-main/src/features/style-guide/tabs/ConfiguratorsTab.tsx
-  - IMPLEMENT: Container component for all configurators
-  - RENDER: All 9 configurators (GlassCard, Button, Modal, Form, Table, Toggle, Switch, Checkbox, Navigation)
-  - LAYOUT: Vertical stack with spacing, section headers per configurator
-  - PATTERN:
-    ```tsx
-    import { GlassCardConfigurator } from '../configurators/GlassCardConfigurator';
-    import { ButtonConfigurator } from '../configurators/ButtonConfigurator';
-    import { ModalConfigurator } from '../configurators/ModalConfigurator';
-    import { FormConfigurator } from '../configurators/FormConfigurator';
-    import { TableConfigurator } from '../configurators/TableConfigurator';
-    import { ToggleConfigurator } from '../configurators/ToggleConfigurator';
-    import { SwitchConfigurator } from '../configurators/SwitchConfigurator';
-    import { CheckboxConfigurator } from '../configurators/CheckboxConfigurator';
-    import { NavigationConfigurator } from '../configurators/NavigationConfigurator';
-
-    export const ConfiguratorsTab = () => {
-      return (
-        

-          

-            
Glass Card Configurator

-            
-          

-          

-            
Button Configurator

-            
-          

-          

-            
Navigation Configurator

-            
-          

-          

-            
Modal Configurator

-            
-          

-          

-            
Form Configurator

-            
-          

-          

-            
Table Configurator

-            
-          

-          

-            
Toggle Configurator

-            
-          

-          

-            
Switch Configurator

-            
-          

-          

-            
Checkbox Configurator

-            
-          

-        

-      );
-    };
-    ```
-
-Task 12: MODIFY archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx
-  - REFACTOR: Replace complex navigation with SimpleTabNavigation
-  - STATE: const [activeTab, setActiveTab] = useState<'style-guide' | 'layouts' | 'configurators'>('style-guide')
-  - RENDER: Conditional rendering based on activeTab
-  - REMOVE: All old FOUNDATION_TABS, COMPONENT_TABS, PATTERN_TABS, EXAMPLE_TABS arrays
-  - KEEP: Header with title and description
-  - KEEP: ThemeToggle component in top right corner
-  - PATTERN:
-    ```tsx
-    import { SimpleTabNavigation } from '../shared/SimpleTabNavigation';
-    import { StyleGuideTab } from '../tabs/StyleGuideTab';
-    import { LayoutsTab } from '../tabs/LayoutsTab';
-    import { ConfiguratorsTab } from '../tabs/ConfiguratorsTab';
-    import { ThemeToggle } from '@/components/ui/ThemeToggle';
-
-    export const StyleGuideView = () => {
-      const [activeTab, setActiveTab] = useState<'style-guide' | 'layouts' | 'configurators'>('style-guide');
-
-      return (
-        

-          {/* Header */}
-          

-            

-              
-            

-            

-              

-                Archon UI Style Guide
-              

-              

-                Design system foundations, layout patterns, and interactive component configurators.
-              

-            

-          

-
-          {/* Tab Navigation */}
-          

-            
-          

-
-          {/* Tab Content */}
-          

-            {activeTab === 'style-guide' && }
-            {activeTab === 'layouts' && }
-            {activeTab === 'configurators' && }
-          

-        

-      );
-    };
-    ```
-
-Task 13: DELETE old pattern and example files (AFTER Tasks 1-12 complete)
-  - DELETE: archon-ui-main/src/features/style-guide/patterns/ (entire directory)
-  - DELETE: archon-ui-main/src/features/style-guide/examples/ (entire directory)
-  - DELETE: archon-ui-main/src/features/style-guide/shared/PillNavigation.tsx (if not used elsewhere)
-  - VERIFY: No imports referencing deleted files
-
-Task 14: UPDATE archon-ui-main/src/features/style-guide/index.ts
-  - MODIFY: Export new tab components and SimpleTabNavigation
-  - REMOVE: Exports for deleted patterns and examples
-  - ADD:
-    ```typescript
-    export { StyleGuideView } from './components/StyleGuideView';
-    export { SimpleTabNavigation } from './shared/SimpleTabNavigation';
-    export { StyleGuideTab } from './tabs/StyleGuideTab';
-    export { LayoutsTab } from './tabs/LayoutsTab';
-    export { ConfiguratorsTab } from './tabs/ConfiguratorsTab';
-    ```
-```
-
-### Implementation Patterns & Key Details
-
-```typescript
-// SimpleTabNavigation Component Pattern
-// archon-ui-main/src/features/style-guide/shared/SimpleTabNavigation.tsx
-import { cn } from '@/features/ui/primitives/styles';
-
-interface SimpleTabNavigationProps {
-  activeTab: 'style-guide' | 'layouts' | 'configurators';
-  onTabChange: (tab: 'style-guide' | 'layouts' | 'configurators') => void;
-}
-
-export const SimpleTabNavigation = ({ activeTab, onTabChange }: SimpleTabNavigationProps) => {
-  const tabs = [
-    { id: 'style-guide' as const, label: 'Style Guide' },
-    { id: 'layouts' as const, label: 'Layouts' },
-    { id: 'configurators' as const, label: 'Configurators' },
-  ];
-
-  return (
-    

-      

-        {tabs.map((tab) => (
-          
-        ))}
-      

-    

-  );
-};
-
-// Hard-Coded Project Card Pattern (Simplified)
-// archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
-const MOCK_PROJECTS = [
-  {
-    id: '1',
-    title: 'Design System',
-    pinned: true,
-    taskCounts: { todo: 5, doing: 2, review: 1, done: 12 }
-  },
-  {
-    id: '2',
-    title: 'API Integration',
-    pinned: false,
-    taskCounts: { todo: 3, doing: 1, review: 0, done: 8 }
-  },
-  {
-    id: '3',
-    title: 'Mobile App',
-    pinned: false,
-    taskCounts: { todo: 8, doing: 0, review: 0, done: 0 }
-  },
-];
-
-// Projects Layout with Horizontal vs Sidebar Toggle
-const ProjectsLayoutExample = () => {
-  const [selectedId, setSelectedId] = useState('1');
-  const [layoutMode, setLayoutMode] = useState<'horizontal' | 'sidebar'>('horizontal');
-
-  return (
-    

-      {/* Layout Mode Toggle */}
-      

-        

-          
-          
-        

-      

-
-      {/* Conditional Layout Rendering */}
-      {layoutMode === 'horizontal' ? (
-        // Horizontal scrolling card grid (current pattern)
-        

-          

-            {MOCK_PROJECTS.map((project) => (
-              
-            ))}
-          

-        

-      ) : (
-        // Sidebar layout (new pattern) - RELATIVE positioning within content area
-        

-          {/* Left Sidebar: Project List - w-72 (288px) */}
-          

-            
-            

-              {MOCK_PROJECTS.map((project) => (
-                
-              ))}
-            

-          

-          {/* Right: Main Content - flex-1 takes remaining space */}
-          

-            {/* Example: Tabs for Docs/Tasks */}
-            
-              
-                Tasks
-                Docs
-              
-              
-                Task content area...
-              
-              
-                Docs content area...
-              
-            
-          

-        

-      )}
-    

-  );
-};
-
-// CRITICAL: Sidebar Positioning
-// - Main nav: fixed left-6 (72px wide, 24px from left edge)
-// - Content area: pl-[100px] (gives space for 72px nav + 28px gap)
-// - Sidebar layout: INSIDE content area (relative positioning)
-// - Total layout: [Main Nav (72px)] [Gap (28px)] [Content: [Sidebar (288px)] [Gap (24px)] [Main Content (flex-1)]]
-// - No overlap with main navigation
-
-// Full ProjectCard for horizontal layout (w-72, min-h-[180px])
-const SimplifiedProjectCard = ({ project, isSelected, onSelect }) => {
-  return (
-    
 onSelect(project.id)}
-      className={cn(
-        "relative rounded-xl backdrop-blur-md w-72 min-h-[180px] cursor-pointer",
-        "transition-all duration-300",
-        project.pinned
-          ? "bg-gradient-to-b from-purple-100/80 to-purple-100/50"
-          : isSelected
-            ? "bg-gradient-to-b from-white/70 to-white/50"
-            : "bg-gradient-to-b from-white/80 to-white/60",
-        // ... rest of styling from ProjectCard.tsx but without real data logic
-      )}
-    >
-      {/* Card content - copy structure from ProjectCard but with mock data */}
-    

-  );
-};
-
-// Compact SidebarProjectCard for sidebar layout (full width, h-auto)
-const SimplifiedSidebarProjectCard = ({ project, isSelected, onSelect }) => {
-  return (
-    
 onSelect(project.id)}
-      className={cn(
-        "relative rounded-lg backdrop-blur-md p-3 cursor-pointer",
-        "transition-all duration-300",
-        project.pinned
-          ? "bg-gradient-to-r from-purple-100/80 to-purple-100/50 border-l-2 border-purple-500"
-          : isSelected
-            ? "bg-gradient-to-r from-white/70 to-white/50 border-l-2 border-cyan-500"
-            : "bg-gradient-to-r from-white/80 to-white/60 border-l-2 border-transparent",
-      )}
-    >
-      
{project.title}

-      

-        {project.taskCounts.todo} todo
-        {project.taskCounts.doing} doing
-        {project.taskCounts.done} done
-      

-    

-  );
-};
-
-// View Mode Toggle Pattern
-// archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
-const ViewModeToggle = ({ viewMode, onViewModeChange }) => {
-  return (
-    

-      
-      
-    

-  );
-};
-
-// ===== RADIX UI PRIMITIVES - COMPREHENSIVE GUIDE =====
-
-// TABS PRIMITIVE PATTERN (for page-level navigation)
-// archon-ui-main/src/features/projects/views/ProjectsView.tsx:188-210
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/features/ui/primitives/tabs';
-
-const PageWithTabs = () => {
-  const [activeTab, setActiveTab] = useState("tasks");
-
-  return (
-    
-      
-        
-          Tasks
-        
-        
-          Docs
-        
-      
-
-      {/* CRITICAL: Wrap TabsContent in conditional to prevent rendering when inactive */}
-      {activeTab === "tasks" && (
-        
-          {/* Task content */}
-        
-      )}
-      {activeTab === "docs" && (
-        
-          {/* Docs content */}
-        
-      )}
-    
-  );
-};
-
-// SELECT PRIMITIVE PATTERN (for dropdowns, always use this over native select)
-// archon-ui-main/src/features/style-guide/configurators/GlassCardConfigurator.tsx:245-262
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/features/ui/primitives/select';
-
-const DropdownExample = () => {
-  const [value, setValue] = useState("medium");
-
-  return (
-    
-  );
-};
-
-// CHECKBOX PRIMITIVE PATTERN
-// archon-ui-main/src/features/style-guide/patterns/NavigationPattern.tsx:423-432
-import { Checkbox } from '@/features/ui/primitives/checkbox';
-
-const CheckboxExample = () => {
-  const [checked, setChecked] = useState(false);
-
-  return (
-    

-      
-      
-    

-  );
-};
-
-// TOGGLE GROUP PRIMITIVE PATTERN (for filters, view modes)
-// archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx:59-75
-import { ToggleGroup, ToggleGroupItem } from '@/features/ui/primitives/toggle-group';
-import { Asterisk, Terminal, FileCode } from 'lucide-react';
-
-const FilterExample = () => {
-  const [filter, setFilter] = useState("all");
-
-  return (
-     v && setFilter(v)}
-      aria-label="Filter type"
-    >
-      
-        
-      
-      
-        
-      
-      
-        
-      
-    
-  );
-};
-
-// TOOLTIP PRIMITIVE PATTERN
-// archon-ui-main/src/components/layout/Navigation.tsx:89-130
-import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/features/ui/primitives/tooltip';
-
-// CRITICAL: TooltipProvider must wrap entire app (already in App.tsx)
-const TooltipExample = () => {
-  return (
-    
-      
-        
-      
-      
-        
Tooltip content

-      
-    
-  );
-};
-
-// DIALOG PRIMITIVE PATTERN (for modals)
-// archon-ui-main/src/features/projects/components/NewProjectModal.tsx (reference)
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/features/ui/primitives/dialog';
-
-const ModalExample = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    
-      
-        
-          Modal Title
-        
-        {/* Modal content */}
-      
-    
-  );
-};
-
-// ===== DOCUMENT BROWSER PATTERN - Information Display Modal =====
-// archon-ui-main/src/features/knowledge/components/DocumentBrowser.tsx
-// CRITICAL: This is the pattern for displaying structured information in modals
-
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/features/ui/primitives/dialog';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/features/ui/primitives/tabs';
-import { Input } from '@/features/ui/primitives/input';
-import { ChevronDown, ChevronRight, Code, FileText, Search } from 'lucide-react';
-
-const DocumentBrowserExample = ({ open, onOpenChange }: { open: boolean, onOpenChange: (open: boolean) => void }) => {
-  const [activeTab, setActiveTab] = useState<'documents' | 'code'>('documents');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [expandedItems, setExpandedItems] = useState>(new Set());
-
-  const MOCK_DOCUMENTS = [
-    { id: '1', title: 'Getting Started', content: 'Long content here...', tags: ['guide', 'intro'] },
-    { id: '2', title: 'API Reference', content: 'API documentation...', tags: ['api', 'reference'] },
-  ];
-
-  const MOCK_CODE = [
-    { id: '1', language: 'typescript', summary: 'React component', code: 'const Example = () => {...}', file_path: 'src/components/Example.tsx' },
-    { id: '2', language: 'python', summary: 'FastAPI endpoint', code: '@app.get("/api/items")...', file_path: 'src/api/routes.py' },
-  ];
-
-  const toggleExpanded = (id: string) => {
-    setExpandedItems(prev => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  return (
-    
-      
-        
-          Document Browser
-          

-            

-              
-               setSearchQuery(e.target.value)}
-                className="pl-10 bg-black/30 border-white/10"
-              />
-            

-          

-        
-
-         setActiveTab(v as any)} className="flex-1 flex flex-col">
-          
-            
-              
-              Documents ({MOCK_DOCUMENTS.length})
-            
-            
-              
-              Code ({MOCK_CODE.length})
-            
-          
-
-          
-            

-              {MOCK_DOCUMENTS.map((doc) => {
-                const isExpanded = expandedItems.has(doc.id);
-                const preview = doc.content.substring(0, 200);
-                const needsExpansion = doc.content.length > 200;
-
-                return (
-                  

-                    

-                      {needsExpansion && (
-                        
-                      )}
-                      {doc.title}
-                    

-                    

-                      {isExpanded || !needsExpansion ? doc.content : `${preview}...`}
-                    

-                    {doc.tags && (
-                      

-                        {doc.tags.map(tag => (
-                          
-                            {tag}
-                          
-                        ))}
-                      

-                    )}
-                  

-                );
-              })}
-            

-          
-
-          
-            

-              {MOCK_CODE.map((example) => (
-                

-                  

-                    

-                      
-                      
-                        {example.language}
-                      
-                    

-                    {example.file_path}
-                  

-                  
{example.summary}

-                  
-                    {example.code}
-                  

-                

-              ))}
-            

-          
-        
-      
-    
-  );
-};
-```
-
-## Validation Loop
-
-### Level 1: Syntax & Style (Immediate Feedback)
-
-```bash
-# Run after each file creation - fix before proceeding
-cd archon-ui-main
-
-# TypeScript type checking
-npx tsc --noEmit
-
-# Biome for features directory
-npm run biome
-
-# Expected: Zero errors. If errors exist, READ output and fix before proceeding.
-```
-
-### Level 2: Component Validation (Build Testing)
-
-```bash
-# Build the frontend to ensure no import errors
-cd archon-ui-main
-npm run build
-
-# Expected: Clean build with no errors
-# Common issues:
-# - Missing imports (add them)
-# - Circular dependencies (refactor imports)
-# - Type mismatches (fix type definitions)
-```
-
-### Level 3: Visual Validation (Manual Testing)
-
-```bash
-# Start dev server
-cd archon-ui-main
-npm run dev
-
-# Manual checks:
-# 1. Navigate to http://localhost:3737/style-guide
-# 2. Verify 3 tabs appear (Style Guide, Layouts, Configurators)
-# 3. Click each tab and verify content renders:
-#    - Style Guide: Typography, Colors, Spacing, Effects visible
-#    - Layouts: Navigation explanation, 3 layout examples visible
-#    - Configurators: All 8 configurators render correctly
-# 4. In Layouts tab, test each example:
-#    - Projects: Click different project cards, see selection change
-#    - Settings: Click PowerButton icons, see cards expand/collapse
-#    - Knowledge: Toggle grid/table view, see layout switch
-# 5. In Configurators tab, test one configurator:
-#    - GlassCard: Change settings, see live preview update, see code generate
-# 6. Verify components.json accessible at http://localhost:3737/components.json
-```
-
-### Level 4: AI-Friendliness Validation
-
-```bash
-# Test components.json structure
-curl http://localhost:3737/components.json | jq '.'
-
-# Expected output: Valid JSON with categories, components, paths, usage
-# Verify AI can parse:
-# - Each component has "name", "path", "usage"
-# - Paths are relative from project root
-# - Examples point to specific line numbers
-
-# Simulated AI Query Test:
-# Query: "How do I create a horizontal scrolling card layout?"
-# AI should:
-# 1. Check components.json → find "CardGridLayout"
-# 2. See path: archon-ui-main/src/features/projects/components/ProjectList.tsx:100-117
-# 3. See pattern: "flex gap-4 overflow-x-auto with min-w-max"
-# 4. Navigate to Layouts tab for visual example
-```
-
-## Final Validation Checklist
-
-### Technical Validation
-
-- [ ] All 14 implementation tasks completed successfully
-- [ ] No TypeScript errors: `npx tsc --noEmit`
-- [ ] No linting errors: `npm run biome`
-- [ ] Clean build: `npm run build`
-- [ ] Frontend dev server runs without errors: `npm run dev`
-
-### Feature Validation
-
-- [ ] 3 tabs render correctly (Style Guide, Layouts, Configurators)
-- [ ] Tab navigation works smoothly (click transitions, active states)
-- [ ] Style Guide tab shows all 4 foundations (Typography, Colors, Spacing, Effects)
-- [ ] Layouts tab shows Navigation explanation + 4 layout examples (Projects, Settings, Knowledge, DocumentBrowser)
-- [ ] Configurators tab shows all 9 configurators (GlassCard, Button, Navigation, Modal, Form, Table, Toggle, Switch, Checkbox)
-- [ ] All layout examples use hard-coded data (no API calls visible in Network tab)
-- [ ] Projects layout: Can select different mock projects, see styling change
-- [ ] Settings layout: Can expand/collapse mock cards with PowerButton
-- [ ] Knowledge layout: Can toggle grid/table view modes
-- [ ] DocumentBrowser layout: Can open modal, switch tabs, see expandable content
-- [ ] Projects sidebar mode: Sidebar doesn't cover main navigation (properly positioned)
-- [ ] components.json file accessible at /components.json URL
-- [ ] components.json has valid JSON structure
-- [ ] All Radix primitives used (no native HTML selects, checkboxes, etc.)
-
-### Code Quality Validation
-
-- [ ] Follows Archon vertical slice architecture (features own their code)
-- [ ] Uses glassmorphism styles from primitives/styles.ts
-- [ ] All hard-coded examples clearly marked with MOCK_ prefix for data
-- [ ] No real data fetching in layout examples (no useQuery, no service calls)
-- [ ] Proper TypeScript typing (no `any` types)
-- [ ] Follows existing naming conventions (camelCase for functions, PascalCase for components)
-- [ ] No console.log statements left in code
-- [ ] Comments explain "why" not "what" where needed
-
-### User Experience Validation
-
-- [ ] Tab labels are clear and descriptive
-- [ ] Layout examples have explanatory text ("Use this layout for...")
-- [ ] Navigation explanation is easy to understand
-- [ ] Interactive elements have hover states
-- [ ] Glassmorphism styling is consistent across all examples
-- [ ] Dark mode works correctly for all tabs
-- [ ] Responsive layout works on mobile, tablet, desktop
-- [ ] No visual glitches or overlapping elements
-
-### AI-Friendliness Validation
-
-- [ ] components.json is valid JSON and parseable
-- [ ] All component paths are correct and relative to project root
-- [ ] Usage descriptions are clear and actionable
-- [ ] Examples include specific line numbers where helpful
-- [ ] Component categories make logical sense (navigation, layouts, cards, buttons)
-- [ ] Pattern descriptions use code-friendly terminology
-- [ ] No ambiguous component names
-
----
-
-## Anti-Patterns to Avoid
-
-### File Organization Anti-Patterns
-
-- ❌ Don't create components outside the `features/style-guide` directory
-- ❌ Don't mix layout examples with real feature code (Projects, Settings, Knowledge)
-- ❌ Don't leave old pattern/example files after refactor
-- ❌ Don't create nested subdirectories beyond `tabs/` and `layouts/`
-
-### Code Anti-Patterns
-
-- ❌ Don't use real data fetching in layout examples (no useQuery, no API calls)
-- ❌ Don't import glassmorphism styles from anywhere except `features/ui/primitives/styles.ts`
-- ❌ Don't create new glassmorphism constants - use existing `glassmorphism` and `glassCard` objects
-- ❌ Don't hardcode colors - use Tailwind classes and theme variables
-- ❌ Don't use `any` types - always provide proper TypeScript types
-- ❌ Don't mix Framer Motion animation patterns - follow existing component patterns
-
-### State Management Anti-Patterns
-
-- ❌ Don't use useState for mock data in layout examples - define as constants
-- ❌ Don't add localStorage persistence to hard-coded layout examples
-- ❌ Don't create global state for style guide - keep it component-local
-- ❌ Don't use React Context for tab navigation - simple prop drilling is fine
-
-### Styling Anti-Patterns
-
-- ❌ Don't inline style objects - use Tailwind classes
-- ❌ Don't create custom CSS files - use Tailwind utilities
-- ❌ Don't duplicate glassmorphism patterns - import from primitives
-- ❌ Don't use arbitrary values without reason - prefer Tailwind tokens
-- ❌ Don't forget dark mode variants - always include `dark:` prefixes
-
-### Documentation Anti-Patterns
-
-- ❌ Don't create verbose explanatory text - keep it concise (1-2 sentences)
-- ❌ Don't include code comments in components.json - keep it data-only
-- ❌ Don't use generic descriptions - be specific ("horizontal scrolling card grid" not "card layout")
-- ❌ Don't forget to update components.json when adding new layout patterns
-
-### Radix UI Anti-Patterns
-
-- ❌ Don't use native HTML form elements (``, ``)
-- ❌ Don't import from `@radix-ui/react-*` directly - import from `@/features/ui/primitives/*`
-- ❌ Don't create custom styled versions of Radix components - use existing primitives
-- ❌ Don't forget compound component pattern - use all required parts (Trigger, Content, Item, etc.)
-- ❌ Don't skip accessibility props (aria-label, aria-labelledby, id for labels)
-- ❌ Don't forget TooltipProvider wrapper (already in App.tsx, don't add again)
-- ❌ Don't use incorrect Radix data attributes (use `data-[state=active]` not `.active` class)
-- ❌ Don't forget asChild prop when wrapping custom elements in Radix Trigger components
-
----
-
-## Confidence Score
-
-**10/10** - One-pass implementation success likelihood
-
-**Reasoning**:
-- ✅ Complete file structure provided (current → desired)
-- ✅ All source components identified with exact file paths and line numbers
-- ✅ All 9 configurators documented (including NavigationConfigurator that was in patterns)
-- ✅ Comprehensive Radix UI primitive documentation with code examples
-- ✅ Detailed implementation tasks (14 tasks) with code patterns
-- ✅ Hard-coded data examples for each layout type with exact mock data structures
-- ✅ components.json schema includes all Radix primitives with package names and "information_display" category
-- ✅ Clear separation of concerns (3 tabs with explicit purpose)
-- ✅ Validation checklist covers technical, feature, UX, and AI aspects (updated to 14 tasks, 4 layout examples)
-- ✅ Anti-patterns section includes Radix-specific gotchas (8 specific rules)
-- ✅ Comprehensive Radix UI patterns section with 7 primitive examples (added DocumentBrowser)
-- ✅ All layout examples specify which Radix components to use
-- ✅ Explicit guidance on NOT using native HTML elements
-- ✅ DocumentBrowser pattern added for information display modals
-- ✅ Sidebar layout positioning clarified (doesn't cover main nav, uses relative positioning)
-
-**No Deductions**: All critical information provided, including:
-- NavigationConfigurator (moved from patterns to configurators)
-- DocumentBrowser pattern for structured information display
-- Complete Radix UI primitive reference with compound component patterns
-- Exact code examples for Tabs, Select, Checkbox, ToggleGroup, Tooltip, Dialog, DocumentBrowser
-- Clear guidance on when to use Radix vs styled buttons
-- Component mapping includes Radix package names and all 16 primitives
-- Sidebar layout respects main navigation positioning (pl-[100px] content area)
-
----
-
-## Additional Notes
-
-### For the Implementing Agent
-
-1. **Start with components.json** - This gives you a map of what needs to be created
-2. **Create SimpleTabNavigation first** - You'll need this for the main refactor
-3. **Move NavigationPattern → NavigationConfigurator** - Simple rename and file move (Task 10)
-4. **Create tab container components** (StyleGuideTab, LayoutsTab, ConfiguratorsTab) before refactoring StyleGuideView
-5. **For layout examples**: Copy component structure, strip functionality, add mock data
-6. **CRITICAL: Use only Radix primitives** - Never use native HTML ``, etc.
-7. **Import Radix from primitives** - Always `@/features/ui/primitives/*`, never direct `@radix-ui/*`
-8. **Sidebar positioning**: Ensure sidebar layouts use relative positioning within content area (pl-[100px])
-9. **DocumentBrowser**: Full modal with tabs, search, expandable content - use Set for expanded state
-10. **Test each tab independently** before moving to the next
-11. **Delete old files last** after verifying new implementation works
-
-### Radix UI Quick Reference
-
-**When implementing layout examples, use these Radix primitives:**
-
-| Native HTML | ❌ WRONG | ✅ CORRECT Radix Primitive | Import Path |
-|-------------|----------|---------------------------|-------------|
-| `` | `@/features/ui/primitives/select` |
-| `` | Native checkbox | `` | `@/features/ui/primitives/checkbox` |
-| `` | Native radio | `` | `@/features/ui/primitives/radio-group` |
-| Tab buttons | Custom button tabs | `` | `@/features/ui/primitives/tabs` |
-| Modal backdrop | Custom modal | `` | `@/features/ui/primitives/dialog` |
-| Toggle buttons | Button group | `` | `@/features/ui/primitives/toggle-group` |
-| Hover tooltip | CSS :hover | `` | `@/features/ui/primitives/tooltip` |
-| Context menu | Custom dropdown | `` | `@/features/ui/primitives/dropdown-menu` |
-
-**Color Prop Pattern:**
-All Archon Radix primitives support color prop for theme variants:
-```tsx
-Tab
-
-
-```
-
-Available colors: `cyan`, `blue`, `purple`, `green`, `orange`, `pink`
-
-### Complete List of Archon Radix Primitives
-
-**Available in `archon-ui-main/src/features/ui/primitives/`:**
-
-1. ✅ **Tabs** - Tab navigation with color variants (`tabs.tsx`)
-2. ✅ **Select** - Dropdown select (`select.tsx`)
-3. ✅ **Dialog** - Modal dialogs (`dialog.tsx`)
-4. ✅ **Checkbox** - Checkbox with colors (`checkbox.tsx`)
-5. ✅ **Switch** - Toggle switch (`switch.tsx`)
-6. ✅ **Tooltip** - Hover tooltips (`tooltip.tsx`)
-7. ✅ **DropdownMenu** - Context menus (`dropdown-menu.tsx`)
-8. ✅ **ToggleGroup** - Button groups (`toggle-group.tsx`)
-9. ✅ **RadioGroup** - Radio buttons (`radio-group.tsx`)
-10. ✅ **AlertDialog** - Confirmation dialogs (`alert-dialog.tsx`)
-11. ✅ **Button** - Button with variants (`button.tsx`)
-12. ✅ **Card** - GlassCard component (`card.tsx`)
-13. ✅ **Input** - Styled text input (`input.tsx`)
-14. ✅ **Label** - Form labels (`label.tsx`)
-15. ✅ **Toast** - Toast notifications (`toast.tsx`)
-16. ✅ **Pill** - Custom pill component (`pill.tsx`)
-
-**When building layout examples, use these primitives exclusively:**
-- Forms → Select, Checkbox, Switch, RadioGroup, Input, Label
-- Navigation → Tabs (page-level), buttons (styled pill groups)
-- Filters → ToggleGroup
-- Modals → Dialog, AlertDialog
-- Interactive → Tooltip, DropdownMenu
-- Display → Card, Button
-
-### Implementation Summary
-
-**Files to CREATE (10 new files):**
-1. `archon-ui-main/public/components.json` - Component mapping
-2. `archon-ui-main/src/features/style-guide/shared/SimpleTabNavigation.tsx` - 3-tab nav
-3. `archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx` - Nav patterns doc
-4. `archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx` - Projects (horizontal + sidebar)
-5. `archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx` - Settings bento grid
-6. `archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx` - Knowledge grid/table
-7. `archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx` - Info display modal
-8. `archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx` - Foundations container
-9. `archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx` - Layouts container
-10. `archon-ui-main/src/features/style-guide/tabs/ConfiguratorsTab.tsx` - Configurators container
-
-**Files to MOVE (1 file):**
-- `patterns/NavigationPattern.tsx` → `configurators/NavigationConfigurator.tsx`
-
-**Files to MODIFY (2 files):**
-- `archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx` - Main refactor
-- `archon-ui-main/src/features/style-guide/index.ts` - Update exports
-
-**Files to DELETE (3 directories):**
-- `archon-ui-main/src/features/style-guide/patterns/` - All files
-- `archon-ui-main/src/features/style-guide/examples/` - All files
-- `archon-ui-main/src/features/style-guide/shared/PillNavigation.tsx` - If not used elsewhere
-
-**Files to KEEP (13 files - no changes):**
-- All foundations (Typography, Colors, Spacing, Effects)
-- All configurators (GlassCard, Button, Modal, Form, Table, Toggle, Switch, Checkbox)
-- Shared utilities (CodeDisplay, ConfiguratorCard, etc.)
-
-### Future Enhancements (Out of Scope)
-
-- Interactive layout customizer (adjust grid columns, spacing, etc.)
-- Export layout examples as code snippets
-- Component variant preview gallery
-- Search functionality in components.json
-- Layout comparison tool (side-by-side)
-- Responsive breakpoint visualizer
-- Code syntax highlighting library integration for DocumentBrowser