@utopia-studio-design/design-system-cli 0.6.2 → 0.7.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 (123) hide show
  1. package/README.md +28 -14
  2. package/bin/utopia-ds-mcp.mjs +6 -2
  3. package/bin/utopia-ds.mjs +94 -21
  4. package/data/docs/arabic-friendly.md +19 -2
  5. package/data/docs/billing-setup.md +80 -0
  6. package/data/docs/cer-003-032-033-round-8-repair.md +41 -0
  7. package/data/docs/cer-007-checkout.md +51 -0
  8. package/data/docs/cer-008-011-qa-repair.md +64 -0
  9. package/data/docs/cer-016-023-round-6-repair.md +92 -0
  10. package/data/docs/cer-024-031-round-7-repair.md +51 -0
  11. package/data/docs/cer-033-035-036-round-12-repair.md +37 -0
  12. package/data/docs/cer-035-037-round-10-repair.md +34 -0
  13. package/data/docs/charts.md +34 -3
  14. package/data/docs/chat-service-methodology.md +181 -0
  15. package/data/docs/code-block.md +20 -0
  16. package/data/docs/creative-production.md +149 -0
  17. package/data/docs/designer-agent-backend-contract.md +552 -0
  18. package/data/docs/email-resend.md +29 -0
  19. package/data/docs/foundations.md +46 -8
  20. package/data/docs/guide.md +9 -9
  21. package/data/docs/handover-billing-aiden.md +132 -0
  22. package/data/docs/logo-maker-methodology.md +109 -0
  23. package/data/docs/presentation-asset-repository.md +53 -0
  24. package/data/docs/product-architecture.md +42 -0
  25. package/data/docs/quick-start-ai.md +4 -4
  26. package/data/docs/shadcn-conversion.md +1 -1
  27. package/data/docs/sidebar-placement.md +56 -0
  28. package/data/docs/theme-authoring.md +6 -3
  29. package/data/manifests/catalog.json +42 -46
  30. package/data/manifests/components.json +317 -66
  31. package/data/manifests/logo-skills.json +174 -0
  32. package/data/manifests/motion-profiles.json +2 -2
  33. package/data/manifests/patterns.json +201 -7
  34. package/data/manifests/presentation-assets.schema.json +44 -0
  35. package/data/manifests/templates.json +87 -1
  36. package/data/manifests/theme-dextrum.json +7 -7
  37. package/data/manifests/theme-prism-mono.json +19 -0
  38. package/data/manifests/theme-utopia-cloudblur.json +135 -0
  39. package/data/manifests/theme-utopia-default.json +31 -31
  40. package/data/manifests/theme-vyapti.json +17 -1
  41. package/data/manifests/theme-y2k-pop.json +18 -0
  42. package/data/manifests/themes.json +285 -57
  43. package/data/templates/analytics-dashboard/main.tsx +14 -1
  44. package/data/templates/calendar-application/main.tsx +14 -1
  45. package/data/templates/chat-workspace/README.md +12 -0
  46. package/data/templates/chat-workspace/index.html +11 -0
  47. package/data/templates/chat-workspace/main.tsx +97 -0
  48. package/data/templates/chat-workspace/styles.css +19 -0
  49. package/data/templates/chat-workspace/template.manifest.json +13 -0
  50. package/data/templates/composition-registry-lab/main.tsx +12 -1
  51. package/data/templates/dashboard-composer/main.tsx +14 -1
  52. package/data/templates/database-workspace/main.tsx +14 -1
  53. package/data/templates/interaction-lab/main.tsx +12 -1
  54. package/data/templates/quantum-verification-story/README.md +12 -0
  55. package/data/templates/quantum-verification-story/components.json +21 -0
  56. package/data/templates/quantum-verification-story/eslint.config.mjs +13 -0
  57. package/data/templates/quantum-verification-story/next-env.d.ts +7 -0
  58. package/data/templates/quantum-verification-story/next.config.mjs +11 -0
  59. package/data/templates/quantum-verification-story/package-lock.json +7535 -0
  60. package/data/templates/quantum-verification-story/package.json +46 -0
  61. package/data/templates/quantum-verification-story/postcss.config.js +6 -0
  62. package/data/templates/quantum-verification-story/src/app/assessment/page.tsx +138 -0
  63. package/data/templates/quantum-verification-story/src/app/ceramic-theme.css +48 -0
  64. package/data/templates/quantum-verification-story/src/app/deployment/page.tsx +178 -0
  65. package/data/templates/quantum-verification-story/src/app/fonts/IBMPlexSansArabic-Bold.ttf +0 -0
  66. package/data/templates/quantum-verification-story/src/app/fonts/IBMPlexSansArabic-Medium.ttf +0 -0
  67. package/data/templates/quantum-verification-story/src/app/fonts/IBMPlexSansArabic-Regular.ttf +0 -0
  68. package/data/templates/quantum-verification-story/src/app/fonts/ReadexPro-Variable.ttf +0 -0
  69. package/data/templates/quantum-verification-story/src/app/fonts/TWKLausanne-350.ttf +0 -0
  70. package/data/templates/quantum-verification-story/src/app/fonts/TWKLausanne-500.ttf +0 -0
  71. package/data/templates/quantum-verification-story/src/app/fonts/TWKLausanne-700.ttf +0 -0
  72. package/data/templates/quantum-verification-story/src/app/globals.css +175 -0
  73. package/data/templates/quantum-verification-story/src/app/layout.tsx +45 -0
  74. package/data/templates/quantum-verification-story/src/app/not-found.tsx +39 -0
  75. package/data/templates/quantum-verification-story/src/app/page.tsx +24 -0
  76. package/data/templates/quantum-verification-story/src/app/products/page.tsx +132 -0
  77. package/data/templates/quantum-verification-story/src/app/utopia-default.css +312 -0
  78. package/data/templates/quantum-verification-story/src/components/RotatingText.css +36 -0
  79. package/data/templates/quantum-verification-story/src/components/RotatingText.tsx +189 -0
  80. package/data/templates/quantum-verification-story/src/components/brand-mark.tsx +14 -0
  81. package/data/templates/quantum-verification-story/src/components/console-preview-section.tsx +57 -0
  82. package/data/templates/quantum-verification-story/src/components/console-preview.tsx +72 -0
  83. package/data/templates/quantum-verification-story/src/components/fade-up.tsx +54 -0
  84. package/data/templates/quantum-verification-story/src/components/floating-network.tsx +125 -0
  85. package/data/templates/quantum-verification-story/src/components/footer.tsx +83 -0
  86. package/data/templates/quantum-verification-story/src/components/harvest-timeline.tsx +70 -0
  87. package/data/templates/quantum-verification-story/src/components/lattice-diagram.tsx +73 -0
  88. package/data/templates/quantum-verification-story/src/components/lattice-field.tsx +129 -0
  89. package/data/templates/quantum-verification-story/src/components/nav.tsx +104 -0
  90. package/data/templates/quantum-verification-story/src/components/presentation-layout.tsx +91 -0
  91. package/data/templates/quantum-verification-story/src/components/readiness-estimator.tsx +135 -0
  92. package/data/templates/quantum-verification-story/src/components/scramble-text.tsx +60 -0
  93. package/data/templates/quantum-verification-story/src/components/section-backdrop.tsx +38 -0
  94. package/data/templates/quantum-verification-story/src/components/sections/clients.tsx +140 -0
  95. package/data/templates/quantum-verification-story/src/components/sections/contact.tsx +125 -0
  96. package/data/templates/quantum-verification-story/src/components/sections/hero.tsx +92 -0
  97. package/data/templates/quantum-verification-story/src/components/sections/moat.tsx +73 -0
  98. package/data/templates/quantum-verification-story/src/components/sections/offer.tsx +113 -0
  99. package/data/templates/quantum-verification-story/src/components/sections/pilot.tsx +63 -0
  100. package/data/templates/quantum-verification-story/src/components/sections/problem.tsx +53 -0
  101. package/data/templates/quantum-verification-story/src/components/text-particle.tsx +204 -0
  102. package/data/templates/quantum-verification-story/src/components/ticker.tsx +27 -0
  103. package/data/templates/quantum-verification-story/src/components/ui/badge.tsx +29 -0
  104. package/data/templates/quantum-verification-story/src/components/ui/button.tsx +55 -0
  105. package/data/templates/quantum-verification-story/src/components/ui/card.tsx +46 -0
  106. package/data/templates/quantum-verification-story/src/components/ui/cursor-driven-particle-typography.tsx +288 -0
  107. package/data/templates/quantum-verification-story/src/components/ui/input.tsx +20 -0
  108. package/data/templates/quantum-verification-story/src/components/ui/label.tsx +21 -0
  109. package/data/templates/quantum-verification-story/src/components/ui/separator.tsx +25 -0
  110. package/data/templates/quantum-verification-story/src/components/ui/textarea.tsx +19 -0
  111. package/data/templates/quantum-verification-story/src/lib/utils.ts +6 -0
  112. package/data/templates/quantum-verification-story/tailwind.config.js +95 -0
  113. package/data/templates/quantum-verification-story/template.manifest.json +23 -0
  114. package/data/templates/quantum-verification-story/tsconfig.json +42 -0
  115. package/data/templates/saas-solution-homepage/main.tsx +91 -14
  116. package/data/templates/saas-solution-homepage/privacy/index.html +1 -0
  117. package/data/templates/saas-solution-homepage/styles.css +47 -2
  118. package/data/templates/saas-solution-homepage/team/index.html +1 -0
  119. package/data/templates/saas-solution-homepage/template.manifest.json +41 -0
  120. package/data/templates/saas-solution-homepage/terms/index.html +1 -0
  121. package/lib/api.mjs +52 -3
  122. package/lib/template-runtime.mjs +1 -0
  123. package/package.json +2 -2
@@ -0,0 +1,174 @@
1
+ {
2
+ "version": 1,
3
+ "source": "Daedalus/lib/design-logo-skills",
4
+ "toolId": "logo-maker",
5
+ "qualityFramework": {
6
+ "methodology": "docs/design-system/logo-maker-methodology.md",
7
+ "universalChecks": [
8
+ "Distinct at 16px and 24px",
9
+ "Intact as a one-color mark",
10
+ "Equivalent on light and dark surfaces",
11
+ "Clear silhouette, counters, spacing, and clear space",
12
+ "Usable in every declared lockup and badge context",
13
+ "One ownable idea rather than a generic category mark",
14
+ "Third-party references inform analysis only and are not copied or morphed",
15
+ "Redrawable as clean production vector geometry"
16
+ ],
17
+ "results": ["pass", "review", "fail"],
18
+ "approvalPolicy": "A blocking check without artifact evidence prevents approval. Similarity review is not trademark clearance."
19
+ },
20
+ "workflow": {
21
+ "sequence": [
22
+ "read-room-context",
23
+ "choose-skill",
24
+ "collect-brief",
25
+ "add-optional-references",
26
+ "prepare-run",
27
+ "generate-draft",
28
+ "human-review",
29
+ "checkpoint-approved-artifact"
30
+ ],
31
+ "approvalRequired": true,
32
+ "referencePolicy": "Third-party marks are analysis context only and must never be copied or morphed."
33
+ },
34
+ "skills": [
35
+ {
36
+ "id": "wordmark",
37
+ "name": "Wordmark",
38
+ "tagline": "Your name, beautifully set",
39
+ "description": "The company name itself becomes the logo.",
40
+ "guidance": "Best for early-stage brands with a short, distinctive name (Google, Coca-Cola). Works when you want maximum name recognition and the venture name is the primary asset.",
41
+ "example": "Stripe, Google, Uber",
42
+ "recommended": false,
43
+ "referenceIds": ["google-wordmark", "coca-cola-wordmark", "ibm-wordmark"],
44
+ "requirements": [
45
+ "This is a WORDMARK logo, custom typography is the entire logo; the brand name is the hero",
46
+ "Extract the brand name from the description and render it with distinctive, ownable letterforms",
47
+ "Typography should express the brand personality: weight, spacing, and character shape must match the described tone",
48
+ "Avoid generic system fonts, aim for custom or heavily refined typographic treatment",
49
+ "Use a restrained color palette of 1-2 colors; strong contrast for legibility",
50
+ "The wordmark must be instantly readable and memorable at small and large sizes",
51
+ "No separate symbol or icon, the name alone is the mark",
52
+ "Present on a pure white background with clean, professional spacing",
53
+ "Style: flat vector typography, professional brand identity, polished wordmark quality",
54
+ "Output: a single polished wordmark logo centered on white"
55
+ ]
56
+ },
57
+ {
58
+ "id": "lettermark",
59
+ "name": "Lettermark",
60
+ "tagline": "Initials with impact",
61
+ "description": "One to three letters form a compact, iconic mark.",
62
+ "guidance": "Best suited for companies with multi-word names that are commonly referred to by acronym or a single initial (IBM, Notion, HBO). Also powerful for luxury and professional services brands seeking a monogram aesthetic.",
63
+ "example": "IBM, Notion, HBO",
64
+ "recommended": false,
65
+ "referenceIds": ["ibm", "notion", "hbo"],
66
+ "requirements": [
67
+ "This is a LETTERMARK logo, 1 to 3 initials or abbreviation letters form the entire logo",
68
+ "Extract the most meaningful initials or abbreviation from the brand name described",
69
+ "The letters should be rendered with exceptional typographic craft: custom letterforms, precise geometry, or elegant calligraphic treatment",
70
+ "The lettermark may use stacking, interlocking, overlapping, or monogram arrangements of the letters",
71
+ "Apply a bold, confident visual weight, lettermarks must be instantly legible at small sizes",
72
+ "Use a sophisticated color palette of 1-2 colors; consider a strong primary color with a subtle secondary accent",
73
+ "The composition should be balanced, optically centered, and work equally well as a square or circular badge",
74
+ "Optionally enclose the letters in a minimal geometric container (circle, square, shield) if it strengthens the mark",
75
+ "White or very light neutral background for clean presentation",
76
+ "Style: flat vector, professional monogram or abbreviation treatment, premium finish",
77
+ "Output: a single polished lettermark logo centered on white, suitable for app icons and brand use"
78
+ ]
79
+ },
80
+ {
81
+ "id": "brandmark",
82
+ "name": "Brand Mark",
83
+ "tagline": "A symbol that speaks for itself",
84
+ "description": "A standalone symbol with no text, recognized through shape alone.",
85
+ "guidance": "Best for brands that are already well-known or plan to invest heavily in brand building (Apple, Nike, Dropbox). Requires consistent exposure to build recognition.",
86
+ "example": "Apple, Nike, Dropbox",
87
+ "recommended": false,
88
+ "referenceIds": ["apple", "nike", "dropbox"],
89
+ "requirements": [
90
+ "This is a BRAND MARK logo, a standalone graphic symbol or icon with absolutely NO text or letters",
91
+ "The symbol must be a single, unified graphic shape that communicates the brand's essence, values, or industry",
92
+ "Design for maximum simplicity and memorability: the mark should be recognizable at 16px favicon size and billboard scale",
93
+ "The symbol should feel original, ownable, and not derivative of existing famous logos",
94
+ "Use clean, precise geometry or purposeful organic curves: avoid complexity, gradients, or photographic detail",
95
+ "The mark should work as a single flat color (for embossing, engraving) as well as in the chosen brand color",
96
+ "Preferred aesthetic: bold, confident, minimal, a shape that could become iconic with repetition",
97
+ "Use 1-2 colors maximum; the symbol should read clearly on both white and dark backgrounds",
98
+ "Center the symbol on a pure white background with generous breathing room",
99
+ "Style: flat vector symbol, icon-grade precision, no decorative elements, no text whatsoever",
100
+ "Output: a single polished brand mark symbol centered on white, no text included"
101
+ ]
102
+ },
103
+ {
104
+ "id": "combinedmark",
105
+ "name": "Combined Mark",
106
+ "tagline": "Symbol and name, unified",
107
+ "description": "A symbol and brand name designed as one cohesive lockup.",
108
+ "guidance": "The most versatile logo type for growing brands. Recommended for most startups and scale-ups.",
109
+ "example": "Adidas, Starbucks, Lacoste",
110
+ "recommended": true,
111
+ "referenceIds": ["adidas", "starbucks", "airbnb-wordmark"],
112
+ "requirements": [
113
+ "This is a COMBINED MARK logo, a graphic symbol/icon paired with the brand name in text, unified as one cohesive logo",
114
+ "The symbol and wordmark must feel designed together, not assembled from separate parts",
115
+ "The icon/symbol should be placed to the left of, above, or integrated with the brand name text",
116
+ "The symbol should be simple, distinctive, and directly relevant to the brand's identity or values",
117
+ "The wordmark portion should use a clean, professional typeface (custom or refined) that complements the symbol's style",
118
+ "Maintain clear visual hierarchy: the symbol and name should have balanced visual weight",
119
+ "The overall composition should be horizontal (icon left, text right) or stacked (icon above, text below)",
120
+ "Use a cohesive color palette of 2-3 colors maximum; the symbol may use an accent color while the wordmark uses a neutral",
121
+ "Present on a pure white background with clean, professional spacing",
122
+ "Style: flat vector, professional brand identity system, polished and versatile",
123
+ "Output: a single polished combined mark logo (symbol + brand name) centered on white"
124
+ ]
125
+ },
126
+ {
127
+ "id": "monoline",
128
+ "name": "Monoline/Illustrative",
129
+ "tagline": "Artisan craft in every line",
130
+ "description": "Consistent line work or fine illustration becomes the primary visual.",
131
+ "guidance": "Ideal for craft goods, wellness, fashion, or any industry where artisan quality and authenticity are core values.",
132
+ "example": "Craft breweries, artisan coffee, boutique fashion",
133
+ "recommended": false,
134
+ "referenceIds": ["line", "linear", "patreon"],
135
+ "requirements": [
136
+ "This is a MONOLINE / ILLUSTRATIVE logo, the design uses continuous lines of consistent weight, or detailed fine-line illustration as the primary visual element",
137
+ "The illustration or line-work should be intricate yet balanced: think artisan craft, precision engraving, or elegant geometric line art",
138
+ "The line weight must be consistent and uniform throughout the entire mark (monoline principle)",
139
+ "The illustration can depict an animal, object, geometric pattern, botanical element, abstract form, or scene relevant to the brand",
140
+ "The design should feel handcrafted and premium: suitable for artisan, craft, boutique, or heritage brands",
141
+ "Include the brand name in a complementary typeface integrated harmoniously with the illustration",
142
+ "Use a restrained color palette: ideally 1-2 colors, or a classic combination like black on white, navy on cream, or gold on dark",
143
+ "The overall composition should be badge-like, circular, or shield-shaped, or a refined horizontal lockup",
144
+ "Present on a pure white background",
145
+ "Style: fine-line illustration, monoline vector art, artisan/craft aesthetic, premium hand-drawn quality",
146
+ "Output: a single polished monoline illustrative logo centered on white"
147
+ ]
148
+ },
149
+ {
150
+ "id": "mascot",
151
+ "name": "Mascot",
152
+ "tagline": "Give your brand a face",
153
+ "description": "An original illustrated character becomes the face of the brand.",
154
+ "guidance": "Perfect for brands targeting families, youth, or communities where personality and relatability are key.",
155
+ "example": "KFC, Michelin, GitHub",
156
+ "recommended": false,
157
+ "referenceIds": ["kfc", "michelin", "github"],
158
+ "requirements": [
159
+ "This is a MASCOT logo, a distinctive illustrated character or persona that becomes the face and personality of the brand",
160
+ "The mascot should be an original, memorable character: could be a stylized human, animal, creature, robot, or abstract personified figure",
161
+ "The character must have a clear, expressive personality that aligns with the brand's tone (friendly, bold, playful, authoritative, quirky, etc.)",
162
+ "Design the mascot in a clean, modern illustration style, not overly cartoonish unless the brand calls for it",
163
+ "The character should have a strong, readable silhouette that works at small sizes",
164
+ "Include a confident, characteristic pose or expression that conveys the brand's energy",
165
+ "Integrate the brand name below or beside the mascot in a complementary typeface",
166
+ "Use a bold, vibrant color palette of 2-4 colors that gives the character life and personality",
167
+ "The mascot and name should be composed as a unified logo, not separate elements",
168
+ "Present on a pure white background with clean composition",
169
+ "Style: professional character illustration, flat or semi-flat design, brand mascot quality",
170
+ "Output: a single polished mascot logo (character + brand name) centered on white"
171
+ ]
172
+ }
173
+ ]
174
+ }
@@ -18,7 +18,7 @@
18
18
  {
19
19
  "id": "ceremonial",
20
20
  "label": "Ceremonial reveal",
21
- "themes": ["utopia-default"],
21
+ "themes": ["utopia-default", "utopia-cloudblur"],
22
22
  "personality": "ceremonial",
23
23
  "description": "A composed, high-fidelity reveal with restrained blur and long deceleration.",
24
24
  "rules": ["Keep direct feedback fast", "Use blur only for page and large-surface reveals", "Make exits shorter than entrances"],
@@ -52,7 +52,7 @@
52
52
  {
53
53
  "id": "swift",
54
54
  "label": "Swift response",
55
- "themes": ["dextrum"],
55
+ "themes": ["dextrum", "prism-mono", "y2k-pop"],
56
56
  "personality": "swift",
57
57
  "description": "Fast, compact movement for dense technical workflows.",
58
58
  "rules": ["No reveal blur", "No orchestration delay", "Prefer short directional shifts"],
@@ -2,26 +2,205 @@
2
2
  "intent": "AI-first, shadcn-founded, theme-extensible, Arabic-friendly, architectural, precise, and commercially credible.",
3
3
  "principles": [
4
4
  "Design System is the parent system; production sites are consumers.",
5
+ "Every interface element resolves through a registered semantic token, component, slot, state, or composition pattern.",
6
+ "Pages own content and orchestration only; they never own or import CSS.",
5
7
  "Use shadcn/ui as the component architecture foundation.",
6
8
  "Use semantic tokens before raw primitives.",
7
9
  "Core owns semantic contracts and component architecture, not brand-specific visual philosophy.",
8
10
  "Themes are token-contract and visual-policy implementations, not decorative skins.",
9
- "Arabic-friendly support is a baseline requirement."
11
+ "Arabic-friendly support is a baseline requirement.",
12
+ "Scroll containers retain native wheel, touch and keyboard scrolling while scrollbar chrome stays hidden, including hover and focus states."
13
+ ],
14
+ "antiPatterns": [
15
+ "Invented tokens",
16
+ "Generic SaaS gradients",
17
+ "Rounded marketing cards",
18
+ "Marketing-page hierarchy on product surfaces",
19
+ "Glassmorphism",
20
+ "Raw left/right APIs",
21
+ "Unreviewed Arabic copy"
10
22
  ],
11
- "antiPatterns": ["Invented tokens", "Generic SaaS gradients", "Rounded marketing cards", "Glassmorphism", "Raw left/right APIs", "Unreviewed Arabic copy"],
12
23
  "patterns": [
24
+ {
25
+ "id": "scroll-without-chrome",
26
+ "title": "Native scrolling without visible scrollbars",
27
+ "contract": "Hide scrollbar chrome for every axis and state. Preserve overflow scrolling, keyboard navigation, focus visibility and touch gestures. Never reveal scrollbars on hover or focus.",
28
+ "source": "packages/design-system/src/core.css",
29
+ "states": [
30
+ "idle",
31
+ "hover",
32
+ "focus",
33
+ "scrolling"
34
+ ]
35
+ },
36
+ {
37
+ "id": "semantic-page-composition",
38
+ "title": "Semantic page composition without page-owned CSS",
39
+ "contract": "Pages compose registered components and patterns, bind data, and manage routing. They never import CSS, hardcode visual primitives, or create local visual variants; missing presentation behavior must be added to the semantic contract first.",
40
+ "ownership": [
41
+ "semantic tokens",
42
+ "components",
43
+ "registered patterns",
44
+ "themes"
45
+ ],
46
+ "forbidden": [
47
+ "page CSS files",
48
+ "CSS imports in pages",
49
+ "raw brand primitives",
50
+ "page-local visual variants"
51
+ ]
52
+ },
53
+ {
54
+ "id": "workspace-setup",
55
+ "title": "Workspace setup onboarding",
56
+ "contract": "The onboarding flow keeps a product-scale page title, progress, current task, and actions in one semantic sequence.",
57
+ "source": "src/patterns/workspace-setup.css",
58
+ "slots": [
59
+ "workspace-setup",
60
+ "workspace-setup-header",
61
+ "workspace-setup-progress",
62
+ "workspace-setup-stage",
63
+ "workspace-setup-actions"
64
+ ],
65
+ "states": [
66
+ "room",
67
+ "repository",
68
+ "agent",
69
+ "review",
70
+ "complete"
71
+ ],
72
+ "ownership": [
73
+ "semantic tokens",
74
+ "Button",
75
+ "Forms",
76
+ "localized workflow copy"
77
+ ],
78
+ "forbidden": [
79
+ "marketing headline scale",
80
+ "page-owned CSS",
81
+ "raw color or radius values"
82
+ ]
83
+ },
84
+ {
85
+ "id": "brand-room-empty-start",
86
+ "title": "Empty Brand Room start surface",
87
+ "contract": "A new Brand Room presents a compact page identity, empty-state truth, first action, and setup sequence as one connected work surface. Registered Ceramic discovery media may sit beside the empty-state explanation, but it never replaces state copy or the first action. Brand and project names identify the workspace; they are not oversized campaign headlines. Arabic headings retain the same product-scale semantic roles as Latin headings; only explicitly registered display text resolves through the Arabic display scale. The shared topbar mirrors its complete brand, navigation, and action groups in RTL. The pattern must not imply that identity, theme, assets, or production work already exists.",
88
+ "source": "src/patterns/brand-room-empty.css",
89
+ "slots": [
90
+ "brand-workspace",
91
+ "brand-room-empty-state",
92
+ "brand-room-empty-visual"
93
+ ],
94
+ "states": [
95
+ "empty",
96
+ "current",
97
+ "upcoming"
98
+ ],
99
+ "ownership": [
100
+ "semantic tokens",
101
+ "Button",
102
+ "registered discovery media",
103
+ "localized workflow copy"
104
+ ],
105
+ "forbidden": [
106
+ "seeded brand data",
107
+ "page-owned CSS",
108
+ "detached CTA cards",
109
+ "oversized marketing headlines",
110
+ "decorative kicker or ready-state copy",
111
+ "image-generated text or logos",
112
+ "media replacing state or action",
113
+ "raw color or radius values"
114
+ ]
115
+ },
116
+ {
117
+ "id": "designer-agent-workbench",
118
+ "title": "Three-pane agent workspace template",
119
+ "contract": "Entering Designer Agent changes the product shell into a focused, viewport-height agent workspace while preserving a compact Ceramic topbar. Documentation navigation, account chrome, and the legal footer leave the active workspace; the topbar instead communicates Room, current stage, language, and an explicit exit without marketing-scale height, shadow, or capsule geometry. Account management remains available after exiting to the Room. A navigation rail, one primary scrollable conversation with a bottom-docked composer, and a scrollable context rail form the reusable desktop template. The managed message scroller restores the live edge on entry, follows streaming only while the user remains there, preserves reading position when older history is prepended, and reveals a localized jump-to-latest action for offscreen updates. It never drags a user away from content they intentionally scrolled back to. A submitted message immediately exposes a truthful busy state, blocks duplicate sends while its model run is queued or running, and resolves to either a durable response or an in-conversation failure with retry. Live interpretation, elapsed working time, and truthful activity stay in the conversation immediately before the response; the progress record remains visible after completion and does not disappear during the run-to-message synchronization gap. A Refine in chat action keeps the selected output visible for comparison, identifies that concept in the composer context, moves focus to the composer, and brings that composer into view so the user's next instruction can create a revised version. Journey and Artifact register use the same rail heading scale and row density. Completed and current Journey stages are keyboard-reachable view controls, while locked future stages remain disabled; revisiting an earlier stage changes only the visible working context and never rolls back approved progress. Journey and Artifact register collapse independently to the registered workspace rail width, so the user reclaims only the side they choose. Each column resize is a Framer layout transition driven by the active Ceramic layout recipe; content exit and direction-aware affordances use the same registered motion policy, and reduced-motion users receive the final layout immediately. Collapsed rails never leak clipped content. Discovery begins with one focused question and optional response starters; starters support rather than replace a user's own response. An approved discovery brief is versioned as a Markdown artifact and supplied as durable Brand Room memory to later agent turns. Logo structure guidance uses compact visual schematics rather than explanatory text cards; the selected structure and selected references combine a semantic selected surface, strong outline, and check indicator instead of relying on a subtle color shift. Optional reference search stays collapsed until requested, uses a clipping-safe internal focus treatment, and adapts result columns to the tool panel width so logos and labels remain legible. Existing-evidence upload remains a compact composer accessory across agent stages instead of becoming a leading CTA or message; accepted-file guidance stays available to assistive technology and the file picker without competing with the prompt. Search, configuration, connection, and approval inputs appear as compact, collapsible Chat Tool Panels in the conversation flow, with bounded internal overflow when expanded. Truthful activity rows in that flow summarize the latest user-meaningful state for each durable subject; raw lifecycle identifiers and superseded intermediate events stay hidden. Generated previews, visual variants, approval state, version actions, files, and other durable results update in the context/output rail only after a real run produces that result; interpretation prose and activity never move into that rail, and the rail never fabricates an idle artifact or logo before output exists. Operational connection state belongs to that same context rail. Workspace typography, row height, panel padding, content measure, composer height, and topbar chrome resolve through the shared workspace semantic token family; pages never scale these locally. Mobile starts both supporting rails collapsed with their labels visible, removes collapsed bodies from layout, and reflows an expanded Journey into two columns without a second horizontal scroll axis. Compact layouts keep the conversation primary and move supporting rails into bounded, internally scrollable regions without transferring overflow to the document.",
120
+ "source": "src/patterns/designer-agent-workspace.css",
121
+ "slots": [
122
+ "brand-designer-agent",
123
+ "designer-agent-workbench",
124
+ "agent-workspace-navigation",
125
+ "agent-workspace-conversation",
126
+ "agent-live-interpretation",
127
+ "chat-message-scroller",
128
+ "chat-composer",
129
+ "chat-composer-toolbar",
130
+ "agent-prompt-options",
131
+ "agent-source-intake",
132
+ "agent-logo-direction-guide",
133
+ "agent-reference-library",
134
+ "agent-workspace-context",
135
+ "agent-workspace-tool",
136
+ "agent-workspace-output",
137
+ "topbar-agent-context"
138
+ ],
139
+ "states": [
140
+ "discovery",
141
+ "active",
142
+ "working",
143
+ "settled",
144
+ "empty",
145
+ "complete",
146
+ "current",
147
+ "locked"
148
+ ],
149
+ "ownership": [
150
+ "semantic tokens",
151
+ "MotionProvider layout recipe",
152
+ "Framer Motion React adapter",
153
+ "WorkspaceJourney",
154
+ "Card",
155
+ "Chat Layout",
156
+ "Chat Message Scroller",
157
+ "Chat Tool Panel",
158
+ "Chat Composer",
159
+ "Attachment",
160
+ "Alert",
161
+ "Badge",
162
+ "Button"
163
+ ],
164
+ "forbidden": [
165
+ "page-owned CSS",
166
+ "documentation navigation inside agent mode",
167
+ "legal footer inside the active workspace",
168
+ "decorative kicker or prototype badge",
169
+ "oversized marketing headline",
170
+ "detached connection callout",
171
+ "tool forms appended below the workbench",
172
+ "generated results inside the input flow",
173
+ "speculative idle artifact previews",
174
+ "raw audit event identifiers",
175
+ "duplicated activity labels",
176
+ "invented or optimistic activity claims without a durable server event",
177
+ "document-owned workbench scrolling",
178
+ "composer separated from the conversation",
179
+ "duplicated stage and artifact lists",
180
+ "three detached dashboard cards",
181
+ "raw color or radius values"
182
+ ]
183
+ },
13
184
  {
14
185
  "id": "composite-keyboard-navigation",
15
186
  "title": "Keyboard navigation in composite widgets",
16
187
  "contract": "Keep one tab stop, move roving focus with logical arrows, support Home/End and documented Page movement, and preserve the active key when data changes.",
17
- "requiredAlternatives": ["pointer", "keyboard", "touch"],
188
+ "requiredAlternatives": [
189
+ "pointer",
190
+ "keyboard",
191
+ "touch"
192
+ ],
18
193
  "rtl": "Inline ArrowLeft and ArrowRight movement follows reading direction; block movement does not flip."
19
194
  },
20
195
  {
21
196
  "id": "inclusive-drag-and-drop",
22
197
  "title": "Drag and drop with keyboard and touch alternatives",
23
198
  "contract": "Every drag action has Move earlier/Move later controls, announces the result, and restores focus to the moved item.",
24
- "requiredAlternatives": ["pointer drag", "keyboard move", "touch move controls"],
199
+ "requiredAlternatives": [
200
+ "pointer drag",
201
+ "keyboard move",
202
+ "touch move controls"
203
+ ],
25
204
  "reducedMotion": "Commit the final order without animated displacement."
26
205
  },
27
206
  {
@@ -38,7 +217,13 @@
38
217
  "id": "chart-period-comparison",
39
218
  "title": "Period comparison and benchmark analysis",
40
219
  "contract": "Keep current, previous, target, forecast, and benchmark series semantically distinct in labels, line patterns, tokens, and the data table; never rely on hue alone.",
41
- "states": ["loading", "empty", "error", "partial", "ready"],
220
+ "states": [
221
+ "loading",
222
+ "empty",
223
+ "error",
224
+ "partial",
225
+ "ready"
226
+ ],
42
227
  "rtl": "Chronological start follows reading direction while period labels and numbers preserve their locale."
43
228
  },
44
229
  {
@@ -110,14 +295,23 @@
110
295
  "id": "todo-completion-and-recovery",
111
296
  "title": "Complete and recover a task",
112
297
  "contract": "Task completion remains keyboard and pointer operable, announces aggregate progress, keeps product data controlled, and does not make Layout JSON own task records.",
113
- "states": ["loading", "empty", "error", "ready"],
298
+ "states": [
299
+ "loading",
300
+ "empty",
301
+ "error",
302
+ "ready"
303
+ ],
114
304
  "rtl": "Checkbox, task label, metadata, and destructive action follow logical reading order."
115
305
  },
116
306
  {
117
307
  "id": "agent-dashboard-composition",
118
308
  "title": "Agent and human dashboard composition",
119
309
  "contract": "Agents and human arrange controls write the same versioned Layout JSON, validate before commit, preserve locked blocks and regions, and render only registered semantic props.",
120
- "requiredAlternatives": ["agent mutation", "keyboard controls", "touch controls"],
310
+ "requiredAlternatives": [
311
+ "agent mutation",
312
+ "keyboard controls",
313
+ "touch controls"
314
+ ],
121
315
  "rtl": "Placement uses logical reading order while registered column and span values remain deterministic."
122
316
  }
123
317
  ]
@@ -0,0 +1,44 @@
1
+ {
2
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
3
+ "$id": "https://utopia-studio.co/schemas/ceramic-presentation-assets.schema.json",
4
+ "title": "Ceramic presentation asset library",
5
+ "type": "object",
6
+ "additionalProperties": false,
7
+ "required": ["schemaVersion", "assets"],
8
+ "properties": {
9
+ "$schema": { "type": "string" },
10
+ "schemaVersion": { "const": "1.0.0" },
11
+ "assets": {
12
+ "type": "array",
13
+ "items": {
14
+ "type": "object",
15
+ "additionalProperties": false,
16
+ "required": ["id", "kind", "src", "alt", "usage", "themes", "placements", "aspectRatios", "license", "credit"],
17
+ "properties": {
18
+ "id": { "type": "string", "pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*$" },
19
+ "kind": { "enum": ["logo", "wordmark", "photography", "illustration", "texture", "diagram", "icon"] },
20
+ "src": { "type": "string", "pattern": "^(?!https?://)(?!/)(?!.*(?:^|/)\\.\\.(?:/|$)).+\\.(?:avif|gif|jpe?g|png|svg|webp)$" },
21
+ "alt": { "type": "string", "minLength": 1 },
22
+ "usage": { "type": "string", "minLength": 1 },
23
+ "themes": { "type": "array", "minItems": 1, "uniqueItems": true, "items": { "type": "string", "minLength": 1 } },
24
+ "locales": { "type": "array", "minItems": 1, "uniqueItems": true, "items": { "type": "string", "minLength": 1 }, "default": ["*"] },
25
+ "placements": {
26
+ "type": "array",
27
+ "minItems": 1,
28
+ "uniqueItems": true,
29
+ "items": { "enum": ["cover", "section-divider", "image-led", "case-study", "quote", "closing", "background"] }
30
+ },
31
+ "aspectRatios": { "type": "array", "minItems": 1, "uniqueItems": true, "items": { "enum": ["16:9", "4:3", "3:2", "1:1", "portrait", "free"] } },
32
+ "focalPoint": {
33
+ "type": "object",
34
+ "additionalProperties": false,
35
+ "required": ["x", "y"],
36
+ "properties": { "x": { "type": "number", "minimum": 0, "maximum": 1 }, "y": { "type": "number", "minimum": 0, "maximum": 1 } }
37
+ },
38
+ "license": { "type": "string", "minLength": 1 },
39
+ "credit": { "type": "string", "minLength": 1 }
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
@@ -42,7 +42,7 @@
42
42
  "entryPath": "templates/saas-solution-homepage/index.html",
43
43
  "manifestPath": "templates/saas-solution-homepage/template.manifest.json",
44
44
  "bundlePath": "templates/saas-solution-homepage",
45
- "pageCount": 10,
45
+ "pageCount": 13,
46
46
  "pages": [
47
47
  "Home",
48
48
  "Product",
@@ -52,8 +52,11 @@
52
52
  "Customers",
53
53
  "Customer Story",
54
54
  "Pricing",
55
+ "Team",
55
56
  "Changelog",
56
57
  "Contact Sales"
58
+ ,"Terms of Use"
59
+ ,"Privacy Policy"
57
60
  ],
58
61
  "useWhen": [
59
62
  "A SaaS product needs a complete product-led marketing narrative",
@@ -68,6 +71,23 @@
68
71
  "kind": "saas-solution-homepage",
69
72
  "density": "balanced"
70
73
  },
74
+ "executionContract": {
75
+ "defaultMode": "adapt",
76
+ "alwaysLocked": ["semanticRoles", "accessibility", "componentAllowlist"],
77
+ "modes": {
78
+ "exact": { "locked": ["sectionOrder", "componentTree", "layoutGrid", "spacingScale", "typeScale", "responsiveRules"], "editable": ["content", "media", "approvedData"] },
79
+ "adapt": { "locked": ["sectionOrder", "componentTree", "layoutGrid", "responsiveRules"], "editable": ["content", "media", "semanticTheme", "approvedVariants", "approvedData"] },
80
+ "explore": { "locked": [], "editable": ["content", "media", "semanticTheme", "approvedVariants", "sectionOrder", "optionalSections"] }
81
+ },
82
+ "componentAllowlist": ["TopNav", "TopNavItem", "Button", "Badge", "Card", "CardContent", "CardDescription", "CardHeader", "CardTitle", "Select", "SelectContent", "SelectItem", "SelectTrigger", "SelectValue", "Textarea", "TextInput", "MotionProvider"],
83
+ "tokenPolicy": { "mapping": "semantic-role-only", "forbidRawBrandPrimitives": true },
84
+ "contentPolicy": {
85
+ "sectionOrder": ["Hero", "Product interface preview", "Core workflow", "Agents and automation", "Integrations", "Security and reliability", "Team proof", "Adoption CTA", "Footer"],
86
+ "headlineMaxLines": 3,
87
+ "ctaCount": { "min": 1, "max": 2 }
88
+ },
89
+ "validation": { "allowUnknownComponents": false, "allowAdHocColors": false, "allowAdHocSpacing": false, "requireResponsiveRules": true, "requireReducedMotion": true, "requireRTL": true }
90
+ },
71
91
  "translations": {
72
92
  "ar": {
73
93
  "title": "موقع متكامل لحل SaaS",
@@ -437,6 +457,72 @@
437
457
  ]
438
458
  }
439
459
  }
460
+ },
461
+ {
462
+ "id": "template-chat-workspace",
463
+ "title": "Chat Workspace",
464
+ "category": "application-workspace",
465
+ "status": "available",
466
+ "purpose": "A runnable managed conversation template for assistant, support, and collaborative chat products with compact governed tools and a separate generated-output rail.",
467
+ "starterFor": ["AI assistants", "support workspaces", "collaborative chat products"],
468
+ "sections": ["Product mode header", "Managed conversation", "Compact tool panel", "Docked composer", "Generated output rail"],
469
+ "requiredComponents": ["Chat Layout", "Chat Message Scroller", "Chat Message", "Chat Message Bubble", "Chat Tool Panel", "Chat Composer", "Chat Send Button"],
470
+ "sourcePath": "templates/chat-workspace/main.tsx",
471
+ "entryPath": "templates/chat-workspace/index.html",
472
+ "manifestPath": "templates/chat-workspace/template.manifest.json",
473
+ "bundlePath": "templates/chat-workspace",
474
+ "pageCount": 1,
475
+ "pages": ["Chat Workspace"],
476
+ "useWhen": [
477
+ "A viewport-height product needs streaming-aware conversation scrolling",
478
+ "Input tools and generated output need an explicit ownership boundary"
479
+ ],
480
+ "avoidWhen": [
481
+ "A short static transcript intentionally belongs to document scrolling",
482
+ "The surface is a marketing testimonial rather than an interactive product"
483
+ ],
484
+ "rtlReady": true,
485
+ "preview": { "kind": "chat-workspace", "density": "compact" },
486
+ "translations": {
487
+ "ar": {
488
+ "title": "مساحة عمل للمحادثة",
489
+ "purpose": "قالب محادثة مُدار وقابل للتشغيل للمساعدات والدعم والتعاون مع أدوات إدخال مدمجة ومنطقة منفصلة للمخرجات المنشأة.",
490
+ "starterFor": ["مساعدات الذكاء الاصطناعي", "مساحات عمل الدعم", "منتجات المحادثة التعاونية"],
491
+ "sections": ["رأس وضع المنتج", "المحادثة المُدارة", "لوحة الأدوات", "محرر الرسالة المثبت", "منطقة المخرجات"]
492
+ }
493
+ }
494
+ },
495
+ {
496
+ "id": "template-quantum-verification-story",
497
+ "title": "Quantum Verification Story",
498
+ "category": "website-page",
499
+ "status": "available",
500
+ "purpose": "A code-level Next.js and shadcn full-height narrative website adapted from the vy3 project with neutral identity and Ceramic theme tokens.",
501
+ "referenceNote": "Imported from the local source linked to the vy3 Vercel project; presentation sections, motion, and route structure are preserved.",
502
+ "starterFor": ["Security consultancies", "Technical product storytelling", "High-authority enterprise launches"],
503
+ "sections": ["Dark verification hero", "Problem", "Offer", "Comparison", "Audience profiles", "Pilot", "Contact"],
504
+ "requiredComponents": ["shadcn primitives", "Radix UI", "Framer Motion", "Ceramic theme bridge"],
505
+ "sourcePath": "templates/quantum-verification-story/src/app/page.tsx",
506
+ "entryPath": "templates/quantum-verification-story/src/app/page.tsx",
507
+ "manifestPath": "templates/quantum-verification-story/template.manifest.json",
508
+ "bundlePath": "templates/quantum-verification-story",
509
+ "runtime": "nextjs",
510
+ "previewUrl": "/templates/quantum-verification-story/index.html",
511
+ "pageCount": 4,
512
+ "pages": ["Home", "Products", "Assessment", "Continuous Verification"],
513
+ "useWhen": ["A presentation-like enterprise homepage needs full-height storytelling", "A shadcn-based Next.js starter is preferred"],
514
+ "avoidWhen": ["Seeded compliance claims have not been reviewed", "The final brand identity is unavailable"],
515
+ "rtlReady": true,
516
+ "themeable": true,
517
+ "preview": { "kind": "nextjs-shadcn", "density": "presentation" },
518
+ "translations": {
519
+ "ar": {
520
+ "title": "سرد التحقق من التشفير الكمي",
521
+ "purpose": "موقع سردي متكامل الارتفاع مبني على Next.js وshadcn بهوية محايدة ورموز سمات Ceramic قابلة للتبديل.",
522
+ "starterFor": ["استشارات الأمن", "سرد المنتجات التقنية", "إطلاقات المؤسسات"],
523
+ "sections": ["واجهة تحقق داكنة", "المشكلة", "العرض", "المقارنة", "ملفات الجمهور", "البرنامج التجريبي", "التواصل"]
524
+ }
525
+ }
440
526
  }
441
527
  ]
442
528
  }