@polymorphism-tech/morph-spec 7.9.0 → 7.9.1

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 (167) hide show
  1. package/README.md +2 -2
  2. package/bin/validate.js +379 -379
  3. package/claude-plugin.json +1 -1
  4. package/docs/CHEATSHEET.md +5 -1
  5. package/docs/QUICKSTART.md +1 -1
  6. package/framework/commands/commit.md +166 -166
  7. package/framework/commands/morph-infra.md +215 -215
  8. package/framework/commands/morph-preflight.md +205 -205
  9. package/framework/commands/morph-troubleshoot.md +124 -124
  10. package/framework/hooks/claude-code/statusline.py +679 -679
  11. package/framework/hooks/claude-code/statusline.sh +11 -11
  12. package/framework/hooks/git/commit-msg/conventional-commits.sh +33 -33
  13. package/framework/hooks/git/pre-commit/agents.sh +25 -25
  14. package/framework/hooks/git/pre-commit/orchestrator.sh +64 -64
  15. package/framework/hooks/git/pre-commit/specs.sh +50 -50
  16. package/framework/hooks/git/pre-push/run-tests.sh +44 -44
  17. package/framework/hooks/shared/activity-logger.js +160 -160
  18. package/framework/hooks/shared/hook-response.js +45 -45
  19. package/framework/hooks/shared/payload-utils.js +78 -78
  20. package/framework/hooks/shared/stdin-reader.js +26 -26
  21. package/framework/rubrics/backend.json +41 -41
  22. package/framework/rules/ai-agents-standards.md +45 -45
  23. package/framework/rules/dotnet-templates.md +86 -86
  24. package/framework/rules/frontend-standards.md +13 -13
  25. package/framework/rules/infrastructure-standards.md +27 -27
  26. package/framework/rules/neon-standards.md +25 -25
  27. package/framework/rules/nextjs-standards.md +20 -20
  28. package/framework/rules/nextjs-templates.md +40 -40
  29. package/framework/skills/core/create-umbraco-lp/SKILL.md +1 -1
  30. package/framework/skills/core/migrate-lp-to-umbraco/SKILL.md +1 -1
  31. package/framework/skills/core/morph-apply/SKILL.md +1 -1
  32. package/framework/skills/core/morph-brainstorming/SKILL.md +1 -1
  33. package/framework/skills/core/morph-eval/SKILL.md +1 -1
  34. package/framework/skills/core/morph-implement/SKILL.md +1 -1
  35. package/framework/skills/core/morph-plan/SKILL.md +1 -1
  36. package/framework/skills/core/morph-proposal/SKILL.md +1 -1
  37. package/framework/skills/core/morph-review/SKILL.md +1 -1
  38. package/framework/skills/core/morph-stack-scan/SKILL.md +1 -1
  39. package/framework/skills/core/morph-standards/SKILL.md +1 -1
  40. package/framework/standards/ai-agents/agent-session.md +160 -160
  41. package/framework/standards/ai-agents/batching.md +193 -193
  42. package/framework/standards/ai-agents/context-providers.md +188 -188
  43. package/framework/standards/ai-agents/mcp-server.md +250 -250
  44. package/framework/standards/ai-agents/mcp-tools.md +197 -197
  45. package/framework/standards/ai-agents/middleware-patterns.md +207 -207
  46. package/framework/standards/ai-agents/modalities-image-gen.md +173 -173
  47. package/framework/standards/ai-agents/modalities-speech-to-text.md +171 -171
  48. package/framework/standards/ai-agents/modalities-text-to-speech.md +181 -181
  49. package/framework/standards/ai-agents/modalities-vision.md +201 -201
  50. package/framework/standards/ai-agents/multi-agent-patterns.md +155 -155
  51. package/framework/standards/ai-agents/production.md +275 -275
  52. package/framework/standards/ai-agents/prompts-in-db.md +214 -214
  53. package/framework/standards/ai-agents/providers/model-registry.md +158 -158
  54. package/framework/standards/ai-agents/service-tier-flex.md +135 -135
  55. package/framework/standards/ai-agents/structured-output.md +249 -249
  56. package/framework/standards/ai-agents/sweet-spot.md +109 -109
  57. package/framework/templates/IDE-SNIPPETS.md +262 -262
  58. package/framework/templates/code/dotnet/abstractions/api-endpoint.cs +7 -7
  59. package/framework/templates/code/dotnet/ai-agents/AgentBootstrap.cs.template +39 -39
  60. package/framework/templates/code/dotnet/ai-agents/EmbeddingService.cs.template +68 -68
  61. package/framework/templates/code/dotnet/ai-agents/ModelRegistry.cs.template +117 -117
  62. package/framework/templates/code/dotnet/ai-agents/PromptRepository.cs.template +95 -95
  63. package/framework/templates/code/dotnet/ai-agents/ResilientToolMiddleware.cs.template +61 -61
  64. package/framework/templates/code/dotnet/ai-agents/VectorSearchTool.cs.template +107 -107
  65. package/framework/templates/code/dotnet/ai-agents/model-registry.json.template +58 -58
  66. package/framework/templates/code/dotnet/contracts/contracts-vsa.cs +281 -281
  67. package/framework/templates/code/dotnet/database/migration.cs +83 -83
  68. package/framework/templates/code/dotnet/feature/endpoint.cs.hbs +21 -21
  69. package/framework/templates/code/dotnet/feature/request.cs.hbs +4 -4
  70. package/framework/templates/code/dotnet/feature/response.cs.hbs +4 -4
  71. package/framework/templates/code/dotnet/feature/validator.cs.hbs +15 -15
  72. package/framework/templates/code/sql/ai-agents/agent-prompts-migration.sql.template +58 -58
  73. package/framework/templates/code/sql/ai-agents/pgvector-embeddings-migration.sql.template +91 -91
  74. package/framework/templates/code/typescript/contracts.ts +167 -167
  75. package/framework/templates/docs/clarifications.md +253 -253
  76. package/framework/templates/docs/schema-analysis.md +119 -119
  77. package/framework/templates/docs/ui-components.md +52 -52
  78. package/framework/templates/docs/ui-design-system.md +76 -76
  79. package/framework/templates/docs/ui-flows.md +167 -167
  80. package/framework/templates/docs/ui-mockups.md +98 -98
  81. package/framework/templates/feature/decisions.md +122 -122
  82. package/framework/templates/frontend/nextjs/Dockerfile.nextjs.hbs +43 -43
  83. package/framework/templates/frontend/nextjs/client-component.tsx.hbs +26 -26
  84. package/framework/templates/frontend/nextjs/env.mjs.hbs +32 -32
  85. package/framework/templates/frontend/nextjs/feature-form.tsx.hbs +56 -56
  86. package/framework/templates/frontend/nextjs/page.tsx.hbs +22 -22
  87. package/framework/templates/frontend/nextjs/tsconfig.json.hbs +26 -26
  88. package/framework/templates/frontend/nextjs/use-feature.ts.hbs +54 -54
  89. package/framework/templates/infrastructure/docker/Dockerfile.template +58 -58
  90. package/framework/templates/infrastructure/docker/docker-compose.template.yml +50 -50
  91. package/framework/templates/infrastructure/docker/dockerfile-api.dockerfile +38 -38
  92. package/framework/templates/infrastructure/docker/dockerfile-web.dockerfile +48 -48
  93. package/framework/templates/infrastructure/github/README.md +56 -56
  94. package/framework/templates/infrastructure/github/actions/docker-build-push/action.yml.hbs +45 -45
  95. package/framework/templates/infrastructure/github/actions/health-check/action.yml.hbs +27 -27
  96. package/framework/templates/infrastructure/github/workflows/docker-build-push.yml.hbs +59 -59
  97. package/framework/templates/infrastructure/github/workflows/dotnet-build.yml.hbs +39 -39
  98. package/framework/templates/integrations/asaas-client.cs +387 -387
  99. package/framework/templates/integrations/asaas-webhook.cs +351 -351
  100. package/framework/templates/meta-prompts/fusion/fusion-agent.md +76 -76
  101. package/framework/templates/meta-prompts/fusion/fusion-aggregator.md +100 -100
  102. package/framework/templates/meta-prompts/parallel-workers/parallel-coordinator.md +113 -113
  103. package/framework/templates/meta-prompts/validators/pre-commit-validator.md +95 -95
  104. package/framework/templates/project/validate.js +120 -120
  105. package/framework/templates/state.template.json +17 -17
  106. package/framework/templates/ui/design-system.css +226 -226
  107. package/package.json +2 -1
  108. package/src/commands/dashboard/dashboard.js +53 -53
  109. package/src/commands/index.js +13 -13
  110. package/src/commands/mcp/mcp-setup.js +519 -519
  111. package/src/commands/project/checkpoint.js +209 -209
  112. package/src/commands/project/update.js +4 -1
  113. package/src/core/state/phase-state-machine.js +197 -197
  114. package/src/core/templates/template-renderer.js +477 -477
  115. package/src/dashboard/app/components/DetailPanel.jsx +11 -11
  116. package/src/dashboard/app/components/FlowGraph.jsx +17 -17
  117. package/src/dashboard/app/components/SearchFilter.jsx +22 -22
  118. package/src/dashboard/app/hooks/useDetailPanel.js +15 -15
  119. package/src/dashboard/app/main.jsx +13 -13
  120. package/src/dashboard/app/pages/AgentMap.jsx +370 -370
  121. package/src/dashboard/app/pages/HookInspector.jsx +418 -418
  122. package/src/dashboard/app/pages/LiveState.jsx +239 -239
  123. package/src/dashboard/app/pages/PhasePipeline.jsx +408 -408
  124. package/src/dashboard/app/pages/RulesMap.jsx +273 -273
  125. package/src/dashboard/app/pages/SkillsLibrary.jsx +366 -366
  126. package/src/dashboard/app/pages/Standards.jsx +332 -332
  127. package/src/dashboard/app/styles/index.css +47 -47
  128. package/src/dashboard/index.html +12 -12
  129. package/src/dashboard/package.json +24 -24
  130. package/src/dashboard/scanner/hooks-scanner.js +41 -41
  131. package/src/dashboard/scanner/phases-scanner.js +15 -15
  132. package/src/dashboard/scanner/rubrics-scanner.js +12 -12
  133. package/src/dashboard/scanner/rules-scanner.js +37 -37
  134. package/src/dashboard/scanner/skills-scanner.js +43 -43
  135. package/src/dashboard/scanner/squads-scanner.js +13 -13
  136. package/src/dashboard/scanner/standards-scanner.js +26 -26
  137. package/src/dashboard/vite-plugin-morph-data.js +17 -17
  138. package/src/dashboard/vite.config.js +24 -24
  139. package/src/lib/agents/metrics-aggregator.js +56 -56
  140. package/src/lib/agents/metrics-calculator.js +125 -125
  141. package/src/lib/agents/output-collector.js +73 -73
  142. package/src/lib/detectors/claude-config-detector.js +152 -152
  143. package/src/lib/detectors/design-system-detector.js +231 -231
  144. package/src/lib/detectors/index.js +217 -217
  145. package/src/lib/generators/architecture-scanner.js +639 -639
  146. package/src/lib/generators/design-system-generator.js +508 -508
  147. package/src/lib/generators/index.js +13 -13
  148. package/src/lib/generators/settings-generator.js +209 -209
  149. package/src/lib/hooks/hook-executor.js +167 -167
  150. package/src/lib/installers/mcp-installer.js +719 -719
  151. package/src/lib/tasks/task-classifier.js +30 -30
  152. package/src/lib/tasks/task-parser.js +209 -209
  153. package/src/lib/tasks/test-runner.js +81 -81
  154. package/src/lib/validators/architecture/architecture-validator.js +259 -259
  155. package/src/lib/validators/checkpoint-persistence.js +39 -39
  156. package/src/lib/validators/contracts/contract-compliance-validator.js +274 -274
  157. package/src/lib/validators/css/css-validator.js +340 -340
  158. package/src/lib/validators/packages/package-validator.js +347 -347
  159. package/src/lib/validators/shared/emit-validator-dispatch.js +14 -14
  160. package/src/lib/validators/shared/issue-counter.js +14 -14
  161. package/src/lib/validators/validation-runner.js +349 -349
  162. package/src/scripts/setup-infra.js +385 -385
  163. package/src/utils/agent-id-mapper.js +11 -11
  164. package/src/utils/claude-settings-manager.js +300 -300
  165. package/src/utils/skills-installer.js +174 -174
  166. package/framework/templates/.idea/morph-templates.xml +0 -92
  167. package/framework/templates/.vscode/morph-templates.code-snippets +0 -186
@@ -1,167 +1,167 @@
1
- # UI Flows: {{titleCase FEATURE_NAME}}
2
-
3
- | Field | Value |
4
- |-------|-------|
5
- | **Feature** | {{FEATURE_NAME}} |
6
- | **Created** | {{DATE}} |
7
-
8
- ---
9
-
10
- ## User Stories
11
-
12
- ### US001: {Primary User Story}
13
-
14
- **As** a {user type}
15
- **I want** to {capability}
16
- **So that** {benefit}
17
-
18
- **Acceptance Criteria:**
19
- 1. {Criterion 1}
20
- 2. {Criterion 2}
21
-
22
- ---
23
-
24
- ## Flow Inventory
25
-
26
- | Flow ID | Name | Priority |
27
- |---------|------|----------|
28
- | **F001** | Create New Item | High |
29
- | **F002** | Edit Existing Item | High |
30
- | **F003** | Delete Item | Medium |
31
-
32
- ---
33
-
34
- ## F001: Create New Item
35
-
36
- ### Happy Path
37
-
38
- ```
39
- START
40
- ↓
41
- [User clicks "Add New"]
42
- ↓
43
- [Modal opens with form]
44
- ↓
45
- [User fills required fields]
46
- ↓
47
- [User clicks "Submit"]
48
- ↓
49
- [Validation passes] ✓
50
- ↓
51
- [API call: POST /api/items]
52
- ↓
53
- [Success response]
54
- ↓
55
- [Modal closes]
56
- ↓
57
- [Success toast: "Item created"]
58
- ↓
59
- [Table refreshes]
60
- ↓
61
- END
62
- ```
63
-
64
- **Duration:** 15-30 seconds
65
- **Success Rate Target:** 95%
66
-
67
- ---
68
-
69
- ### Alternative Path: Validation Error
70
-
71
- ```
72
- [User clicks "Submit"]
73
- ↓
74
- [Validation fails] ✕
75
- ↓
76
- [Error messages shown inline]
77
- ↓
78
- [User corrects errors]
79
- ↓
80
- [Real-time validation clears errors]
81
- ↓
82
- → Returns to Happy Path
83
- ```
84
-
85
- ---
86
-
87
- ### Edge Cases
88
-
89
- | Scenario | Behavior |
90
- |----------|----------|
91
- | **Duplicate Name** | Show warning, allow submit |
92
- | **Network Error** | Show error toast, preserve data |
93
- | **Session Expired** | Redirect to login |
94
-
95
- ---
96
-
97
- ## F002: Edit Existing Item
98
-
99
- ```
100
- [User clicks "Edit"]
101
- ↓
102
- [Modal opens with pre-filled form]
103
- ↓
104
- [User modifies fields]
105
- ↓
106
- [User clicks "Save"]
107
- ↓
108
- [API call: PUT /api/items/{id}]
109
- ↓
110
- [Success toast]
111
- ↓
112
- [Table refreshes]
113
- END
114
- ```
115
-
116
- ---
117
-
118
- ## F003: Delete Item
119
-
120
- ```
121
- [User clicks "Delete"]
122
- ↓
123
- [Confirmation dialog: "Delete item?"]
124
- ↓
125
- [User confirms]
126
- ↓
127
- [API call: DELETE /api/items/{id}]
128
- ↓
129
- [Success toast]
130
- ↓
131
- [Table refreshes]
132
- END
133
- ```
134
-
135
- ---
136
-
137
- ## Toast Notifications
138
-
139
- | Event | Type | Message | Duration |
140
- |-------|------|---------|----------|
141
- | **Item Created** | Success | "Item created successfully" | 3s |
142
- | **Item Updated** | Success | "Item updated successfully" | 3s |
143
- | **Item Deleted** | Success | "Item deleted successfully" | 3s |
144
- | **Error** | Error | "Something went wrong" | 5s |
145
-
146
- ---
147
-
148
- ## Keyboard Shortcuts
149
-
150
- | Shortcut | Action |
151
- |----------|--------|
152
- | **Ctrl+N** | New Item |
153
- | **Escape** | Close modal |
154
- | **Enter** | Submit form |
155
-
156
- ---
157
-
158
- ## Performance Targets
159
-
160
- | Flow | Target |
161
- |------|--------|
162
- | **Create Item** | < 2s (API response) |
163
- | **Search** | < 500ms |
164
-
165
- ---
166
-
167
- *Generated with MORPH Framework*
1
+ # UI Flows: {{titleCase FEATURE_NAME}}
2
+
3
+ | Field | Value |
4
+ |-------|-------|
5
+ | **Feature** | {{FEATURE_NAME}} |
6
+ | **Created** | {{DATE}} |
7
+
8
+ ---
9
+
10
+ ## User Stories
11
+
12
+ ### US001: {Primary User Story}
13
+
14
+ **As** a {user type}
15
+ **I want** to {capability}
16
+ **So that** {benefit}
17
+
18
+ **Acceptance Criteria:**
19
+ 1. {Criterion 1}
20
+ 2. {Criterion 2}
21
+
22
+ ---
23
+
24
+ ## Flow Inventory
25
+
26
+ | Flow ID | Name | Priority |
27
+ |---------|------|----------|
28
+ | **F001** | Create New Item | High |
29
+ | **F002** | Edit Existing Item | High |
30
+ | **F003** | Delete Item | Medium |
31
+
32
+ ---
33
+
34
+ ## F001: Create New Item
35
+
36
+ ### Happy Path
37
+
38
+ ```
39
+ START
40
+ ↓
41
+ [User clicks "Add New"]
42
+ ↓
43
+ [Modal opens with form]
44
+ ↓
45
+ [User fills required fields]
46
+ ↓
47
+ [User clicks "Submit"]
48
+ ↓
49
+ [Validation passes] ✓
50
+ ↓
51
+ [API call: POST /api/items]
52
+ ↓
53
+ [Success response]
54
+ ↓
55
+ [Modal closes]
56
+ ↓
57
+ [Success toast: "Item created"]
58
+ ↓
59
+ [Table refreshes]
60
+ ↓
61
+ END
62
+ ```
63
+
64
+ **Duration:** 15-30 seconds
65
+ **Success Rate Target:** 95%
66
+
67
+ ---
68
+
69
+ ### Alternative Path: Validation Error
70
+
71
+ ```
72
+ [User clicks "Submit"]
73
+ ↓
74
+ [Validation fails] ✕
75
+ ↓
76
+ [Error messages shown inline]
77
+ ↓
78
+ [User corrects errors]
79
+ ↓
80
+ [Real-time validation clears errors]
81
+ ↓
82
+ → Returns to Happy Path
83
+ ```
84
+
85
+ ---
86
+
87
+ ### Edge Cases
88
+
89
+ | Scenario | Behavior |
90
+ |----------|----------|
91
+ | **Duplicate Name** | Show warning, allow submit |
92
+ | **Network Error** | Show error toast, preserve data |
93
+ | **Session Expired** | Redirect to login |
94
+
95
+ ---
96
+
97
+ ## F002: Edit Existing Item
98
+
99
+ ```
100
+ [User clicks "Edit"]
101
+ ↓
102
+ [Modal opens with pre-filled form]
103
+ ↓
104
+ [User modifies fields]
105
+ ↓
106
+ [User clicks "Save"]
107
+ ↓
108
+ [API call: PUT /api/items/{id}]
109
+ ↓
110
+ [Success toast]
111
+ ↓
112
+ [Table refreshes]
113
+ END
114
+ ```
115
+
116
+ ---
117
+
118
+ ## F003: Delete Item
119
+
120
+ ```
121
+ [User clicks "Delete"]
122
+ ↓
123
+ [Confirmation dialog: "Delete item?"]
124
+ ↓
125
+ [User confirms]
126
+ ↓
127
+ [API call: DELETE /api/items/{id}]
128
+ ↓
129
+ [Success toast]
130
+ ↓
131
+ [Table refreshes]
132
+ END
133
+ ```
134
+
135
+ ---
136
+
137
+ ## Toast Notifications
138
+
139
+ | Event | Type | Message | Duration |
140
+ |-------|------|---------|----------|
141
+ | **Item Created** | Success | "Item created successfully" | 3s |
142
+ | **Item Updated** | Success | "Item updated successfully" | 3s |
143
+ | **Item Deleted** | Success | "Item deleted successfully" | 3s |
144
+ | **Error** | Error | "Something went wrong" | 5s |
145
+
146
+ ---
147
+
148
+ ## Keyboard Shortcuts
149
+
150
+ | Shortcut | Action |
151
+ |----------|--------|
152
+ | **Ctrl+N** | New Item |
153
+ | **Escape** | Close modal |
154
+ | **Enter** | Submit form |
155
+
156
+ ---
157
+
158
+ ## Performance Targets
159
+
160
+ | Flow | Target |
161
+ |------|--------|
162
+ | **Create Item** | < 2s (API response) |
163
+ | **Search** | < 500ms |
164
+
165
+ ---
166
+
167
+ *Generated with MORPH Framework*
@@ -1,98 +1,98 @@
1
- # UI Mockups & Wireframes: {{titleCase FEATURE_NAME}}
2
-
3
- | Field | Value |
4
- |-------|-------|
5
- | **Feature** | {{FEATURE_NAME}} |
6
- | **Created** | {{DATE}} |
7
-
8
- ---
9
-
10
- ## Screen Inventory
11
-
12
- | Screen ID | Name | Route | Priority |
13
- |-----------|------|-------|----------|
14
- | **S001** | {Screen Name} | /path | High |
15
- | **S002** | {Screen Name} | /path | Medium |
16
-
17
- ---
18
-
19
- ## S001: {Primary Screen}
20
-
21
- ### Desktop Layout
22
-
23
- ```
24
- ┌─────────────────────────────────────┐
25
- │ Header [User ▼] │
26
- ├─────────────────────────────────────┤
27
- │ │
28
- │ [Title] │
29
- │ │
30
- │ ┌──────────────────────────────┐ │
31
- │ │ Main Content Area │ │
32
- │ │ │ │
33
- │ │ [Card 1] [Card 2] │ │
34
- │ │ │ │
35
- │ │ ┌────────────────────────┐ │ │
36
- │ │ │ Data Table │ │ │
37
- │ │ │ ... │ │ │
38
- │ │ └────────────────────────┘ │ │
39
- │ └──────────────────────────────┘ │
40
- │ │
41
- └─────────────────────────────────────┘
42
- ```
43
-
44
- ### Mobile Layout
45
-
46
- ```
47
- ┌──────────────────────┐
48
- │ ☰ Title [User ▼]│
49
- ├──────────────────────┤
50
- │ │
51
- │ [Card 1] │
52
- │ │
53
- │ [Card 2] │
54
- │ │
55
- │ [View All Items] │
56
- │ │
57
- └──────────────────────┘
58
- ```
59
-
60
- ---
61
-
62
- ## States
63
-
64
- ### Loading
65
- - Show skeleton placeholders
66
- - Spinner for primary content
67
-
68
- ### Empty
69
- - Icon + message
70
- - Clear call-to-action button
71
-
72
- ### Error
73
- - Warning icon
74
- - User-friendly message
75
- - Retry button
76
-
77
- ### Success (After Action)
78
- - Toast notification
79
- - Auto-dismiss after 3s
80
-
81
- ---
82
-
83
- ## Interactions
84
-
85
- - **Hover**: Subtle elevation increase
86
- - **Click**: Scale down (0.98)
87
- - **Transitions**: Fade-in 200ms
88
-
89
- ---
90
-
91
- ## Accessibility
92
- - [ ] 44x44px minimum touch targets
93
- - [ ] Focus indicators visible
94
- - [ ] Proper heading hierarchy (H1 → H2 → H3)
95
-
96
- ---
97
-
98
- *Generated with MORPH Framework*
1
+ # UI Mockups & Wireframes: {{titleCase FEATURE_NAME}}
2
+
3
+ | Field | Value |
4
+ |-------|-------|
5
+ | **Feature** | {{FEATURE_NAME}} |
6
+ | **Created** | {{DATE}} |
7
+
8
+ ---
9
+
10
+ ## Screen Inventory
11
+
12
+ | Screen ID | Name | Route | Priority |
13
+ |-----------|------|-------|----------|
14
+ | **S001** | {Screen Name} | /path | High |
15
+ | **S002** | {Screen Name} | /path | Medium |
16
+
17
+ ---
18
+
19
+ ## S001: {Primary Screen}
20
+
21
+ ### Desktop Layout
22
+
23
+ ```
24
+ ┌─────────────────────────────────────┐
25
+ │ Header [User ▼] │
26
+ ├─────────────────────────────────────┤
27
+ │ │
28
+ │ [Title] │
29
+ │ │
30
+ │ ┌──────────────────────────────┐ │
31
+ │ │ Main Content Area │ │
32
+ │ │ │ │
33
+ │ │ [Card 1] [Card 2] │ │
34
+ │ │ │ │
35
+ │ │ ┌────────────────────────┐ │ │
36
+ │ │ │ Data Table │ │ │
37
+ │ │ │ ... │ │ │
38
+ │ │ └────────────────────────┘ │ │
39
+ │ └──────────────────────────────┘ │
40
+ │ │
41
+ └─────────────────────────────────────┘
42
+ ```
43
+
44
+ ### Mobile Layout
45
+
46
+ ```
47
+ ┌──────────────────────┐
48
+ │ ☰ Title [User ▼]│
49
+ ├──────────────────────┤
50
+ │ │
51
+ │ [Card 1] │
52
+ │ │
53
+ │ [Card 2] │
54
+ │ │
55
+ │ [View All Items] │
56
+ │ │
57
+ └──────────────────────┘
58
+ ```
59
+
60
+ ---
61
+
62
+ ## States
63
+
64
+ ### Loading
65
+ - Show skeleton placeholders
66
+ - Spinner for primary content
67
+
68
+ ### Empty
69
+ - Icon + message
70
+ - Clear call-to-action button
71
+
72
+ ### Error
73
+ - Warning icon
74
+ - User-friendly message
75
+ - Retry button
76
+
77
+ ### Success (After Action)
78
+ - Toast notification
79
+ - Auto-dismiss after 3s
80
+
81
+ ---
82
+
83
+ ## Interactions
84
+
85
+ - **Hover**: Subtle elevation increase
86
+ - **Click**: Scale down (0.98)
87
+ - **Transitions**: Fade-in 200ms
88
+
89
+ ---
90
+
91
+ ## Accessibility
92
+ - [ ] 44x44px minimum touch targets
93
+ - [ ] Focus indicators visible
94
+ - [ ] Proper heading hierarchy (H1 → H2 → H3)
95
+
96
+ ---
97
+
98
+ *Generated with MORPH Framework*