@utopia-studio-design/design-system-cli 0.8.1 → 0.8.2

package/data/manifests/blocks.json

@@ -122,8 +122,14 @@
       "bundlePath": "blocks/database-workspace",
       "sourcePath": "blocks/database-workspace/DatabaseWorkspaceBlocks.tsx",
       "exportName": "DatabaseToolbar",
-      "requiredImports": ["@utopia-studio-design/design-system/Database"],
-      "contracts": ["query controls", "saved view context", "permission-aware create action"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Database"
+      ],
+      "contracts": [
+        "query controls",
+        "saved view context",
+        "permission-aware create action"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -137,8 +143,15 @@
       "bundlePath": "blocks/database-workspace",
       "sourcePath": "blocks/database-workspace/DatabaseWorkspaceBlocks.tsx",
       "exportName": "DatabaseTableBlock",
-      "requiredImports": ["@utopia-studio-design/design-system/Database"],
-      "contracts": ["schema-driven properties", "grid keyboard model", "virtualization", "optimistic recovery"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Database"
+      ],
+      "contracts": [
+        "schema-driven properties",
+        "grid keyboard model",
+        "virtualization",
+        "optimistic recovery"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -152,8 +165,13 @@
       "bundlePath": "blocks/database-workspace",
       "sourcePath": "blocks/database-workspace/DatabaseWorkspaceBlocks.tsx",
       "exportName": "SavedViewsBar",
-      "requiredImports": ["@utopia-studio-design/design-system/Database"],
-      "contracts": ["controlled active view", "current view semantics"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Database"
+      ],
+      "contracts": [
+        "controlled active view",
+        "current view semantics"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -167,8 +185,14 @@
       "bundlePath": "blocks/database-workspace",
       "sourcePath": "blocks/database-workspace/DatabaseWorkspaceBlocks.tsx",
       "exportName": "RecordDetailDrawer",
-      "requiredImports": ["@utopia-studio-design/design-system/Database"],
-      "contracts": ["dialog semantics", "complete property detail", "logical inline-end placement"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Database"
+      ],
+      "contracts": [
+        "dialog semantics",
+        "complete property detail",
+        "logical inline-end placement"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -182,8 +206,14 @@
       "bundlePath": "blocks/database-workspace",
       "sourcePath": "blocks/database-workspace/DatabaseWorkspaceBlocks.tsx",
       "exportName": "BulkActionBar",
-      "requiredImports": ["@utopia-studio-design/design-system/Button"],
-      "contracts": ["selection count", "clear selection", "bulk mutation action"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Button"
+      ],
+      "contracts": [
+        "selection count",
+        "clear selection",
+        "bulk mutation action"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -197,8 +227,15 @@
       "bundlePath": "blocks/calendar-application",
       "sourcePath": "blocks/calendar-application/CalendarApplicationBlocks.tsx",
       "exportName": "SchedulerShell",
-      "requiredImports": ["@utopia-studio-design/design-system/Calendar"],
-      "contracts": ["controlled events and adapter", "accessible agenda", "keyboard and touch move alternatives", "responsive view transition"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Calendar"
+      ],
+      "contracts": [
+        "controlled events and adapter",
+        "accessible agenda",
+        "keyboard and touch move alternatives",
+        "responsive view transition"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -212,8 +249,14 @@
       "bundlePath": "blocks/calendar-application",
       "sourcePath": "blocks/calendar-application/CalendarApplicationBlocks.tsx",
       "exportName": "CalendarSidebar",
-      "requiredImports": ["@utopia-studio-design/design-system/Calendar"],
-      "contracts": ["controlled date", "resource visibility", "logical sidebar placement"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Calendar"
+      ],
+      "contracts": [
+        "controlled date",
+        "resource visibility",
+        "logical sidebar placement"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -227,8 +270,17 @@
       "bundlePath": "blocks/calendar-application",
       "sourcePath": "blocks/calendar-application/CalendarApplicationBlocks.tsx",
       "exportName": "EventEditorDrawer",
-      "requiredImports": ["@utopia-studio-design/design-system/Calendar"],
-      "contracts": ["modal focus and scroll lock", "Escape dismissal", "recurrence edit scope", "required and chronological date validation", "async save recovery with preserved draft", "controlled save and delete"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Calendar"
+      ],
+      "contracts": [
+        "modal focus and scroll lock",
+        "Escape dismissal",
+        "recurrence edit scope",
+        "required and chronological date validation",
+        "async save recovery with preserved draft",
+        "controlled save and delete"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -242,8 +294,14 @@
       "bundlePath": "blocks/calendar-application",
       "sourcePath": "blocks/calendar-application/CalendarApplicationBlocks.tsx",
       "exportName": "AgendaPanel",
-      "requiredImports": ["@utopia-studio-design/design-system/Calendar"],
-      "contracts": ["chronological event order", "screen-reader names", "equivalent event activation"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Calendar"
+      ],
+      "contracts": [
+        "chronological event order",
+        "screen-reader names",
+        "equivalent event activation"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -257,8 +315,14 @@
       "bundlePath": "blocks/calendar-application",
       "sourcePath": "blocks/calendar-application/CalendarApplicationBlocks.tsx",
       "exportName": "TimezoneSelector",
-      "requiredImports": ["@utopia-studio-design/design-system/Calendar"],
-      "contracts": ["IANA timezone values", "controlled selection", "visible display context"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Calendar"
+      ],
+      "contracts": [
+        "IANA timezone values",
+        "controlled selection",
+        "visible display context"
+      ],
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
@@ -352,7 +416,9 @@
       "bundlePath": "blocks/dashboard-composer",
       "sourcePath": "blocks/dashboard-composer/DashboardComposerBlocks.tsx",
       "exportName": "CeramicDashboardRenderer",
-      "requiredImports": ["@utopia-studio-design/design-system/Composition"],
+      "requiredImports": [
+        "@utopia-studio-design/design-system/Composition"
+      ],
       "contracts": [
         "versioned layout validation",
         "product-supplied renderer map",
@@ -387,6 +453,149 @@
       "rtlReady": true,
       "reducedMotion": true,
       "responsiveMinimum": "320px"
+    },
+    {
+      "id": "pattern-choice-cards",
+      "title": "Choice cards",
+      "status": "available",
+      "category": "semantic-ui-part",
+      "purpose": "A small set of mutually exclusive choices needs explanation.",
+      "bundlePath": "blocks/semantic-pattern-parts",
+      "sourcePath": "blocks/semantic-pattern-parts/ChoiceCards.tsx",
+      "exportName": "ChoiceCards",
+      "requiredImports": [
+        "@utopia-studio-design/design-system"
+      ],
+      "contracts": [
+        "selected",
+        "unselected",
+        "Product-owned options and selected id",
+        "Server permission checks for access-affecting roles"
+      ],
+      "rtlReady": true,
+      "reducedMotion": true,
+      "responsiveMinimum": "320px"
+    },
+    {
+      "id": "pattern-validated-field",
+      "title": "Validated input",
+      "status": "available",
+      "category": "semantic-ui-part",
+      "purpose": "A field needs a visible label, hint and validation feedback.",
+      "bundlePath": "blocks/semantic-pattern-parts",
+      "sourcePath": "blocks/semantic-pattern-parts/ValidatedField.tsx",
+      "exportName": "ValidatedField",
+      "requiredImports": [
+        "@utopia-studio-design/design-system"
+      ],
+      "contracts": [
+        "empty",
+        "filled",
+        "invalid",
+        "Host validation policy",
+        "Form state and submit callback"
+      ],
+      "rtlReady": true,
+      "reducedMotion": true,
+      "responsiveMinimum": "320px"
+    },
+    {
+      "id": "pattern-list-filters",
+      "title": "List filters",
+      "status": "available",
+      "category": "semantic-ui-part",
+      "purpose": "A list needs text search, one status filter and reset.",
+      "bundlePath": "blocks/semantic-pattern-parts",
+      "sourcePath": "blocks/semantic-pattern-parts/ListFilters.tsx",
+      "exportName": "ListFilters",
+      "requiredImports": [
+        "@utopia-studio-design/design-system"
+      ],
+      "contracts": [
+        "default",
+        "filtered",
+        "reset",
+        "Shared host query/status state",
+        "Filtered or server-paginated data query",
+        "First option is the reset/all value"
+      ],
+      "rtlReady": true,
+      "reducedMotion": true,
+      "responsiveMinimum": "320px"
+    },
+    {
+      "id": "pattern-review-list",
+      "title": "Review list",
+      "status": "available",
+      "category": "semantic-ui-part",
+      "purpose": "Authorized users inspect items with statuses and assignees.",
+      "bundlePath": "blocks/semantic-pattern-parts",
+      "sourcePath": "blocks/semantic-pattern-parts/ReviewList.tsx",
+      "exportName": "ReviewList",
+      "requiredImports": [
+        "@utopia-studio-design/design-system"
+      ],
+      "contracts": [
+        "ready",
+        "empty",
+        "loading",
+        "error",
+        "retry",
+        "Authorized row query",
+        "Review callback must not auto-approve",
+        "Localized labels",
+        "Host filtering and retry"
+      ],
+      "rtlReady": true,
+      "reducedMotion": true,
+      "responsiveMinimum": "320px"
+    },
+    {
+      "id": "pattern-progress-steps",
+      "title": "Progress steps",
+      "status": "available",
+      "category": "semantic-ui-part",
+      "purpose": "An ordered task has known prerequisites and a current step.",
+      "bundlePath": "blocks/semantic-pattern-parts",
+      "sourcePath": "blocks/semantic-pattern-parts/ProgressSteps.tsx",
+      "exportName": "ProgressSteps",
+      "requiredImports": [
+        "@utopia-studio-design/design-system"
+      ],
+      "contracts": [
+        "done",
+        "current",
+        "locked",
+        "Host prerequisite rules",
+        "Current step",
+        "Navigation callback"
+      ],
+      "rtlReady": true,
+      "reducedMotion": true,
+      "responsiveMinimum": "320px"
+    },
+    {
+      "id": "pattern-outcome-notice",
+      "title": "Outcome and next action",
+      "status": "available",
+      "category": "semantic-ui-part",
+      "purpose": "A confirmed result or recoverable issue needs a next action.",
+      "bundlePath": "blocks/semantic-pattern-parts",
+      "sourcePath": "blocks/semantic-pattern-parts/OutcomeNotice.tsx",
+      "exportName": "OutcomeNotice",
+      "requiredImports": [
+        "@utopia-studio-design/design-system"
+      ],
+      "contracts": [
+        "info",
+        "success",
+        "warning",
+        "Confirmed result",
+        "Meaningful next-action/retry callback"
+      ],
+      "rtlReady": true,
+      "reducedMotion": true,
+      "responsiveMinimum": "320px"
     }
   ]
 }

package/data/manifests/patterns.json

@@ -341,6 +341,336 @@
         "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."
+      }
     }
   ]
 }