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.
+
+
+
+
+
+ Glass Card Configurator
+
+
+
+ Button Configurator
+
+
+
+ Navigation Configurator
+
+
+
+
+
+
+ Toggle Configurator
+
+
+
+ Switch Configurator
+
+
+
+ Checkbox Configurator
+
+
+
+ {/* 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' && }
+
+
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+ {/* 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...
+
+
+
+
+ )}
+
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
+
+
+
+
+
+ );
+};
+
+// ===== 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 (
+
+ );
+};
+
+// ===== 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 (
+
+ );
+};
+```
+
+## 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 (`