@omnifyjp/ui-mcp 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +133 -0
  2. package/dist/index.js +2497 -0
  3. package/dist/index.js.map +1 -0
  4. package/dist/setup.js +68 -0
  5. package/dist/setup.js.map +1 -0
  6. package/package.json +41 -0
package/dist/index.js ADDED
@@ -0,0 +1,2497 @@
1
+ #!/usr/bin/env node
2
+
3
+ // src/index.ts
4
+ import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
5
+ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
6
+
7
+ // src/resources/tokens.ts
8
+ var TOKENS_CONTENT = `# @omnifyjp Design Tokens
9
+
10
+ All tokens are CSS custom properties defined in \`@omnifyjp/ui-components/styles/theme.css\`.
11
+ Consumers override them via CSS: \`:root { --primary: #dc2626; }\`
12
+
13
+ **IMPORTANT**: Never wrap \`var(--token)\` in \`hsl()\`. Use \`var(--foreground)\` directly.
14
+
15
+ ---
16
+
17
+ ## Color Tokens
18
+
19
+ ### Core Colors
20
+ | Token | Tailwind Class | Light Default | Usage |
21
+ |-------|---------------|---------------|-------|
22
+ | \`--background\` | \`bg-background\` | \`#ffffff\` | Page background |
23
+ | \`--foreground\` | \`text-foreground\` | \`oklch(0.145 0 0)\` | Default text |
24
+ | \`--card\` | \`bg-card\` | \`#ffffff\` | Card backgrounds |
25
+ | \`--card-foreground\` | \`text-card-foreground\` | \`oklch(0.145 0 0)\` | Card text |
26
+ | \`--popover\` | \`bg-popover\` | \`oklch(1 0 0)\` | Popover/dropdown bg |
27
+ | \`--popover-foreground\` | \`text-popover-foreground\` | \`oklch(0.145 0 0)\` | Popover text |
28
+ | \`--primary\` | \`bg-primary\`, \`text-primary\` | \`#030213\` | Main actions, active states |
29
+ | \`--primary-foreground\` | \`text-primary-foreground\` | \`oklch(1 0 0)\` | Text on primary bg |
30
+ | \`--secondary\` | \`bg-secondary\` | \`oklch(0.95 0.0058 264.53)\` | Secondary actions |
31
+ | \`--secondary-foreground\` | \`text-secondary-foreground\` | \`#030213\` | Text on secondary bg |
32
+ | \`--muted\` | \`bg-muted\` | \`#ececf0\` | Muted backgrounds (replaces bg-gray-50/100) |
33
+ | \`--muted-foreground\` | \`text-muted-foreground\` | \`#717182\` | Subdued text (replaces text-gray-500/600) |
34
+ | \`--accent\` | \`bg-accent\`, \`hover:bg-accent\` | \`#e9ebef\` | Hover/active backgrounds |
35
+ | \`--accent-foreground\` | \`text-accent-foreground\` | \`#030213\` | Text on accent bg |
36
+ | \`--destructive\` | \`bg-destructive\`, \`text-destructive\` | \`#d4183d\` | Delete, errors, danger |
37
+ | \`--destructive-foreground\` | \`text-destructive-foreground\` | \`#ffffff\` | Text on destructive bg |
38
+ | \`--border\` | \`border-border\` | \`rgba(0,0,0,0.1)\` | All borders (replaces border-gray-*) |
39
+ | \`--input\` | \`border-input\` | \`transparent\` | Input borders |
40
+ | \`--input-background\` | \`bg-input-background\` | \`#f3f3f5\` | Input backgrounds |
41
+ | \`--ring\` | \`ring-ring\` | \`oklch(0.708 0 0)\` | Focus rings |
42
+
43
+ ### Semantic Colors
44
+ | Token | Tailwind Class | Light Default | Usage |
45
+ |-------|---------------|---------------|-------|
46
+ | \`--success\` | \`bg-success\`, \`text-success\` | \`#10b981\` | Confirmed, approved, completed |
47
+ | \`--warning\` | \`bg-warning\`, \`text-warning\` | \`#f59e0b\` | Caution, needs attention |
48
+ | \`--info\` | \`bg-info\`, \`text-info\` | \`#3b82f6\` | Informational highlights |
49
+ | \`--error\` | \`bg-error\`, \`text-error\` | \`#ef4444\` | Error states |
50
+
51
+ Each has a matching \`--*-foreground\` for text on that background.
52
+
53
+ ### Sidebar Colors
54
+ | Token | Tailwind Class | Usage |
55
+ |-------|---------------|-------|
56
+ | \`--sidebar\` | \`bg-sidebar\` | Sidebar background |
57
+ | \`--sidebar-foreground\` | \`text-sidebar-foreground\` | Sidebar text |
58
+ | \`--sidebar-primary\` | \`text-sidebar-primary\` | Active sidebar item |
59
+ | \`--sidebar-accent\` | \`bg-sidebar-accent\` | Sidebar hover state |
60
+ | \`--sidebar-border\` | \`border-sidebar-border\` | Sidebar borders |
61
+
62
+ ### Chart Colors
63
+ \`--chart-1\` through \`--chart-5\` \u2192 \`bg-chart-1\` etc.
64
+
65
+ ---
66
+
67
+ ## Density Tokens
68
+
69
+ These create spacing utility classes via Tailwind v4 theme mapping.
70
+
71
+ ### Page Layout
72
+ | Token | Tailwind Classes | Default | Usage |
73
+ |-------|-----------------|---------|-------|
74
+ | \`--density-page\` | \`p-page\`, \`px-page\`, \`py-page\`, \`pt-page\`, etc. | \`1rem\` (16px) | Page content padding |
75
+ | \`--density-section\` | \`gap-section\`, \`space-y-section\` | \`1rem\` (16px) | Gap between sections |
76
+ | \`--density-page-title\` | \`text-page-title\` | \`1.25rem\` (20px) | Page title font-size |
77
+
78
+ ### Element Heights
79
+ | Token | Tailwind Classes | Default | Usage |
80
+ |-------|-----------------|---------|-------|
81
+ | \`--density-element-xs\` | \`h-element-xs\` | \`1.5rem\` (24px) | Compact tables, inline actions |
82
+ | \`--density-element-sm\` | \`h-element-sm\` | \`1.75rem\` (28px) | Secondary actions |
83
+ | \`--density-element\` | \`h-element\`, \`min-h-element\` | \`2rem\` (32px) | Standard buttons, inputs |
84
+ | \`--density-element-lg\` | \`h-element-lg\` | \`2.25rem\` (36px) | Primary CTAs |
85
+ | \`--density-element-xl\` | \`h-element-xl\` | \`2.75rem\` (44px) | Login forms, hero sections |
86
+
87
+ ### Container Spacing
88
+ | Token | Tailwind Classes | Default | Usage |
89
+ |-------|-----------------|---------|-------|
90
+ | \`--density-card\` | \`p-card\`, \`px-card\`, \`pt-card\` | \`1rem\` (16px) | Card internal padding |
91
+ | \`--density-dialog\` | \`p-dialog\` | \`1.25rem\` (20px) | Dialog internal padding |
92
+ | \`--density-table-head\` | \`h-table-head\` | \`2rem\` (32px) | Table header row height |
93
+
94
+ ---
95
+
96
+ ## Layout Tokens
97
+
98
+ | Token | Default | Usage |
99
+ |-------|---------|-------|
100
+ | \`--header-height\` | \`3rem\` (48px) | Header bar height. Tailwind: \`h-header\` |
101
+ | \`--sidebar-width\` | \`16rem\` (256px) | Expanded sidebar |
102
+ | \`--sidebar-collapsed-width\` | \`4rem\` (64px) | Collapsed sidebar |
103
+ | \`--content-sidebar-width\` | \`20rem\` (320px) | PageContainer sidebar |
104
+ | \`--container-max-width\` | \`1280px\` | Content max width |
105
+
106
+ ---
107
+
108
+ ## Border & Radius Tokens
109
+
110
+ | Token | Default | Usage |
111
+ |-------|---------|-------|
112
+ | \`--radius\` | \`0.375rem\` (6px) | Base radius |
113
+ | \`--radius-sm\` | calc(--radius - 4px) | Small elements |
114
+ | \`--radius-md\` | calc(--radius - 2px) | Medium elements |
115
+ | \`--radius-lg\` | var(--radius) | Large elements |
116
+ | \`--radius-xl\` | calc(--radius + 4px) | Extra large elements |
117
+
118
+ ---
119
+
120
+ ## Shadow Tokens
121
+
122
+ \`--shadow-sm\`, \`--shadow\`, \`--shadow-md\`, \`--shadow-lg\`, \`--shadow-xl\`, \`--shadow-2xl\`, \`--shadow-inner\`
123
+
124
+ ---
125
+
126
+ ## Transition Tokens
127
+
128
+ | Token | Default | Usage |
129
+ |-------|---------|-------|
130
+ | \`--transition-fast\` | \`150ms\` | Hover states |
131
+ | \`--transition-base\` | \`200ms\` | General transitions |
132
+ | \`--transition-slow\` | \`300ms\` | Larger animations |
133
+ | \`--transition-slower\` | \`500ms\` | Complex animations |
134
+
135
+ Easing: \`--ease-in\`, \`--ease-out\`, \`--ease-in-out\`
136
+
137
+ ---
138
+
139
+ ## Z-Index Tokens
140
+
141
+ | Token | Value | Usage |
142
+ |-------|-------|-------|
143
+ | \`--z-dropdown\` | 1000 | Dropdown menus |
144
+ | \`--z-sticky\` | 1020 | Sticky headers |
145
+ | \`--z-fixed\` | 1030 | Fixed elements |
146
+ | \`--z-modal-backdrop\` | 1040 | Modal backdrops |
147
+ | \`--z-modal\` | 1050 | Modals |
148
+ | \`--z-popover\` | 1060 | Popovers |
149
+ | \`--z-tooltip\` | 1070 | Tooltips |
150
+
151
+ ---
152
+
153
+ ## Shared Types
154
+
155
+ \`\`\`typescript
156
+ type UIColor = 'primary' | 'destructive' | 'success' | 'warning' | 'info';
157
+ type UIVariant = 'default' | 'secondary' | 'outline' | 'soft' | 'ghost' | 'link';
158
+ type UISize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
159
+ \`\`\`
160
+
161
+ ### UIColor \xD7 CSS Variables
162
+ Each UIColor maps to \`--{color}\` and \`--{color}-foreground\` in theme.css.
163
+
164
+ ### UIVariant rendering
165
+ | Variant | Solid bg? | Border? | Description |
166
+ |---------|-----------|---------|-------------|
167
+ | \`default\` | Yes | No | Filled background |
168
+ | \`secondary\` | Muted | No | Gray background |
169
+ | \`outline\` | No | Yes | Border + colored text |
170
+ | \`soft\` | 10% opacity | No | Light tinted bg |
171
+ | \`ghost\` | No \u2192 hover | No | Transparent, hover shows bg |
172
+ | \`link\` | No | No | Underline on hover |
173
+
174
+ ### UISize \xD7 height tokens
175
+ | Size | Height Token | Pixels |
176
+ |------|-------------|--------|
177
+ | \`xs\` | \`h-element-xs\` | 24px |
178
+ | \`sm\` | \`h-element-sm\` | 28px |
179
+ | \`default\` | \`h-element\` | 32px |
180
+ | \`lg\` | \`h-element-lg\` | 36px |
181
+ | \`xl\` | \`h-element-xl\` | 44px |
182
+ `;
183
+ function registerTokensResource(server2) {
184
+ server2.resource("design-tokens", "design://tokens", {
185
+ description: "Complete design token reference for @omnifyjp/ui \u2014 colors, density, layout, shadows, z-index, transitions, and shared types (UIColor, UIVariant, UISize)",
186
+ mimeType: "text/markdown"
187
+ }, async () => ({
188
+ contents: [{
189
+ uri: "design://tokens",
190
+ mimeType: "text/markdown",
191
+ text: TOKENS_CONTENT
192
+ }]
193
+ }));
194
+ }
195
+
196
+ // src/resources/rules.ts
197
+ var RULES_CONTENT = `# @omnifyjp Design Rules
198
+
199
+ ## Cheat Sheet: WRONG \u2192 RIGHT
200
+
201
+ ### Color Replacements
202
+ | WRONG (never use) | RIGHT (use this) | Context |
203
+ |-------------------|------------------|---------|
204
+ | \`bg-white\` | \`bg-background\` or \`bg-card\` | Page/card backgrounds |
205
+ | \`bg-gray-50\`, \`bg-gray-100\` | \`bg-muted\` | Muted/subtle backgrounds |
206
+ | \`hover:bg-gray-50\` | \`hover:bg-accent\` | Hover states |
207
+ | \`text-gray-900\`, \`text-gray-700\` | \`text-foreground\` | Primary text |
208
+ | \`text-gray-600\`, \`text-gray-500\` | \`text-muted-foreground\` | Secondary/subdued text |
209
+ | \`border-gray-200\`, \`border-gray-300\` | \`border-border\` | All borders |
210
+ | \`text-blue-600\` | \`text-primary\` | Primary brand color |
211
+ | \`bg-blue-50 text-blue-600\` | \`bg-primary/10 text-primary\` | Active/selected state |
212
+ | \`bg-blue-50 text-blue-600\` (in sidebar) | \`bg-sidebar-primary/10 text-sidebar-primary\` | Sidebar active state |
213
+ | \`bg-red-50\` | \`bg-destructive/10\` | Destructive soft bg |
214
+ | \`bg-red-500\` | \`bg-destructive\` | Destructive solid bg |
215
+ | \`bg-green-500\` | \`bg-success\` | Success solid bg |
216
+
217
+ ### Density Replacements
218
+ | WRONG (never use) | RIGHT (use this) | Context |
219
+ |-------------------|------------------|---------|
220
+ | \`p-6\`, \`p-8\` | \`p-page\` | Page content padding |
221
+ | \`gap-6\`, \`space-y-6\` | \`gap-section\` or \`space-y-section\` | Section gaps |
222
+ | \`h-9\`, \`h-10\` | \`h-element\` or \`h-element-lg\` | Button/input heights |
223
+ | \`h-14\` | \`h-header\` | Header height |
224
+ | \`text-3xl font-bold\` | \`text-page-title font-semibold\` | Page titles |
225
+ | \`px-6 pt-6\` | \`px-card pt-card\` | Card padding |
226
+ | \`p-6\` (in dialog) | \`p-dialog\` | Dialog padding |
227
+
228
+ ---
229
+
230
+ ## Rules: DO
231
+
232
+ 1. **Use Tailwind classes** \u2014 never inline styles
233
+ 2. **Use semantic color tokens only** \u2014 \`bg-primary\`, \`text-foreground\`, \`border-border\`
234
+ 3. **Use density tokens** \u2014 \`p-page\`, \`h-element\`, \`gap-section\`
235
+ 4. **Every interactive element**: must have hover state + transition + focus ring
236
+ 5. **Selection pattern**: \`border-primary bg-primary/5\` + Check icon from lucide-react
237
+ 6. **Icons**: \`lucide-react\` only \u2014 never emoji, never other icon libraries
238
+ 7. **Badge text**: max 2 characters
239
+ 8. **Buttons with icons**: use \`gap-2\`
240
+ 9. **Pages inside \`<Layout>\`**: never recreate sidebar/header
241
+ 10. **Content wrapper**: \`<div className="p-page">\`
242
+ 11. **Page title**: \`text-page-title font-semibold\`
243
+ 12. **Gaps between sections**: \`gap-section\` or \`space-y-section\`
244
+ 13. **Toast notifications**: \`toast.success()\` / \`toast.error()\` via sonner
245
+ 14. **TypeScript strict** \u2014 no \`any\`
246
+ 15. **Immutable state updates**
247
+ 16. **Import order**: React \u2192 router \u2192 types \u2192 data \u2192 ui \u2192 icons \u2192 sonner
248
+ 17. **Drawer content**: wrap in \`<DrawerBody>\`
249
+
250
+ ---
251
+
252
+ ## Rules: DON'T
253
+
254
+ 1. **NEVER** hardcoded Tailwind colors (\`text-blue-600\`, \`bg-red-50\`) for interactive/brand states
255
+ - **Exception**: multi-color status badges where each status is a DIFFERENT color by design
256
+ 2. **NEVER** hardcoded spacing/heights (\`p-6\`, \`h-10\`) \u2014 use density tokens
257
+ 3. **NEVER** use \`h-screen\` on page components (Root component handles it)
258
+ 4. **NEVER** use inline styles
259
+ 5. **NEVER** wrap \`var(--token)\` in \`hsl()\` \u2014 tokens use mixed color formats (oklch, hex, rgba)
260
+ 6. **NEVER** use emoji as icons
261
+ 7. **NEVER** use \`bg-white\` \u2014 use \`bg-background\` or \`bg-card\`
262
+
263
+ ---
264
+
265
+ ## Sidebar Sizing (CRITICAL)
266
+
267
+ All sidebar elements MUST follow these exact sizes:
268
+
269
+ | Element | Size |
270
+ |---------|------|
271
+ | Badges/avatars | \`w-8 h-8\` (32px) |
272
+ | Mini badges | \`w-5 h-5\` (20px) |
273
+ | Menu icons | \`w-4 h-4\` (16px) |
274
+ | Primary text | \`text-sm font-semibold\` |
275
+ | Menu text | \`text-sm\` |
276
+ | Secondary text | \`text-xs text-muted-foreground\` |
277
+ | Menu padding | \`px-3 py-2 gap-2 rounded-md\` |
278
+ | Logo/Header | \`h-header\` (48px) |
279
+
280
+ **NEVER** in sidebar:
281
+ - \`w-10 h-10\` for badges (too large)
282
+ - \`w-5 h-5\` for menu icons (too large)
283
+ - \`text-base\` or \`text-xl\` for text (too large)
284
+
285
+ ---
286
+
287
+ ## Interaction Patterns
288
+
289
+ ### Hover States
290
+ Every clickable element needs:
291
+ \`\`\`
292
+ hover:bg-accent transition-colors
293
+ \`\`\`
294
+
295
+ ### Focus Ring
296
+ All focusable elements:
297
+ \`\`\`
298
+ focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
299
+ \`\`\`
300
+
301
+ ### Selection (Checkmark Pattern)
302
+ Selected items use:
303
+ \`\`\`tsx
304
+ <div className={cn(
305
+ "border rounded-lg p-4 cursor-pointer transition-colors",
306
+ selected
307
+ ? "border-primary bg-primary/5"
308
+ : "border-border hover:border-primary/50"
309
+ )}>
310
+ {selected && <Check className="w-4 h-4 text-primary" />}
311
+ </div>
312
+ \`\`\`
313
+
314
+ ### Avatar Border (Active State)
315
+ \`\`\`
316
+ ring-2 ring-primary ring-offset-2 ring-offset-background
317
+ \`\`\`
318
+
319
+ ---
320
+
321
+ ## Code Quality
322
+
323
+ ### TypeScript
324
+ - Strict mode \u2014 no \`any\` types
325
+ - Use immutable state updates
326
+ - Proper discriminated unions for status types
327
+
328
+ ### Import Order
329
+ \`\`\`typescript
330
+ // 1. React
331
+ import { useState } from 'react';
332
+ // 2. Router
333
+ import { useNavigate } from 'react-router';
334
+ // 3. Types
335
+ import type { Task } from '../types';
336
+ // 4. Data
337
+ import { mockTasks } from '../data';
338
+ // 5. UI components
339
+ import { Button, Card } from '@omnifyjp/ui';
340
+ // 6. Icons
341
+ import { Plus, Trash2 } from 'lucide-react';
342
+ // 7. Toast
343
+ import { toast } from 'sonner';
344
+ \`\`\`
345
+
346
+ ### Naming Conventions
347
+ - Components: PascalCase (\`TaskDetail\`, \`ProjectBoard\`)
348
+ - Files: kebab-case (\`task-detail.tsx\`, \`project-board.tsx\`)
349
+ - Domain components: prefix by domain (\`Workflow*\`, \`Calendar*\`, \`Scope*\`)
350
+ - Badges: \`*Badge\` suffix
351
+ - Grids: \`*Grid\` suffix
352
+ - Diagrams: \`*Diagram\` suffix
353
+ - Compact variants: \`*Mini\` suffix
354
+ `;
355
+ function registerRulesResource(server2) {
356
+ server2.resource("design-rules", "design://rules", {
357
+ description: "Design system rules \u2014 WRONG\u2192RIGHT cheat sheet, DOs/DON'Ts, sidebar sizing, interaction patterns, code quality standards",
358
+ mimeType: "text/markdown"
359
+ }, async () => ({
360
+ contents: [{
361
+ uri: "design://rules",
362
+ mimeType: "text/markdown",
363
+ text: RULES_CONTENT
364
+ }]
365
+ }));
366
+ }
367
+
368
+ // src/resources/components.ts
369
+ var COMPONENTS_CONTENT = `# @omnifyjp/ui-components Component Inventory
370
+
371
+ ## Package: \`@omnifyjp/ui-components\`
372
+
373
+ Import: \`import { Button, Card, ... } from '@omnifyjp/ui-components';\`
374
+ Utility: \`import { cn } from '@omnifyjp/ui-components';\`
375
+ Types: \`import type { UIColor, UIVariant, UISize } from '@omnifyjp/ui-components';\`
376
+
377
+ ---
378
+
379
+ ## Primitives (53)
380
+
381
+ ### Data Entry
382
+ | Component | Description | Key Props |
383
+ |-----------|-------------|-----------|
384
+ | \`Input\` | Text input | \`size?: UISize\` |
385
+ | \`PasswordInput\` | Password with show/hide toggle | \`size?: UISize\` |
386
+ | \`Textarea\` | Multi-line text | \u2014 |
387
+ | \`Checkbox\` | Checkbox | \`checked, onCheckedChange\` |
388
+ | \`RadioGroup\` + \`RadioGroupItem\` | Radio buttons | \`value, onValueChange\` |
389
+ | \`Select\` + \`SelectTrigger\` + \`SelectContent\` + \`SelectItem\` | Dropdown select | \`value, onValueChange\`. **Never use empty string as value** |
390
+ | \`Switch\` | Toggle switch | \`checked, onCheckedChange\` |
391
+ | \`Slider\` | Range slider | \`value, onValueChange\` |
392
+ | \`DatePicker\` | Date picker | \`value, onChange, locale?\` |
393
+ | \`TimePicker\` | Time picker | \`value, onChange\` |
394
+ | \`InputOTP\` | One-time password input | \`maxLength, value, onChange\` |
395
+ | \`Combobox\` | Searchable select | \`options, value, onValueChange\` |
396
+ | \`ColorPicker\` | Color picker | \`value, onChange\` |
397
+ | \`TagInput\` | Tag/chip input | \`tags, onTagsChange\` |
398
+ | \`Rating\` | Star rating | \`value, onChange\` |
399
+ | \`FileUpload\` | File upload area | \`onFilesSelected\` |
400
+ | \`Form\` + \`FormField\` + \`FormItem\` + \`FormLabel\` + \`FormControl\` + \`FormMessage\` | Form with react-hook-form | \`form (useForm)\` |
401
+ | \`Label\` | Form label | \`htmlFor\` |
402
+
403
+ ### Data Display
404
+ | Component | Description | Key Props |
405
+ |-----------|-------------|-----------|
406
+ | \`Table\` + \`TableHeader\` + \`TableBody\` + \`TableRow\` + \`TableHead\` + \`TableCell\` | Data table | \u2014 |
407
+ | \`Card\` + \`CardHeader\` + \`CardTitle\` + \`CardDescription\` + \`CardContent\` + \`CardFooter\` | Card container | \u2014 |
408
+ | \`Badge\` | Status/label badge | \`variant?: UIVariant, color?: UIColor\` |
409
+ | \`Avatar\` + \`AvatarImage\` + \`AvatarFallback\` | User avatar | \`src, alt\` |
410
+ | \`Calendar\` | Calendar grid | \`selected, onSelect, locale?\` |
411
+ | \`Progress\` | Progress bar | \`value (0-100)\` |
412
+ | \`Skeleton\` | Loading placeholder | \`className\` |
413
+ | \`Separator\` | Horizontal/vertical line | \`orientation?\` |
414
+ | \`HoverCard\` + \`HoverCardTrigger\` + \`HoverCardContent\` | Hover info card | \u2014 |
415
+ | \`Chart\` | Recharts wrapper | See chart docs |
416
+ | \`AspectRatio\` | Fixed aspect ratio container | \`ratio\` |
417
+ | \`Carousel\` | Swipeable carousel | \`opts\` |
418
+
419
+ ### Actions
420
+ | Component | Description | Key Props |
421
+ |-----------|-------------|-----------|
422
+ | \`Button\` | Button | \`variant?: UIVariant, color?: UIColor, size?: UISize\` |
423
+ | \`Toggle\` | Toggle button | \`pressed, onPressedChange\` |
424
+ | \`ToggleGroup\` | Toggle button group | \`type, value, onValueChange\` |
425
+
426
+ ### Navigation
427
+ | Component | Description | Key Props |
428
+ |-----------|-------------|-----------|
429
+ | \`Tabs\` + \`TabsList\` + \`TabsTrigger\` + \`TabsContent\` | Tab navigation | \`value, onValueChange\` |
430
+ | \`Breadcrumb\` + \`BreadcrumbItem\` + \`BreadcrumbLink\` + \`BreadcrumbSeparator\` | Breadcrumb trail | \u2014 |
431
+ | \`NavigationMenu\` | Top navigation menu | \u2014 |
432
+ | \`Menubar\` | Menu bar | \u2014 |
433
+ | \`Pagination\` | Page navigation | \u2014 |
434
+ | \`Sidebar\` + \`SidebarProvider\` + \`SidebarTrigger\` + \`SidebarContent\` + \`SidebarGroup\` + \`SidebarMenu\` + \`SidebarMenuItem\` + \`SidebarMenuButton\` | Sidebar navigation | \u2014 |
435
+ | \`Command\` + \`CommandInput\` + \`CommandList\` + \`CommandItem\` | Command palette (cmdk) | \u2014 |
436
+
437
+ ### Overlays
438
+ | Component | Description | Key Props |
439
+ |-----------|-------------|-----------|
440
+ | \`Dialog\` + \`DialogTrigger\` + \`DialogContent\` + \`DialogHeader\` + \`DialogTitle\` + \`DialogDescription\` + \`DialogFooter\` | Modal dialog | \`open, onOpenChange\` |
441
+ | \`Sheet\` + \`SheetTrigger\` + \`SheetContent\` | Side panel | \`open, onOpenChange, side\` |
442
+ | \`Drawer\` + \`DrawerTrigger\` + \`DrawerContent\` + \`DrawerBody\` | Bottom drawer (vaul) | \`open, onOpenChange\`. **Wrap content in DrawerBody** |
443
+ | \`AlertDialog\` | Confirmation dialog | \`open, onOpenChange\` |
444
+ | \`Popover\` + \`PopoverTrigger\` + \`PopoverContent\` | Popover | \u2014 |
445
+ | \`DropdownMenu\` + \`DropdownMenuTrigger\` + \`DropdownMenuContent\` + \`DropdownMenuItem\` | Dropdown menu | \u2014 |
446
+ | \`ContextMenu\` | Right-click menu | \u2014 |
447
+ | \`Tooltip\` + \`TooltipTrigger\` + \`TooltipContent\` | Tooltip | Wrap in \`TooltipProvider\` |
448
+
449
+ ### Feedback
450
+ | Component | Description | Key Props |
451
+ |-----------|-------------|-----------|
452
+ | \`Alert\` + \`AlertTitle\` + \`AlertDescription\` | Alert banner | \`variant?: UIVariant, color?: UIColor\` |
453
+ | \`Sonner\` / \`toast\` | Toast notifications | \`toast.success(msg)\`, \`toast.error(msg)\` |
454
+
455
+ ### Layout
456
+ | Component | Description | Key Props |
457
+ |-----------|-------------|-----------|
458
+ | \`Accordion\` + \`AccordionItem\` + \`AccordionTrigger\` + \`AccordionContent\` | Collapsible sections | \`type, value\` |
459
+ | \`Collapsible\` | Single collapsible | \`open, onOpenChange\` |
460
+ | \`Resizable\` + \`ResizablePanel\` + \`ResizablePanelGroup\` + \`ResizableHandle\` | Resizable panels | \`direction\` |
461
+ | \`ScrollArea\` | Custom scrollbar area | \`className\` |
462
+
463
+ ---
464
+
465
+ ## Domain Components (14)
466
+
467
+ All domain components are **locale-agnostic**: they accept a \`labels\` prop with English defaults. Do NOT use \`useTranslation\` inside domain components.
468
+
469
+ ### Calendar Domain
470
+ | Component | Description | Key Props |
471
+ |-----------|-------------|-----------|
472
+ | \`CalendarMini\` | Compact calendar widget | \`selected, onSelect\` |
473
+ | \`CalendarEventChip\` | Event indicator chip | \`event, color\` |
474
+ | \`CalendarEventSheet\` | Event detail side panel | \`event, open, onOpenChange\` |
475
+ | \`CalendarToolbar\` | Calendar navigation toolbar | \`date, view, onDateChange, onViewChange\` |
476
+ | \`CalendarCategoryBadge\` | Category color badge | \`category\` |
477
+
478
+ ### Workflow Domain
479
+ | Component | Description | Key Props |
480
+ |-----------|-------------|-----------|
481
+ | \`WorkflowStepper\` | Step-by-step progress indicator | \`steps, currentStep\` |
482
+ | \`WorkflowDiagram\` | Visual workflow flow diagram | \`nodes, edges\` |
483
+ | \`WorkflowStatusBadge\` | Workflow status indicator | \`status\` |
484
+ | \`WorkflowCategoryBadge\` | Workflow category badge | \`category\` |
485
+ | \`StageTypeBadge\` | Stage type indicator | \`type\` |
486
+
487
+ ### RBAC Domain
488
+ | Component | Description | Key Props |
489
+ |-----------|-------------|-----------|
490
+ | \`PermissionGrid\` | Permission matrix grid | \`modules, actions, permissions, onChange\`. Uses \`module:action\` ID format |
491
+ | \`ScopeTree\` | Hierarchical scope tree | \`scopes, selectedScope, onSelectScope\` |
492
+ | \`ScopeTypeBadge\` | Scope type indicator | \`type\` |
493
+
494
+ ### Utility
495
+ | Component | Description | Key Props |
496
+ |-----------|-------------|-----------|
497
+ | \`SlugInput\` | URL slug input with auto-generation | \`value, onChange, source\` |
498
+
499
+ ---
500
+
501
+ ## Shared Types API
502
+
503
+ ### Button
504
+ \`\`\`tsx
505
+ <Button
506
+ variant="default" | "secondary" | "outline" | "soft" | "ghost" | "link"
507
+ color="primary" | "destructive" | "success" | "warning" | "info"
508
+ size="xs" | "sm" | "default" | "lg" | "xl"
509
+ >
510
+ Label
511
+ </Button>
512
+ \`\`\`
513
+
514
+ ### Badge
515
+ \`\`\`tsx
516
+ <Badge
517
+ variant="default" | "secondary" | "outline" | "soft"
518
+ color="primary" | "destructive" | "success" | "warning" | "info"
519
+ >
520
+ Label
521
+ </Badge>
522
+ \`\`\`
523
+
524
+ ### Alert
525
+ \`\`\`tsx
526
+ <Alert
527
+ variant="default" | "soft" | "outline"
528
+ color="primary" | "destructive" | "success" | "warning" | "info"
529
+ >
530
+ <AlertTitle>Title</AlertTitle>
531
+ <AlertDescription>Description</AlertDescription>
532
+ </Alert>
533
+ \`\`\`
534
+
535
+ ---
536
+
537
+ ## Utility: \`cn()\`
538
+
539
+ Merge Tailwind classes with conflict resolution:
540
+ \`\`\`tsx
541
+ import { cn } from '@omnifyjp/ui-components';
542
+
543
+ <div className={cn("p-4 bg-card", isActive && "bg-primary/10", className)} />
544
+ \`\`\`
545
+
546
+ ---
547
+
548
+ ## Package: \`@omnifyjp/ui\`
549
+
550
+ | Component | Description |
551
+ |-----------|-------------|
552
+ | \`AppShell\` | Root layout wrapper (ThemeProvider \u2192 I18nextProvider \u2192 OrganizationProvider) |
553
+ | \`Sidebar\` | Main navigation sidebar |
554
+ | \`Header\` | Top header bar |
555
+ | \`StandardPageContainer\` | Standard page layout with optional sidebar |
556
+ | \`SplitPageContainer\` | Split-pane page layout |
557
+ | \`FullWidthPageContainer\` | Full-width page layout |
558
+
559
+ i18n: \`initOmnifyI18n()\` to add service namespaces.
560
+
561
+ ---
562
+
563
+ ## Package: \`@omnifyjp/editor\`
564
+
565
+ | Component | Description |
566
+ |-----------|-------------|
567
+ | \`RichTextEditor\` | Tiptap-based rich text editor |
568
+ | \`BlockEditor\` | BlockNote-based block editor |
569
+
570
+ CSS import required: \`import '@omnifyjp/editor/styles/rich-text-editor.css'\`
571
+ `;
572
+ function registerComponentsResource(server2) {
573
+ server2.resource("design-components", "design://components", {
574
+ description: "Complete component inventory \u2014 53 primitives, 14 domain components, shell, editor, with props and usage examples",
575
+ mimeType: "text/markdown"
576
+ }, async () => ({
577
+ contents: [{
578
+ uri: "design://components",
579
+ mimeType: "text/markdown",
580
+ text: COMPONENTS_CONTENT
581
+ }]
582
+ }));
583
+ }
584
+
585
+ // src/resources/layout.ts
586
+ var LAYOUT_CONTENT = `# @omnifyjp Layout Patterns
587
+
588
+ ## Page Layout
589
+
590
+ Every page component follows this structure:
591
+
592
+ \`\`\`tsx
593
+ import { Layout } from './Layout';
594
+
595
+ export function MyPage() {
596
+ return (
597
+ <Layout>
598
+ <div className="p-page">
599
+ <h1 className="text-page-title font-semibold">Page Title</h1>
600
+ <div className="space-y-section">
601
+ {/* Page content */}
602
+ </div>
603
+ </div>
604
+ </Layout>
605
+ );
606
+ }
607
+ \`\`\`
608
+
609
+ **Rules:**
610
+ - Always wrap in \`<Layout>\` \u2014 never recreate sidebar/header
611
+ - Page content padding: \`p-page\` (NOT \`p-6\` or \`p-8\`)
612
+ - Page title: \`text-page-title font-semibold\` (NOT \`text-3xl font-bold\`)
613
+ - Section gaps: \`gap-section\` or \`space-y-section\` (NOT \`gap-6\` or \`space-y-6\`)
614
+ - **NO \`h-screen\`** on page components \u2014 the root layout handles full height
615
+
616
+ ---
617
+
618
+ ## Card Pattern
619
+
620
+ \`\`\`tsx
621
+ <Card>
622
+ <CardHeader className="px-card pt-card">
623
+ <CardTitle>Title</CardTitle>
624
+ <CardDescription>Description</CardDescription>
625
+ </CardHeader>
626
+ <CardContent className="px-card pb-card">
627
+ {/* Content */}
628
+ </CardContent>
629
+ </Card>
630
+ \`\`\`
631
+
632
+ **Rules:**
633
+ - Card padding: \`px-card\`, \`pt-card\`, \`pb-card\` (NOT \`px-6\`, \`pt-6\`)
634
+ - Card background: inherits \`bg-card\` automatically
635
+
636
+ ---
637
+
638
+ ## Dialog Pattern
639
+
640
+ \`\`\`tsx
641
+ <Dialog open={open} onOpenChange={onOpenChange}>
642
+ <DialogContent>
643
+ <DialogHeader>
644
+ <DialogTitle>Dialog Title</DialogTitle>
645
+ <DialogDescription>Optional description</DialogDescription>
646
+ </DialogHeader>
647
+ <div className="p-dialog space-y-4">
648
+ {/* Dialog body */}
649
+ </div>
650
+ <DialogFooter>
651
+ <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
652
+ <Button>Submit</Button>
653
+ </DialogFooter>
654
+ </DialogContent>
655
+ </Dialog>
656
+ \`\`\`
657
+
658
+ **Rules:**
659
+ - Dialog body padding: \`p-dialog\` (NOT \`p-6\`)
660
+ - Props: \`{ open: boolean; onOpenChange: (open: boolean) => void }\`
661
+
662
+ ---
663
+
664
+ ## Table Pattern
665
+
666
+ \`\`\`tsx
667
+ <Table>
668
+ <TableHeader>
669
+ <TableRow className="h-table-head">
670
+ <TableHead>Column</TableHead>
671
+ </TableRow>
672
+ </TableHeader>
673
+ <TableBody>
674
+ <TableRow className="hover:bg-accent transition-colors">
675
+ <TableCell>Data</TableCell>
676
+ </TableRow>
677
+ </TableBody>
678
+ </Table>
679
+ \`\`\`
680
+
681
+ **Rules:**
682
+ - Header row: \`h-table-head\` (NOT \`h-10\`)
683
+ - Row hover: \`hover:bg-accent transition-colors\`
684
+
685
+ ---
686
+
687
+ ## Selection State Pattern
688
+
689
+ For selectable items (cards, list items):
690
+
691
+ \`\`\`tsx
692
+ <div className={cn(
693
+ "border rounded-lg p-4 cursor-pointer transition-colors",
694
+ selected
695
+ ? "border-primary bg-primary/5"
696
+ : "border-border hover:border-primary/50"
697
+ )}>
698
+ <div className="flex items-center justify-between">
699
+ <span>{label}</span>
700
+ {selected && <Check className="w-4 h-4 text-primary" />}
701
+ </div>
702
+ </div>
703
+ \`\`\`
704
+
705
+ **Rules:**
706
+ - Selected: \`border-primary bg-primary/5\` + Check icon
707
+ - Unselected hover: \`hover:border-primary/50\`
708
+ - Always include transition: \`transition-colors\`
709
+
710
+ ---
711
+
712
+ ## Sidebar Layout
713
+
714
+ ### Sidebar Structure
715
+ \`\`\`
716
+ Sidebar (w-64 / 256px)
717
+ \u251C\u2500\u2500 Header (h-header / 48px)
718
+ \u2502 \u251C\u2500\u2500 Logo/Avatar (w-8 h-8)
719
+ \u2502 \u2514\u2500\u2500 Title (text-sm font-semibold)
720
+ \u251C\u2500\u2500 Menu Groups
721
+ \u2502 \u251C\u2500\u2500 Group Label (text-xs text-muted-foreground uppercase)
722
+ \u2502 \u2514\u2500\u2500 Menu Items (px-3 py-2 gap-2 rounded-md)
723
+ \u2502 \u251C\u2500\u2500 Icon (w-4 h-4)
724
+ \u2502 \u2514\u2500\u2500 Text (text-sm)
725
+ \u2514\u2500\u2500 Footer
726
+ \u2514\u2500\u2500 User Info
727
+ \`\`\`
728
+
729
+ ### Sidebar Token Usage
730
+ | Element | Classes |
731
+ |---------|---------|
732
+ | Background | \`bg-sidebar\` |
733
+ | Text | \`text-sidebar-foreground\` |
734
+ | Active item bg | \`bg-sidebar-primary/10\` |
735
+ | Active item text | \`text-sidebar-primary\` |
736
+ | Hover state | \`hover:bg-sidebar-accent\` |
737
+ | Border | \`border-sidebar-border\` |
738
+ | Badge/avatar | \`w-8 h-8\` (32px) |
739
+ | Mini badge | \`w-5 h-5\` (20px) |
740
+ | Menu icon | \`w-4 h-4\` (16px) |
741
+
742
+ ---
743
+
744
+ ## Header Layout
745
+
746
+ \`\`\`tsx
747
+ <header className="h-header border-b border-border flex items-center px-page">
748
+ <div className="flex items-center gap-2">
749
+ {/* Header content */}
750
+ </div>
751
+ </header>
752
+ \`\`\`
753
+
754
+ **Rules:**
755
+ - Height: \`h-header\` (48px, NOT \`h-14\` or \`h-16\`)
756
+ - Padding: \`px-page\`
757
+
758
+ ---
759
+
760
+ ## Drawer Pattern
761
+
762
+ \`\`\`tsx
763
+ <Drawer open={open} onOpenChange={onOpenChange}>
764
+ <DrawerContent>
765
+ <DrawerHeader>
766
+ <DrawerTitle>Title</DrawerTitle>
767
+ </DrawerHeader>
768
+ <DrawerBody>
769
+ {/* Content MUST be wrapped in DrawerBody */}
770
+ </DrawerBody>
771
+ </DrawerContent>
772
+ </Drawer>
773
+ \`\`\`
774
+
775
+ **Rules:**
776
+ - Content MUST be wrapped in \`<DrawerBody>\`
777
+
778
+ ---
779
+
780
+ ## Avatar Border Pattern (Active User)
781
+
782
+ \`\`\`tsx
783
+ <Avatar className={cn(
784
+ "w-8 h-8",
785
+ isActive && "ring-2 ring-primary ring-offset-2 ring-offset-background"
786
+ )}>
787
+ <AvatarImage src={user.avatar} />
788
+ <AvatarFallback>{user.initials}</AvatarFallback>
789
+ </Avatar>
790
+ \`\`\`
791
+
792
+ ---
793
+
794
+ ## Responsive Considerations
795
+
796
+ - Sidebar collapses at mobile breakpoint (use \`useIsMobile()\` hook from \`@omnifyjp/ui-components\`)
797
+ - Page padding \`p-page\` adjusts via density tokens
798
+ - Element heights via \`h-element-*\` tokens scale consistently
799
+ `;
800
+ function registerLayoutResource(server2) {
801
+ server2.resource("design-layout", "design://layout", {
802
+ description: "Layout patterns \u2014 page, card, dialog, table, sidebar, header, drawer, selection state, avatar borders",
803
+ mimeType: "text/markdown"
804
+ }, async () => ({
805
+ contents: [{
806
+ uri: "design://layout",
807
+ mimeType: "text/markdown",
808
+ text: LAYOUT_CONTENT
809
+ }]
810
+ }));
811
+ }
812
+
813
+ // src/resources/patterns.ts
814
+ var PATTERNS_CONTENT = `# @omnifyjp Page Patterns (from Demo App)
815
+
816
+ These are real-world patterns extracted from the reference demo app.
817
+ Every consumer page MUST follow these structures to maintain visual consistency.
818
+
819
+ ---
820
+
821
+ ## 1. LIST PAGE (Card Grid)
822
+
823
+ Used for: project lists, organization lists, product catalogs.
824
+
825
+ \`\`\`tsx
826
+ <div className="p-page space-y-section">
827
+ {/* Header: title + action */}
828
+ <div className="flex items-center justify-between">
829
+ <div>
830
+ <h1 className="text-page-title font-semibold mb-2">Page Title</h1>
831
+ <p className="text-sm text-muted-foreground">Description text</p>
832
+ </div>
833
+ <Button><Plus className="w-4 h-4" /> Create</Button>
834
+ </div>
835
+
836
+ {/* Card Grid: responsive columns */}
837
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-section">
838
+ {items.map((item) => (
839
+ <Card key={item.id} className="hover:shadow-lg transition-shadow">
840
+ <CardHeader>
841
+ <div className="flex items-start justify-between mb-3">
842
+ <div
843
+ className="w-12 h-12 rounded-lg flex items-center justify-center text-white font-bold"
844
+ style={{ backgroundColor: item.color }}
845
+ >
846
+ {item.initials}
847
+ </div>
848
+ <Badge variant="secondary">{item.count}</Badge>
849
+ </div>
850
+ <CardTitle>
851
+ <Link to={item.url} className="hover:text-primary transition-colors">
852
+ {item.name}
853
+ </Link>
854
+ </CardTitle>
855
+ <CardDescription className="line-clamp-2">{item.description}</CardDescription>
856
+ </CardHeader>
857
+ <CardContent className="space-y-4">
858
+ {/* Progress bar */}
859
+ <div className="w-full bg-muted rounded-full h-2">
860
+ <div
861
+ className="h-2 rounded-full bg-primary transition-all"
862
+ style={{ width: \`\${item.progress}%\` }}
863
+ />
864
+ </div>
865
+ {/* Stats row */}
866
+ <div className="grid grid-cols-2 gap-4">
867
+ <div>
868
+ <p className="text-xs text-muted-foreground mb-1">Label</p>
869
+ <p className="text-lg font-semibold">{item.value}</p>
870
+ </div>
871
+ </div>
872
+ {/* Avatar stack */}
873
+ <div className="flex -space-x-2">
874
+ {item.members.map((m) => (
875
+ <Avatar key={m.id} className="w-8 h-8 border-2 border-background">
876
+ <AvatarImage src={m.avatar} />
877
+ <AvatarFallback>{m.initials}</AvatarFallback>
878
+ </Avatar>
879
+ ))}
880
+ </div>
881
+ {/* Meta info */}
882
+ <div className="flex items-center gap-2 text-sm text-muted-foreground">
883
+ <Calendar className="w-4 h-4" />
884
+ <span>{item.date}</span>
885
+ </div>
886
+ {/* Action footer */}
887
+ <div className="pt-2 border-t">
888
+ <Button variant="outline" className="w-full">View Details</Button>
889
+ </div>
890
+ </CardContent>
891
+ </Card>
892
+ ))}
893
+ </div>
894
+ </div>
895
+ \`\`\`
896
+
897
+ ---
898
+
899
+ ## 2. LIST PAGE (Data Table)
900
+
901
+ Used for: issue lists, user lists, audit logs, subscription lists.
902
+
903
+ \`\`\`tsx
904
+ <div className="p-page">
905
+ {/* Header */}
906
+ <div className="flex items-center justify-between mb-section">
907
+ <div>
908
+ <h1 className="text-page-title font-semibold mb-2">Page Title</h1>
909
+ <p className="text-sm text-muted-foreground">Description</p>
910
+ </div>
911
+ <div className="flex items-center gap-3">
912
+ <Button variant="outline" size="sm">
913
+ <Filter className="w-4 h-4" /> Filter
914
+ </Button>
915
+ <Button><Plus className="w-4 h-4" /> Create</Button>
916
+ </div>
917
+ </div>
918
+
919
+ {/* Table card container */}
920
+ <div className="bg-card rounded-lg border">
921
+ {/* Search + filter bar */}
922
+ <div className="p-4 border-b">
923
+ <div className="flex items-center gap-4">
924
+ <div className="flex-1 relative">
925
+ <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
926
+ <Input placeholder="Search..." className="pl-10" />
927
+ </div>
928
+ <Select>
929
+ <SelectTrigger className="w-[180px]">
930
+ <SelectValue placeholder="Status" />
931
+ </SelectTrigger>
932
+ <SelectContent>
933
+ <SelectItem value="all">All</SelectItem>
934
+ {/* filter options */}
935
+ </SelectContent>
936
+ </Select>
937
+ </div>
938
+ </div>
939
+
940
+ {/* Table */}
941
+ <Table>
942
+ <TableHeader>
943
+ <TableRow>
944
+ <TableHead className="w-[100px]">ID</TableHead>
945
+ <TableHead>Title</TableHead>
946
+ <TableHead>Status</TableHead>
947
+ <TableHead>Assignee</TableHead>
948
+ <TableHead className="w-[50px]" />
949
+ </TableRow>
950
+ </TableHeader>
951
+ <TableBody>
952
+ {items.map((item) => (
953
+ <TableRow key={item.id} className="hover:bg-accent">
954
+ <TableCell className="font-medium">
955
+ <Link to={item.url} className="text-primary hover:underline">#{item.id}</Link>
956
+ </TableCell>
957
+ <TableCell>
958
+ <Link to={item.url} className="hover:text-primary transition-colors">
959
+ <p className="font-medium">{item.title}</p>
960
+ <p className="text-sm text-muted-foreground truncate max-w-md">{item.desc}</p>
961
+ </Link>
962
+ </TableCell>
963
+ <TableCell><Badge variant="outline">{item.status}</Badge></TableCell>
964
+ <TableCell>
965
+ <div className="flex items-center gap-2">
966
+ <Avatar className="w-8 h-8" />
967
+ <span className="text-sm">{item.assignee}</span>
968
+ </div>
969
+ </TableCell>
970
+ <TableCell>
971
+ <DropdownMenu>
972
+ <DropdownMenuTrigger asChild>
973
+ <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
974
+ <MoreVertical className="w-4 h-4" />
975
+ </Button>
976
+ </DropdownMenuTrigger>
977
+ <DropdownMenuContent align="end">
978
+ <DropdownMenuItem>Edit</DropdownMenuItem>
979
+ <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
980
+ </DropdownMenuContent>
981
+ </DropdownMenu>
982
+ </TableCell>
983
+ </TableRow>
984
+ ))}
985
+ </TableBody>
986
+ </Table>
987
+
988
+ {/* Footer */}
989
+ <div className="p-4 border-t bg-muted">
990
+ <p className="text-sm text-muted-foreground">
991
+ Showing {filtered} of {total} results
992
+ </p>
993
+ </div>
994
+ </div>
995
+ </div>
996
+ \`\`\`
997
+
998
+ **Key rules:**
999
+ - Table wrapped in \`bg-card rounded-lg border\` (NOT inside \`<Card>\`)
1000
+ - Search icon: \`absolute left-3 top-1/2 -translate-y-1/2\`, input gets \`pl-10\`
1001
+ - Filter selects: fixed width \`w-[180px]\`
1002
+ - Row hover: \`hover:bg-accent\`
1003
+ - ID links: \`text-primary hover:underline\`
1004
+ - Row action trigger: \`Button variant="ghost" size="sm" className="h-8 w-8 p-0"\`
1005
+ - Destructive menu item: \`className="text-destructive"\`
1006
+
1007
+ ---
1008
+
1009
+ ## 3. DETAIL PAGE
1010
+
1011
+ Used for: task detail, user detail, project detail, order detail.
1012
+
1013
+ \`\`\`tsx
1014
+ <div className="p-page space-y-section">
1015
+ {/* Back nav + header */}
1016
+ <div className="flex items-center gap-4">
1017
+ <Link to="..">
1018
+ <Button variant="ghost" size="icon"><ArrowLeft className="w-5 h-5" /></Button>
1019
+ </Link>
1020
+ <div
1021
+ className="w-10 h-10 rounded-lg flex items-center justify-center text-white font-semibold text-sm"
1022
+ style={{ backgroundColor: entity.color }}
1023
+ >
1024
+ {entity.initials}
1025
+ </div>
1026
+ <div className="flex-1">
1027
+ <div className="flex items-center gap-2 mb-1">
1028
+ <Badge variant="outline">KEY-123</Badge>
1029
+ <Badge className={statusColor}>{entity.status}</Badge>
1030
+ </div>
1031
+ <h1 className="text-page-title font-semibold">{entity.title}</h1>
1032
+ </div>
1033
+ <Button variant="ghost" size="icon">
1034
+ <MoreVertical className="w-5 h-5" />
1035
+ </Button>
1036
+ </div>
1037
+
1038
+ {/* 2/3 + 1/3 layout */}
1039
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-section">
1040
+ {/* Main content */}
1041
+ <div className="lg:col-span-2 space-y-section">
1042
+ <Card>
1043
+ <CardHeader><CardTitle>Description</CardTitle></CardHeader>
1044
+ <CardContent>
1045
+ <p className="text-foreground whitespace-pre-wrap">{entity.description}</p>
1046
+ </CardContent>
1047
+ </Card>
1048
+
1049
+ {/* Comments */}
1050
+ <Card>
1051
+ <CardHeader><CardTitle>Comments ({comments.length})</CardTitle></CardHeader>
1052
+ <CardContent className="space-y-4">
1053
+ <div className="space-y-2">
1054
+ <Textarea placeholder="Add a comment..." rows={3} />
1055
+ <div className="flex justify-end">
1056
+ <Button><Send className="w-4 h-4" /> Send</Button>
1057
+ </div>
1058
+ </div>
1059
+ <Separator />
1060
+ <div className="space-y-4">
1061
+ {comments.map((c) => (
1062
+ <div key={c.id} className="flex gap-3">
1063
+ <Avatar className="w-8 h-8" />
1064
+ <div className="flex-1">
1065
+ <div className="flex items-center gap-2 mb-1">
1066
+ <span className="font-medium text-sm">{c.author}</span>
1067
+ <span className="text-xs text-muted-foreground">{c.time}</span>
1068
+ </div>
1069
+ <p className="text-sm text-foreground">{c.content}</p>
1070
+ </div>
1071
+ </div>
1072
+ ))}
1073
+ </div>
1074
+ </CardContent>
1075
+ </Card>
1076
+ </div>
1077
+
1078
+ {/* Sidebar */}
1079
+ <div className="space-y-4">
1080
+ <Card>
1081
+ <CardHeader><CardTitle className="text-base">Details</CardTitle></CardHeader>
1082
+ <CardContent className="space-y-4">
1083
+ {/* Field pattern: icon+label then value, separated by Separator */}
1084
+ <div>
1085
+ <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
1086
+ <User className="w-4 h-4" /><span>Assignee</span>
1087
+ </div>
1088
+ <div className="flex items-center gap-2">
1089
+ <Avatar className="w-6 h-6" />
1090
+ <span className="text-sm">{entity.assignee}</span>
1091
+ </div>
1092
+ </div>
1093
+ <Separator />
1094
+ <div>
1095
+ <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
1096
+ <Calendar className="w-4 h-4" /><span>Due Date</span>
1097
+ </div>
1098
+ <span className="text-sm">{entity.dueDate}</span>
1099
+ </div>
1100
+ </CardContent>
1101
+ </Card>
1102
+
1103
+ {/* Actions */}
1104
+ <Card>
1105
+ <CardContent className="p-4 space-y-2">
1106
+ <Button variant="outline" className="w-full justify-start">
1107
+ <Edit className="w-4 h-4" /> Edit
1108
+ </Button>
1109
+ <Button variant="outline" className="w-full justify-start text-destructive hover:text-destructive">
1110
+ <Trash2 className="w-4 h-4" /> Delete
1111
+ </Button>
1112
+ </CardContent>
1113
+ </Card>
1114
+ </div>
1115
+ </div>
1116
+ </div>
1117
+ \`\`\`
1118
+
1119
+ **Key rules:**
1120
+ - Layout: \`grid grid-cols-1 lg:grid-cols-3 gap-section\`, main is \`lg:col-span-2\`
1121
+ - Back button: \`Button variant="ghost" size="icon"\` with \`ArrowLeft w-5 h-5\`
1122
+ - Sidebar CardTitle: \`className="text-base"\` (smaller)
1123
+ - Detail field: icon + label in \`text-sm text-muted-foreground\`, value below, \`<Separator />\` between fields
1124
+ - Action buttons: \`variant="outline" className="w-full justify-start"\`
1125
+ - Destructive: \`text-destructive hover:text-destructive\`
1126
+
1127
+ ---
1128
+
1129
+ ## 4. DASHBOARD
1130
+
1131
+ Used for: main dashboard, project dashboard, module overview.
1132
+
1133
+ \`\`\`tsx
1134
+ <StandardPageContainer
1135
+ title="Dashboard"
1136
+ subtitle="Overview and statistics"
1137
+ contentClassName="space-y-section"
1138
+ >
1139
+ {/* Stat cards: 4 columns */}
1140
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-section">
1141
+ {stats.map((stat) => (
1142
+ <Card key={stat.label}>
1143
+ <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
1144
+ <CardTitle className="text-sm font-medium">{stat.label}</CardTitle>
1145
+ <stat.icon className="h-4 w-4 text-muted-foreground" />
1146
+ </CardHeader>
1147
+ <CardContent>
1148
+ <div className="text-2xl font-bold">{stat.value}</div>
1149
+ <p className="text-xs text-muted-foreground mt-1">{stat.subtext}</p>
1150
+ </CardContent>
1151
+ </Card>
1152
+ ))}
1153
+ </div>
1154
+
1155
+ {/* Content: 2/3 main + 1/3 sidebar */}
1156
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-section">
1157
+ <Card className="lg:col-span-2">
1158
+ <CardHeader>
1159
+ <div className="flex items-center justify-between">
1160
+ <div>
1161
+ <CardTitle>Recent Items</CardTitle>
1162
+ <CardDescription>Latest activity</CardDescription>
1163
+ </div>
1164
+ <Link to="/items" className="text-sm text-primary hover:text-primary/80 font-medium">
1165
+ View all
1166
+ </Link>
1167
+ </div>
1168
+ </CardHeader>
1169
+ <CardContent>
1170
+ <div className="space-y-3">
1171
+ {items.map((item) => (
1172
+ <Link
1173
+ key={item.id}
1174
+ to={item.url}
1175
+ className="flex items-center gap-4 p-3 rounded-lg hover:bg-accent transition-colors"
1176
+ >
1177
+ <div className="flex-1 min-w-0">
1178
+ <div className="flex items-center gap-2 mb-1">
1179
+ <span className="text-sm font-medium text-muted-foreground">{item.id}</span>
1180
+ <Badge className={item.priorityColor}>{item.priority}</Badge>
1181
+ </div>
1182
+ <h4 className="font-medium truncate">{item.title}</h4>
1183
+ </div>
1184
+ <Avatar className="w-8 h-8 flex-shrink-0" />
1185
+ <Badge variant="outline">{item.status}</Badge>
1186
+ </Link>
1187
+ ))}
1188
+ </div>
1189
+ </CardContent>
1190
+ </Card>
1191
+
1192
+ <Card>
1193
+ <CardHeader>
1194
+ <CardTitle className="flex items-center gap-2">
1195
+ <Activity className="w-5 h-5" /> Recent Activity
1196
+ </CardTitle>
1197
+ </CardHeader>
1198
+ <CardContent>{/* Activity feed */}</CardContent>
1199
+ </Card>
1200
+ </div>
1201
+ </StandardPageContainer>
1202
+ \`\`\`
1203
+
1204
+ **Key rules:**
1205
+ - Stat cards: \`grid lg:grid-cols-4 gap-section\`
1206
+ - Stat CardHeader: \`flex flex-row items-center justify-between space-y-0 pb-2\`
1207
+ - Stat CardTitle: \`text-sm font-medium\` (NOT large)
1208
+ - Stat value: \`text-2xl font-bold\`
1209
+ - Stat sub-text: \`text-xs text-muted-foreground mt-1\`
1210
+ - Stat icon: \`h-4 w-4 text-muted-foreground\`
1211
+ - "View all" link: \`text-sm text-primary hover:text-primary/80 font-medium\`
1212
+ - List items: \`p-3 rounded-lg hover:bg-accent transition-colors\`
1213
+
1214
+ ---
1215
+
1216
+ ## 5. SETTINGS PAGE
1217
+
1218
+ Used for: settings, profile, preferences.
1219
+
1220
+ \`\`\`tsx
1221
+ <StandardPageContainer
1222
+ title="Settings"
1223
+ subtitle="Manage your preferences"
1224
+ contentClassName="max-w-4xl mx-auto space-y-section"
1225
+ >
1226
+ <Tabs defaultValue="profile" className="space-y-section">
1227
+ <TabsList>
1228
+ <TabsTrigger value="profile"><User className="w-4 h-4" /> Profile</TabsTrigger>
1229
+ <TabsTrigger value="notifications"><Bell className="w-4 h-4" /> Notifications</TabsTrigger>
1230
+ <TabsTrigger value="security"><Shield className="w-4 h-4" /> Security</TabsTrigger>
1231
+ </TabsList>
1232
+
1233
+ <TabsContent value="profile" className="space-y-section">
1234
+ <Card>
1235
+ <CardHeader>
1236
+ <CardTitle>Personal Info</CardTitle>
1237
+ <CardDescription>Update your profile</CardDescription>
1238
+ </CardHeader>
1239
+ <CardContent className="space-y-6">
1240
+ {/* Avatar section */}
1241
+ <div className="flex items-center gap-4">
1242
+ <Avatar className="w-20 h-20" />
1243
+ <div>
1244
+ <Button variant="outline" size="sm">Change</Button>
1245
+ <p className="text-xs text-muted-foreground mt-2">JPG, PNG. Max 5MB.</p>
1246
+ </div>
1247
+ </div>
1248
+ <Separator />
1249
+ {/* Form fields */}
1250
+ <div className="grid grid-cols-2 gap-4">
1251
+ <div className="space-y-2">
1252
+ <Label htmlFor="firstName">First Name</Label>
1253
+ <Input id="firstName" />
1254
+ </div>
1255
+ <div className="space-y-2">
1256
+ <Label htmlFor="lastName">Last Name</Label>
1257
+ <Input id="lastName" />
1258
+ </div>
1259
+ </div>
1260
+ <Button>Save Changes</Button>
1261
+ </CardContent>
1262
+ </Card>
1263
+ </TabsContent>
1264
+
1265
+ <TabsContent value="notifications" className="space-y-section">
1266
+ <Card>
1267
+ <CardHeader>
1268
+ <CardTitle>Notification Preferences</CardTitle>
1269
+ <CardDescription>Choose what to be notified about</CardDescription>
1270
+ </CardHeader>
1271
+ <CardContent className="space-y-4">
1272
+ {/* Toggle row pattern */}
1273
+ <div className="flex items-center justify-between">
1274
+ <div className="space-y-0.5">
1275
+ <Label>Email Notifications</Label>
1276
+ <p className="text-sm text-muted-foreground">Receive updates via email</p>
1277
+ </div>
1278
+ <Switch />
1279
+ </div>
1280
+ <Separator />
1281
+ {/* Repeat toggle rows */}
1282
+ </CardContent>
1283
+ </Card>
1284
+ </TabsContent>
1285
+ </Tabs>
1286
+ </StandardPageContainer>
1287
+ \`\`\`
1288
+
1289
+ **Key rules:**
1290
+ - Content width: \`max-w-4xl mx-auto\`
1291
+ - Tab triggers include icons: \`<Icon className="w-4 h-4" />\`
1292
+ - Form fields: \`space-y-2\` wrapping \`Label\` + \`Input\`
1293
+ - Field groups: \`grid grid-cols-2 gap-4\`
1294
+ - Toggle row: \`flex items-center justify-between\`, label left (\`space-y-0.5\`), Switch right
1295
+ - Toggle description: \`text-sm text-muted-foreground\`
1296
+
1297
+ ---
1298
+
1299
+ ## 6. KANBAN BOARD
1300
+
1301
+ Used for: task boards, pipeline views.
1302
+
1303
+ \`\`\`tsx
1304
+ <div className="p-page">
1305
+ <div className="flex items-center justify-between mb-section">
1306
+ <div>
1307
+ <h1 className="text-page-title font-semibold mb-2">Board</h1>
1308
+ <p className="text-sm text-muted-foreground">Drag tasks between columns</p>
1309
+ </div>
1310
+ <div className="flex items-center gap-3">
1311
+ <Button variant="outline" size="sm"><Filter className="w-4 h-4" /> Filter</Button>
1312
+ <Button><Plus className="w-4 h-4" /> Create</Button>
1313
+ </div>
1314
+ </div>
1315
+
1316
+ {/* Horizontal scrolling columns */}
1317
+ <div className="flex gap-4 overflow-x-auto pb-4">
1318
+ {columns.map((col) => (
1319
+ <div key={col.id} className="flex-1 min-w-[280px] bg-muted rounded-lg p-3">
1320
+ {/* Column header */}
1321
+ <div className="flex items-center justify-between mb-3">
1322
+ <div className="flex items-center gap-2">
1323
+ <h3 className="font-semibold">{col.title}</h3>
1324
+ <Badge variant="secondary">{col.tasks.length}</Badge>
1325
+ </div>
1326
+ <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
1327
+ <Plus className="w-4 h-4" />
1328
+ </Button>
1329
+ </div>
1330
+ {/* Task cards */}
1331
+ <div className="space-y-2">
1332
+ {col.tasks.map((task) => (
1333
+ <Card key={task.id} className="p-3 hover:shadow-md transition-shadow cursor-pointer group">
1334
+ <div className="flex items-start justify-between">
1335
+ <span className="text-sm text-muted-foreground">#{task.id}</span>
1336
+ <Button variant="ghost" size="sm" className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100">
1337
+ <MoreVertical className="w-4 h-4" />
1338
+ </Button>
1339
+ </div>
1340
+ <h4 className="font-medium mt-1">{task.title}</h4>
1341
+ <div className="flex items-center gap-2 mt-2">
1342
+ <div className={\`w-2 h-2 rounded-full \${priorityColor}\`} />
1343
+ <span className="text-xs text-muted-foreground capitalize">{task.priority}</span>
1344
+ </div>
1345
+ <div className="flex items-center justify-between mt-2">
1346
+ <Avatar className="w-6 h-6" />
1347
+ <span className="text-xs text-muted-foreground">{task.date}</span>
1348
+ </div>
1349
+ </Card>
1350
+ ))}
1351
+ </div>
1352
+ </div>
1353
+ ))}
1354
+ </div>
1355
+ </div>
1356
+ \`\`\`
1357
+
1358
+ **Key rules:**
1359
+ - Columns: \`flex gap-4 overflow-x-auto\`, each \`flex-1 min-w-[280px] bg-muted rounded-lg p-3\`
1360
+ - Drop highlight: \`bg-primary/5 ring-2 ring-primary\`
1361
+ - Cards: \`p-3\` (compact), hover: \`hover:shadow-md\`
1362
+ - Action menu: hidden until hover (\`opacity-0 group-hover:opacity-100\`)
1363
+ - Priority dot: \`w-2 h-2 rounded-full\` (not badge)
1364
+ - Compact avatars: \`w-6 h-6\`
1365
+
1366
+ ---
1367
+
1368
+ ## 7. OVERVIEW / MODULE INDEX
1369
+
1370
+ Used for: module overview pages (workflow, CMS, RBAC, attendance).
1371
+ Each module overview has stat cards + a quick list of items.
1372
+
1373
+ \`\`\`tsx
1374
+ <StandardPageContainer
1375
+ title="Module Name"
1376
+ subtitle="Module overview"
1377
+ extra={<Button><Plus className="w-4 h-4" /> Create</Button>}
1378
+ contentClassName="space-y-section"
1379
+ >
1380
+ {/* Stat cards with colored icons \u2014 each stat is a DIFFERENT color */}
1381
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-section">
1382
+ {stats.map((stat) => (
1383
+ <Card key={stat.label}>
1384
+ <CardContent className="pt-6">
1385
+ <div className="flex items-center justify-between">
1386
+ <div>
1387
+ <p className="text-sm font-medium text-muted-foreground">{stat.label}</p>
1388
+ <p className="text-2xl font-bold mt-1">{stat.value}</p>
1389
+ </div>
1390
+ <div className={\`p-3 rounded-lg \${stat.bgColor}\`}>
1391
+ <stat.icon className={\`w-5 h-5 \${stat.iconColor}\`} />
1392
+ </div>
1393
+ </div>
1394
+ </CardContent>
1395
+ </Card>
1396
+ ))}
1397
+ </div>
1398
+
1399
+ {/* Quick list card */}
1400
+ <Card>
1401
+ <CardHeader>
1402
+ <div className="flex items-center justify-between">
1403
+ <CardTitle>Recent Items</CardTitle>
1404
+ <Link to="/module/all" className="text-sm text-primary hover:text-primary/80">
1405
+ View all
1406
+ </Link>
1407
+ </div>
1408
+ </CardHeader>
1409
+ <CardContent>
1410
+ <Table>
1411
+ <TableHeader>
1412
+ <TableRow>
1413
+ <TableHead>Name</TableHead>
1414
+ <TableHead>Status</TableHead>
1415
+ <TableHead>Date</TableHead>
1416
+ <TableHead className="w-[50px]" />
1417
+ </TableRow>
1418
+ </TableHeader>
1419
+ <TableBody>
1420
+ {items.map((item) => (
1421
+ <TableRow key={item.id} className="hover:bg-accent">
1422
+ <TableCell className="font-medium">{item.name}</TableCell>
1423
+ <TableCell><Badge>{item.status}</Badge></TableCell>
1424
+ <TableCell className="text-sm text-muted-foreground">{item.date}</TableCell>
1425
+ <TableCell>
1426
+ <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
1427
+ <MoreVertical className="w-4 h-4" />
1428
+ </Button>
1429
+ </TableCell>
1430
+ </TableRow>
1431
+ ))}
1432
+ </TableBody>
1433
+ </Table>
1434
+ </CardContent>
1435
+ </Card>
1436
+ </StandardPageContainer>
1437
+ \`\`\`
1438
+
1439
+ **Note on stat icon colors:** Overview stat cards use DIFFERENT colors per stat (blue, green, amber, purple) \u2014 this is the multi-color exception. Each stat intentionally has a unique color.
1440
+
1441
+ ---
1442
+
1443
+ ## 8. COMMON PATTERNS
1444
+
1445
+ ### Page Header (two variants)
1446
+
1447
+ **Variant A \u2014 Manual** (most pages):
1448
+ \`\`\`tsx
1449
+ <div className="p-page space-y-section">
1450
+ <div className="flex items-center justify-between">
1451
+ <div>
1452
+ <h1 className="text-page-title font-semibold mb-2">Title</h1>
1453
+ <p className="text-sm text-muted-foreground">Subtitle</p>
1454
+ </div>
1455
+ <div className="flex items-center gap-3">
1456
+ <Button variant="outline" size="sm"><Filter className="w-4 h-4" /> Filter</Button>
1457
+ <Button><Plus className="w-4 h-4" /> Create</Button>
1458
+ </div>
1459
+ </div>
1460
+ {/* ... page content ... */}
1461
+ </div>
1462
+ \`\`\`
1463
+
1464
+ **Variant B \u2014 StandardPageContainer** (dashboard, settings):
1465
+ \`\`\`tsx
1466
+ <StandardPageContainer
1467
+ title="Title"
1468
+ subtitle="Subtitle"
1469
+ extra={<Button>Action</Button>}
1470
+ contentClassName="space-y-section"
1471
+ >
1472
+ {/* ... page content ... */}
1473
+ </StandardPageContainer>
1474
+ \`\`\`
1475
+
1476
+ ### Action Button Group
1477
+ \`\`\`tsx
1478
+ <div className="flex items-center gap-3">
1479
+ <Button variant="outline" size="sm"><Filter className="w-4 h-4" /> Filter</Button>
1480
+ <Button><Plus className="w-4 h-4" /> Create</Button>
1481
+ </div>
1482
+ \`\`\`
1483
+ - Secondary: \`variant="outline" size="sm"\`
1484
+ - Primary: default variant (solid)
1485
+
1486
+ ### Comment / Activity Item
1487
+ \`\`\`tsx
1488
+ <div className="flex gap-3">
1489
+ <Avatar className="w-8 h-8" />
1490
+ <div className="flex-1">
1491
+ <div className="flex items-center gap-2 mb-1">
1492
+ <span className="font-medium text-sm">{name}</span>
1493
+ <span className="text-xs text-muted-foreground">{time}</span>
1494
+ </div>
1495
+ <p className="text-sm text-foreground">{content}</p>
1496
+ </div>
1497
+ </div>
1498
+ \`\`\`
1499
+
1500
+ ### Avatar Stack
1501
+ \`\`\`tsx
1502
+ <div className="flex -space-x-2">
1503
+ {users.map((u) => (
1504
+ <Avatar key={u.id} className="w-8 h-8 border-2 border-background">
1505
+ <AvatarImage src={u.avatar} />
1506
+ <AvatarFallback>{u.initials}</AvatarFallback>
1507
+ </Avatar>
1508
+ ))}
1509
+ </div>
1510
+ \`\`\`
1511
+
1512
+ ### Empty State
1513
+ \`\`\`tsx
1514
+ <TableRow>
1515
+ <TableCell colSpan={columns} className="text-center py-8 text-muted-foreground">
1516
+ No items found
1517
+ </TableCell>
1518
+ </TableRow>
1519
+ \`\`\`
1520
+
1521
+ ### "View All" Link
1522
+ \`\`\`tsx
1523
+ <Link to="/path" className="text-sm text-primary hover:text-primary/80 font-medium">
1524
+ View all
1525
+ </Link>
1526
+ \`\`\`
1527
+
1528
+ ### Multi-Color Status Badge Map
1529
+ This is the EXCEPTION to the "no hardcoded colors" rule:
1530
+ \`\`\`tsx
1531
+ const statusColors: Record<string, string> = {
1532
+ active: 'bg-green-50 dark:bg-green-500/15 text-green-600 dark:text-green-400 border-green-200 dark:border-green-500/30',
1533
+ pending: 'bg-blue-50 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-500/30',
1534
+ suspended: 'bg-red-50 dark:bg-red-500/15 text-red-600 dark:text-red-400 border-red-200 dark:border-red-500/30',
1535
+ cancelled: 'bg-yellow-50 dark:bg-yellow-500/15 text-yellow-600 dark:text-yellow-400 border-yellow-200 dark:border-yellow-500/30',
1536
+ };
1537
+ \`\`\`
1538
+ **Rule**: ALWAYS include dark mode variants (\`dark:bg-{color}-500/15 dark:text-{color}-400\`).
1539
+ `;
1540
+ function registerPatternsResource(server2) {
1541
+ server2.resource("design-patterns", "design://patterns", {
1542
+ description: "Real-world page patterns from the demo app \u2014 list pages, detail pages, dashboards, settings, kanban boards, data tables, stat cards, and common UI patterns",
1543
+ mimeType: "text/markdown"
1544
+ }, async () => ({
1545
+ contents: [{
1546
+ uri: "design://patterns",
1547
+ mimeType: "text/markdown",
1548
+ text: PATTERNS_CONTENT
1549
+ }]
1550
+ }));
1551
+ }
1552
+
1553
+ // src/tools/validate.ts
1554
+ import { z } from "zod";
1555
+ var VIOLATION_RULES = [
1556
+ // Color violations
1557
+ { pattern: /\bbg-white\b/, message: "Hardcoded `bg-white`", suggestion: "Use `bg-background` or `bg-card`", category: "color" },
1558
+ { pattern: /\bbg-gray-50\b/, message: "Hardcoded `bg-gray-50`", suggestion: "Use `bg-muted`", category: "color" },
1559
+ { pattern: /\bbg-gray-100\b/, message: "Hardcoded `bg-gray-100`", suggestion: "Use `bg-muted`", category: "color" },
1560
+ { pattern: /\btext-gray-900\b/, message: "Hardcoded `text-gray-900`", suggestion: "Use `text-foreground`", category: "color" },
1561
+ { pattern: /\btext-gray-700\b/, message: "Hardcoded `text-gray-700`", suggestion: "Use `text-foreground`", category: "color" },
1562
+ { pattern: /\btext-gray-600\b/, message: "Hardcoded `text-gray-600`", suggestion: "Use `text-muted-foreground`", category: "color" },
1563
+ { pattern: /\btext-gray-500\b/, message: "Hardcoded `text-gray-500`", suggestion: "Use `text-muted-foreground`", category: "color" },
1564
+ { pattern: /\btext-gray-400\b/, message: "Hardcoded `text-gray-400`", suggestion: "Use `text-muted-foreground`", category: "color" },
1565
+ { pattern: /\bborder-gray-\d+\b/, message: "Hardcoded `border-gray-*`", suggestion: "Use `border-border`", category: "color" },
1566
+ { pattern: /\btext-blue-\d+\b/, message: "Hardcoded `text-blue-*`", suggestion: "Use `text-primary` or `text-info`", category: "color" },
1567
+ { pattern: /\bbg-blue-\d+\b/, message: "Hardcoded `bg-blue-*`", suggestion: "Use `bg-primary/10` or `bg-info/10`", category: "color" },
1568
+ { pattern: /\bbg-red-\d+\b/, message: "Hardcoded `bg-red-*`", suggestion: "Use `bg-destructive` or `bg-destructive/10`", category: "color" },
1569
+ { pattern: /\btext-red-\d+\b/, message: "Hardcoded `text-red-*`", suggestion: "Use `text-destructive`", category: "color" },
1570
+ { pattern: /\bbg-green-\d+\b/, message: "Hardcoded `bg-green-*`", suggestion: "Use `bg-success` or `bg-success/10`", category: "color" },
1571
+ { pattern: /\btext-green-\d+\b/, message: "Hardcoded `text-green-*`", suggestion: "Use `text-success`", category: "color" },
1572
+ { pattern: /\bbg-yellow-\d+\b/, message: "Hardcoded `bg-yellow-*`", suggestion: "Use `bg-warning` or `bg-warning/10`", category: "color" },
1573
+ { pattern: /\btext-yellow-\d+\b/, message: "Hardcoded `text-yellow-*`", suggestion: "Use `text-warning`", category: "color" },
1574
+ { pattern: /\bbg-orange-\d+\b/, message: "Hardcoded `bg-orange-*`", suggestion: "Use `bg-warning` or `bg-warning/10`", category: "color" },
1575
+ { pattern: /\bhover:bg-gray-\d+\b/, message: "Hardcoded `hover:bg-gray-*`", suggestion: "Use `hover:bg-accent`", category: "color" },
1576
+ { pattern: /\btext-black\b/, message: "Hardcoded `text-black`", suggestion: "Use `text-foreground`", category: "color" },
1577
+ { pattern: /\bbg-black\b/, message: "Hardcoded `bg-black`", suggestion: "Use `bg-foreground` or `bg-primary`", category: "color" },
1578
+ // Density violations
1579
+ { pattern: /\bp-6\b/, message: "Hardcoded `p-6`", suggestion: "Use `p-page` for page padding or `p-dialog` for dialog", category: "density" },
1580
+ { pattern: /\bp-8\b/, message: "Hardcoded `p-8`", suggestion: "Use `p-page` for page padding", category: "density" },
1581
+ { pattern: /\bpx-6\b/, message: "Hardcoded `px-6`", suggestion: "Use `px-page` or `px-card`", category: "density" },
1582
+ { pattern: /\bpy-6\b/, message: "Hardcoded `py-6`", suggestion: "Use `py-page` or `py-card`", category: "density" },
1583
+ { pattern: /\bgap-6\b/, message: "Hardcoded `gap-6`", suggestion: "Use `gap-section`", category: "density" },
1584
+ { pattern: /\bspace-y-6\b/, message: "Hardcoded `space-y-6`", suggestion: "Use `space-y-section`", category: "density" },
1585
+ { pattern: /\bh-9\b/, message: "Hardcoded `h-9`", suggestion: "Use `h-element` (32px)", category: "density" },
1586
+ { pattern: /\bh-10\b/, message: "Hardcoded `h-10`", suggestion: "Use `h-element-lg` (36px)", category: "density" },
1587
+ { pattern: /\bh-14\b/, message: "Hardcoded `h-14`", suggestion: "Use `h-header` (48px)", category: "density" },
1588
+ // Layout violations
1589
+ { pattern: /\bh-screen\b/, message: "`h-screen` on page component", suggestion: "Remove \u2014 root layout handles full height", category: "layout" },
1590
+ // Pattern violations
1591
+ { pattern: /\btext-3xl\s+font-bold\b/, message: "`text-3xl font-bold` for page title", suggestion: "Use `text-page-title font-semibold`", category: "pattern" },
1592
+ { pattern: /\btext-2xl\s+font-bold\b/, message: "`text-2xl font-bold` for page title", suggestion: "Use `text-page-title font-semibold`", category: "pattern" },
1593
+ { pattern: /\bhsl\(var\(--/, message: "`hsl(var(--*))` wrapping", suggestion: "Use `var(--token)` directly \u2014 tokens use mixed color formats", category: "pattern" },
1594
+ { pattern: /style=\{/, message: "Inline style object", suggestion: "Use Tailwind classes instead of inline styles", category: "pattern" }
1595
+ ];
1596
+ var TOKEN_DB = [
1597
+ // Colors
1598
+ { token: "--background", tailwind: "bg-background", category: "color", description: "Page background" },
1599
+ { token: "--foreground", tailwind: "text-foreground", category: "color", description: "Default text color" },
1600
+ { token: "--card", tailwind: "bg-card", category: "color", description: "Card background" },
1601
+ { token: "--primary", tailwind: "bg-primary / text-primary", category: "color", description: "Main brand, active states" },
1602
+ { token: "--secondary", tailwind: "bg-secondary", category: "color", description: "Secondary backgrounds" },
1603
+ { token: "--muted", tailwind: "bg-muted", category: "color", description: "Muted/subtle backgrounds (replaces bg-gray-50/100)" },
1604
+ { token: "--muted-foreground", tailwind: "text-muted-foreground", category: "color", description: "Subdued text (replaces text-gray-500/600)" },
1605
+ { token: "--accent", tailwind: "bg-accent / hover:bg-accent", category: "color", description: "Hover backgrounds (replaces hover:bg-gray-50)" },
1606
+ { token: "--destructive", tailwind: "bg-destructive / text-destructive", category: "color", description: "Delete, errors, danger" },
1607
+ { token: "--border", tailwind: "border-border", category: "color", description: "All borders (replaces border-gray-200/300)" },
1608
+ { token: "--success", tailwind: "bg-success / text-success", category: "color", description: "Success states" },
1609
+ { token: "--warning", tailwind: "bg-warning / text-warning", category: "color", description: "Warning states" },
1610
+ { token: "--info", tailwind: "bg-info / text-info", category: "color", description: "Info states" },
1611
+ { token: "--sidebar", tailwind: "bg-sidebar", category: "color", description: "Sidebar background" },
1612
+ { token: "--sidebar-primary", tailwind: "text-sidebar-primary", category: "color", description: "Sidebar active item" },
1613
+ // Density
1614
+ { token: "--density-page", tailwind: "p-page", category: "density", description: "Page content padding (16px)" },
1615
+ { token: "--density-section", tailwind: "gap-section / space-y-section", category: "density", description: "Section gap (16px)" },
1616
+ { token: "--density-page-title", tailwind: "text-page-title", category: "density", description: "Page title size (20px)" },
1617
+ { token: "--density-element", tailwind: "h-element", category: "density", description: "Standard element height (32px)" },
1618
+ { token: "--density-element-sm", tailwind: "h-element-sm", category: "density", description: "Small element height (28px)" },
1619
+ { token: "--density-element-lg", tailwind: "h-element-lg", category: "density", description: "Large element height (36px)" },
1620
+ { token: "--density-element-xl", tailwind: "h-element-xl", category: "density", description: "Extra large element height (44px)" },
1621
+ { token: "--density-card", tailwind: "p-card / px-card / pt-card", category: "density", description: "Card internal padding (16px)" },
1622
+ { token: "--density-dialog", tailwind: "p-dialog", category: "density", description: "Dialog internal padding (20px)" },
1623
+ { token: "--density-table-head", tailwind: "h-table-head", category: "density", description: "Table header row height (32px)" },
1624
+ // Layout
1625
+ { token: "--header-height", tailwind: "h-header", category: "layout", description: "Header height (48px)" },
1626
+ { token: "--sidebar-width", tailwind: "w-64", category: "layout", description: "Sidebar width (256px)" },
1627
+ { token: "--radius", tailwind: "rounded-lg", category: "border", description: "Default border radius (6px)" }
1628
+ ];
1629
+ var COMPONENT_REGISTRY = {
1630
+ button: {
1631
+ name: "Button",
1632
+ package: "@omnifyjp/ui-components",
1633
+ category: "action",
1634
+ description: "Standard button with variant \xD7 color \xD7 size API",
1635
+ 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',
1636
+ example: '<Button variant="soft" color="success" size="sm"><Check className="w-4 h-4" /> Approve</Button>'
1637
+ },
1638
+ badge: {
1639
+ name: "Badge",
1640
+ package: "@omnifyjp/ui-components",
1641
+ category: "display",
1642
+ description: "Status/label badge. Max 2 characters for icon badges.",
1643
+ props: 'variant?: "default"|"secondary"|"outline"|"soft", color?: UIColor',
1644
+ example: '<Badge variant="soft" color="warning">Pending</Badge>'
1645
+ },
1646
+ alert: {
1647
+ name: "Alert",
1648
+ package: "@omnifyjp/ui-components",
1649
+ category: "feedback",
1650
+ description: "Alert banner with icon support",
1651
+ props: 'variant?: "default"|"soft"|"outline", color?: UIColor',
1652
+ example: '<Alert variant="soft" color="info"><AlertTitle>Tip</AlertTitle><AlertDescription>Use keyboard shortcuts</AlertDescription></Alert>'
1653
+ },
1654
+ input: {
1655
+ name: "Input",
1656
+ package: "@omnifyjp/ui-components",
1657
+ category: "form",
1658
+ description: "Text input field",
1659
+ props: "size?: UISize, type?: string, placeholder?: string, disabled?: boolean",
1660
+ example: '<Input size="default" placeholder="Enter text..." />'
1661
+ },
1662
+ "password-input": {
1663
+ name: "PasswordInput",
1664
+ package: "@omnifyjp/ui-components",
1665
+ category: "form",
1666
+ description: "Password input with show/hide toggle",
1667
+ props: "size?: UISize, placeholder?: string, disabled?: boolean",
1668
+ example: '<PasswordInput size="xl" placeholder="Enter password" />'
1669
+ },
1670
+ select: {
1671
+ name: "Select",
1672
+ package: "@omnifyjp/ui-components",
1673
+ category: "form",
1674
+ description: 'Dropdown select. NEVER use empty string as SelectItem value \u2014 Radix crashes. Use value="none" and map to null.',
1675
+ props: "value?: string, onValueChange?: (value: string) => void",
1676
+ example: '<Select value={value} onValueChange={setValue}><SelectTrigger><SelectValue placeholder="Choose..." /></SelectTrigger><SelectContent><SelectItem value="a">Option A</SelectItem></SelectContent></Select>'
1677
+ },
1678
+ dialog: {
1679
+ name: "Dialog",
1680
+ package: "@omnifyjp/ui-components",
1681
+ category: "overlay",
1682
+ description: "Modal dialog. Use p-dialog for body padding.",
1683
+ props: "open?: boolean, onOpenChange?: (open: boolean) => void",
1684
+ 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>'
1685
+ },
1686
+ card: {
1687
+ name: "Card",
1688
+ package: "@omnifyjp/ui-components",
1689
+ category: "display",
1690
+ description: "Card container. Use px-card/pt-card for padding.",
1691
+ props: "className?: string",
1692
+ example: '<Card><CardHeader className="px-card pt-card"><CardTitle>Title</CardTitle></CardHeader><CardContent className="px-card pb-card">Content</CardContent></Card>'
1693
+ },
1694
+ table: {
1695
+ name: "Table",
1696
+ package: "@omnifyjp/ui-components",
1697
+ category: "display",
1698
+ description: "Data table. Use h-table-head for header row height.",
1699
+ props: "className?: string",
1700
+ example: '<Table><TableHeader><TableRow className="h-table-head"><TableHead>Name</TableHead></TableRow></TableHeader><TableBody><TableRow>...</TableRow></TableBody></Table>'
1701
+ },
1702
+ drawer: {
1703
+ name: "Drawer",
1704
+ package: "@omnifyjp/ui-components",
1705
+ category: "overlay",
1706
+ description: "Bottom drawer (vaul). Content MUST be wrapped in DrawerBody.",
1707
+ props: "open?: boolean, onOpenChange?: (open: boolean) => void",
1708
+ example: "<Drawer open={open} onOpenChange={setOpen}><DrawerContent><DrawerHeader><DrawerTitle>Title</DrawerTitle></DrawerHeader><DrawerBody>Content here</DrawerBody></DrawerContent></Drawer>"
1709
+ },
1710
+ tabs: {
1711
+ name: "Tabs",
1712
+ package: "@omnifyjp/ui-components",
1713
+ category: "navigation",
1714
+ description: "Tab navigation",
1715
+ props: "value?: string, onValueChange?: (value: string) => void, defaultValue?: string",
1716
+ example: '<Tabs value={tab} onValueChange={setTab}><TabsList><TabsTrigger value="a">Tab A</TabsTrigger></TabsList><TabsContent value="a">Content A</TabsContent></Tabs>'
1717
+ },
1718
+ "permission-grid": {
1719
+ name: "PermissionGrid",
1720
+ package: "@omnifyjp/ui-components",
1721
+ category: "domain",
1722
+ description: "Permission matrix grid. Uses module:action ID format via buildPermissionId().",
1723
+ props: "modules: Module[], actions: Action[], permissions: Record<string, boolean>, onChange: (id: string, checked: boolean) => void, labels?: { ... }",
1724
+ example: "<PermissionGrid modules={modules} actions={actions} permissions={perms} onChange={handleChange} />"
1725
+ },
1726
+ "scope-tree": {
1727
+ name: "ScopeTree",
1728
+ package: "@omnifyjp/ui-components",
1729
+ category: "domain",
1730
+ description: "Hierarchical scope tree. Note: ScopeTreeSelectedScope.type is string (generic), cast to ScopeType in consumers.",
1731
+ props: "scopes: ScopeNode[], selectedScope?: SelectedScope, onSelectScope?: (scope: SelectedScope) => void, labels?: { ... }",
1732
+ example: "<ScopeTree scopes={scopes} selectedScope={selected} onSelectScope={setSelected} />"
1733
+ },
1734
+ "rich-text-editor": {
1735
+ name: "RichTextEditor",
1736
+ package: "@omnifyjp/editor",
1737
+ category: "editor",
1738
+ description: 'Tiptap-based rich text editor. Requires CSS: import "@omnifyjp/editor/styles/rich-text-editor.css"',
1739
+ props: "content?: string, onChange?: (html: string) => void, placeholder?: string",
1740
+ example: 'import { RichTextEditor } from "@omnifyjp/editor";\nimport "@omnifyjp/editor/styles/rich-text-editor.css";\n\n<RichTextEditor content={html} onChange={setHtml} />'
1741
+ }
1742
+ };
1743
+ function registerValidateTools(server2) {
1744
+ server2.tool(
1745
+ "validate_component",
1746
+ "Validate React component code against @omnifyjp design system rules. Checks for hardcoded colors, wrong spacing tokens, layout anti-patterns, and other violations.",
1747
+ { code: z.string().describe("React component source code to validate") },
1748
+ async ({ code }) => {
1749
+ const violations = [];
1750
+ const lines = code.split("\n");
1751
+ for (let i = 0; i < lines.length; i++) {
1752
+ const line = lines[i];
1753
+ for (const rule of VIOLATION_RULES) {
1754
+ if (rule.pattern.test(line)) {
1755
+ violations.push({
1756
+ line: i + 1,
1757
+ message: rule.message,
1758
+ suggestion: rule.suggestion,
1759
+ category: rule.category
1760
+ });
1761
+ }
1762
+ }
1763
+ }
1764
+ if (violations.length === 0) {
1765
+ return {
1766
+ content: [{
1767
+ type: "text",
1768
+ text: "No design system violations found. The code follows @omnifyjp conventions."
1769
+ }]
1770
+ };
1771
+ }
1772
+ const grouped = {
1773
+ color: violations.filter((v) => v.category === "color"),
1774
+ density: violations.filter((v) => v.category === "density"),
1775
+ layout: violations.filter((v) => v.category === "layout"),
1776
+ pattern: violations.filter((v) => v.category === "pattern")
1777
+ };
1778
+ let output = `Found ${violations.length} design system violation(s):
1779
+
1780
+ `;
1781
+ for (const [category, items] of Object.entries(grouped)) {
1782
+ if (items.length === 0) continue;
1783
+ output += `### ${category.charAt(0).toUpperCase() + category.slice(1)} Issues
1784
+ `;
1785
+ for (const v of items) {
1786
+ output += `- **Line ${v.line}**: ${v.message} \u2192 ${v.suggestion}
1787
+ `;
1788
+ }
1789
+ output += "\n";
1790
+ }
1791
+ return {
1792
+ content: [{ type: "text", text: output }]
1793
+ };
1794
+ }
1795
+ );
1796
+ server2.tool(
1797
+ "suggest_token",
1798
+ '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.',
1799
+ { need: z.string().describe('Description of what design token is needed (e.g., "subdued text color", "page padding", "button height")') },
1800
+ async ({ need }) => {
1801
+ const query = need.toLowerCase();
1802
+ const matches = TOKEN_DB.filter(
1803
+ (t) => t.description.toLowerCase().includes(query) || t.category.includes(query) || t.token.includes(query) || t.tailwind.toLowerCase().includes(query)
1804
+ );
1805
+ const keywordMatches = [];
1806
+ if (matches.length === 0) {
1807
+ const keywords = query.split(/\s+/);
1808
+ for (const token of TOKEN_DB) {
1809
+ const searchText = `${token.description} ${token.token} ${token.tailwind} ${token.category}`.toLowerCase();
1810
+ if (keywords.some((k) => searchText.includes(k))) {
1811
+ keywordMatches.push(token);
1812
+ }
1813
+ }
1814
+ }
1815
+ const results = matches.length > 0 ? matches : keywordMatches;
1816
+ if (results.length === 0) {
1817
+ return {
1818
+ content: [{
1819
+ type: "text",
1820
+ text: `No matching token found for "${need}". Check design://tokens resource for the full token reference.`
1821
+ }]
1822
+ };
1823
+ }
1824
+ let output = `Recommended token(s) for "${need}":
1825
+
1826
+ `;
1827
+ for (const t of results) {
1828
+ output += `- **${t.tailwind}** (CSS: \`${t.token}\`) \u2014 ${t.description}
1829
+ `;
1830
+ }
1831
+ return {
1832
+ content: [{ type: "text", text: output }]
1833
+ };
1834
+ }
1835
+ );
1836
+ server2.tool(
1837
+ "get_component_api",
1838
+ "Get the API reference for a specific @omnifyjp component \u2014 props, variants, sizes, and usage example.",
1839
+ { component: z.string().describe('Component name (e.g., "Button", "Badge", "Dialog", "PermissionGrid")') },
1840
+ async ({ component }) => {
1841
+ const key = component.toLowerCase().replace(/\s+/g, "-");
1842
+ const info = COMPONENT_REGISTRY[key];
1843
+ if (!info) {
1844
+ const keys = Object.keys(COMPONENT_REGISTRY);
1845
+ const fuzzy = keys.filter((k) => k.includes(key) || key.includes(k));
1846
+ if (fuzzy.length > 0) {
1847
+ const match = COMPONENT_REGISTRY[fuzzy[0]];
1848
+ return {
1849
+ content: [{
1850
+ type: "text",
1851
+ text: formatComponentInfo(match)
1852
+ }]
1853
+ };
1854
+ }
1855
+ return {
1856
+ content: [{
1857
+ type: "text",
1858
+ text: `Component "${component}" not found. Available: ${keys.map((k) => COMPONENT_REGISTRY[k].name).join(", ")}. Check design://components for the full inventory.`
1859
+ }]
1860
+ };
1861
+ }
1862
+ return {
1863
+ content: [{
1864
+ type: "text",
1865
+ text: formatComponentInfo(info)
1866
+ }]
1867
+ };
1868
+ }
1869
+ );
1870
+ }
1871
+ function formatComponentInfo(info) {
1872
+ return `## ${info.name}
1873
+
1874
+ **Package**: \`${info.package}\`
1875
+ **Category**: ${info.category}
1876
+
1877
+ ${info.description}
1878
+
1879
+ ### Props
1880
+ ${info.props}
1881
+
1882
+ ### Example
1883
+ \`\`\`tsx
1884
+ ${info.example}
1885
+ \`\`\``;
1886
+ }
1887
+
1888
+ // src/prompts.ts
1889
+ import { z as z2 } from "zod";
1890
+ function registerPrompts(server2) {
1891
+ server2.registerPrompt("create-page", {
1892
+ title: "Create Page",
1893
+ description: "Create a new page component following @omnifyjp design patterns (list, detail, dashboard, settings, kanban, overview)",
1894
+ argsSchema: {
1895
+ name: z2.string().describe('Page component name in PascalCase (e.g., "UserList", "OrderDetail")'),
1896
+ type: z2.enum(["list-card", "list-table", "detail", "dashboard", "settings", "kanban", "overview"]).describe("Page type: list-card (card grid), list-table (data table), detail (entity detail), dashboard (stat cards + content), settings (tabs + forms), kanban (board columns), overview (module index)")
1897
+ }
1898
+ }, async ({ name, type }) => {
1899
+ const patterns = {
1900
+ "list-card": LIST_CARD_PROMPT,
1901
+ "list-table": LIST_TABLE_PROMPT,
1902
+ "detail": DETAIL_PROMPT,
1903
+ "dashboard": DASHBOARD_PROMPT,
1904
+ "settings": SETTINGS_PROMPT,
1905
+ "kanban": KANBAN_PROMPT,
1906
+ "overview": OVERVIEW_PROMPT
1907
+ };
1908
+ return {
1909
+ messages: [{
1910
+ role: "user",
1911
+ content: {
1912
+ type: "text",
1913
+ text: `Create a page component called \`${name}\` using the **${type}** pattern.
1914
+
1915
+ ## Required Structure
1916
+
1917
+ ${patterns[type]}
1918
+
1919
+ ## Rules (MUST follow)
1920
+
1921
+ 1. Use \`p-page\` for page padding (NOT \`p-6\` or \`p-8\`)
1922
+ 2. Use \`text-page-title font-semibold\` for page title (NOT \`text-3xl font-bold\`)
1923
+ 3. Use \`gap-section\` or \`space-y-section\` for section gaps (NOT \`gap-6\`)
1924
+ 4. Use semantic colors: \`bg-background\`, \`text-foreground\`, \`text-muted-foreground\`, \`border-border\`, \`bg-primary\`, \`text-primary\`, \`bg-muted\`, \`hover:bg-accent\`
1925
+ 5. NEVER hardcode colors: no \`bg-white\`, \`text-gray-500\`, \`border-gray-200\`, \`text-blue-600\`
1926
+ 6. Icons from \`lucide-react\` only, sized \`w-4 h-4\` (standard) or \`w-5 h-5\` (header)
1927
+ 7. Import order: React \u2192 router \u2192 types \u2192 data \u2192 UI components \u2192 icons \u2192 sonner
1928
+ 8. Every interactive element needs: \`hover:bg-accent transition-colors\` or equivalent
1929
+ 9. Row actions: \`<Button variant="ghost" size="sm" className="h-8 w-8 p-0">\`
1930
+ 10. Destructive actions: \`text-destructive hover:text-destructive\`
1931
+ 11. Links: \`text-primary hover:text-primary/80\` or \`hover:text-primary transition-colors\`
1932
+ 12. Badge variant for status: use \`variant="outline"\` or \`variant="soft"\` with \`color\` prop
1933
+
1934
+ Read the \`design://patterns\` resource for full pattern details before generating code.`
1935
+ }
1936
+ }]
1937
+ };
1938
+ });
1939
+ server2.registerPrompt("check-design", {
1940
+ title: "Check Design",
1941
+ description: "Audit current codebase for @omnifyjp design system violations \u2014 hardcoded colors, wrong spacing, layout anti-patterns"
1942
+ }, async () => ({
1943
+ messages: [{
1944
+ role: "user",
1945
+ content: {
1946
+ type: "text",
1947
+ text: `Audit the current project for @omnifyjp design system violations.
1948
+
1949
+ ## What to Check
1950
+
1951
+ ### 1. Hardcoded Colors (CRITICAL)
1952
+ Search all \`.tsx\` and \`.ts\` files for these patterns:
1953
+ - \`bg-white\` \u2192 should be \`bg-background\` or \`bg-card\`
1954
+ - \`bg-gray-50\`, \`bg-gray-100\` \u2192 should be \`bg-muted\`
1955
+ - \`text-gray-900\`, \`text-gray-700\` \u2192 should be \`text-foreground\`
1956
+ - \`text-gray-600\`, \`text-gray-500\`, \`text-gray-400\` \u2192 should be \`text-muted-foreground\`
1957
+ - \`border-gray-*\` \u2192 should be \`border-border\`
1958
+ - \`text-blue-600\`, \`bg-blue-50\` \u2192 should be \`text-primary\`, \`bg-primary/10\`
1959
+ - \`hover:bg-gray-*\` \u2192 should be \`hover:bg-accent\`
1960
+ - \`focus:ring-blue-*\` \u2192 should be \`focus:ring-ring\`
1961
+
1962
+ **Exception**: Multi-color status badge maps where each status is a DIFFERENT color (e.g., active=green, pending=blue, rejected=red) \u2014 these are intentionally hardcoded.
1963
+
1964
+ ### 2. Hardcoded Spacing
1965
+ - \`p-6\`, \`p-8\` \u2192 should be \`p-page\`
1966
+ - \`gap-6\`, \`space-y-6\` \u2192 should be \`gap-section\` / \`space-y-section\`
1967
+ - \`h-9\`, \`h-10\` \u2192 should be \`h-element\` / \`h-element-lg\`
1968
+ - \`h-14\` \u2192 should be \`h-header\`
1969
+ - \`px-6\` in cards \u2192 should be \`px-card\`
1970
+ - \`p-6\` in dialogs \u2192 should be \`p-dialog\`
1971
+
1972
+ ### 3. Layout Anti-Patterns
1973
+ - \`h-screen\` on page components \u2192 remove (root handles it)
1974
+ - \`text-3xl font-bold\` \u2192 should be \`text-page-title font-semibold\`
1975
+ - \`hsl(var(--token))\` \u2192 should be \`var(--token)\` directly
1976
+
1977
+ ### 4. Page Structure
1978
+ - Pages must use \`p-page\` wrapper or \`StandardPageContainer\`
1979
+ - Page title must be \`text-page-title font-semibold\`
1980
+ - Section gaps must be \`gap-section\` or \`space-y-section\`
1981
+
1982
+ ## How to Report
1983
+ For each violation found, report:
1984
+ - File path and line number
1985
+ - Current code (wrong)
1986
+ - Suggested fix (right)
1987
+ - Category (color / density / layout / pattern)
1988
+
1989
+ Use the \`validate_component\` tool to check individual components.
1990
+ Use the \`design://rules\` resource for the full WRONG\u2192RIGHT cheat sheet.`
1991
+ }
1992
+ }]
1993
+ }));
1994
+ server2.registerPrompt("fix-colors", {
1995
+ title: "Fix Hardcoded Colors",
1996
+ description: "Find and fix all hardcoded Tailwind colors in the codebase, replacing with @omnifyjp semantic tokens"
1997
+ }, async () => ({
1998
+ messages: [{
1999
+ role: "user",
2000
+ content: {
2001
+ type: "text",
2002
+ text: `Find and fix ALL hardcoded Tailwind colors in the current project's \`.tsx\` and \`.ts\` files.
2003
+
2004
+ ## Replacement Map
2005
+
2006
+ | Find (regex) | Replace with |
2007
+ |---|---|
2008
+ | \`bg-white\` | \`bg-background\` or \`bg-card\` |
2009
+ | \`bg-gray-50\`, \`bg-gray-100\` | \`bg-muted\` |
2010
+ | \`hover:bg-gray-50\`, \`hover:bg-gray-100\` | \`hover:bg-accent\` |
2011
+ | \`text-gray-900\`, \`text-gray-800\`, \`text-gray-700\` | \`text-foreground\` |
2012
+ | \`text-gray-600\`, \`text-gray-500\` | \`text-muted-foreground\` |
2013
+ | \`text-gray-400\`, \`text-gray-300\` | \`text-muted-foreground\` |
2014
+ | \`border-gray-200\`, \`border-gray-300\` | \`border-border\` |
2015
+ | \`text-blue-600\`, \`text-blue-500\` | \`text-primary\` |
2016
+ | \`bg-blue-600\`, \`bg-blue-500\` | \`bg-primary\` |
2017
+ | \`bg-blue-50\` (active state) | \`bg-primary/10\` |
2018
+ | \`bg-blue-50 text-blue-600\` (sidebar active) | \`bg-sidebar-primary/10 text-sidebar-primary\` |
2019
+ | \`hover:text-blue-600\`, \`hover:text-blue-700\` | \`hover:text-primary\` |
2020
+ | \`hover:bg-blue-700\` | \`hover:bg-primary/90\` |
2021
+ | \`bg-red-600\`, \`bg-red-500\` | \`bg-destructive\` |
2022
+ | \`text-red-600\`, \`text-red-500\` | \`text-destructive\` |
2023
+ | \`bg-red-50\` | \`bg-destructive/10\` |
2024
+ | \`bg-green-600\`, \`bg-green-500\` | \`bg-success\` |
2025
+ | \`text-green-600\`, \`text-green-500\` | \`text-success\` |
2026
+ | \`focus:ring-blue-*\` | \`focus:ring-ring\` |
2027
+ | \`focus-visible:ring-blue-*\` | \`focus-visible:ring-ring\` |
2028
+
2029
+ ## Dark mode pattern
2030
+ When removing dark: variants like \`dark:bg-blue-500/15 dark:text-blue-400\`, the semantic tokens handle dark mode automatically \u2014 just remove them:
2031
+ - \`bg-blue-50 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400\` \u2192 \`bg-primary/10 text-primary\`
2032
+
2033
+ ## EXCEPTIONS \u2014 Do NOT change:
2034
+ 1. **Multi-color status badge maps** where each status is a DIFFERENT color:
2035
+ \`\`\`tsx
2036
+ const statusColors = {
2037
+ active: 'bg-green-50 text-green-600 ...',
2038
+ pending: 'bg-blue-50 text-blue-600 ...',
2039
+ rejected: 'bg-red-50 text-red-600 ...',
2040
+ };
2041
+ \`\`\`
2042
+ 2. **Intentionally dark sections** (chat sidebar with \`bg-gray-900\`)
2043
+ 3. **Code block styling** (\`bg-slate-900\`)
2044
+ 4. **\`text-white\` on dynamically colored backgrounds** (\`style={{ backgroundColor: item.color }}\`)
2045
+ 5. **Chart hex colors** (recharts requires hex)
2046
+ 6. **Gradient decorations** (\`from-blue-500 to-purple-600\` for visual flair)
2047
+
2048
+ ## Process
2049
+ 1. Search for hardcoded color patterns using grep/ripgrep
2050
+ 2. For each file, read it and identify which matches are violations vs exceptions
2051
+ 3. Fix violations with the replacement map above
2052
+ 4. Run \`validate_component\` on modified files to verify
2053
+ 5. Report summary: files changed, violations fixed, exceptions kept`
2054
+ }
2055
+ }]
2056
+ }));
2057
+ server2.registerPrompt("create-component", {
2058
+ title: "Create Component",
2059
+ description: "Create a new UI component following @omnifyjp conventions (cn(), forwardRef, cva variants, kebab-case filename)",
2060
+ argsSchema: {
2061
+ name: z2.string().describe('Component name in PascalCase (e.g., "StatusCard", "UserAvatar")')
2062
+ }
2063
+ }, async ({ name }) => ({
2064
+ messages: [{
2065
+ role: "user",
2066
+ content: {
2067
+ type: "text",
2068
+ text: `Create a new UI component called \`${name}\`.
2069
+
2070
+ ## File Convention
2071
+ - Filename: \`${toKebabCase(name)}.tsx\`
2072
+ - Export: named export \`${name}\`
2073
+
2074
+ ## Template
2075
+
2076
+ \`\`\`tsx
2077
+ import { type HTMLAttributes, forwardRef } from 'react';
2078
+ import { cva, type VariantProps } from 'class-variance-authority';
2079
+ import { cn } from '@omnifyjp/ui-components';
2080
+
2081
+ const ${toCamelCase(name)}Variants = cva(
2082
+ // Base styles
2083
+ 'inline-flex items-center rounded-md transition-colors',
2084
+ {
2085
+ variants: {
2086
+ variant: {
2087
+ default: 'bg-primary text-primary-foreground',
2088
+ secondary: 'bg-secondary text-secondary-foreground',
2089
+ outline: 'border border-border bg-background',
2090
+ },
2091
+ size: {
2092
+ sm: 'h-element-sm px-3 text-sm',
2093
+ default: 'h-element px-4 text-sm',
2094
+ lg: 'h-element-lg px-6',
2095
+ },
2096
+ },
2097
+ defaultVariants: {
2098
+ variant: 'default',
2099
+ size: 'default',
2100
+ },
2101
+ },
2102
+ );
2103
+
2104
+ interface ${name}Props
2105
+ extends HTMLAttributes<HTMLDivElement>,
2106
+ VariantProps<typeof ${toCamelCase(name)}Variants> {
2107
+ // Add custom props here
2108
+ }
2109
+
2110
+ const ${name} = forwardRef<HTMLDivElement, ${name}Props>(
2111
+ ({ className, variant, size, ...props }, ref) => (
2112
+ <div
2113
+ ref={ref}
2114
+ className={cn(${toCamelCase(name)}Variants({ variant, size }), className)}
2115
+ {...props}
2116
+ />
2117
+ ),
2118
+ );
2119
+ ${name}.displayName = '${name}';
2120
+
2121
+ export { ${name} };
2122
+ export type { ${name}Props };
2123
+ \`\`\`
2124
+
2125
+ ## Rules
2126
+ 1. Use \`cn()\` from \`@omnifyjp/ui\` for class merging
2127
+ 2. Use \`forwardRef\` for DOM element refs
2128
+ 3. Use \`cva()\` for variant definitions
2129
+ 4. Use semantic tokens only \u2014 no hardcoded colors
2130
+ 5. Heights: \`h-element-sm\`, \`h-element\`, \`h-element-lg\` (not \`h-8\`, \`h-9\`, \`h-10\`)
2131
+ 6. Export both component and its Props type
2132
+ 7. Set \`displayName\` for DevTools`
2133
+ }
2134
+ }]
2135
+ }));
2136
+ server2.registerPrompt("create-dialog", {
2137
+ title: "Create Dialog",
2138
+ description: "Create a dialog/modal component following @omnifyjp patterns (Dialog, DialogContent, form, actions)",
2139
+ argsSchema: {
2140
+ name: z2.string().describe('Dialog component name in PascalCase (e.g., "CreateUserDialog", "ConfirmDeleteDialog")')
2141
+ }
2142
+ }, async ({ name }) => ({
2143
+ messages: [{
2144
+ role: "user",
2145
+ content: {
2146
+ type: "text",
2147
+ text: `Create a dialog component called \`${name}\`.
2148
+
2149
+ ## Template
2150
+
2151
+ \`\`\`tsx
2152
+ import { useState } from 'react';
2153
+ import {
2154
+ Dialog, DialogContent, DialogHeader, DialogTitle,
2155
+ DialogDescription, DialogFooter,
2156
+ } from '@omnifyjp/ui-components/components/dialog';
2157
+ import { Button } from '@omnifyjp/ui-components/components/button';
2158
+ import { Input } from '@omnifyjp/ui-components/components/input';
2159
+ import { Label } from '@omnifyjp/ui-components/components/label';
2160
+ import { toast } from 'sonner';
2161
+
2162
+ interface ${name}Props {
2163
+ open: boolean;
2164
+ onOpenChange: (open: boolean) => void;
2165
+ }
2166
+
2167
+ export function ${name}({ open, onOpenChange }: ${name}Props) {
2168
+ const [loading, setLoading] = useState(false);
2169
+
2170
+ const handleSubmit = async () => {
2171
+ setLoading(true);
2172
+ try {
2173
+ // TODO: implement
2174
+ toast.success('Created successfully');
2175
+ onOpenChange(false);
2176
+ } catch {
2177
+ toast.error('Something went wrong');
2178
+ } finally {
2179
+ setLoading(false);
2180
+ }
2181
+ };
2182
+
2183
+ return (
2184
+ <Dialog open={open} onOpenChange={onOpenChange}>
2185
+ <DialogContent>
2186
+ <DialogHeader>
2187
+ <DialogTitle>Dialog Title</DialogTitle>
2188
+ <DialogDescription>Optional description</DialogDescription>
2189
+ </DialogHeader>
2190
+ <div className="p-dialog space-y-4">
2191
+ <div className="space-y-2">
2192
+ <Label htmlFor="field">Field Label</Label>
2193
+ <Input id="field" placeholder="Enter value..." />
2194
+ </div>
2195
+ </div>
2196
+ <DialogFooter>
2197
+ <Button variant="outline" onClick={() => onOpenChange(false)}>
2198
+ Cancel
2199
+ </Button>
2200
+ <Button onClick={handleSubmit} disabled={loading}>
2201
+ {loading ? 'Creating...' : 'Create'}
2202
+ </Button>
2203
+ </DialogFooter>
2204
+ </DialogContent>
2205
+ </Dialog>
2206
+ );
2207
+ }
2208
+ \`\`\`
2209
+
2210
+ ## Rules
2211
+ 1. Props: \`{ open: boolean; onOpenChange: (open: boolean) => void }\`
2212
+ 2. Dialog body padding: \`p-dialog\` (NOT \`p-6\`)
2213
+ 3. Form fields: \`space-y-2\` wrapping \`Label\` + \`Input\`
2214
+ 4. Form sections: \`space-y-4\` between fields
2215
+ 5. Footer: Cancel (outline) left, Submit (primary) right
2216
+ 6. Toast: \`toast.success()\` / \`toast.error()\` from sonner
2217
+ 7. Loading state on submit button`
2218
+ }
2219
+ }]
2220
+ }));
2221
+ }
2222
+ function toKebabCase(str) {
2223
+ return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
2224
+ }
2225
+ function toCamelCase(str) {
2226
+ return str.charAt(0).toLowerCase() + str.slice(1);
2227
+ }
2228
+ var LIST_CARD_PROMPT = `
2229
+ \`\`\`tsx
2230
+ <div className="p-page space-y-section">
2231
+ <div className="flex items-center justify-between">
2232
+ <div>
2233
+ <h1 className="text-page-title font-semibold mb-2">Title</h1>
2234
+ <p className="text-sm text-muted-foreground">Description</p>
2235
+ </div>
2236
+ <Button><Plus className="w-4 h-4" /> Create</Button>
2237
+ </div>
2238
+
2239
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-section">
2240
+ {items.map((item) => (
2241
+ <Card className="hover:shadow-lg transition-shadow">
2242
+ <CardHeader>
2243
+ <div className="flex items-start justify-between mb-3">
2244
+ <div className="w-12 h-12 rounded-lg ..." />
2245
+ <Badge variant="secondary">{item.count}</Badge>
2246
+ </div>
2247
+ <CardTitle>
2248
+ <Link className="hover:text-primary transition-colors">{item.name}</Link>
2249
+ </CardTitle>
2250
+ <CardDescription className="line-clamp-2">{item.desc}</CardDescription>
2251
+ </CardHeader>
2252
+ <CardContent className="space-y-4">
2253
+ {/* Progress, stats, avatars, meta, action footer */}
2254
+ </CardContent>
2255
+ </Card>
2256
+ ))}
2257
+ </div>
2258
+ </div>
2259
+ \`\`\``;
2260
+ var LIST_TABLE_PROMPT = `
2261
+ \`\`\`tsx
2262
+ <div className="p-page">
2263
+ <div className="flex items-center justify-between mb-section">
2264
+ <div>
2265
+ <h1 className="text-page-title font-semibold mb-2">Title</h1>
2266
+ <p className="text-sm text-muted-foreground">Description</p>
2267
+ </div>
2268
+ <div className="flex items-center gap-3">
2269
+ <Button variant="outline" size="sm"><Filter className="w-4 h-4" /> Filter</Button>
2270
+ <Button><Plus className="w-4 h-4" /> Create</Button>
2271
+ </div>
2272
+ </div>
2273
+
2274
+ <div className="bg-card rounded-lg border">
2275
+ {/* Search bar */}
2276
+ <div className="p-4 border-b">
2277
+ <div className="flex items-center gap-4">
2278
+ <div className="flex-1 relative">
2279
+ <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
2280
+ <Input placeholder="Search..." className="pl-10" />
2281
+ </div>
2282
+ <Select><SelectTrigger className="w-[180px]">...</SelectTrigger></Select>
2283
+ </div>
2284
+ </div>
2285
+ {/* Table */}
2286
+ <Table>...</Table>
2287
+ {/* Footer */}
2288
+ <div className="p-4 border-t bg-muted">
2289
+ <p className="text-sm text-muted-foreground">Showing N of M</p>
2290
+ </div>
2291
+ </div>
2292
+ </div>
2293
+ \`\`\``;
2294
+ var DETAIL_PROMPT = `
2295
+ \`\`\`tsx
2296
+ <div className="p-page space-y-section">
2297
+ {/* Back + header */}
2298
+ <div className="flex items-center gap-4">
2299
+ <Link to="..">
2300
+ <Button variant="ghost" size="icon"><ArrowLeft className="w-5 h-5" /></Button>
2301
+ </Link>
2302
+ <div className="w-10 h-10 rounded-lg ..." />
2303
+ <div className="flex-1">
2304
+ <div className="flex items-center gap-2 mb-1">
2305
+ <Badge variant="outline">ID</Badge>
2306
+ <Badge className={statusColor}>Status</Badge>
2307
+ </div>
2308
+ <h1 className="text-page-title font-semibold">Title</h1>
2309
+ </div>
2310
+ <Button variant="ghost" size="icon"><MoreVertical className="w-5 h-5" /></Button>
2311
+ </div>
2312
+
2313
+ {/* 2/3 + 1/3 */}
2314
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-section">
2315
+ <div className="lg:col-span-2 space-y-section">
2316
+ <Card>/* Description */</Card>
2317
+ <Card>/* Comments */</Card>
2318
+ </div>
2319
+ <div className="space-y-4">
2320
+ <Card>/* Details sidebar with field pattern */</Card>
2321
+ <Card>/* Actions */</Card>
2322
+ </div>
2323
+ </div>
2324
+ </div>
2325
+ \`\`\``;
2326
+ var DASHBOARD_PROMPT = `
2327
+ \`\`\`tsx
2328
+ <StandardPageContainer
2329
+ title="Dashboard"
2330
+ subtitle="Overview"
2331
+ contentClassName="space-y-section"
2332
+ >
2333
+ {/* Stat cards */}
2334
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-section">
2335
+ <Card>
2336
+ <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
2337
+ <CardTitle className="text-sm font-medium">Label</CardTitle>
2338
+ <Icon className="h-4 w-4 text-muted-foreground" />
2339
+ </CardHeader>
2340
+ <CardContent>
2341
+ <div className="text-2xl font-bold">Value</div>
2342
+ <p className="text-xs text-muted-foreground mt-1">Sub-text</p>
2343
+ </CardContent>
2344
+ </Card>
2345
+ </div>
2346
+
2347
+ {/* 2/3 + 1/3 content */}
2348
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-section">
2349
+ <Card className="lg:col-span-2">/* List with hover:bg-accent items */</Card>
2350
+ <Card>/* Activity sidebar */</Card>
2351
+ </div>
2352
+ </StandardPageContainer>
2353
+ \`\`\``;
2354
+ var SETTINGS_PROMPT = `
2355
+ \`\`\`tsx
2356
+ <StandardPageContainer
2357
+ title="Settings"
2358
+ subtitle="Preferences"
2359
+ contentClassName="max-w-4xl mx-auto space-y-section"
2360
+ >
2361
+ <Tabs defaultValue="profile" className="space-y-section">
2362
+ <TabsList>
2363
+ <TabsTrigger value="profile"><User className="w-4 h-4" /> Profile</TabsTrigger>
2364
+ <TabsTrigger value="notifications"><Bell className="w-4 h-4" /> Notifications</TabsTrigger>
2365
+ </TabsList>
2366
+
2367
+ <TabsContent value="profile" className="space-y-section">
2368
+ <Card>
2369
+ <CardHeader><CardTitle>Section</CardTitle></CardHeader>
2370
+ <CardContent className="space-y-6">
2371
+ <div className="grid grid-cols-2 gap-4">
2372
+ <div className="space-y-2">
2373
+ <Label>Field</Label>
2374
+ <Input />
2375
+ </div>
2376
+ </div>
2377
+ <Button>Save</Button>
2378
+ </CardContent>
2379
+ </Card>
2380
+ </TabsContent>
2381
+
2382
+ <TabsContent value="notifications" className="space-y-section">
2383
+ <Card>
2384
+ <CardContent className="space-y-4">
2385
+ {/* Toggle row */}
2386
+ <div className="flex items-center justify-between">
2387
+ <div className="space-y-0.5">
2388
+ <Label>Setting</Label>
2389
+ <p className="text-sm text-muted-foreground">Description</p>
2390
+ </div>
2391
+ <Switch />
2392
+ </div>
2393
+ <Separator />
2394
+ </CardContent>
2395
+ </Card>
2396
+ </TabsContent>
2397
+ </Tabs>
2398
+ </StandardPageContainer>
2399
+ \`\`\``;
2400
+ var KANBAN_PROMPT = `
2401
+ \`\`\`tsx
2402
+ <div className="p-page">
2403
+ <div className="flex items-center justify-between mb-section">
2404
+ <div>
2405
+ <h1 className="text-page-title font-semibold mb-2">Board</h1>
2406
+ <p className="text-sm text-muted-foreground">Description</p>
2407
+ </div>
2408
+ <div className="flex items-center gap-3">
2409
+ <Button variant="outline" size="sm"><Filter className="w-4 h-4" /> Filter</Button>
2410
+ <Button><Plus className="w-4 h-4" /> Create</Button>
2411
+ </div>
2412
+ </div>
2413
+
2414
+ <div className="flex gap-4 overflow-x-auto pb-4">
2415
+ {columns.map((col) => (
2416
+ <div className="flex-1 min-w-[280px] bg-muted rounded-lg p-3">
2417
+ <div className="flex items-center justify-between mb-3">
2418
+ <div className="flex items-center gap-2">
2419
+ <h3 className="font-semibold">{col.title}</h3>
2420
+ <Badge variant="secondary">{col.count}</Badge>
2421
+ </div>
2422
+ </div>
2423
+ <div className="space-y-2">
2424
+ {col.tasks.map((task) => (
2425
+ <Card className="p-3 hover:shadow-md transition-shadow cursor-pointer group">
2426
+ {/* task card content */}
2427
+ </Card>
2428
+ ))}
2429
+ </div>
2430
+ </div>
2431
+ ))}
2432
+ </div>
2433
+ </div>
2434
+ \`\`\``;
2435
+ var OVERVIEW_PROMPT = `
2436
+ \`\`\`tsx
2437
+ <StandardPageContainer
2438
+ title="Module Name"
2439
+ subtitle="Overview"
2440
+ extra={<Button><Plus className="w-4 h-4" /> Create</Button>}
2441
+ contentClassName="space-y-section"
2442
+ >
2443
+ {/* Stat cards with colored icons */}
2444
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-section">
2445
+ {stats.map((stat) => (
2446
+ <Card>
2447
+ <CardContent className="pt-6">
2448
+ <div className="flex items-center justify-between">
2449
+ <div>
2450
+ <p className="text-sm font-medium text-muted-foreground">{stat.label}</p>
2451
+ <p className="text-2xl font-bold mt-1">{stat.value}</p>
2452
+ </div>
2453
+ <div className={\`p-3 rounded-lg \${stat.bgColor}\`}>
2454
+ <stat.icon className={\`w-5 h-5 \${stat.iconColor}\`} />
2455
+ </div>
2456
+ </div>
2457
+ </CardContent>
2458
+ </Card>
2459
+ ))}
2460
+ </div>
2461
+
2462
+ {/* Quick list */}
2463
+ <Card>
2464
+ <CardHeader>
2465
+ <div className="flex items-center justify-between">
2466
+ <CardTitle>Recent</CardTitle>
2467
+ <Link className="text-sm text-primary hover:text-primary/80">View all</Link>
2468
+ </div>
2469
+ </CardHeader>
2470
+ <CardContent>
2471
+ <Table>...</Table>
2472
+ </CardContent>
2473
+ </Card>
2474
+ </StandardPageContainer>
2475
+ \`\`\``;
2476
+
2477
+ // src/index.ts
2478
+ var server = new McpServer({
2479
+ name: "@omnifyjp/ui-mcp",
2480
+ version: "0.1.0"
2481
+ }, {
2482
+ capabilities: {
2483
+ resources: {},
2484
+ tools: {},
2485
+ prompts: {}
2486
+ }
2487
+ });
2488
+ registerTokensResource(server);
2489
+ registerRulesResource(server);
2490
+ registerComponentsResource(server);
2491
+ registerLayoutResource(server);
2492
+ registerPatternsResource(server);
2493
+ registerValidateTools(server);
2494
+ registerPrompts(server);
2495
+ var transport = new StdioServerTransport();
2496
+ await server.connect(transport);
2497
+ //# sourceMappingURL=index.js.map