@utopia-studio-design/design-system-cli 0.7.1 → 0.8.0

package/data/manifests/patterns.json

@@ -313,6 +313,364 @@
         "touch controls"
       ],
       "rtl": "Placement uses logical reading order while registered column and span values remain deterministic."
+    },
+    {
+      "id": "venture-document",
+      "title": "Venture document family and logo-on-band",
+      "source": "packages/design-system/src/core.css",
+      "contract": "Documents, decks and one-pagers use the venture document ruling. Product surfaces retain the product theme. An explicit approved logo-on-band treatment permits separate rounded containers without changing transparent logo geometry. HTML decks retain their delivery/motion contract while using the document-family visual ruling.",
+      "slots": [
+        "uds-document-strip",
+        "uds-document-eyebrow",
+        "uds-document-chip",
+        "uds-document-band",
+        "uds-document-logo-container"
+      ],
+      "tokens": [
+        "--document-strip-background",
+        "--document-strip-foreground",
+        "--document-eyebrow-foreground",
+        "--document-chip-background",
+        "--document-chip-foreground",
+        "--document-band-background",
+        "--document-band-foreground",
+        "--document-logo-container-background",
+        "--document-logo-container-radius"
+      ],
+      "states": [
+        "document",
+        "logo-on-band"
+      ]
+    },
+    {
+      "id": "ux-pattern-examples",
+      "title": "UX pattern page examples",
+      "source": "blocks/ux-pattern-examples/ux-examples.css",
+      "contract": "Human-facing UX pattern list with complete contextual page examples, preview/code inspection, base npm installation and optional AI handoff. Examples compose reusable parts; agents still select only needed parts. No required manual assembly. Use the user theme or Cloudblur, no source branding. Clearly distinguish shipped npm components from local example/MCP code. Input stays in demo memory; no signup, consent, review or provisioning is executed. Every example links internally to a pinned source pattern; source-indexed status is not a completed port. States can be inspected independently, without switching other examples. Retired invented review/workspace examples are not discoverable.",
+      "ownership": [
+        "UIPatternLibrary",
+        "AccountExamples",
+        "AuthFrame",
+        "semantic-pattern-parts",
+        "Button",
+        "Checkbox",
+        "TextInput"
+      ],
+      "slots": [
+        "ux-example",
+        "bar",
+        "center",
+        "form",
+        "setup",
+        "workspace",
+        "actions",
+        "check"
+      ],
+      "states": [
+        "preview",
+        "code",
+        "invalid",
+        "complete",
+        "filtered",
+        "empty",
+        "copied",
+        "copy-failed"
+      ],
+      "tokens": [
+        "--ux-example-min-height",
+        "--ux-example-form-width",
+        "--ux-example-setup-width",
+        "--surface",
+        "--background",
+        "--foreground",
+        "--border",
+        "--radius-surface"
+      ],
+      "responsive": {
+        "behavior": "Bounded page stage, form center stacks at small widths; native tables/code scrolling without chrome, logical layout and localized examples."
+      }
+    },
+    {
+      "id": "semantic-pattern-parts",
+      "title": "Composable product-neutral UI parts",
+      "source": "blocks/semantic-pattern-parts/pattern-parts.css",
+      "contract": "Parts expose product-owned labels, data and callbacks. No copied screen shells, brand names or portal roles. Choices, fields, filters, review rows, progress and results compose independently; reuse KPIGrid for metrics. User/room theme wins; otherwise Cloudblur. Surface radii are bounded independently from pill controls. MCP retrieves only selected parts with explicit shared-state bindings, never authorizes operations.",
+      "ownership": [
+        "PatternParts",
+        "KPIGrid",
+        "UIPatternLibrary",
+        "UIPatternPreview",
+        "Button",
+        "TextInput",
+        "NativeSelect",
+        "Badge",
+        "DataTable"
+      ],
+      "slots": [
+        "pattern-choices",
+        "pattern-field",
+        "pattern-filters",
+        "pattern-review",
+        "pattern-steps",
+        "pattern-result"
+      ],
+      "states": [
+        "selected",
+        "unselected",
+        "empty",
+        "invalid",
+        "filtered",
+        "ready",
+        "loading",
+        "error",
+        "retry",
+        "done",
+        "current",
+        "locked",
+        "info",
+        "success",
+        "warning"
+      ],
+      "tokens": [
+        "--pattern-part-radius",
+        "--pattern-part-min",
+        "--radius-surface",
+        "--foreground",
+        "--foreground-muted",
+        "--primary",
+        "--primary-foreground",
+        "--surface",
+        "--border",
+        "--success",
+        "--warning"
+      ],
+      "responsive": {
+        "behavior": "Auto-fit parts, wrapped filters, native table scrolling without chrome, logical properties and translated labels for RTL. No motion required."
+      }
+    },
+    {
+      "id": "ux-pattern-catalog",
+      "title": "UX pattern example library",
+      "source": "src/patterns/ux-pattern-catalog.css",
+      "contract": "Searchable catalogue links to one dedicated route per implemented UX pattern. Detail renders only that example, with back-to-list and adjacent links, Preview/Code, viewport, reset, state, npm and optional AI controls. Browser back/forward, refresh and legacy example query links work. No giant stacked one-pager; source-indexed items are not completed examples. User theme wins, otherwise Cloudblur. AI selects needed parts independently; demos are memory-only and publishing status is explicit. Catalogue and detail routes use the same templates application area and never mount the documentation sidebar, including mobile. The preview uses the full available main canvas.",
+      "ownership": [
+        "UIPatternLibrary",
+        "UIPatternPreview",
+        "TemplatesPage composition",
+        "Button",
+        "NativeSelect",
+        "TextInput",
+        "TextArea",
+        "Badge",
+        "semantic-pattern-parts",
+        "KPIGrid"
+      ],
+      "slots": [
+        "ux-pattern-catalog",
+        "nav",
+        "detail",
+        "heading",
+        "controls",
+        "stage",
+        "page",
+        "code",
+        "meta",
+        "help",
+        "feedback",
+        "gallery-navigation",
+        "gallery-identity",
+        "gallery-sizes",
+        "catalog-index",
+        "catalog-entry",
+        "catalog-link"
+      ],
+      "states": [
+        "searching",
+        "empty",
+        "selected",
+        "preview",
+        "code",
+        "copied",
+        "copy-failed"
+      ],
+      "tokens": [
+        "--ux-catalog-card-min",
+        "--ux-catalog-content-max",
+        "--ux-catalog-radius",
+        "--ux-catalog-sample-height",
+        "--ux-library-nav-width",
+        "--ux-library-mobile-width",
+        "--ux-library-code-height",
+        "--ux-gallery-tablet-width",
+        "--ux-gallery-search-width"
+      ],
+      "responsive": {
+        "behavior": "Horizontal pattern navigation and toolbar wrap at 60rem. Full-width preview can be bounded to tablet/mobile widths; native table/code scrolling has no chrome. Logical layout supports Arabic."
+      }
+    },
+    {
+      "id": "auth-interactions",
+      "title": "Composable account interactions",
+      "source": "blocks/semantic-pattern-parts/auth-parts.css",
+      "contract": "Password visibility/strength, six-digit entry, provider selection and centered account framing are independently reusable source-backed interactions. Product owns labels, rules, pending/error/success state and auth callbacks. OTP supports paste/backspace/arrows, labels and RTL numeric order. Preview remains in-memory and cannot authenticate, send mail, persist passwords or change security settings. Source screenshots and palettes are never rendered as themed ports.",
+      "ownership": [
+        "AuthParts",
+        "AccountExamples",
+        "UIPatternLibrary",
+        "Button",
+        "TextInput",
+        "Checkbox"
+      ],
+      "slots": [
+        "password-field",
+        "verification-code",
+        "provider-sign-in",
+        "auth-part-frame",
+        "auth-part-field",
+        "auth-part-password",
+        "auth-part-rules",
+        "auth-part-code",
+        "auth-part-providers",
+        "auth-part-divider",
+        "auth-part-actions",
+        "auth-part-card",
+        "auth-part-check",
+        "auth-part-state"
+      ],
+      "states": [
+        "hidden",
+        "visible",
+        "invalid",
+        "partial",
+        "complete",
+        "pending",
+        "waiting",
+        "expired",
+        "selected"
+      ],
+      "tokens": [
+        "--auth-form-width",
+        "--auth-code-cell-min",
+        "--surface",
+        "--background",
+        "--foreground",
+        "--foreground-muted",
+        "--destructive-text",
+        "--success-text",
+        "--border",
+        "--radius-input",
+        "--radius-surface",
+        "--auth-code-radius",
+        "--auth-panel-radius"
+      ],
+      "responsive": {
+        "behavior": "Container-bounded form, wrapping actions and logical spacing. Numeric codes remain LTR inside Arabic context; no custom motion."
+      }
+    },
+    {
+      "id": "product-interactions",
+      "title": "Composable activity and preference interactions",
+      "source": "blocks/semantic-pattern-parts/product-parts.css",
+      "contract": "Host-owned activity rows, directory cards and per-event notification channels. Generic labels and callbacks, bounded semantic geometry, accessible empty and unread states. Channel restrictions are host data, not product-wide policy. Examples reuse only needed interactions, never a source portal shell. All demo activity remains in memory.",
+      "ownership": [
+        "ProductParts",
+        "ProductExamples",
+        "Button",
+        "NativeSelect"
+      ],
+      "slots": [
+        "activity-list",
+        "activity-row",
+        "directory-cards",
+        "directory-card",
+        "channel-preferences",
+        "product-example",
+        "product-content",
+        "product-columns",
+        "product-toolbar"
+      ],
+      "states": [
+        "default",
+        "empty",
+        "unread",
+        "archived",
+        "selected",
+        "filtered",
+        "saved",
+        "dirty"
+      ],
+      "tokens": [
+        "--product-content-width",
+        "--product-card-min",
+        "--product-panel-radius",
+        "--space-4",
+        "--space-6",
+        "--surface",
+        "--surface-strong",
+        "--foreground",
+        "--foreground-muted",
+        "--border"
+      ],
+      "responsive": {
+        "behavior": "Container-query two-column layout collapses within mobile previews; rows and controls wrap. Logical spacing and native chrome-free scrolling."
+      }
+    },
+    {
+      "id": "workflow-interactions",
+      "title": "Independent workflow fields, records, checks and media state",
+      "source": "blocks/semantic-pattern-parts/workflow-parts.css",
+      "contract": "Composable host-owned fields, record tables, prerequisite checks, ratings, measures, trends and media stages. Example definitions carry source-linked neutral scenarios, not source portal layouts. Required-field policy, authorization, prices, file transfer, device testing and mutations remain with the integrating product. Bounded surfaces, native scrolling without chrome, keyboard names and logical RTL layout.",
+      "ownership": [
+        "WorkflowParts",
+        "WorkflowExample",
+        "WorkflowExamples",
+        "Button",
+        "TextInput",
+        "TextArea",
+        "NativeSelect"
+      ],
+      "slots": [
+        "workflow-example",
+        "workflow-fields",
+        "workflow-multi-select",
+        "record-table",
+        "step-checklist",
+        "stat-strip",
+        "rating-fields",
+        "trend-summary",
+        "media-stage"
+      ],
+      "states": [
+        "default",
+        "invalid",
+        "empty",
+        "pending",
+        "pass",
+        "fail",
+        "locked",
+        "selected",
+        "complete",
+        "scheduled",
+        "live",
+        "ended"
+      ],
+      "tokens": [
+        "--workflow-table-min",
+        "--workflow-media-min",
+        "--product-panel-radius",
+        "--space-4",
+        "--space-5",
+        "--border",
+        "--surface",
+        "--surface-strong",
+        "--foreground-muted",
+        "--destructive-text",
+        "--primary",
+        "--ring"
+      ],
+      "responsive": {
+        "behavior": "Contained keyboard-scrollable tables; wrapping actions and single-column fields at narrow widths. Media does not start permissions or animations."
+      }
     }
   ]
 }

package/data/manifests/theme-dextrum.json

@@ -12,12 +12,42 @@
   "motionProfile": "swift",
   "brandPrimitives": {
     "colors": {
-      "darkBlue": { "value": "#192B39", "token": "--dx-brand-dark-blue", "immutable": true, "use": "Light text and structural brand surfaces" },
-      "oceanBlue": { "value": "#3E8ECC", "token": "--dx-brand-ocean-blue", "immutable": true, "use": "Dark primary actions, links, focus, and current navigation" },
-      "oceanHover": { "value": "#4A9AD4", "token": "--dx-brand-ocean-hover", "immutable": true, "use": "Dark primary hover" },
-      "oceanDeep": { "value": "#26689A", "token": "--dx-brand-ocean-deep", "immutable": true, "use": "Light primary and Dark primary active" },
-      "logoTeal": { "value": "#063946", "token": "--dx-brand-logo-teal", "immutable": true, "use": "Logo and explicit brand expression only" },
-      "timidWhite": { "value": "#EAEAEA", "token": "--dx-brand-timid-white", "immutable": true, "use": "Dark foreground" },
+      "darkBlue": {
+        "value": "#192B39",
+        "token": "--dx-brand-dark-blue",
+        "immutable": true,
+        "use": "Light text and structural brand surfaces"
+      },
+      "oceanBlue": {
+        "value": "#3E8ECC",
+        "token": "--dx-brand-ocean-blue",
+        "immutable": true,
+        "use": "Dark primary actions, links, focus, and current navigation"
+      },
+      "oceanHover": {
+        "value": "#4A9AD4",
+        "token": "--dx-brand-ocean-hover",
+        "immutable": true,
+        "use": "Dark primary hover"
+      },
+      "oceanDeep": {
+        "value": "#26689A",
+        "token": "--dx-brand-ocean-deep",
+        "immutable": true,
+        "use": "Light primary and Dark primary active"
+      },
+      "logoTeal": {
+        "value": "#063946",
+        "token": "--dx-brand-logo-teal",
+        "immutable": true,
+        "use": "Logo and explicit brand expression only"
+      },
+      "timidWhite": {
+        "value": "#EAEAEA",
+        "token": "--dx-brand-timid-white",
+        "immutable": true,
+        "use": "Dark foreground"
+      },
       "charcoal950": "#0E1215",
       "charcoal925": "#11161A",
       "charcoal900": "#171C20",
@@ -45,12 +75,36 @@
       },
       "arabicFamily": "Readex Pro",
       "weights": {
-        "clashGrotesk": [300, 400, 500, 600, 700],
-        "satoshi": [400, 500, 700],
-        "manrope": [300, 400, 500, 600, 700, 800],
-        "jetBrainsMono": [400, 500, 600]
+        "clashGrotesk": [
+          300,
+          400,
+          500,
+          600,
+          700
+        ],
+        "satoshi": [
+          400,
+          500,
+          700
+        ],
+        "manrope": [
+          300,
+          400,
+          500,
+          600,
+          700,
+          800
+        ],
+        "jetBrainsMono": [
+          400,
+          500,
+          600
+        ]
       },
-      "arabicWeights": [300, 500],
+      "arabicWeights": [
+        300,
+        500
+      ],
       "headlineCasing": "sentence",
       "headlineTracking": "-0.03em to -0.05em",
       "arabicDisplayFamily": "Readex Pro",
@@ -153,14 +207,31 @@
     "--sidebar-width-collapsed": "Owned by core; remains 4rem"
   },
   "governanceStatus": {
-    "success": { "dark": "#79B98E", "light": "#3F7953" },
-    "warning": { "dark": "#D2A363", "light": "#916026" },
-    "critical": { "dark": "#C86E64", "light": "#A94F47" },
-    "surfaceAlpha": { "dark": "12%", "light": "9%" },
+    "success": {
+      "dark": "#79B98E",
+      "light": "#3F7953"
+    },
+    "warning": {
+      "dark": "#D2A363",
+      "light": "#916026"
+    },
+    "critical": {
+      "dark": "#C86E64",
+      "light": "#A94F47"
+    },
+    "surfaceAlpha": {
+      "dark": "12%",
+      "light": "9%"
+    },
     "rule": "Status colors communicate governance state only; never use them as decorative accents."
   },
   "visualPolicy": {
-    "tone": ["precise", "technical", "calm", "confident"],
+    "tone": [
+      "precise",
+      "technical",
+      "calm",
+      "confident"
+    ],
     "allow": [
       "neutral charcoal dark workspaces",
       "plain cool-neutral light canvases with white cards",
@@ -183,8 +254,16 @@
   "iconPolicy": {
     "system": "lucide",
     "description": "Dextrum uses standard Lucide icons in product UI and keeps the Dextrum mark for brand surfaces.",
-    "allow": ["lucide icons in components", "monochrome currentColor icons", "directional mirroring in RTL"],
-    "avoid": ["Utopia Phosphor icon policy", "emoji", "mixed icon families in one surface"],
+    "allow": [
+      "lucide icons in components",
+      "monochrome currentColor icons",
+      "directional mirroring in RTL"
+    ],
+    "avoid": [
+      "Utopia Phosphor icon policy",
+      "emoji",
+      "mixed icon families in one surface"
+    ],
     "coreNote": "Icon policy is theme-owned. Core components remain icon-system neutral."
   },
   "translations": {
@@ -193,7 +272,11 @@
       "iconPolicy": {
         "system": "Lucide",
         "description": "يستخدم Dextrum أيقونات Lucide القياسية داخل واجهة المنتج، مع إبقاء علامة Dextrum لأسطح العلامة.",
-        "allow": ["أيقونات Lucide في المكونات", "أيقونات أحادية بلون currentColor", "عكس الاتجاه في RTL"]
+        "allow": [
+          "أيقونات Lucide في المكونات",
+          "أيقونات أحادية بلون currentColor",
+          "عكس الاتجاه في RTL"
+        ]
       }
     }
   },
@@ -210,6 +293,34 @@
     "Use Manrope for Latin app UI, Satoshi for supporting labels, and JetBrains Mono for evidence identifiers.",
     "Use Clash Grotesk for explicit marketing display only.",
     "Keep Arabic on Readex Pro tokens (body 300, display 500).",
-    "Do not import Utopia brand primitives into Dextrum-themed surfaces."
-  ]
+    "Do not import Utopia brand primitives into Dextrum-themed surfaces.",
+    "For documents, decks and one-pagers, apply documentFamily before product surface or generic presentation defaults.",
+    "Use canonical BLUE v2, TEAL, GREY and tagline transparent SVG assets; the public logo mirrors BLUE v2 byte for byte."
+  ],
+  "revision": "v2",
+  "documentFamily": {
+    "id": "venture-document",
+    "rulingDate": "2026-09-07",
+    "exemplar": "2026-09-07_dextrum_onepager-totalenergies-tier1-v1_1.pptx",
+    "scope": [
+      "documents",
+      "decks",
+      "one-pagers"
+    ],
+    "tokens": {
+      "--document-strip-background": "#C9E0F5",
+      "--document-strip-foreground": "#192B39",
+      "--document-eyebrow-foreground": "#3E8ECC",
+      "--document-chip-background": "#FFFFFF",
+      "--document-chip-foreground": "#192B39",
+      "--document-band-background": "#5B87AD",
+      "--document-band-foreground": "#FFFFFF",
+      "--document-logo-container-background": "#FFFFFF",
+      "--document-logo-container-radius": "var(--radius-surface)"
+    },
+    "logoTreatment": "logo-on-band: preserve transparent logo assets inside separate white rounded containers behind both logos on colored bands. Never edit the mark.",
+    "precedence": "Product surfaces use Ceramic v2. Documents, decks and one-pagers follow the 07 Sep document rulings until superseded; HTML is a delivery format, not a reason to discard the document ruling.",
+    "identityManifest": "public/brand/dextrum/ceramic.assets.json",
+    "legacyNote": "The 01 Sep design-language document in the supplied kit is historical v1, not the current product token authority."
+  }
 }