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 (`