@omnifyjp/mcp-design-system 0.2.0

package/dist/index.js

@@ -0,0 +1,1165 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+
+// src/resources/tokens.ts
+var TOKENS_CONTENT = `# @omnifyjp Design Tokens
+
+All tokens are CSS custom properties defined in \`@omnifyjp/ui/styles/theme.css\`.
+Consumers override them via CSS: \`:root { --primary: #dc2626; }\`
+
+**IMPORTANT**: Never wrap \`var(--token)\` in \`hsl()\`. Use \`var(--foreground)\` directly.
+
+---
+
+## Color Tokens
+
+### Core Colors
+| Token | Tailwind Class | Light Default | Usage |
+|-------|---------------|---------------|-------|
+| \`--background\` | \`bg-background\` | \`#ffffff\` | Page background |
+| \`--foreground\` | \`text-foreground\` | \`oklch(0.145 0 0)\` | Default text |
+| \`--card\` | \`bg-card\` | \`#ffffff\` | Card backgrounds |
+| \`--card-foreground\` | \`text-card-foreground\` | \`oklch(0.145 0 0)\` | Card text |
+| \`--popover\` | \`bg-popover\` | \`oklch(1 0 0)\` | Popover/dropdown bg |
+| \`--popover-foreground\` | \`text-popover-foreground\` | \`oklch(0.145 0 0)\` | Popover text |
+| \`--primary\` | \`bg-primary\`, \`text-primary\` | \`#030213\` | Main actions, active states |
+| \`--primary-foreground\` | \`text-primary-foreground\` | \`oklch(1 0 0)\` | Text on primary bg |
+| \`--secondary\` | \`bg-secondary\` | \`oklch(0.95 0.0058 264.53)\` | Secondary actions |
+| \`--secondary-foreground\` | \`text-secondary-foreground\` | \`#030213\` | Text on secondary bg |
+| \`--muted\` | \`bg-muted\` | \`#ececf0\` | Muted backgrounds (replaces bg-gray-50/100) |
+| \`--muted-foreground\` | \`text-muted-foreground\` | \`#717182\` | Subdued text (replaces text-gray-500/600) |
+| \`--accent\` | \`bg-accent\`, \`hover:bg-accent\` | \`#e9ebef\` | Hover/active backgrounds |
+| \`--accent-foreground\` | \`text-accent-foreground\` | \`#030213\` | Text on accent bg |
+| \`--destructive\` | \`bg-destructive\`, \`text-destructive\` | \`#d4183d\` | Delete, errors, danger |
+| \`--destructive-foreground\` | \`text-destructive-foreground\` | \`#ffffff\` | Text on destructive bg |
+| \`--border\` | \`border-border\` | \`rgba(0,0,0,0.1)\` | All borders (replaces border-gray-*) |
+| \`--input\` | \`border-input\` | \`transparent\` | Input borders |
+| \`--input-background\` | \`bg-input-background\` | \`#f3f3f5\` | Input backgrounds |
+| \`--ring\` | \`ring-ring\` | \`oklch(0.708 0 0)\` | Focus rings |
+
+### Semantic Colors
+| Token | Tailwind Class | Light Default | Usage |
+|-------|---------------|---------------|-------|
+| \`--success\` | \`bg-success\`, \`text-success\` | \`#10b981\` | Confirmed, approved, completed |
+| \`--warning\` | \`bg-warning\`, \`text-warning\` | \`#f59e0b\` | Caution, needs attention |
+| \`--info\` | \`bg-info\`, \`text-info\` | \`#3b82f6\` | Informational highlights |
+| \`--error\` | \`bg-error\`, \`text-error\` | \`#ef4444\` | Error states |
+
+Each has a matching \`--*-foreground\` for text on that background.
+
+### Sidebar Colors
+| Token | Tailwind Class | Usage |
+|-------|---------------|-------|
+| \`--sidebar\` | \`bg-sidebar\` | Sidebar background |
+| \`--sidebar-foreground\` | \`text-sidebar-foreground\` | Sidebar text |
+| \`--sidebar-primary\` | \`text-sidebar-primary\` | Active sidebar item |
+| \`--sidebar-accent\` | \`bg-sidebar-accent\` | Sidebar hover state |
+| \`--sidebar-border\` | \`border-sidebar-border\` | Sidebar borders |
+
+### Chart Colors
+\`--chart-1\` through \`--chart-5\` \u2192 \`bg-chart-1\` etc.
+
+---
+
+## Density Tokens
+
+These create spacing utility classes via Tailwind v4 theme mapping.
+
+### Page Layout
+| Token | Tailwind Classes | Default | Usage |
+|-------|-----------------|---------|-------|
+| \`--density-page\` | \`p-page\`, \`px-page\`, \`py-page\`, \`pt-page\`, etc. | \`1rem\` (16px) | Page content padding |
+| \`--density-section\` | \`gap-section\`, \`space-y-section\` | \`1rem\` (16px) | Gap between sections |
+| \`--density-page-title\` | \`text-page-title\` | \`1.25rem\` (20px) | Page title font-size |
+
+### Element Heights
+| Token | Tailwind Classes | Default | Usage |
+|-------|-----------------|---------|-------|
+| \`--density-element-xs\` | \`h-element-xs\` | \`1.5rem\` (24px) | Compact tables, inline actions |
+| \`--density-element-sm\` | \`h-element-sm\` | \`1.75rem\` (28px) | Secondary actions |
+| \`--density-element\` | \`h-element\`, \`min-h-element\` | \`2rem\` (32px) | Standard buttons, inputs |
+| \`--density-element-lg\` | \`h-element-lg\` | \`2.25rem\` (36px) | Primary CTAs |
+| \`--density-element-xl\` | \`h-element-xl\` | \`2.75rem\` (44px) | Login forms, hero sections |
+
+### Container Spacing
+| Token | Tailwind Classes | Default | Usage |
+|-------|-----------------|---------|-------|
+| \`--density-card\` | \`p-card\`, \`px-card\`, \`pt-card\` | \`1rem\` (16px) | Card internal padding |
+| \`--density-dialog\` | \`p-dialog\` | \`1.25rem\` (20px) | Dialog internal padding |
+| \`--density-table-head\` | \`h-table-head\` | \`2rem\` (32px) | Table header row height |
+
+---
+
+## Layout Tokens
+
+| Token | Default | Usage |
+|-------|---------|-------|
+| \`--header-height\` | \`3rem\` (48px) | Header bar height. Tailwind: \`h-header\` |
+| \`--sidebar-width\` | \`16rem\` (256px) | Expanded sidebar |
+| \`--sidebar-collapsed-width\` | \`4rem\` (64px) | Collapsed sidebar |
+| \`--content-sidebar-width\` | \`20rem\` (320px) | PageContainer sidebar |
+| \`--container-max-width\` | \`1280px\` | Content max width |
+
+---
+
+## Border & Radius Tokens
+
+| Token | Default | Usage |
+|-------|---------|-------|
+| \`--radius\` | \`0.375rem\` (6px) | Base radius |
+| \`--radius-sm\` | calc(--radius - 4px) | Small elements |
+| \`--radius-md\` | calc(--radius - 2px) | Medium elements |
+| \`--radius-lg\` | var(--radius) | Large elements |
+| \`--radius-xl\` | calc(--radius + 4px) | Extra large elements |
+
+---
+
+## Shadow Tokens
+
+\`--shadow-sm\`, \`--shadow\`, \`--shadow-md\`, \`--shadow-lg\`, \`--shadow-xl\`, \`--shadow-2xl\`, \`--shadow-inner\`
+
+---
+
+## Transition Tokens
+
+| Token | Default | Usage |
+|-------|---------|-------|
+| \`--transition-fast\` | \`150ms\` | Hover states |
+| \`--transition-base\` | \`200ms\` | General transitions |
+| \`--transition-slow\` | \`300ms\` | Larger animations |
+| \`--transition-slower\` | \`500ms\` | Complex animations |
+
+Easing: \`--ease-in\`, \`--ease-out\`, \`--ease-in-out\`
+
+---
+
+## Z-Index Tokens
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| \`--z-dropdown\` | 1000 | Dropdown menus |
+| \`--z-sticky\` | 1020 | Sticky headers |
+| \`--z-fixed\` | 1030 | Fixed elements |
+| \`--z-modal-backdrop\` | 1040 | Modal backdrops |
+| \`--z-modal\` | 1050 | Modals |
+| \`--z-popover\` | 1060 | Popovers |
+| \`--z-tooltip\` | 1070 | Tooltips |
+
+---
+
+## Shared Types
+
+\`\`\`typescript
+type UIColor = 'primary' | 'destructive' | 'success' | 'warning' | 'info';
+type UIVariant = 'default' | 'secondary' | 'outline' | 'soft' | 'ghost' | 'link';
+type UISize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
+\`\`\`
+
+### UIColor \xD7 CSS Variables
+Each UIColor maps to \`--{color}\` and \`--{color}-foreground\` in theme.css.
+
+### UIVariant rendering
+| Variant | Solid bg? | Border? | Description |
+|---------|-----------|---------|-------------|
+| \`default\` | Yes | No | Filled background |
+| \`secondary\` | Muted | No | Gray background |
+| \`outline\` | No | Yes | Border + colored text |
+| \`soft\` | 10% opacity | No | Light tinted bg |
+| \`ghost\` | No \u2192 hover | No | Transparent, hover shows bg |
+| \`link\` | No | No | Underline on hover |
+
+### UISize \xD7 height tokens
+| Size | Height Token | Pixels |
+|------|-------------|--------|
+| \`xs\` | \`h-element-xs\` | 24px |
+| \`sm\` | \`h-element-sm\` | 28px |
+| \`default\` | \`h-element\` | 32px |
+| \`lg\` | \`h-element-lg\` | 36px |
+| \`xl\` | \`h-element-xl\` | 44px |
+`;
+function registerTokensResource(server2) {
+  server2.resource("design-tokens", "design://tokens", {
+    description: "Complete design token reference for @omnifyjp/ui \u2014 colors, density, layout, shadows, z-index, transitions, and shared types (UIColor, UIVariant, UISize)",
+    mimeType: "text/markdown"
+  }, async () => ({
+    contents: [{
+      uri: "design://tokens",
+      mimeType: "text/markdown",
+      text: TOKENS_CONTENT
+    }]
+  }));
+}
+
+// src/resources/rules.ts
+var RULES_CONTENT = `# @omnifyjp Design Rules
+
+## Cheat Sheet: WRONG \u2192 RIGHT
+
+### Color Replacements
+| WRONG (never use) | RIGHT (use this) | Context |
+|-------------------|------------------|---------|
+| \`bg-white\` | \`bg-background\` or \`bg-card\` | Page/card backgrounds |
+| \`bg-gray-50\`, \`bg-gray-100\` | \`bg-muted\` | Muted/subtle backgrounds |
+| \`hover:bg-gray-50\` | \`hover:bg-accent\` | Hover states |
+| \`text-gray-900\`, \`text-gray-700\` | \`text-foreground\` | Primary text |
+| \`text-gray-600\`, \`text-gray-500\` | \`text-muted-foreground\` | Secondary/subdued text |
+| \`border-gray-200\`, \`border-gray-300\` | \`border-border\` | All borders |
+| \`text-blue-600\` | \`text-primary\` | Primary brand color |
+| \`bg-blue-50 text-blue-600\` | \`bg-primary/10 text-primary\` | Active/selected state |
+| \`bg-blue-50 text-blue-600\` (in sidebar) | \`bg-sidebar-primary/10 text-sidebar-primary\` | Sidebar active state |
+| \`bg-red-50\` | \`bg-destructive/10\` | Destructive soft bg |
+| \`bg-red-500\` | \`bg-destructive\` | Destructive solid bg |
+| \`bg-green-500\` | \`bg-success\` | Success solid bg |
+
+### Density Replacements
+| WRONG (never use) | RIGHT (use this) | Context |
+|-------------------|------------------|---------|
+| \`p-6\`, \`p-8\` | \`p-page\` | Page content padding |
+| \`gap-6\`, \`space-y-6\` | \`gap-section\` or \`space-y-section\` | Section gaps |
+| \`h-9\`, \`h-10\` | \`h-element\` or \`h-element-lg\` | Button/input heights |
+| \`h-14\` | \`h-header\` | Header height |
+| \`text-3xl font-bold\` | \`text-page-title font-semibold\` | Page titles |
+| \`px-6 pt-6\` | \`px-card pt-card\` | Card padding |
+| \`p-6\` (in dialog) | \`p-dialog\` | Dialog padding |
+
+---
+
+## Rules: DO
+
+1. **Use Tailwind classes** \u2014 never inline styles
+2. **Use semantic color tokens only** \u2014 \`bg-primary\`, \`text-foreground\`, \`border-border\`
+3. **Use density tokens** \u2014 \`p-page\`, \`h-element\`, \`gap-section\`
+4. **Every interactive element**: must have hover state + transition + focus ring
+5. **Selection pattern**: \`border-primary bg-primary/5\` + Check icon from lucide-react
+6. **Icons**: \`lucide-react\` only \u2014 never emoji, never other icon libraries
+7. **Badge text**: max 2 characters
+8. **Buttons with icons**: use \`gap-2\`
+9. **Pages inside \`<Layout>\`**: never recreate sidebar/header
+10. **Content wrapper**: \`<div className="p-page">\`
+11. **Page title**: \`text-page-title font-semibold\`
+12. **Gaps between sections**: \`gap-section\` or \`space-y-section\`
+13. **Toast notifications**: \`toast.success()\` / \`toast.error()\` via sonner
+14. **TypeScript strict** \u2014 no \`any\`
+15. **Immutable state updates**
+16. **Import order**: React \u2192 router \u2192 types \u2192 data \u2192 ui \u2192 icons \u2192 sonner
+17. **Drawer content**: wrap in \`<DrawerBody>\`
+
+---
+
+## Rules: DON'T
+
+1. **NEVER** hardcoded Tailwind colors (\`text-blue-600\`, \`bg-red-50\`) for interactive/brand states
+   - **Exception**: multi-color status badges where each status is a DIFFERENT color by design
+2. **NEVER** hardcoded spacing/heights (\`p-6\`, \`h-10\`) \u2014 use density tokens
+3. **NEVER** use \`h-screen\` on page components (Root component handles it)
+4. **NEVER** use inline styles
+5. **NEVER** wrap \`var(--token)\` in \`hsl()\` \u2014 tokens use mixed color formats (oklch, hex, rgba)
+6. **NEVER** use emoji as icons
+7. **NEVER** use \`bg-white\` \u2014 use \`bg-background\` or \`bg-card\`
+
+---
+
+## Sidebar Sizing (CRITICAL)
+
+All sidebar elements MUST follow these exact sizes:
+
+| Element | Size |
+|---------|------|
+| Badges/avatars | \`w-8 h-8\` (32px) |
+| Mini badges | \`w-5 h-5\` (20px) |
+| Menu icons | \`w-4 h-4\` (16px) |
+| Primary text | \`text-sm font-semibold\` |
+| Menu text | \`text-sm\` |
+| Secondary text | \`text-xs text-muted-foreground\` |
+| Menu padding | \`px-3 py-2 gap-2 rounded-md\` |
+| Logo/Header | \`h-header\` (48px) |
+
+**NEVER** in sidebar:
+- \`w-10 h-10\` for badges (too large)
+- \`w-5 h-5\` for menu icons (too large)
+- \`text-base\` or \`text-xl\` for text (too large)
+
+---
+
+## Interaction Patterns
+
+### Hover States
+Every clickable element needs:
+\`\`\`
+hover:bg-accent transition-colors
+\`\`\`
+
+### Focus Ring
+All focusable elements:
+\`\`\`
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+\`\`\`
+
+### Selection (Checkmark Pattern)
+Selected items use:
+\`\`\`tsx
+<div className={cn(
+  "border rounded-lg p-4 cursor-pointer transition-colors",
+  selected
+    ? "border-primary bg-primary/5"
+    : "border-border hover:border-primary/50"
+)}>
+  {selected && <Check className="w-4 h-4 text-primary" />}
+</div>
+\`\`\`
+
+### Avatar Border (Active State)
+\`\`\`
+ring-2 ring-primary ring-offset-2 ring-offset-background
+\`\`\`
+
+---
+
+## Code Quality
+
+### TypeScript
+- Strict mode \u2014 no \`any\` types
+- Use immutable state updates
+- Proper discriminated unions for status types
+
+### Import Order
+\`\`\`typescript
+// 1. React
+import { useState } from 'react';
+// 2. Router
+import { useNavigate } from 'react-router';
+// 3. Types
+import type { Task } from '../types';
+// 4. Data
+import { mockTasks } from '../data';
+// 5. UI components
+import { Button, Card } from '@omnifyjp/ui';
+// 6. Icons
+import { Plus, Trash2 } from 'lucide-react';
+// 7. Toast
+import { toast } from 'sonner';
+\`\`\`
+
+### Naming Conventions
+- Components: PascalCase (\`TaskDetail\`, \`ProjectBoard\`)
+- Files: kebab-case (\`task-detail.tsx\`, \`project-board.tsx\`)
+- Domain components: prefix by domain (\`Workflow*\`, \`Calendar*\`, \`Scope*\`)
+- Badges: \`*Badge\` suffix
+- Grids: \`*Grid\` suffix
+- Diagrams: \`*Diagram\` suffix
+- Compact variants: \`*Mini\` suffix
+`;
+function registerRulesResource(server2) {
+  server2.resource("design-rules", "design://rules", {
+    description: "Design system rules \u2014 WRONG\u2192RIGHT cheat sheet, DOs/DON'Ts, sidebar sizing, interaction patterns, code quality standards",
+    mimeType: "text/markdown"
+  }, async () => ({
+    contents: [{
+      uri: "design://rules",
+      mimeType: "text/markdown",
+      text: RULES_CONTENT
+    }]
+  }));
+}
+
+// src/resources/components.ts
+var COMPONENTS_CONTENT = `# @omnifyjp/ui Component Inventory
+
+## Package: \`@omnifyjp/ui\`
+
+Import: \`import { Button, Card, ... } from '@omnifyjp/ui';\`
+Utility: \`import { cn } from '@omnifyjp/ui';\`
+Types: \`import type { UIColor, UIVariant, UISize } from '@omnifyjp/ui';\`
+
+---
+
+## Primitives (53)
+
+### Data Entry
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`Input\` | Text input | \`size?: UISize\` |
+| \`PasswordInput\` | Password with show/hide toggle | \`size?: UISize\` |
+| \`Textarea\` | Multi-line text | \u2014 |
+| \`Checkbox\` | Checkbox | \`checked, onCheckedChange\` |
+| \`RadioGroup\` + \`RadioGroupItem\` | Radio buttons | \`value, onValueChange\` |
+| \`Select\` + \`SelectTrigger\` + \`SelectContent\` + \`SelectItem\` | Dropdown select | \`value, onValueChange\`. **Never use empty string as value** |
+| \`Switch\` | Toggle switch | \`checked, onCheckedChange\` |
+| \`Slider\` | Range slider | \`value, onValueChange\` |
+| \`DatePicker\` | Date picker | \`value, onChange, locale?\` |
+| \`TimePicker\` | Time picker | \`value, onChange\` |
+| \`InputOTP\` | One-time password input | \`maxLength, value, onChange\` |
+| \`Combobox\` | Searchable select | \`options, value, onValueChange\` |
+| \`ColorPicker\` | Color picker | \`value, onChange\` |
+| \`TagInput\` | Tag/chip input | \`tags, onTagsChange\` |
+| \`Rating\` | Star rating | \`value, onChange\` |
+| \`FileUpload\` | File upload area | \`onFilesSelected\` |
+| \`Form\` + \`FormField\` + \`FormItem\` + \`FormLabel\` + \`FormControl\` + \`FormMessage\` | Form with react-hook-form | \`form (useForm)\` |
+| \`Label\` | Form label | \`htmlFor\` |
+
+### Data Display
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`Table\` + \`TableHeader\` + \`TableBody\` + \`TableRow\` + \`TableHead\` + \`TableCell\` | Data table | \u2014 |
+| \`Card\` + \`CardHeader\` + \`CardTitle\` + \`CardDescription\` + \`CardContent\` + \`CardFooter\` | Card container | \u2014 |
+| \`Badge\` | Status/label badge | \`variant?: UIVariant, color?: UIColor\` |
+| \`Avatar\` + \`AvatarImage\` + \`AvatarFallback\` | User avatar | \`src, alt\` |
+| \`Calendar\` | Calendar grid | \`selected, onSelect, locale?\` |
+| \`Progress\` | Progress bar | \`value (0-100)\` |
+| \`Skeleton\` | Loading placeholder | \`className\` |
+| \`Separator\` | Horizontal/vertical line | \`orientation?\` |
+| \`HoverCard\` + \`HoverCardTrigger\` + \`HoverCardContent\` | Hover info card | \u2014 |
+| \`Chart\` | Recharts wrapper | See chart docs |
+| \`AspectRatio\` | Fixed aspect ratio container | \`ratio\` |
+| \`Carousel\` | Swipeable carousel | \`opts\` |
+
+### Actions
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`Button\` | Button | \`variant?: UIVariant, color?: UIColor, size?: UISize\` |
+| \`Toggle\` | Toggle button | \`pressed, onPressedChange\` |
+| \`ToggleGroup\` | Toggle button group | \`type, value, onValueChange\` |
+
+### Navigation
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`Tabs\` + \`TabsList\` + \`TabsTrigger\` + \`TabsContent\` | Tab navigation | \`value, onValueChange\` |
+| \`Breadcrumb\` + \`BreadcrumbItem\` + \`BreadcrumbLink\` + \`BreadcrumbSeparator\` | Breadcrumb trail | \u2014 |
+| \`NavigationMenu\` | Top navigation menu | \u2014 |
+| \`Menubar\` | Menu bar | \u2014 |
+| \`Pagination\` | Page navigation | \u2014 |
+| \`Sidebar\` + \`SidebarProvider\` + \`SidebarTrigger\` + \`SidebarContent\` + \`SidebarGroup\` + \`SidebarMenu\` + \`SidebarMenuItem\` + \`SidebarMenuButton\` | Sidebar navigation | \u2014 |
+| \`Command\` + \`CommandInput\` + \`CommandList\` + \`CommandItem\` | Command palette (cmdk) | \u2014 |
+
+### Overlays
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`Dialog\` + \`DialogTrigger\` + \`DialogContent\` + \`DialogHeader\` + \`DialogTitle\` + \`DialogDescription\` + \`DialogFooter\` | Modal dialog | \`open, onOpenChange\` |
+| \`Sheet\` + \`SheetTrigger\` + \`SheetContent\` | Side panel | \`open, onOpenChange, side\` |
+| \`Drawer\` + \`DrawerTrigger\` + \`DrawerContent\` + \`DrawerBody\` | Bottom drawer (vaul) | \`open, onOpenChange\`. **Wrap content in DrawerBody** |
+| \`AlertDialog\` | Confirmation dialog | \`open, onOpenChange\` |
+| \`Popover\` + \`PopoverTrigger\` + \`PopoverContent\` | Popover | \u2014 |
+| \`DropdownMenu\` + \`DropdownMenuTrigger\` + \`DropdownMenuContent\` + \`DropdownMenuItem\` | Dropdown menu | \u2014 |
+| \`ContextMenu\` | Right-click menu | \u2014 |
+| \`Tooltip\` + \`TooltipTrigger\` + \`TooltipContent\` | Tooltip | Wrap in \`TooltipProvider\` |
+
+### Feedback
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`Alert\` + \`AlertTitle\` + \`AlertDescription\` | Alert banner | \`variant?: UIVariant, color?: UIColor\` |
+| \`Sonner\` / \`toast\` | Toast notifications | \`toast.success(msg)\`, \`toast.error(msg)\` |
+
+### Layout
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`Accordion\` + \`AccordionItem\` + \`AccordionTrigger\` + \`AccordionContent\` | Collapsible sections | \`type, value\` |
+| \`Collapsible\` | Single collapsible | \`open, onOpenChange\` |
+| \`Resizable\` + \`ResizablePanel\` + \`ResizablePanelGroup\` + \`ResizableHandle\` | Resizable panels | \`direction\` |
+| \`ScrollArea\` | Custom scrollbar area | \`className\` |
+
+---
+
+## Domain Components (14)
+
+All domain components are **locale-agnostic**: they accept a \`labels\` prop with English defaults. Do NOT use \`useTranslation\` inside domain components.
+
+### Calendar Domain
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`CalendarMini\` | Compact calendar widget | \`selected, onSelect\` |
+| \`CalendarEventChip\` | Event indicator chip | \`event, color\` |
+| \`CalendarEventSheet\` | Event detail side panel | \`event, open, onOpenChange\` |
+| \`CalendarToolbar\` | Calendar navigation toolbar | \`date, view, onDateChange, onViewChange\` |
+| \`CalendarCategoryBadge\` | Category color badge | \`category\` |
+
+### Workflow Domain
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`WorkflowStepper\` | Step-by-step progress indicator | \`steps, currentStep\` |
+| \`WorkflowDiagram\` | Visual workflow flow diagram | \`nodes, edges\` |
+| \`WorkflowStatusBadge\` | Workflow status indicator | \`status\` |
+| \`WorkflowCategoryBadge\` | Workflow category badge | \`category\` |
+| \`StageTypeBadge\` | Stage type indicator | \`type\` |
+
+### RBAC Domain
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`PermissionGrid\` | Permission matrix grid | \`modules, actions, permissions, onChange\`. Uses \`module:action\` ID format |
+| \`ScopeTree\` | Hierarchical scope tree | \`scopes, selectedScope, onSelectScope\` |
+| \`ScopeTypeBadge\` | Scope type indicator | \`type\` |
+
+### Utility
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| \`SlugInput\` | URL slug input with auto-generation | \`value, onChange, source\` |
+
+---
+
+## Shared Types API
+
+### Button
+\`\`\`tsx
+<Button
+  variant="default" | "secondary" | "outline" | "soft" | "ghost" | "link"
+  color="primary" | "destructive" | "success" | "warning" | "info"
+  size="xs" | "sm" | "default" | "lg" | "xl"
+>
+  Label
+</Button>
+\`\`\`
+
+### Badge
+\`\`\`tsx
+<Badge
+  variant="default" | "secondary" | "outline" | "soft"
+  color="primary" | "destructive" | "success" | "warning" | "info"
+>
+  Label
+</Badge>
+\`\`\`
+
+### Alert
+\`\`\`tsx
+<Alert
+  variant="default" | "soft" | "outline"
+  color="primary" | "destructive" | "success" | "warning" | "info"
+>
+  <AlertTitle>Title</AlertTitle>
+  <AlertDescription>Description</AlertDescription>
+</Alert>
+\`\`\`
+
+---
+
+## Utility: \`cn()\`
+
+Merge Tailwind classes with conflict resolution:
+\`\`\`tsx
+import { cn } from '@omnifyjp/ui';
+
+<div className={cn("p-4 bg-card", isActive && "bg-primary/10", className)} />
+\`\`\`
+
+---
+
+## Package: \`@omnifyjp/shell\`
+
+| Component | Description |
+|-----------|-------------|
+| \`AppShell\` | Root layout wrapper (ThemeProvider \u2192 I18nextProvider \u2192 OrganizationProvider) |
+| \`Sidebar\` | Main navigation sidebar |
+| \`Header\` | Top header bar |
+| \`StandardPageContainer\` | Standard page layout with optional sidebar |
+| \`SplitPageContainer\` | Split-pane page layout |
+| \`FullWidthPageContainer\` | Full-width page layout |
+
+i18n: \`initOmnifyI18n()\` to add service namespaces.
+
+---
+
+## Package: \`@omnifyjp/editor\`
+
+| Component | Description |
+|-----------|-------------|
+| \`RichTextEditor\` | Tiptap-based rich text editor |
+| \`BlockEditor\` | BlockNote-based block editor |
+
+CSS import required: \`import '@omnifyjp/editor/styles/rich-text-editor.css'\`
+`;
+function registerComponentsResource(server2) {
+  server2.resource("design-components", "design://components", {
+    description: "Complete component inventory \u2014 53 primitives, 14 domain components, shell, editor, with props and usage examples",
+    mimeType: "text/markdown"
+  }, async () => ({
+    contents: [{
+      uri: "design://components",
+      mimeType: "text/markdown",
+      text: COMPONENTS_CONTENT
+    }]
+  }));
+}
+
+// src/resources/layout.ts
+var LAYOUT_CONTENT = `# @omnifyjp Layout Patterns
+
+## Page Layout
+
+Every page component follows this structure:
+
+\`\`\`tsx
+import { Layout } from './Layout';
+
+export function MyPage() {
+  return (
+    <Layout>
+      <div className="p-page">
+        <h1 className="text-page-title font-semibold">Page Title</h1>
+        <div className="space-y-section">
+          {/* Page content */}
+        </div>
+      </div>
+    </Layout>
+  );
+}
+\`\`\`
+
+**Rules:**
+- Always wrap in \`<Layout>\` \u2014 never recreate sidebar/header
+- Page content padding: \`p-page\` (NOT \`p-6\` or \`p-8\`)
+- Page title: \`text-page-title font-semibold\` (NOT \`text-3xl font-bold\`)
+- Section gaps: \`gap-section\` or \`space-y-section\` (NOT \`gap-6\` or \`space-y-6\`)
+- **NO \`h-screen\`** on page components \u2014 the root layout handles full height
+
+---
+
+## Card Pattern
+
+\`\`\`tsx
+<Card>
+  <CardHeader className="px-card pt-card">
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent className="px-card pb-card">
+    {/* Content */}
+  </CardContent>
+</Card>
+\`\`\`
+
+**Rules:**
+- Card padding: \`px-card\`, \`pt-card\`, \`pb-card\` (NOT \`px-6\`, \`pt-6\`)
+- Card background: inherits \`bg-card\` automatically
+
+---
+
+## Dialog Pattern
+
+\`\`\`tsx
+<Dialog open={open} onOpenChange={onOpenChange}>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Dialog Title</DialogTitle>
+      <DialogDescription>Optional description</DialogDescription>
+    </DialogHeader>
+    <div className="p-dialog space-y-4">
+      {/* Dialog body */}
+    </div>
+    <DialogFooter>
+      <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+      <Button>Submit</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+\`\`\`
+
+**Rules:**
+- Dialog body padding: \`p-dialog\` (NOT \`p-6\`)
+- Props: \`{ open: boolean; onOpenChange: (open: boolean) => void }\`
+
+---
+
+## Table Pattern
+
+\`\`\`tsx
+<Table>
+  <TableHeader>
+    <TableRow className="h-table-head">
+      <TableHead>Column</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow className="hover:bg-accent transition-colors">
+      <TableCell>Data</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+\`\`\`
+
+**Rules:**
+- Header row: \`h-table-head\` (NOT \`h-10\`)
+- Row hover: \`hover:bg-accent transition-colors\`
+
+---
+
+## Selection State Pattern
+
+For selectable items (cards, list items):
+
+\`\`\`tsx
+<div className={cn(
+  "border rounded-lg p-4 cursor-pointer transition-colors",
+  selected
+    ? "border-primary bg-primary/5"
+    : "border-border hover:border-primary/50"
+)}>
+  <div className="flex items-center justify-between">
+    <span>{label}</span>
+    {selected && <Check className="w-4 h-4 text-primary" />}
+  </div>
+</div>
+\`\`\`
+
+**Rules:**
+- Selected: \`border-primary bg-primary/5\` + Check icon
+- Unselected hover: \`hover:border-primary/50\`
+- Always include transition: \`transition-colors\`
+
+---
+
+## Sidebar Layout
+
+### Sidebar Structure
+\`\`\`
+Sidebar (w-64 / 256px)
+\u251C\u2500\u2500 Header (h-header / 48px)
+\u2502   \u251C\u2500\u2500 Logo/Avatar (w-8 h-8)
+\u2502   \u2514\u2500\u2500 Title (text-sm font-semibold)
+\u251C\u2500\u2500 Menu Groups
+\u2502   \u251C\u2500\u2500 Group Label (text-xs text-muted-foreground uppercase)
+\u2502   \u2514\u2500\u2500 Menu Items (px-3 py-2 gap-2 rounded-md)
+\u2502       \u251C\u2500\u2500 Icon (w-4 h-4)
+\u2502       \u2514\u2500\u2500 Text (text-sm)
+\u2514\u2500\u2500 Footer
+    \u2514\u2500\u2500 User Info
+\`\`\`
+
+### Sidebar Token Usage
+| Element | Classes |
+|---------|---------|
+| Background | \`bg-sidebar\` |
+| Text | \`text-sidebar-foreground\` |
+| Active item bg | \`bg-sidebar-primary/10\` |
+| Active item text | \`text-sidebar-primary\` |
+| Hover state | \`hover:bg-sidebar-accent\` |
+| Border | \`border-sidebar-border\` |
+| Badge/avatar | \`w-8 h-8\` (32px) |
+| Mini badge | \`w-5 h-5\` (20px) |
+| Menu icon | \`w-4 h-4\` (16px) |
+
+---
+
+## Header Layout
+
+\`\`\`tsx
+<header className="h-header border-b border-border flex items-center px-page">
+  <div className="flex items-center gap-2">
+    {/* Header content */}
+  </div>
+</header>
+\`\`\`
+
+**Rules:**
+- Height: \`h-header\` (48px, NOT \`h-14\` or \`h-16\`)
+- Padding: \`px-page\`
+
+---
+
+## Drawer Pattern
+
+\`\`\`tsx
+<Drawer open={open} onOpenChange={onOpenChange}>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Title</DrawerTitle>
+    </DrawerHeader>
+    <DrawerBody>
+      {/* Content MUST be wrapped in DrawerBody */}
+    </DrawerBody>
+  </DrawerContent>
+</Drawer>
+\`\`\`
+
+**Rules:**
+- Content MUST be wrapped in \`<DrawerBody>\`
+
+---
+
+## Avatar Border Pattern (Active User)
+
+\`\`\`tsx
+<Avatar className={cn(
+  "w-8 h-8",
+  isActive && "ring-2 ring-primary ring-offset-2 ring-offset-background"
+)}>
+  <AvatarImage src={user.avatar} />
+  <AvatarFallback>{user.initials}</AvatarFallback>
+</Avatar>
+\`\`\`
+
+---
+
+## Responsive Considerations
+
+- Sidebar collapses at mobile breakpoint (use \`useIsMobile()\` hook from \`@omnifyjp/ui\`)
+- Page padding \`p-page\` adjusts via density tokens
+- Element heights via \`h-element-*\` tokens scale consistently
+`;
+function registerLayoutResource(server2) {
+  server2.resource("design-layout", "design://layout", {
+    description: "Layout patterns \u2014 page, card, dialog, table, sidebar, header, drawer, selection state, avatar borders",
+    mimeType: "text/markdown"
+  }, async () => ({
+    contents: [{
+      uri: "design://layout",
+      mimeType: "text/markdown",
+      text: LAYOUT_CONTENT
+    }]
+  }));
+}
+
+// src/tools/validate.ts
+import { z } from "zod";
+var VIOLATION_RULES = [
+  // Color violations
+  { pattern: /\bbg-white\b/, message: "Hardcoded `bg-white`", suggestion: "Use `bg-background` or `bg-card`", category: "color" },
+  { pattern: /\bbg-gray-50\b/, message: "Hardcoded `bg-gray-50`", suggestion: "Use `bg-muted`", category: "color" },
+  { pattern: /\bbg-gray-100\b/, message: "Hardcoded `bg-gray-100`", suggestion: "Use `bg-muted`", category: "color" },
+  { pattern: /\btext-gray-900\b/, message: "Hardcoded `text-gray-900`", suggestion: "Use `text-foreground`", category: "color" },
+  { pattern: /\btext-gray-700\b/, message: "Hardcoded `text-gray-700`", suggestion: "Use `text-foreground`", category: "color" },
+  { pattern: /\btext-gray-600\b/, message: "Hardcoded `text-gray-600`", suggestion: "Use `text-muted-foreground`", category: "color" },
+  { pattern: /\btext-gray-500\b/, message: "Hardcoded `text-gray-500`", suggestion: "Use `text-muted-foreground`", category: "color" },
+  { pattern: /\btext-gray-400\b/, message: "Hardcoded `text-gray-400`", suggestion: "Use `text-muted-foreground`", category: "color" },
+  { pattern: /\bborder-gray-\d+\b/, message: "Hardcoded `border-gray-*`", suggestion: "Use `border-border`", category: "color" },
+  { pattern: /\btext-blue-\d+\b/, message: "Hardcoded `text-blue-*`", suggestion: "Use `text-primary` or `text-info`", category: "color" },
+  { pattern: /\bbg-blue-\d+\b/, message: "Hardcoded `bg-blue-*`", suggestion: "Use `bg-primary/10` or `bg-info/10`", category: "color" },
+  { pattern: /\bbg-red-\d+\b/, message: "Hardcoded `bg-red-*`", suggestion: "Use `bg-destructive` or `bg-destructive/10`", category: "color" },
+  { pattern: /\btext-red-\d+\b/, message: "Hardcoded `text-red-*`", suggestion: "Use `text-destructive`", category: "color" },
+  { pattern: /\bbg-green-\d+\b/, message: "Hardcoded `bg-green-*`", suggestion: "Use `bg-success` or `bg-success/10`", category: "color" },
+  { pattern: /\btext-green-\d+\b/, message: "Hardcoded `text-green-*`", suggestion: "Use `text-success`", category: "color" },
+  { pattern: /\bbg-yellow-\d+\b/, message: "Hardcoded `bg-yellow-*`", suggestion: "Use `bg-warning` or `bg-warning/10`", category: "color" },
+  { pattern: /\btext-yellow-\d+\b/, message: "Hardcoded `text-yellow-*`", suggestion: "Use `text-warning`", category: "color" },
+  { pattern: /\bbg-orange-\d+\b/, message: "Hardcoded `bg-orange-*`", suggestion: "Use `bg-warning` or `bg-warning/10`", category: "color" },
+  { pattern: /\bhover:bg-gray-\d+\b/, message: "Hardcoded `hover:bg-gray-*`", suggestion: "Use `hover:bg-accent`", category: "color" },
+  { pattern: /\btext-black\b/, message: "Hardcoded `text-black`", suggestion: "Use `text-foreground`", category: "color" },
+  { pattern: /\bbg-black\b/, message: "Hardcoded `bg-black`", suggestion: "Use `bg-foreground` or `bg-primary`", category: "color" },
+  // Density violations
+  { pattern: /\bp-6\b/, message: "Hardcoded `p-6`", suggestion: "Use `p-page` for page padding or `p-dialog` for dialog", category: "density" },
+  { pattern: /\bp-8\b/, message: "Hardcoded `p-8`", suggestion: "Use `p-page` for page padding", category: "density" },
+  { pattern: /\bpx-6\b/, message: "Hardcoded `px-6`", suggestion: "Use `px-page` or `px-card`", category: "density" },
+  { pattern: /\bpy-6\b/, message: "Hardcoded `py-6`", suggestion: "Use `py-page` or `py-card`", category: "density" },
+  { pattern: /\bgap-6\b/, message: "Hardcoded `gap-6`", suggestion: "Use `gap-section`", category: "density" },
+  { pattern: /\bspace-y-6\b/, message: "Hardcoded `space-y-6`", suggestion: "Use `space-y-section`", category: "density" },
+  { pattern: /\bh-9\b/, message: "Hardcoded `h-9`", suggestion: "Use `h-element` (32px)", category: "density" },
+  { pattern: /\bh-10\b/, message: "Hardcoded `h-10`", suggestion: "Use `h-element-lg` (36px)", category: "density" },
+  { pattern: /\bh-14\b/, message: "Hardcoded `h-14`", suggestion: "Use `h-header` (48px)", category: "density" },
+  // Layout violations
+  { pattern: /\bh-screen\b/, message: "`h-screen` on page component", suggestion: "Remove \u2014 root layout handles full height", category: "layout" },
+  // Pattern violations
+  { pattern: /\btext-3xl\s+font-bold\b/, message: "`text-3xl font-bold` for page title", suggestion: "Use `text-page-title font-semibold`", category: "pattern" },
+  { pattern: /\btext-2xl\s+font-bold\b/, message: "`text-2xl font-bold` for page title", suggestion: "Use `text-page-title font-semibold`", category: "pattern" },
+  { pattern: /\bhsl\(var\(--/, message: "`hsl(var(--*))` wrapping", suggestion: "Use `var(--token)` directly \u2014 tokens use mixed color formats", category: "pattern" },
+  { pattern: /style=\{/, message: "Inline style object", suggestion: "Use Tailwind classes instead of inline styles", category: "pattern" }
+];
+var TOKEN_DB = [
+  // Colors
+  { token: "--background", tailwind: "bg-background", category: "color", description: "Page background" },
+  { token: "--foreground", tailwind: "text-foreground", category: "color", description: "Default text color" },
+  { token: "--card", tailwind: "bg-card", category: "color", description: "Card background" },
+  { token: "--primary", tailwind: "bg-primary / text-primary", category: "color", description: "Main brand, active states" },
+  { token: "--secondary", tailwind: "bg-secondary", category: "color", description: "Secondary backgrounds" },
+  { token: "--muted", tailwind: "bg-muted", category: "color", description: "Muted/subtle backgrounds (replaces bg-gray-50/100)" },
+  { token: "--muted-foreground", tailwind: "text-muted-foreground", category: "color", description: "Subdued text (replaces text-gray-500/600)" },
+  { token: "--accent", tailwind: "bg-accent / hover:bg-accent", category: "color", description: "Hover backgrounds (replaces hover:bg-gray-50)" },
+  { token: "--destructive", tailwind: "bg-destructive / text-destructive", category: "color", description: "Delete, errors, danger" },
+  { token: "--border", tailwind: "border-border", category: "color", description: "All borders (replaces border-gray-200/300)" },
+  { token: "--success", tailwind: "bg-success / text-success", category: "color", description: "Success states" },
+  { token: "--warning", tailwind: "bg-warning / text-warning", category: "color", description: "Warning states" },
+  { token: "--info", tailwind: "bg-info / text-info", category: "color", description: "Info states" },
+  { token: "--sidebar", tailwind: "bg-sidebar", category: "color", description: "Sidebar background" },
+  { token: "--sidebar-primary", tailwind: "text-sidebar-primary", category: "color", description: "Sidebar active item" },
+  // Density
+  { token: "--density-page", tailwind: "p-page", category: "density", description: "Page content padding (16px)" },
+  { token: "--density-section", tailwind: "gap-section / space-y-section", category: "density", description: "Section gap (16px)" },
+  { token: "--density-page-title", tailwind: "text-page-title", category: "density", description: "Page title size (20px)" },
+  { token: "--density-element", tailwind: "h-element", category: "density", description: "Standard element height (32px)" },
+  { token: "--density-element-sm", tailwind: "h-element-sm", category: "density", description: "Small element height (28px)" },
+  { token: "--density-element-lg", tailwind: "h-element-lg", category: "density", description: "Large element height (36px)" },
+  { token: "--density-element-xl", tailwind: "h-element-xl", category: "density", description: "Extra large element height (44px)" },
+  { token: "--density-card", tailwind: "p-card / px-card / pt-card", category: "density", description: "Card internal padding (16px)" },
+  { token: "--density-dialog", tailwind: "p-dialog", category: "density", description: "Dialog internal padding (20px)" },
+  { token: "--density-table-head", tailwind: "h-table-head", category: "density", description: "Table header row height (32px)" },
+  // Layout
+  { token: "--header-height", tailwind: "h-header", category: "layout", description: "Header height (48px)" },
+  { token: "--sidebar-width", tailwind: "w-64", category: "layout", description: "Sidebar width (256px)" },
+  { token: "--radius", tailwind: "rounded-lg", category: "border", description: "Default border radius (6px)" }
+];
+var COMPONENT_REGISTRY = {
+  button: {
+    name: "Button",
+    package: "@omnifyjp/ui",
+    category: "action",
+    description: "Standard button with variant \xD7 color \xD7 size API",
+    props: 'variant?: UIVariant ("default"|"secondary"|"outline"|"soft"|"ghost"|"link"), color?: UIColor ("primary"|"destructive"|"success"|"warning"|"info"), size?: UISize ("xs"|"sm"|"default"|"lg"|"xl"), asChild?: boolean, disabled?: boolean',
+    example: '<Button variant="soft" color="success" size="sm"><Check className="w-4 h-4" /> Approve</Button>'
+  },
+  badge: {
+    name: "Badge",
+    package: "@omnifyjp/ui",
+    category: "display",
+    description: "Status/label badge. Max 2 characters for icon badges.",
+    props: 'variant?: "default"|"secondary"|"outline"|"soft", color?: UIColor',
+    example: '<Badge variant="soft" color="warning">Pending</Badge>'
+  },
+  alert: {
+    name: "Alert",
+    package: "@omnifyjp/ui",
+    category: "feedback",
+    description: "Alert banner with icon support",
+    props: 'variant?: "default"|"soft"|"outline", color?: UIColor',
+    example: '<Alert variant="soft" color="info"><AlertTitle>Tip</AlertTitle><AlertDescription>Use keyboard shortcuts</AlertDescription></Alert>'
+  },
+  input: {
+    name: "Input",
+    package: "@omnifyjp/ui",
+    category: "form",
+    description: "Text input field",
+    props: "size?: UISize, type?: string, placeholder?: string, disabled?: boolean",
+    example: '<Input size="default" placeholder="Enter text..." />'
+  },
+  "password-input": {
+    name: "PasswordInput",
+    package: "@omnifyjp/ui",
+    category: "form",
+    description: "Password input with show/hide toggle",
+    props: "size?: UISize, placeholder?: string, disabled?: boolean",
+    example: '<PasswordInput size="xl" placeholder="Enter password" />'
+  },
+  select: {
+    name: "Select",
+    package: "@omnifyjp/ui",
+    category: "form",
+    description: 'Dropdown select. NEVER use empty string as SelectItem value \u2014 Radix crashes. Use value="none" and map to null.',
+    props: "value?: string, onValueChange?: (value: string) => void",
+    example: '<Select value={value} onValueChange={setValue}><SelectTrigger><SelectValue placeholder="Choose..." /></SelectTrigger><SelectContent><SelectItem value="a">Option A</SelectItem></SelectContent></Select>'
+  },
+  dialog: {
+    name: "Dialog",
+    package: "@omnifyjp/ui",
+    category: "overlay",
+    description: "Modal dialog. Use p-dialog for body padding.",
+    props: "open?: boolean, onOpenChange?: (open: boolean) => void",
+    example: '<Dialog open={open} onOpenChange={setOpen}><DialogContent><DialogHeader><DialogTitle>Title</DialogTitle></DialogHeader><div className="p-dialog">Content</div><DialogFooter><Button>Save</Button></DialogFooter></DialogContent></Dialog>'
+  },
+  card: {
+    name: "Card",
+    package: "@omnifyjp/ui",
+    category: "display",
+    description: "Card container. Use px-card/pt-card for padding.",
+    props: "className?: string",
+    example: '<Card><CardHeader className="px-card pt-card"><CardTitle>Title</CardTitle></CardHeader><CardContent className="px-card pb-card">Content</CardContent></Card>'
+  },
+  table: {
+    name: "Table",
+    package: "@omnifyjp/ui",
+    category: "display",
+    description: "Data table. Use h-table-head for header row height.",
+    props: "className?: string",
+    example: '<Table><TableHeader><TableRow className="h-table-head"><TableHead>Name</TableHead></TableRow></TableHeader><TableBody><TableRow>...</TableRow></TableBody></Table>'
+  },
+  drawer: {
+    name: "Drawer",
+    package: "@omnifyjp/ui",
+    category: "overlay",
+    description: "Bottom drawer (vaul). Content MUST be wrapped in DrawerBody.",
+    props: "open?: boolean, onOpenChange?: (open: boolean) => void",
+    example: "<Drawer open={open} onOpenChange={setOpen}><DrawerContent><DrawerHeader><DrawerTitle>Title</DrawerTitle></DrawerHeader><DrawerBody>Content here</DrawerBody></DrawerContent></Drawer>"
+  },
+  tabs: {
+    name: "Tabs",
+    package: "@omnifyjp/ui",
+    category: "navigation",
+    description: "Tab navigation",
+    props: "value?: string, onValueChange?: (value: string) => void, defaultValue?: string",
+    example: '<Tabs value={tab} onValueChange={setTab}><TabsList><TabsTrigger value="a">Tab A</TabsTrigger></TabsList><TabsContent value="a">Content A</TabsContent></Tabs>'
+  },
+  "permission-grid": {
+    name: "PermissionGrid",
+    package: "@omnifyjp/ui",
+    category: "domain",
+    description: "Permission matrix grid. Uses module:action ID format via buildPermissionId().",
+    props: "modules: Module[], actions: Action[], permissions: Record<string, boolean>, onChange: (id: string, checked: boolean) => void, labels?: { ... }",
+    example: "<PermissionGrid modules={modules} actions={actions} permissions={perms} onChange={handleChange} />"
+  },
+  "scope-tree": {
+    name: "ScopeTree",
+    package: "@omnifyjp/ui",
+    category: "domain",
+    description: "Hierarchical scope tree. Note: ScopeTreeSelectedScope.type is string (generic), cast to ScopeType in consumers.",
+    props: "scopes: ScopeNode[], selectedScope?: SelectedScope, onSelectScope?: (scope: SelectedScope) => void, labels?: { ... }",
+    example: "<ScopeTree scopes={scopes} selectedScope={selected} onSelectScope={setSelected} />"
+  },
+  "rich-text-editor": {
+    name: "RichTextEditor",
+    package: "@omnifyjp/editor",
+    category: "editor",
+    description: 'Tiptap-based rich text editor. Requires CSS: import "@omnifyjp/editor/styles/rich-text-editor.css"',
+    props: "content?: string, onChange?: (html: string) => void, placeholder?: string",
+    example: 'import { RichTextEditor } from "@omnifyjp/editor";\nimport "@omnifyjp/editor/styles/rich-text-editor.css";\n\n<RichTextEditor content={html} onChange={setHtml} />'
+  }
+};
+function registerValidateTools(server2) {
+  server2.tool(
+    "validate_component",
+    "Validate React component code against @omnifyjp design system rules. Checks for hardcoded colors, wrong spacing tokens, layout anti-patterns, and other violations.",
+    { code: z.string().describe("React component source code to validate") },
+    async ({ code }) => {
+      const violations = [];
+      const lines = code.split("\n");
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        for (const rule of VIOLATION_RULES) {
+          if (rule.pattern.test(line)) {
+            violations.push({
+              line: i + 1,
+              message: rule.message,
+              suggestion: rule.suggestion,
+              category: rule.category
+            });
+          }
+        }
+      }
+      if (violations.length === 0) {
+        return {
+          content: [{
+            type: "text",
+            text: "No design system violations found. The code follows @omnifyjp conventions."
+          }]
+        };
+      }
+      const grouped = {
+        color: violations.filter((v) => v.category === "color"),
+        density: violations.filter((v) => v.category === "density"),
+        layout: violations.filter((v) => v.category === "layout"),
+        pattern: violations.filter((v) => v.category === "pattern")
+      };
+      let output = `Found ${violations.length} design system violation(s):
+
+`;
+      for (const [category, items] of Object.entries(grouped)) {
+        if (items.length === 0) continue;
+        output += `### ${category.charAt(0).toUpperCase() + category.slice(1)} Issues
+`;
+        for (const v of items) {
+          output += `- **Line ${v.line}**: ${v.message} \u2192 ${v.suggestion}
+`;
+        }
+        output += "\n";
+      }
+      return {
+        content: [{ type: "text", text: output }]
+      };
+    }
+  );
+  server2.tool(
+    "suggest_token",
+    'Suggest the correct @omnifyjp design token for a given need. Describe what you need (e.g., "page background", "button height", "section spacing") and get the right token.',
+    { need: z.string().describe('Description of what design token is needed (e.g., "subdued text color", "page padding", "button height")') },
+    async ({ need }) => {
+      const query = need.toLowerCase();
+      const matches = TOKEN_DB.filter(
+        (t) => t.description.toLowerCase().includes(query) || t.category.includes(query) || t.token.includes(query) || t.tailwind.toLowerCase().includes(query)
+      );
+      const keywordMatches = [];
+      if (matches.length === 0) {
+        const keywords = query.split(/\s+/);
+        for (const token of TOKEN_DB) {
+          const searchText = `${token.description} ${token.token} ${token.tailwind} ${token.category}`.toLowerCase();
+          if (keywords.some((k) => searchText.includes(k))) {
+            keywordMatches.push(token);
+          }
+        }
+      }
+      const results = matches.length > 0 ? matches : keywordMatches;
+      if (results.length === 0) {
+        return {
+          content: [{
+            type: "text",
+            text: `No matching token found for "${need}". Check design://tokens resource for the full token reference.`
+          }]
+        };
+      }
+      let output = `Recommended token(s) for "${need}":
+
+`;
+      for (const t of results) {
+        output += `- **${t.tailwind}** (CSS: \`${t.token}\`) \u2014 ${t.description}
+`;
+      }
+      return {
+        content: [{ type: "text", text: output }]
+      };
+    }
+  );
+  server2.tool(
+    "get_component_api",
+    "Get the API reference for a specific @omnifyjp component \u2014 props, variants, sizes, and usage example.",
+    { component: z.string().describe('Component name (e.g., "Button", "Badge", "Dialog", "PermissionGrid")') },
+    async ({ component }) => {
+      const key = component.toLowerCase().replace(/\s+/g, "-");
+      const info = COMPONENT_REGISTRY[key];
+      if (!info) {
+        const keys = Object.keys(COMPONENT_REGISTRY);
+        const fuzzy = keys.filter((k) => k.includes(key) || key.includes(k));
+        if (fuzzy.length > 0) {
+          const match = COMPONENT_REGISTRY[fuzzy[0]];
+          return {
+            content: [{
+              type: "text",
+              text: formatComponentInfo(match)
+            }]
+          };
+        }
+        return {
+          content: [{
+            type: "text",
+            text: `Component "${component}" not found. Available: ${keys.map((k) => COMPONENT_REGISTRY[k].name).join(", ")}. Check design://components for the full inventory.`
+          }]
+        };
+      }
+      return {
+        content: [{
+          type: "text",
+          text: formatComponentInfo(info)
+        }]
+      };
+    }
+  );
+}
+function formatComponentInfo(info) {
+  return `## ${info.name}
+
+**Package**: \`${info.package}\`
+**Category**: ${info.category}
+
+${info.description}
+
+### Props
+${info.props}
+
+### Example
+\`\`\`tsx
+${info.example}
+\`\`\``;
+}
+
+// src/index.ts
+var server = new McpServer({
+  name: "@omnifyjp/mcp-design-system",
+  version: "0.1.0"
+}, {
+  capabilities: {
+    resources: {},
+    tools: {}
+  }
+});
+registerTokensResource(server);
+registerRulesResource(server);
+registerComponentsResource(server);
+registerLayoutResource(server);
+registerValidateTools(server);
+var transport = new StdioServerTransport();
+await server.connect(transport);
+//# sourceMappingURL=index.js.map