@polymorphism-tech/morph-spec 8.44.0 → 8.45.0

package/framework/templates/docs/ui-design-system.md

@@ -1,76 +1,76 @@
-# UI Design System: {{titleCase FEATURE_NAME}}
-
-| Field | Value |
-|-------|-------|
-| **Feature** | {{FEATURE_NAME}} |
-| **Created** | {{DATE}} |
-| **Project** | {{PROJECT_NAME}} |
-
----
-
-## Color Palette
-
-### Primary Colors
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--color-primary` | #0078D4 | Primary actions, links |
-| `--color-primary-hover` | #106EBE | Hover states |
-
-### Semantic Colors
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--color-success` | #107C10 | Success states |
-| `--color-warning` | #F7630C | Warnings |
-| `--color-error` | #D13438 | Errors |
-
----
-
-## Typography
-
-| Token | Size | Weight | Usage |
-|-------|------|--------|-------|
-| `--text-h1` | 24px | 600 | Section headers |
-| `--text-body` | 14px | 400 | Body text |
-| `--text-caption` | 12px | 400 | Labels |
-
----
-
-## Spacing
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--space-sm` | 8px | Compact spacing |
-| `--space-md` | 16px | Standard spacing |
-| `--space-lg` | 24px | Wide spacing |
-
----
-
-## Components
-
-### Buttons
-- **Primary**: `--color-primary` background, white text
-- **Secondary**: Transparent, `--color-primary` border
-- **Sizes**: Small (24px), Medium (32px), Large (40px)
-
-### Forms
-- **Input height**: 32px
-- **Focus**: 2px solid `--color-primary`
-- **Error**: 1px solid `--color-error`
-
----
-
-## Accessibility
-- [ ] 4.5:1 contrast ratio (WCAG AA)
-- [ ] Touch targets minimum 44x44px
-- [ ] Keyboard navigation supported
-
----
-
-## Responsive Breakpoints
-- **Mobile**: < 768px
-- **Tablet**: 768px - 1199px
-- **Desktop**: ≥ 1200px
-
----
-
-*Generated with MORPH Framework*
+# UI Design System: {{titleCase FEATURE_NAME}}
+
+| Field | Value |
+|-------|-------|
+| **Feature** | {{FEATURE_NAME}} |
+| **Created** | {{DATE}} |
+| **Project** | {{PROJECT_NAME}} |
+
+---
+
+## Color Palette
+
+### Primary Colors
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-primary` | #0078D4 | Primary actions, links |
+| `--color-primary-hover` | #106EBE | Hover states |
+
+### Semantic Colors
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-success` | #107C10 | Success states |
+| `--color-warning` | #F7630C | Warnings |
+| `--color-error` | #D13438 | Errors |
+
+---
+
+## Typography
+
+| Token | Size | Weight | Usage |
+|-------|------|--------|-------|
+| `--text-h1` | 24px | 600 | Section headers |
+| `--text-body` | 14px | 400 | Body text |
+| `--text-caption` | 12px | 400 | Labels |
+
+---
+
+## Spacing
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--space-sm` | 8px | Compact spacing |
+| `--space-md` | 16px | Standard spacing |
+| `--space-lg` | 24px | Wide spacing |
+
+---
+
+## Components
+
+### Buttons
+- **Primary**: `--color-primary` background, white text
+- **Secondary**: Transparent, `--color-primary` border
+- **Sizes**: Small (24px), Medium (32px), Large (40px)
+
+### Forms
+- **Input height**: 32px
+- **Focus**: 2px solid `--color-primary`
+- **Error**: 1px solid `--color-error`
+
+---
+
+## Accessibility
+- [ ] 4.5:1 contrast ratio (WCAG AA)
+- [ ] Touch targets minimum 44x44px
+- [ ] Keyboard navigation supported
+
+---
+
+## Responsive Breakpoints
+- **Mobile**: < 768px
+- **Tablet**: 768px - 1199px
+- **Desktop**: ≥ 1200px
+
+---
+
+*Generated with MORPH Framework*

package/framework/templates/docs/ui-flows.md

@@ -1,167 +1,167 @@
-# UI Flows: {{titleCase FEATURE_NAME}}
-
-| Field | Value |
-|-------|-------|
-| **Feature** | {{FEATURE_NAME}} |
-| **Created** | {{DATE}} |
-
----
-
-## User Stories
-
-### US001: {Primary User Story}
-
-**As** a {user type}
-**I want** to {capability}
-**So that** {benefit}
-
-**Acceptance Criteria:**
-1. {Criterion 1}
-2. {Criterion 2}
-
----
-
-## Flow Inventory
-
-| Flow ID | Name | Priority |
-|---------|------|----------|
-| **F001** | Create New Item | High |
-| **F002** | Edit Existing Item | High |
-| **F003** | Delete Item | Medium |
-
----
-
-## F001: Create New Item
-
-### Happy Path
-
-```
-START
-  ↓
-[User clicks "Add New"]
-  ↓
-[Modal opens with form]
-  ↓
-[User fills required fields]
-  ↓
-[User clicks "Submit"]
-  ↓
-[Validation passes] ✓
-  ↓
-[API call: POST /api/items]
-  ↓
-[Success response]
-  ↓
-[Modal closes]
-  ↓
-[Success toast: "Item created"]
-  ↓
-[Table refreshes]
-  ↓
-END
-```
-
-**Duration:** 15-30 seconds
-**Success Rate Target:** 95%
-
----
-
-### Alternative Path: Validation Error
-
-```
-[User clicks "Submit"]
-  ↓
-[Validation fails] ✕
-  ↓
-[Error messages shown inline]
-  ↓
-[User corrects errors]
-  ↓
-[Real-time validation clears errors]
-  ↓
-→ Returns to Happy Path
-```
-
----
-
-### Edge Cases
-
-| Scenario | Behavior |
-|----------|----------|
-| **Duplicate Name** | Show warning, allow submit |
-| **Network Error** | Show error toast, preserve data |
-| **Session Expired** | Redirect to login |
-
----
-
-## F002: Edit Existing Item
-
-```
-[User clicks "Edit"]
-  ↓
-[Modal opens with pre-filled form]
-  ↓
-[User modifies fields]
-  ↓
-[User clicks "Save"]
-  ↓
-[API call: PUT /api/items/{id}]
-  ↓
-[Success toast]
-  ↓
-[Table refreshes]
-END
-```
-
----
-
-## F003: Delete Item
-
-```
-[User clicks "Delete"]
-  ↓
-[Confirmation dialog: "Delete item?"]
-  ↓
-[User confirms]
-  ↓
-[API call: DELETE /api/items/{id}]
-  ↓
-[Success toast]
-  ↓
-[Table refreshes]
-END
-```
-
----
-
-## Toast Notifications
-
-| Event | Type | Message | Duration |
-|-------|------|---------|----------|
-| **Item Created** | Success | "Item created successfully" | 3s |
-| **Item Updated** | Success | "Item updated successfully" | 3s |
-| **Item Deleted** | Success | "Item deleted successfully" | 3s |
-| **Error** | Error | "Something went wrong" | 5s |
-
----
-
-## Keyboard Shortcuts
-
-| Shortcut | Action |
-|----------|--------|
-| **Ctrl+N** | New Item |
-| **Escape** | Close modal |
-| **Enter** | Submit form |
-
----
-
-## Performance Targets
-
-| Flow | Target |
-|------|--------|
-| **Create Item** | < 2s (API response) |
-| **Search** | < 500ms |
-
----
-
-*Generated with MORPH Framework*
+# UI Flows: {{titleCase FEATURE_NAME}}
+
+| Field | Value |
+|-------|-------|
+| **Feature** | {{FEATURE_NAME}} |
+| **Created** | {{DATE}} |
+
+---
+
+## User Stories
+
+### US001: {Primary User Story}
+
+**As** a {user type}
+**I want** to {capability}
+**So that** {benefit}
+
+**Acceptance Criteria:**
+1. {Criterion 1}
+2. {Criterion 2}
+
+---
+
+## Flow Inventory
+
+| Flow ID | Name | Priority |
+|---------|------|----------|
+| **F001** | Create New Item | High |
+| **F002** | Edit Existing Item | High |
+| **F003** | Delete Item | Medium |
+
+---
+
+## F001: Create New Item
+
+### Happy Path
+
+```
+START
+  ↓
+[User clicks "Add New"]
+  ↓
+[Modal opens with form]
+  ↓
+[User fills required fields]
+  ↓
+[User clicks "Submit"]
+  ↓
+[Validation passes] ✓
+  ↓
+[API call: POST /api/items]
+  ↓
+[Success response]
+  ↓
+[Modal closes]
+  ↓
+[Success toast: "Item created"]
+  ↓
+[Table refreshes]
+  ↓
+END
+```
+
+**Duration:** 15-30 seconds
+**Success Rate Target:** 95%
+
+---
+
+### Alternative Path: Validation Error
+
+```
+[User clicks "Submit"]
+  ↓
+[Validation fails] ✕
+  ↓
+[Error messages shown inline]
+  ↓
+[User corrects errors]
+  ↓
+[Real-time validation clears errors]
+  ↓
+→ Returns to Happy Path
+```
+
+---
+
+### Edge Cases
+
+| Scenario | Behavior |
+|----------|----------|
+| **Duplicate Name** | Show warning, allow submit |
+| **Network Error** | Show error toast, preserve data |
+| **Session Expired** | Redirect to login |
+
+---
+
+## F002: Edit Existing Item
+
+```
+[User clicks "Edit"]
+  ↓
+[Modal opens with pre-filled form]
+  ↓
+[User modifies fields]
+  ↓
+[User clicks "Save"]
+  ↓
+[API call: PUT /api/items/{id}]
+  ↓
+[Success toast]
+  ↓
+[Table refreshes]
+END
+```
+
+---
+
+## F003: Delete Item
+
+```
+[User clicks "Delete"]
+  ↓
+[Confirmation dialog: "Delete item?"]
+  ↓
+[User confirms]
+  ↓
+[API call: DELETE /api/items/{id}]
+  ↓
+[Success toast]
+  ↓
+[Table refreshes]
+END
+```
+
+---
+
+## Toast Notifications
+
+| Event | Type | Message | Duration |
+|-------|------|---------|----------|
+| **Item Created** | Success | "Item created successfully" | 3s |
+| **Item Updated** | Success | "Item updated successfully" | 3s |
+| **Item Deleted** | Success | "Item deleted successfully" | 3s |
+| **Error** | Error | "Something went wrong" | 5s |
+
+---
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| **Ctrl+N** | New Item |
+| **Escape** | Close modal |
+| **Enter** | Submit form |
+
+---
+
+## Performance Targets
+
+| Flow | Target |
+|------|--------|
+| **Create Item** | < 2s (API response) |
+| **Search** | < 500ms |
+
+---
+
+*Generated with MORPH Framework*

package/framework/templates/frontend/nextjs/client-component.tsx.hbs

@@ -1,26 +1,26 @@
-// features/{{kebabCase featureName}}/components/{{kebabCase featureName}}-list.tsx
-'use client';
-
-import { use{{pascalCase featureName}}s } from '@/features/{{kebabCase featureName}}/hooks/use-{{kebabCase featureName}}s';
-import { DataTable } from '@/components/data-table';
-import type { {{pascalCase featureName}} } from '@/features/{{kebabCase featureName}}/types/{{kebabCase featureName}}.types';
-import type { ColumnDef } from '@tanstack/react-table';
-
-const columns: ColumnDef<{{pascalCase featureName}}>[] = [
-  { accessorKey: 'id', header: 'ID' },
-  { accessorKey: 'name', header: 'Name' },
-];
-
-interface {{pascalCase featureName}}ListProps {
-  initialData?: {{pascalCase featureName}}[];
-}
-
-export function {{pascalCase featureName}}List({ initialData }: {{pascalCase featureName}}ListProps) {
-  const { data = initialData ?? [], isLoading } = use{{pascalCase featureName}}s();
-
-  if (isLoading) {
-    return <div className="flex items-center justify-center h-32">Loading...</div>;
-  }
-
-  return <DataTable columns={columns} data={data} />;
-}
+// features/{{kebabCase featureName}}/components/{{kebabCase featureName}}-list.tsx
+'use client';
+
+import { use{{pascalCase featureName}}s } from '@/features/{{kebabCase featureName}}/hooks/use-{{kebabCase featureName}}s';
+import { DataTable } from '@/components/data-table';
+import type { {{pascalCase featureName}} } from '@/features/{{kebabCase featureName}}/types/{{kebabCase featureName}}.types';
+import type { ColumnDef } from '@tanstack/react-table';
+
+const columns: ColumnDef<{{pascalCase featureName}}>[] = [
+  { accessorKey: 'id', header: 'ID' },
+  { accessorKey: 'name', header: 'Name' },
+];
+
+interface {{pascalCase featureName}}ListProps {
+  initialData?: {{pascalCase featureName}}[];
+}
+
+export function {{pascalCase featureName}}List({ initialData }: {{pascalCase featureName}}ListProps) {
+  const { data = initialData ?? [], isLoading } = use{{pascalCase featureName}}s();
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center h-32">Loading...</div>;
+  }
+
+  return <DataTable columns={columns} data={data} />;
+}

package/framework/templates/frontend/nextjs/feature-form.tsx.hbs

@@ -1,56 +1,56 @@
-// features/{{kebabCase featureName}}/components/create-{{kebabCase featureName}}-form.tsx
-'use client';
-
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { useCreate{{pascalCase featureName}} } from '@/features/{{kebabCase featureName}}/hooks/use-create-{{kebabCase featureName}}';
-import { create{{pascalCase featureName}}Schema, type Create{{pascalCase featureName}}Input } from '@/features/{{kebabCase featureName}}/types/{{kebabCase featureName}}.schemas';
-
-interface Create{{pascalCase featureName}}FormProps {
-  onSuccess?: () => void;
-}
-
-export function Create{{pascalCase featureName}}Form({ onSuccess }: Create{{pascalCase featureName}}FormProps) {
-  const form = useForm<Create{{pascalCase featureName}}Input>({
-    resolver: zodResolver(create{{pascalCase featureName}}Schema),
-    defaultValues: { name: '' },
-  });
-
-  const { mutate: create{{pascalCase featureName}}, isPending } = useCreate{{pascalCase featureName}}();
-
-  function onSubmit(values: Create{{pascalCase featureName}}Input) {
-    create{{pascalCase featureName}}(values, {
-      onSuccess: () => { form.reset(); onSuccess?.(); },
-      onError: (error) => { form.setError('root', { message: error.message }); },
-    });
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter name" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        {form.formState.errors.root && (
-          <p className="text-sm text-destructive">{form.formState.errors.root.message}</p>
-        )}
-        <Button type="submit" disabled={isPending}>
-          {isPending ? 'Creating...' : 'Create {{pascalCase featureName}}'}
-        </Button>
-      </form>
-    </Form>
-  );
-}
+// features/{{kebabCase featureName}}/components/create-{{kebabCase featureName}}-form.tsx
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useCreate{{pascalCase featureName}} } from '@/features/{{kebabCase featureName}}/hooks/use-create-{{kebabCase featureName}}';
+import { create{{pascalCase featureName}}Schema, type Create{{pascalCase featureName}}Input } from '@/features/{{kebabCase featureName}}/types/{{kebabCase featureName}}.schemas';
+
+interface Create{{pascalCase featureName}}FormProps {
+  onSuccess?: () => void;
+}
+
+export function Create{{pascalCase featureName}}Form({ onSuccess }: Create{{pascalCase featureName}}FormProps) {
+  const form = useForm<Create{{pascalCase featureName}}Input>({
+    resolver: zodResolver(create{{pascalCase featureName}}Schema),
+    defaultValues: { name: '' },
+  });
+
+  const { mutate: create{{pascalCase featureName}}, isPending } = useCreate{{pascalCase featureName}}();
+
+  function onSubmit(values: Create{{pascalCase featureName}}Input) {
+    create{{pascalCase featureName}}(values, {
+      onSuccess: () => { form.reset(); onSuccess?.(); },
+      onError: (error) => { form.setError('root', { message: error.message }); },
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {form.formState.errors.root && (
+          <p className="text-sm text-destructive">{form.formState.errors.root.message}</p>
+        )}
+        <Button type="submit" disabled={isPending}>
+          {isPending ? 'Creating...' : 'Create {{pascalCase featureName}}'}
+        </Button>
+      </form>
+    </Form>
+  );
+}