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

package/lib/brandbook-validation.mjs

@@ -0,0 +1,112 @@
+import { existsSync, readFileSync } from 'node:fs'
+import { dirname, extname, isAbsolute, join, resolve } from 'node:path'
+
+const chapters = ['brand', 'core', 'photography', 'motion', 'marketing', 'solution']
+const directionFields = ['name', 'thesis', 'typography', 'color', 'imagery', 'motion', 'marketing', 'solution', 'fit', 'tradeoff']
+const text = (value) => typeof value === 'string' && value.trim().length > 0
+const object = (value) => value !== null && typeof value === 'object' && !Array.isArray(value)
+const issue = (code, message, field) => ({ code, message, ...(field ? { field } : {}) })
+
+function resolveBrandPath(inputPath, root) {
+  const candidate = isAbsolute(inputPath) ? inputPath : resolve(root, inputPath)
+  return extname(candidate).toLowerCase() === '.md' ? candidate : join(candidate, 'BRAND.md')
+}
+
+function parseJson(raw, label, errors) {
+  try {
+    return JSON.parse(raw)
+  } catch {
+    errors.push(issue('INVALID_JSON', `${label} must use valid JSON syntax.`))
+    return null
+  }
+}
+
+export function validateBrandbook({ path: inputPath }, root = process.cwd()) {
+  const errors = []
+  const warnings = []
+  const suppliedPath = String(inputPath || '').trim()
+  if (!suppliedPath) {
+    return { ok: false, path: null, errors: [issue('PATH_REQUIRED', 'Provide a BRAND.md file or its containing directory.')], warnings }
+  }
+
+  const brandPath = resolveBrandPath(suppliedPath, root)
+  if (!existsSync(brandPath)) {
+    return { ok: false, path: brandPath, errors: [issue('BRAND_MD_NOT_FOUND', `BRAND.md was not found at ${brandPath}.`)], warnings }
+  }
+
+  const raw = readFileSync(brandPath, 'utf8')
+  const frontmatter = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/)
+  if (!frontmatter) errors.push(issue('FRONTMATTER_REQUIRED', 'BRAND.md must start with JSON frontmatter between --- delimiters.'))
+  const meta = frontmatter ? parseJson(frontmatter[1], 'BRAND.md frontmatter', errors) : null
+  if (meta) {
+    if (meta.schema !== 'ceramic.document/v1' || meta.id !== 'brand') errors.push(issue('INVALID_DOCUMENT_IDENTITY', 'Frontmatter must use schema ceramic.document/v1 and id brand.'))
+    if (!/^[a-z][a-z0-9-]{0,79}$/.test(meta.brandId || '')) errors.push(issue('INVALID_BRAND_ID', 'brandId must be a lowercase slug.', 'brandId'))
+    if (!/^\d+\.\d+\.\d+$/.test(meta.version || '')) errors.push(issue('INVALID_VERSION', 'version must be semantic versioning.', 'version'))
+    if (!['draft', 'review', 'approved'].includes(meta.status)) errors.push(issue('INVALID_STATUS', 'status must be draft, review, or approved.', 'status'))
+    if (!Array.isArray(meta.requiredLocales) || !meta.requiredLocales.includes('en') || !meta.requiredLocales.includes('ar')) {
+      errors.push(issue('REQUIRED_LOCALES', 'requiredLocales must include en and ar unless the user explicitly approved another scope.', 'requiredLocales'))
+    }
+  }
+
+  const blocks = [...raw.matchAll(/^```ceramic\s*\r?\n([\s\S]*?)^```\s*$/gm)]
+  if (blocks.length !== 1) errors.push(issue('CERAMIC_CONTRACT_COUNT', 'BRAND.md must contain exactly one fenced ceramic JSON contract.'))
+  const contract = blocks.length === 1 ? parseJson(blocks[0][1], 'Ceramic contract', errors) : null
+  if (contract) {
+    for (const chapter of chapters) {
+      if (!object(contract[chapter])) {
+        errors.push(issue('CHAPTER_CONTRACT_REQUIRED', `Missing ${chapter} contract.`, chapter))
+        continue
+      }
+      const decisions = contract[chapter].decisions
+      if (!Array.isArray(decisions) || decisions.length === 0) errors.push(issue('DECISIONS_REQUIRED', `${chapter} needs at least one decision.`, `${chapter}.decisions`))
+      if (chapter !== 'brand') {
+        const expected = ['marketing', 'solution'].includes(chapter) ? 'core' : 'brand'
+        if (contract[chapter].extends !== expected) errors.push(issue('INVALID_INHERITANCE', `${chapter}.extends must be ${expected}.`, `${chapter}.extends`))
+      }
+    }
+
+    const session = contract.brand?.directionSession
+    if (!object(session) || !Array.isArray(session.options) || session.options.length !== 3) {
+      errors.push(issue('DIRECTION_SESSION_REQUIRED', 'brand.directionSession must contain exactly three options.', 'brand.directionSession'))
+    } else {
+      if (session.options.map((option) => option?.id).join('') !== 'ABC') errors.push(issue('DIRECTION_ORDER', 'Direction options must be ordered A, B, C.', 'brand.directionSession.options'))
+      for (const option of session.options) {
+        if (!object(option) || !directionFields.every((field) => text(option[field]))) errors.push(issue('DIRECTION_INCOMPLETE', `Direction ${option?.id || '?'} is incomplete.`, 'brand.directionSession.options'))
+      }
+      if (!['A', 'B', 'C'].includes(session.selected)) errors.push(issue('DIRECTION_SELECTION_REQUIRED', 'A selected direction is required.', 'brand.directionSession.selected'))
+      if (!['refined', 'approved'].includes(session.status) || !text(session.refinement)) errors.push(issue('DIRECTION_REFINEMENT_REQUIRED', 'The selected direction must include a refinement note and refined or approved status.', 'brand.directionSession'))
+    }
+
+    const arabic = contract.brand?.localization?.ar
+    if (!object(arabic) || !text(arabic.displayFont) || !text(arabic.bodyFont) || !object(arabic.text) || Object.keys(arabic.text).length === 0) {
+      errors.push(issue('ARABIC_PARITY_REQUIRED', 'brand.localization.ar must provide displayFont, bodyFont, and a nonempty 1:1 text map.', 'brand.localization.ar'))
+    }
+
+    const showcases = contract.solution?.showcases
+    if (!Array.isArray(showcases) || showcases.length < 1 || showcases.length > 3) errors.push(issue('SOLUTION_SHOWCASES', 'solution.showcases must contain one to three brand-fit applications.', 'solution.showcases'))
+    else if (new Set(showcases.map((showcase) => showcase?.type)).size !== showcases.length || showcases.some((showcase) => !['phone', 'desktop', 'environment'].includes(showcase?.type))) {
+      errors.push(issue('SOLUTION_SHOWCASE_TYPES', 'Solution showcase types must be unique phone, desktop, or environment entries.', 'solution.showcases'))
+    }
+  }
+
+  const anchors = [...raw.matchAll(/^## .+ \{#([a-z]+)\}\s*$/gm)].map((match) => match[1])
+  for (const chapter of chapters) if (!anchors.includes(chapter)) errors.push(issue('CHAPTER_ANCHOR_REQUIRED', `Missing {#${chapter}} chapter anchor.`, chapter))
+
+  const manifestPath = join(dirname(brandPath), 'assets', 'manifest.json')
+  if (!existsSync(manifestPath)) errors.push(issue('ASSET_MANIFEST_REQUIRED', 'assets/manifest.json is required.'))
+  else {
+    const manifest = parseJson(readFileSync(manifestPath, 'utf8'), 'Asset manifest', errors)
+    if (manifest && (manifest.schema !== 'ceramic.assets/v1' || !Array.isArray(manifest.assets))) errors.push(issue('INVALID_ASSET_MANIFEST', 'Asset manifest must use ceramic.assets/v1 and contain an assets array.'))
+    if (manifest?.assets) {
+      const families = new Set(manifest.assets.filter((asset) => asset.kind === 'font').map((asset) => asset.family))
+      const arabic = contract?.brand?.localization?.ar
+      for (const role of ['displayFont', 'bodyFont']) if (text(arabic?.[role]) && !families.has(arabic[role])) errors.push(issue('ARABIC_FONT_NOT_BUNDLED', `Arabic ${role} ${arabic[role]} is not registered as a local font asset.`, `brand.localization.ar.${role}`))
+      for (const asset of manifest.assets) {
+        if (!text(asset.path) || !asset.path.startsWith('assets/') || asset.path.includes('..') || !existsSync(join(dirname(brandPath), asset.path))) errors.push(issue('ASSET_FILE_MISSING', `Manifest asset is missing or unsafe: ${asset.path || '(no path)'}.`, 'assets'))
+      }
+    }
+  }
+
+  if (meta?.status === 'approved') warnings.push(issue('APPROVAL_SCOPE', 'Schema validation does not replace visual, linguistic, licensing, or stakeholder approval.'))
+  return { ok: errors.length === 0, path: brandPath, errors, warnings, summary: { errorCount: errors.length, warningCount: warnings.length, chapters: anchors.filter((anchor) => chapters.includes(anchor)).length } }
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@utopia-studio-design/design-system-cli",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "AI-readable CLI and MCP server for Ceramic Design System",
   "ceramic": {
-    "designSystem": "^0.11.0"
+    "designSystem": "^0.10.0"
   },
   "type": "module",
   "license": "MIT",

package/data/blocks/semantic-pattern-parts/AuthParts.tsx

@@ -1,48 +0,0 @@
-import { useId, useRef, useState, type ReactNode } from 'react'
-import { Button, TextInput } from '@utopia-studio-design/design-system'
-import { Eye, EyeOff } from 'lucide-react'
-import './auth-parts.css'
-
-/** Host-owned policy and labels: this meter is not a server password policy. */
-export function PasswordField({ label, value, onChange, showLabel, hideLabel, rules = [], error, hint }: {
-  label: string; value: string; onChange: (value: string) => void; showLabel: string; hideLabel: string;
-  rules?: { id: string; label: string; passed: boolean }[]; error?: string; hint?: string;
-}) {
-  const id = useId(), [shown, setShown] = useState(false)
-  return <div className="auth-part-field" data-slot="password-field">
-    <label htmlFor={id}>{label}</label>
-    <div className="auth-part-password"><TextInput id={id} type={shown ? 'text' : 'password'} value={value} onChange={e => onChange(e.target.value)} autoComplete="off" aria-invalid={Boolean(error)} aria-describedby={error || hint ? id + '-help' : undefined} /><Button type="button" variant="ghost" size="icon" onClick={() => setShown(v => !v)} aria-label={shown ? hideLabel : showLabel} aria-pressed={shown}>{shown ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}</Button></div>
-    {error || hint ? <p id={id + '-help'} data-error={Boolean(error)}>{error || hint}</p> : null}
-    {value && rules.length ? <ul className="auth-part-rules">{rules.map(rule => <li key={rule.id} data-passed={rule.passed}><span aria-hidden="true">{rule.passed ? '✓' : '○'}</span> {rule.label}</li>)}</ul> : null}
-  </div>
-}
-
-/** Six slots, paste, backspace and arrow movement; verification stays with host. */
-export function VerificationCode({ label, digitLabel, value, onChange, error, disabled = false }: {
-  label: string; digitLabel: (index: number) => string; value: string; onChange: (value: string) => void; error?: string; disabled?: boolean;
-}) {
-  const inputs = useRef<(HTMLInputElement | null)[]>([]), id = useId()
-  const update = (index: number, incoming: string) => {
-    const digits = incoming.replace(/\D/g, '').slice(0, 6 - index)
-    const slots = value.padEnd(6, ' ').split('')
-    slots.splice(index, Math.max(1, digits.length), ...(digits || ' ').split(''))
-    onChange(slots.slice(0, 6).join('').trimEnd())
-    if (digits) inputs.current[Math.min(index + digits.length, 5)]?.focus()
-  }
-  return <fieldset className="auth-part-code" data-slot="verification-code" aria-describedby={error ? id : undefined}>
-    <legend>{label}</legend><div dir="ltr">{Array.from({ length: 6 }, (_, index) => <TextInput key={index} ref={el => { inputs.current[index] = el }} aria-label={digitLabel(index + 1)} aria-invalid={Boolean(error)} aria-describedby={error ? id : undefined} inputMode="numeric" autoComplete={index === 0 ? 'one-time-code' : 'off'} value={value[index] ?? ''} disabled={disabled}
-      onChange={e => update(index, e.target.value)} onFocus={e => e.currentTarget.select()} onPaste={e => { e.preventDefault(); update(index, e.clipboardData.getData('text')) }}
-      onKeyDown={e => { if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { e.preventDefault(); inputs.current[Math.max(0, Math.min(5, index + (e.key === 'ArrowLeft' ? -1 : 1)))]?.focus() } else if (e.key === 'Backspace' && !value[index] && index) { e.preventDefault(); onChange(value.slice(0, index - 1)); inputs.current[index - 1]?.focus() } }} />)}</div>
-    {error ? <p id={id} role="alert">{error}</p> : null}
-  </fieldset>
-}
-
-export function ProviderButtons({ providers, onSelect, pending, label }: {
-  providers: { id: string; label: string }[]; onSelect: (id: string) => void; pending?: string; label: string;
-}) {
-  return <div className="auth-part-providers" data-slot="provider-sign-in" role="group" aria-label={label}>{providers.map(provider => <Button key={provider.id} type="button" variant="outline" disabled={Boolean(pending)} aria-busy={pending === provider.id} onClick={() => onSelect(provider.id)}>{provider.label}</Button>)}</div>
-}
-
-export function AuthFrame({ title, subtitle, footer, children, locale = 'en' }: { title: string; subtitle?: string; footer: string; children: ReactNode; locale?: string }) {
-  return <section className="ux-example ux-example--account" lang={locale} dir={locale === 'ar' ? 'rtl' : 'ltr'}><div className="ux-example__center"><div className="auth-part-frame"><header><h3>{title}</h3>{subtitle ? <p>{subtitle}</p> : null}</header>{children}</div></div><footer>{footer}</footer></section>
-}

package/data/blocks/semantic-pattern-parts/ChoiceCards.tsx

@@ -1,7 +0,0 @@
-import { Button } from '@utopia-studio-design/design-system'
-import type { PatternOption } from './types'
-import './pattern-parts.css'
-
-export function ChoiceCards({ label, options, value, onChange }: { label: string; options: PatternOption[]; value: string; onChange: (id: string) => void }) {
-  return <fieldset className="pattern-parts pattern-choices" data-slot="pattern-choices"><legend>{label}</legend><div>{options.map(option => <Button key={option.id} type="button" variant="outline" aria-pressed={value === option.id} onClick={() => onChange(option.id)}><strong>{option.label}</strong>{option.description ? <span>{option.description}</span> : null}</Button>)}</div></fieldset>
-}

package/data/blocks/semantic-pattern-parts/ListFilters.tsx

@@ -1,9 +0,0 @@
-import { useId } from 'react'
-import { Button, TextInput, NativeSelect } from '@utopia-studio-design/design-system'
-import type { PatternOption } from './types'
-import './pattern-parts.css'
-
-export function ListFilters({ label, query, onQueryChange, queryLabel, status, onStatusChange, statusLabel, options, resetLabel }: { label: string; query: string; onQueryChange: (query: string) => void; queryLabel: string; status: string; onStatusChange: (status: string) => void; statusLabel: string; options: PatternOption[]; resetLabel: string }) {
-  const id = useId()
-  return <section className="pattern-parts pattern-filters" data-slot="pattern-filters" aria-label={label}><div><label htmlFor={`${id}-query`}>{queryLabel}</label><TextInput id={`${id}-query`} type="search" value={query} onChange={event => onQueryChange(event.target.value)} /></div><div><label htmlFor={`${id}-status`}>{statusLabel}</label><NativeSelect id={`${id}-status`} value={status} onChange={event => onStatusChange(event.target.value)}>{options.map(option => <option value={option.id} key={option.id}>{option.label}</option>)}</NativeSelect></div><Button type="button" variant="outline" onClick={() => { onQueryChange(''); onStatusChange(options[0]?.id ?? '') }}>{resetLabel}</Button></section>
-}

package/data/blocks/semantic-pattern-parts/OutcomeNotice.tsx

@@ -1,7 +0,0 @@
-import type { ReactNode } from 'react'
-import { Button } from '@utopia-studio-design/design-system'
-import './pattern-parts.css'
-
-export function OutcomeNotice({ title, children, actionLabel, onAction, tone = 'info' }: { title: string; children: ReactNode; actionLabel: string; onAction: () => void; tone?: 'info' | 'success' | 'warning' }) {
-  return <section className="pattern-parts pattern-result" data-slot="pattern-result" data-tone={tone}><div role="status"><strong>{title}</strong><p>{children}</p></div><Button type="button" variant="outline" onClick={onAction}>{actionLabel}</Button></section>
-}

package/data/blocks/semantic-pattern-parts/PatternParts.tsx

@@ -1,7 +0,0 @@
-export { ChoiceCards } from './ChoiceCards'
-export { ValidatedField } from './ValidatedField'
-export { ListFilters } from './ListFilters'
-export { ReviewList } from './ReviewList'
-export { ProgressSteps } from './ProgressSteps'
-export { OutcomeNotice } from './OutcomeNotice'
-export type { PatternOption, ReviewItem } from './types'

package/data/blocks/semantic-pattern-parts/ProductParts.tsx

@@ -1,38 +0,0 @@
-import { Button, NativeSelect } from '@utopia-studio-design/design-system'
-import './product-parts.css'
-
-/** Rows represent destinations; the host supplies navigation, not this part. */
-export function ActivityList({ items, emptyLabel, unreadLabel, onOpen }: {
-  items: { id: string; title: string; body: string; time: string; unread?: boolean }[];
-  emptyLabel: string; unreadLabel: string; onOpen: (id: string) => void;
-}) {
-  if (!items.length) return <p className="product-card" role="status">{emptyLabel}</p>
-  return <ul className="product-list" data-slot="activity-list">{items.map(item => <li key={item.id}>
-    <button className="product-row" data-slot="activity-row" data-unread={Boolean(item.unread)} onClick={() => onOpen(item.id)} type="button">
-      <span className="product-row__content"><strong>{item.title}</strong><span>{item.body}</span></span>
-      <span className="product-row__meta"><span>{item.time}</span>{item.unread ? <strong>{unreadLabel}</strong> : null}</span>
-    </button>
-  </li>)}</ul>
-}
-
-/** Selected channels and mandatory-delivery policy belong to the host. */
-export function ChannelPreferences({ items, options, requiredLabel, onChange }: {
-  items: { id: string; title: string; description: string; channel: string; disallowed?: string[] }[];
-  options: { id: string; label: string }[]; requiredLabel: string; onChange: (id: string, channel: string) => void;
-}) {
-  return <div className="product-list" data-slot="channel-preferences">{items.map(item => <div className="product-setting" key={item.id}>
-    <div><strong>{item.title}</strong><p>{item.description}</p>{item.disallowed?.length ? <small>{requiredLabel}</small> : null}</div>
-    <NativeSelect aria-label={item.title} value={item.channel} onChange={e => onChange(item.id, e.target.value)}>{options.map(option => <option key={option.id} value={option.id} disabled={item.disallowed?.includes(option.id)}>{option.label}</option>)}</NativeSelect>
-  </div>)}</div>
-}
-
-export function DirectoryCards({ items, emptyLabel, profileLabel, actionLabel, onProfile, onAction }: {
-  items: { id: string; name: string; role: string; organization: string; languages: string; expertise: string; availability: string; stats: string }[];
-  emptyLabel: string; profileLabel: string; actionLabel: string; onProfile: (id: string) => void; onAction: (id: string) => void;
-}) {
-  if (!items.length) return <p className="product-card" role="status">{emptyLabel}</p>
-  return <ul className="product-grid" data-slot="directory-cards">{items.map(item => <li className="product-card" data-slot="directory-card" key={item.id}>
-    <header><strong>{item.name}</strong><p>{item.role}</p></header><span>{item.availability}</span><p>{item.stats}</p><p>{item.organization} · {item.languages}</p><p>{item.expertise}</p>
-    <div className="product-actions"><Button onClick={() => onAction(item.id)}>{actionLabel}</Button><Button variant="outline" onClick={() => onProfile(item.id)}>{profileLabel}</Button></div>
-  </li>)}</ul>
-}

package/data/blocks/semantic-pattern-parts/ProgressSteps.tsx

@@ -1,6 +0,0 @@
-import { Button } from '@utopia-studio-design/design-system'
-import './pattern-parts.css'
-
-export function ProgressSteps({ label, steps, onSelect }: { label: string; steps: { id: string; label: string; status: 'done' | 'current' | 'locked'; statusLabel: string }[]; onSelect: (id: string) => void }) {
-  return <nav className="pattern-parts pattern-steps" data-slot="pattern-steps" aria-label={label}><ol>{steps.map((step, index) => <li key={step.id}><Button variant={step.status === 'current' ? 'default' : 'outline'} disabled={step.status === 'locked'} aria-current={step.status === 'current' ? 'step' : undefined} onClick={() => onSelect(step.id)}><span aria-hidden="true">{step.status === 'done' ? '✓' : index + 1}</span><strong>{step.label}</strong><span>{step.statusLabel}</span></Button></li>)}</ol></nav>
-}

package/data/blocks/semantic-pattern-parts/ReviewList.tsx

@@ -1,7 +0,0 @@
-import { Button, Badge, DataTable, DataTableShell, DataTableHeader, DataTableBody, DataTableRow, DataTableHead, DataTableCell } from '@utopia-studio-design/design-system'
-import type { ReviewItem } from './types'
-import './pattern-parts.css'
-
-export function ReviewList({ label, rows, columns, state = 'ready', message, retryLabel, onRetry, onReview, reviewLabel }: { label: string; rows: ReviewItem[]; columns: [string, string, string, string]; state?: 'loading' | 'error' | 'ready'; message: string; retryLabel: string; onRetry: () => void; onReview: (id: string) => void; reviewLabel: (row: ReviewItem) => string }) {
-  return <section className="pattern-parts pattern-review" data-slot="pattern-review" aria-label={label} aria-busy={state === 'loading'}>{state !== 'ready' ? <div className="pattern-result"><p role={state === 'error' ? 'alert' : 'status'}>{message}</p>{state === 'error' ? <Button variant="outline" onClick={onRetry}>{retryLabel}</Button> : null}</div> : <DataTableShell><DataTable aria-label={label}><DataTableHeader><DataTableRow>{columns.map(column => <DataTableHead key={column}>{column}</DataTableHead>)}</DataTableRow></DataTableHeader><DataTableBody>{rows.map(row => <DataTableRow key={row.id}><DataTableCell><strong>{row.title}</strong>{row.description ? <p>{row.description}</p> : null}</DataTableCell><DataTableCell><Badge variant="secondary">{row.status}</Badge></DataTableCell><DataTableCell>{row.assignee}</DataTableCell><DataTableCell><Button variant="outline" size="sm" onClick={() => onReview(row.id)}>{reviewLabel(row)}</Button></DataTableCell></DataTableRow>)}{!rows.length ? <DataTableRow><DataTableCell colSpan={4}><p role="status">{message}</p></DataTableCell></DataTableRow> : null}</DataTableBody></DataTable></DataTableShell>}</section>
-}

package/data/blocks/semantic-pattern-parts/ValidatedField.tsx

@@ -1,8 +0,0 @@
-import { useId } from 'react'
-import { TextInput } from '@utopia-studio-design/design-system'
-import './pattern-parts.css'
-
-export function ValidatedField({ label, value, onChange, hint, error, type = 'text', required = false }: { label: string; value: string; onChange: (value: string) => void; hint?: string; error?: string; type?: 'text' | 'email'; required?: boolean }) {
-  const id = useId()
-  return <div className="pattern-parts pattern-field" data-slot="pattern-field"><label htmlFor={id}>{label}</label><TextInput id={id} type={type} value={value} onChange={event => onChange(event.target.value)} required={required} aria-invalid={Boolean(error)} aria-describedby={error || hint ? `${id}-help` : undefined} />{error || hint ? <p id={`${id}-help`} data-error={Boolean(error)}>{error || hint}</p> : null}</div>
-}

package/data/blocks/semantic-pattern-parts/WorkflowParts.tsx

@@ -1,339 +0,0 @@
-import { useId } from "react";
-import {
-  Button,
-  TextInput,
-  TextArea,
-  NativeSelect,
-} from "@utopia-studio-design/design-system";
-import "./workflow-parts.css";
-import "./product-parts.css";
-
-export type WorkflowField = {
-  id: string;
-  label: string;
-  type?:
-    | "text"
-    | "email"
-    | "date"
-    | "time"
-    | "number"
-    | "url"
-    | "textarea"
-    | "select"
-    | "multi-select"
-    | "check"
-    | "file";
-  options?: string[];
-  required?: boolean;
-  minLength?: number;
-  min?: number;
-  max?: number;
-  accept?: string;
-  hint?: string;
-};
-
-/** Pure field rendering. Validation, uploaded file handling and persistence belong to the host. */
-export function WorkflowFields({
-  fields,
-  values,
-  errors = {},
-  onChange,
-  onFile,
-}: {
-  fields: WorkflowField[];
-  values: Record<string, string>;
-  errors?: Record<string, string>;
-  onChange: (id: string, value: string) => void;
-  onFile?: (id: string, file: File | undefined) => void;
-}) {
-  const prefix = useId();
-  return (
-    <div className="workflow-fields" data-slot="workflow-fields">
-      {fields.map((field) => {
-        const id = `${prefix}-${field.id}`,
-          error = errors[field.id];
-        const shared = {
-          id,
-          required: field.required,
-          "aria-invalid": Boolean(error),
-          "aria-describedby": `${id}-help`,
-          value: values[field.id] ?? "",
-          onChange: (
-            e: React.ChangeEvent<
-              HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-            >
-          ) => onChange(field.id, e.target.value),
-        };
-        if (field.type === 'multi-select') {
-          const selected = (values[field.id] ?? '').split('\n').filter(Boolean)
-          return <fieldset className="product-card" data-slot="workflow-multi-select" key={field.id} aria-describedby={`${id}-help`} aria-invalid={Boolean(error)}>
-            <legend>{field.label}{field.required ? ' *' : ''}</legend>
-            <div className="workflow-fields">{field.options?.map(option => <label className="ux-example__check" key={option}><input type="checkbox" checked={selected.includes(option)} onChange={e => onChange(field.id, (e.target.checked ? [...selected, option] : selected.filter(v=>v!==option)).join('\n'))} />{option}</label>)}</div>
-            <small id={`${id}-help`} data-error={Boolean(error)}>{error || field.hint}</small>
-          </fieldset>
-        }
-        return (
-          <div className="workflow-field" key={field.id}>
-            <label htmlFor={id}>
-              {field.label}
-              {field.required ? " *" : ""}
-            </label>
-            {field.type === "check" ? (
-              <input
-                id={id}
-                type="checkbox"
-                checked={values[field.id] === "true"}
-                required={field.required}
-                aria-invalid={Boolean(error)}
-                aria-describedby={`${id}-help`}
-                onChange={(e) => onChange(field.id, String(e.target.checked))}
-              />
-            ) : field.type === "file" ? (
-              <input
-                id={id}
-                type="file"
-                accept={field.accept}
-                aria-invalid={Boolean(error)}
-                aria-describedby={`${id}-help`}
-                onChange={(e) => onFile?.(field.id, e.target.files?.[0])}
-              />
-            ) : field.type === "textarea" ? (
-              <TextArea {...shared} minLength={field.minLength} rows={4} />
-            ) : field.type === "select" ? (
-              <NativeSelect {...shared}>
-                <option value="">—</option>
-                {field.options?.map((option) => (
-                  <option key={option}>{option}</option>
-                ))}
-              </NativeSelect>
-            ) : (
-              <TextInput
-                {...shared}
-                type={field.type ?? "text"}
-                minLength={field.minLength}
-                min={field.min}
-                max={field.max}
-              />
-            )}
-            <small id={`${id}-help`} data-error={Boolean(error)}>
-              {error ||
-                field.hint ||
-                (field.type === "file" ? values[field.id] : "")}
-            </small>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-/** Table is independently scroll-owned. The host supplies filtered rows and exact actions. */
-export function RecordTable({
-  caption,
-  columns,
-  rows,
-  emptyLabel,
-  actionLabel,
-  onOpen,
-}: {
-  caption: string;
-  columns: string[];
-  rows: { id: string; cells: string[] }[];
-  emptyLabel: string;
-  actionLabel: string;
-  onOpen?: (id: string) => void;
-}) {
-  return (
-    <div
-      className="workflow-table-scroll"
-      data-slot="record-table"
-      tabIndex={0}
-      role="region"
-      aria-label={caption}
-    >
-      <table>
-        <caption>{caption}</caption>
-        <thead>
-          <tr>
-            {columns.map((column, i) => (
-              <th scope="col" key={i}>
-                {column}
-              </th>
-            ))}
-            {onOpen ? <th scope="col">{actionLabel}</th> : null}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.length ? (
-            rows.map((row) => (
-              <tr key={row.id}>
-                {row.cells.map((cell, i) => (
-                  <td key={i}>{cell}</td>
-                ))}
-                {onOpen ? (
-                  <td>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => onOpen(row.id)}
-                      aria-label={`${actionLabel}: ${row.cells[0]}`}
-                    >
-                      {actionLabel}
-                    </Button>
-                  </td>
-                ) : null}
-              </tr>
-            ))
-          ) : (
-            <tr>
-              <td colSpan={columns.length + (onOpen ? 1 : 0)}>{emptyLabel}</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-/** Gate states are supplied by the host; a preview cannot verify identity or hardware. */
-export function StepChecklist({
-  items,
-  passLabel,
-  failLabel,
-  onChange,
-}: {
-  items: {
-    id: string;
-    label: string;
-    description: string;
-    state: string;
-    disabled?: boolean;
-  }[];
-  passLabel: string;
-  failLabel: string;
-  onChange: (id: string, state: "pass" | "fail") => void;
-}) {
-  return (
-    <ol className="workflow-checklist" data-slot="step-checklist">
-      {items.map((item) => (
-        <li className="product-card" key={item.id} data-state={item.state}>
-          <strong>{item.label}</strong>
-          <p>{item.description}</p>
-          <div className="product-actions">
-            <Button
-              disabled={item.disabled}
-              aria-pressed={item.state === "pass"}
-              onClick={() => onChange(item.id, "pass")}
-            >
-              {passLabel}
-            </Button>
-            <Button
-              variant="outline"
-              disabled={item.disabled}
-              aria-pressed={item.state === "fail"}
-              onClick={() => onChange(item.id, "fail")}
-            >
-              {failLabel}
-            </Button>
-          </div>
-        </li>
-      ))}
-    </ol>
-  );
-}
-
-export function StatStrip({
-  items,
-}: {
-  items: { label: string; value: string; detail?: string }[];
-}) {
-  return (
-    <dl className="workflow-stats" data-slot="stat-strip">
-      {items.map((item) => (
-        <div className="product-card" key={item.label}>
-          <dt>{item.label}</dt>
-          <dd>{item.value}</dd>
-          {item.detail ? <small>{item.detail}</small> : null}
-        </div>
-      ))}
-    </dl>
-  );
-}
-
-export function RatingFields({
-  labels,
-  values,
-  onChange,
-}: {
-  labels: string[];
-  values: number[];
-  onChange: (index: number, value: number) => void;
-}) {
-  return (
-    <div className="workflow-fields" data-slot="rating-fields">
-      {labels.map((label, index) => (
-        <fieldset className="product-card" key={label}>
-          <legend>{label}</legend>
-          <div className="product-actions">
-            {[1, 2, 3, 4, 5].map((value) => (
-              <Button
-                key={value}
-                variant={values[index] === value ? "default" : "outline"}
-                aria-pressed={values[index] === value}
-                onClick={() => onChange(index, value)}
-                aria-label={`${label}: ${value} / 5`}
-              >
-                {value}
-              </Button>
-            ))}
-          </div>
-        </fieldset>
-      ))}
-    </div>
-  );
-}
-
-export function TrendSummary({
-  title,
-  items,
-}: {
-  title: string;
-  items: { label: string; value: number; max: number }[];
-}) {
-  return (
-    <section className="product-card" data-slot="trend-summary">
-      <h4>{title}</h4>
-      {items.map((item) => (
-        <label className="workflow-field" key={item.label}>
-          <span>
-            {item.label} · {item.value} / {item.max}
-          </span>
-          <meter min={0} max={item.max} value={item.value} />
-        </label>
-      ))}
-    </section>
-  );
-}
-
-/** No camera, microphone, network or recording is started by this visual stage. */
-export function MediaStage({
-  label,
-  status,
-  children,
-}: {
-  label: string;
-  status: string;
-  children?: React.ReactNode;
-}) {
-  return (
-    <section
-      className="workflow-media"
-      data-slot="media-stage"
-      aria-label={label}
-    >
-      <h4>{label}</h4>
-      <p role="status">{status}</p>
-      {children}
-    </section>
-  );
-}

package/data/blocks/semantic-pattern-parts/auth-parts.css

@@ -1,27 +0,0 @@
-/* Registered auth-interactions composition. All appearance resolves at host theme. */
-:root { --auth-form-width: 28rem; --auth-code-cell-min: 2rem; }
-:root, [data-theme] { --auth-code-radius: min(var(--radius-input), var(--space-2)); --auth-panel-radius: min(var(--radius-surface), var(--space-4)); }
-.auth-part-frame { display: grid; gap: var(--space-5); inline-size: 100%; max-inline-size: var(--auth-form-width); }
-.auth-part-frame header, .auth-part-field { display: grid; gap: var(--space-2); }
-.auth-part-field label, .auth-part-code legend { font-weight: var(--font-weight-strong); }
-.auth-part-password { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
-.auth-part-password > input { min-inline-size: 0; flex: 1; }
-.auth-part-field p, .auth-part-rules, .auth-part-code p { font-size: var(--font-size-small); }
-.auth-part-field [data-error="true"], .auth-part-code p { color: var(--destructive-text); }
-.auth-part-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: 0; list-style: none; margin: 0; color: var(--foreground-muted); }
-.auth-part-rules [data-passed="true"] { color: var(--success-text); }
-.auth-part-code { padding: 0; border: 0; margin: 0; min-inline-size: 0; }
-.auth-part-code legend { margin-block-end: var(--space-3); }
-.auth-part-code > div { display: grid; grid-template-columns: repeat(6, minmax(var(--auth-code-cell-min), 1fr)); gap: var(--space-2); }
-.auth-part-code input { text-align: center; padding-inline: 0; min-inline-size: 0; inline-size: 100%; border-radius: var(--auth-code-radius); }
-.auth-part-providers { display: grid; gap: var(--space-2); }
-.auth-part-providers .uds-button { inline-size: 100%; }
-.auth-part-divider { display: flex; gap: var(--space-3); align-items: center; color: var(--foreground-muted); font-size: var(--font-size-small); }
-.auth-part-divider::before, .auth-part-divider::after { content: ''; flex: 1; border-block-start: var(--border-width-hairline) solid var(--border); }
-.auth-part-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
-.auth-part-actions .uds-button { white-space: normal; }
-.auth-part-card { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: var(--border-width-hairline) solid var(--border); border-radius: var(--auth-panel-radius); }
-.auth-part-check { display: flex; align-items: start; gap: var(--space-2); }
-.auth-part-check > button { flex-shrink: 0; }
-.auth-part-state { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--font-size-small); }
-.auth-part-state select { inline-size: auto; max-inline-size: 100%; }