view-contracts 0.2.0 → 0.3.2

package/docs/cli-reference.md

@@ -2,7 +2,7 @@
 
 Contract-first UI design toolchain. Compiles restricted view-contract TSX to language-neutral View IR and renders platform targets (React, SwiftUI, Compose).
 
-**Version:** 0.1.0
+**Version:** 0.3.2
 
 ## Table of Contents
 
@@ -13,7 +13,6 @@ Contract-first UI design toolchain. Compiles restricted view-contract TSX to lan
   - [build](#view-contracts-build)
   - [contracts.generate](#view-contracts-contracts-generate)
   - [contracts.check](#view-contracts-contracts-check)
-  - [catalog.build](#view-contracts-catalog-build)
 
 ---
 
@@ -201,39 +200,3 @@ view-contracts contracts check -c view-contracts.config.yaml
 **Exit 1:** Lint failed.
 
 ---
-
-### catalog.build
-
-Build static catalog HTML for design review.
-
-Renders all registered views with mock ViewModels into a single HTML file for design review, screenshot baselines, and accessibility checks.
-
-**Usage:**
-
-```
-view-contracts catalog build
-```
-```
-view-contracts catalog build -c view-contracts.config.yaml
-```
-```
-view-contracts catalog build -o dist/catalog.html
-```
-
-#### Options
-
-| Option | Aliases | Required | Default | Description |
-|---|---|---|---|---|
-| `--config` | -c | No |  | Path to view-contracts.config.yaml (discovered upward from cwd when omitted). |
-| `--output` | -o | No |  | Output HTML path (defaults to dist/catalog.html next to bindings). |
-
-#### Exit Codes
-
-**Exit 0:** Catalog built.
-
-- **Generated files:**
-  - `dist/catalog.html` (text/html) *(optional)*
-
-**Exit 1:** Build failed.
-
----

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "view-contracts",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "description": "Contract-first UI design toolchain — restricted TSX to View IR to platform renderers",
   "type": "module",
   "workspaces": [
@@ -13,6 +13,7 @@
     "dist/view-contracts.bundle.mjs",
     "dist/view-contracts.bundle.mjs.map",
     "renderers/react/runtime",
+    "renderers/react/defaults",
     "src/generated/schema",
     "spec",
     "renderers",
@@ -23,9 +24,9 @@
   ],
   "scripts": {
     "generate": "cli-contracts generate",
-    "dev": "npm run build:views && npm run dev:both --prefix examples/admin-dashboard",
+    "dev": "npm run dev:both --prefix examples/admin-dashboard",
     "dev:preview": "npm run dev:preview --prefix examples/admin-dashboard",
-    "dev:app": "npm run dev:app --prefix examples/admin-dashboard",
+    "dev:app": "npm run build:views && npm run dev:app --prefix examples/admin-dashboard",
     "dev:both": "npm run build:views && npm run dev:both --prefix examples/admin-dashboard",
     "check:both": "npm run check:both --prefix examples/admin-dashboard",
     "serve:built": "npm run serve:built --prefix examples/admin-dashboard",
@@ -35,7 +36,6 @@
     "bundle": "node esbuild.bundle.mjs",
     "bundle:min": "node esbuild.bundle.mjs --minify",
     "build:views": "tsx src/cli.ts build -c examples/admin-dashboard/view-contracts.config.yaml",
-    "build:catalog": "tsx src/cli.ts catalog build -c examples/admin-dashboard/view-contracts.config.yaml",
     "build:example": "vite build --config examples/admin-dashboard/.vite/vite.config.ts",
     "compile": "tsx src/cli.ts compile -c examples/admin-dashboard/view-contracts.config.yaml",
     "render:react": "tsx src/cli.ts render react -c examples/admin-dashboard/view-contracts.config.yaml",
@@ -93,6 +93,9 @@
     "ajv": "^8.18.0",
     "cli-contracts": "^0.33.13",
     "esbuild": "^0.28.0",
+    "pixelmatch": "^7.2.0",
+    "playwright": "^1.61.0",
+    "pngjs": "^7.0.0",
     "tsx": "^4.21.0",
     "vite": "^6.4.1",
     "vitest": "^4.1.9"

package/renderers/compose/templates/Screen.kt.hbs

@@ -0,0 +1,15 @@
+// {{screenName}} — Jetpack Compose scaffold (Phase 5)
+// Theme IR: {{themeJsonPath}}
+// Token IR: {{tokensJsonPath}}
+//
+// TODO(Phase C): Load theme.json and emit Modifier.primaryButton(), vcTextMuted(), etc.
+
+package {{packageName}}
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+
+@Composable
+fun {{screenName}}Screen() {
+    Text("{{screenName}} — Compose scaffold")
+}

package/renderers/compose/templates/VcTheme.kt.hbs

@@ -0,0 +1,19 @@
+// VcTheme — Compose theme scaffold (Phase 5)
+// Load Token IR + Theme IR from assets:
+//   {{tokensJsonPath}}
+//   {{themeJsonPath}}
+//
+// TODO(Phase C): Map Theme IR variants to Modifier extensions and ColorScheme.
+
+package {{packageName}}
+
+import android.content.Context
+
+object VcTheme {
+    const val TOKENS_ASSET = "{{tokensJsonPath}}"
+    const val THEME_ASSET = "{{themeJsonPath}}"
+
+    /** Placeholder — read theme.json from assets in Phase C. */
+    fun loadThemeJson(context: Context): String? =
+        context.assets.open(THEME_ASSET).bufferedReader().use { it.readText() }
+}

package/renderers/react/README.md

@@ -12,6 +12,7 @@ Per-target mapping for view-contracts UI DSL → React.
 
 Vocabulary (elements/properties) is defined in `spec/ui-dsl.schema.json` (from `ui-dsl-*.csv`).
 Preview vocabulary stubs are generated to `src/generated/preview/vocabulary.tsx`.
+React `elements.yaml` now covers the full UI DSL vocabulary (33/33 elements).
 Sample-only preview helpers (Sidebar, Card, etc.) are **not** part of the vocabulary — they live in project `src/components/extensions.tsx`.
 
 Generic renderer utilities (template engine, YAML element-map validation) live under `src/renderer/`.

package/renderers/react/defaults/theme.yaml

@@ -0,0 +1,26 @@
+# Default theme variants — generic vocabulary only (no sample-specific layouts).
+variants:
+  Button:
+    primary:
+      background: "{ui.primary}"
+      foreground: "{ui.on-primary}"
+    secondary:
+      background: "{ui.button-secondary}"
+      foreground: "{ui.text}"
+    ghost:
+      background: "{ui.transparent}"
+      foreground: "{ui.text}"
+    danger:
+      background: "{ui.danger}"
+      foreground: "{ui.on-primary}"
+  Text:
+    muted:
+      foreground: "{ui.text-muted}"
+    primary:
+      foreground: "{ui.primary}"
+    success:
+      foreground: "{ui.success}"
+    warning:
+      foreground: "{ui.warning}"
+    danger:
+      foreground: "{ui.danger}"

package/renderers/react/defaults/tokens.yaml

@@ -0,0 +1,59 @@
+# Default design tokens — mirrors renderers/react/runtime/theme.css :root variables.
+ui:
+  bg:
+    $type: color
+    $value: "#f6f8fb"
+  surface:
+    $type: color
+    $value: "#ffffff"
+  surface-muted:
+    $type: color
+    $value: "#f8fafc"
+  text:
+    $type: color
+    $value: "#111827"
+  text-muted:
+    $type: color
+    $value: "#6b7280"
+  primary:
+    $type: color
+    $value: "#2563eb"
+  primary-weak:
+    $type: color
+    $value: "#dbeafe"
+  success:
+    $type: color
+    $value: "#047857"
+  success-weak:
+    $type: color
+    $value: "#d1fae5"
+  warning:
+    $type: color
+    $value: "#b45309"
+  warning-weak:
+    $type: color
+    $value: "#fef3c7"
+  danger:
+    $type: color
+    $value: "#dc2626"
+  danger-weak:
+    $type: color
+    $value: "#fee2e2"
+  on-primary:
+    $type: color
+    $value: "#ffffff"
+  button-secondary:
+    $type: color
+    $value: "#eef2f7"
+  transparent:
+    $type: color
+    $value: "transparent"
+  border:
+    $type: color
+    $value: "#e5e7eb"
+  shadow:
+    $type: shadow
+    $value: "0 10px 30px rgba(15, 23, 42, 0.08)"
+  font:
+    $type: typography
+    $value: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'

package/renderers/react/element-config.meta.json

@@ -12,12 +12,13 @@
     "levelProp": { "type": "string" },
     "defaultLevel": { "type": "number" },
     "actionEvent": { "type": "enum", "values": ["onClick", "onSubmit"] },
-    "variantClass": { "type": "boolean" },
     "fieldWrap": { "type": "boolean" },
     "inputType": { "type": "string" },
     "sizeClass": { "type": "string" },
     "optionsProp": { "type": "string" },
     "checkbox": { "type": "boolean" },
+    "fieldContainer": { "type": "boolean" },
+    "scrollContainer": { "type": "boolean" },
     "defaultRole": { "type": "string" }
   }
 }

package/renderers/react/elementMap.ts

@@ -40,16 +40,18 @@ export function isLowerableVocabularyElement(
   return ALLOWED_COMPONENTS.has(name) && !allowlistExtra.includes(name) && name in map.elements;
 }
 
-export async function assertElementMapCoversImplementedVocabulary(customPath?: string): Promise<void> {
+export async function validateElementMapCoversVocabulary(customPath?: string): Promise<void> {
   const [schema, map] = await Promise.all([loadUiDslSchema(), loadReactElementMap(customPath)]);
   const missing = Object.keys(schema.elements).filter((name) => !(name in map.elements));
   if (missing.length > 0) {
-    console.warn(
+    throw new Error(
       `${SOURCE_LABEL}: ${missing.length} DSL element(s) have no React HTML map yet: ${missing.join(', ')}`,
     );
   }
 }
 
+export const assertElementMapCoversImplementedVocabulary = validateElementMapCoversVocabulary;
+
 export function isVocabularyElement(name: string, map: ReactElementMapFile, allowlistExtra: string[] = []): boolean {
   return name in map.elements && !allowlistExtra.includes(name);
 }

package/renderers/react/elements.yaml

@@ -3,85 +3,140 @@
 # (allowlistExtra) and stay as React component imports — not listed here.
 
 elements:
+  App:
+    tag: div
+    className: vc-app
   Page:
     tag: main
-    className: ui-page
+    className: vc-page
     ariaLabel: true
+  SafeArea:
+    tag: div
+    className: vc-safe-area
   Box:
     tag: div
-    className: ui-box
+    className: vc-box
     ariaLabel: true
   Column:
     tag: div
-    className: ui-column
+    className: vc-column
     flex: column
     ariaLabel: true
   Row:
     tag: div
-    className: ui-row
+    className: vc-row
     flex: row
     wrapProp: wrap
     ariaLabel: true
   Stack:
     tag: div
-    className: ui-stack
+    className: vc-stack
     ariaLabel: true
+  ScrollArea:
+    tag: div
+    className: vc-scroll-area
+    scrollContainer: true
   Spacer:
     tag: div
-    className: ui-spacer
+    className: vc-spacer
     ariaHidden: true
     flexGrowProp: weight
   Divider:
     tag: hr
-    className: ui-divider
+    className: vc-divider
     void: true
   Heading:
     tag: dynamic-heading
-    className: ui-heading
+    className: vc-heading
     levelProp: level
     defaultLevel: 2
   Text:
     tag: p
-    className: ui-text
+    className: vc-text
+  Image:
+    tag: img
+    className: vc-image
+    void: true
+  Icon:
+    tag: span
+    className: vc-icon
+    ariaHidden: true
   Link:
     tag: a
-    className: ui-link
+    className: vc-link
     actionEvent: onClick
   Button:
     tag: button
-    className: ui-button
-    variantClass: true
+    className: vc-button
+    actionEvent: onClick
+  IconButton:
+    tag: button
+    className: vc-icon-button
     actionEvent: onClick
+    ariaLabel: true
   Form:
     tag: form
-    className: ui-form
+    className: vc-form
     actionEvent: onSubmit
     ariaLabel: true
+  Field:
+    tag: div
+    className: vc-field-container
+    fieldContainer: true
   TextInput:
     tag: input
-    className: ui-input
+    className: vc-text-input
     fieldWrap: true
     inputType: text
-    sizeClass: ui-field
+    sizeClass: vc-field
   TextArea:
     tag: textarea
-    className: ui-textarea
+    className: vc-text-area
     fieldWrap: true
   Select:
     tag: select
-    className: ui-select
+    className: vc-select
     fieldWrap: true
-    sizeClass: ui-field
+    sizeClass: vc-field
     optionsProp: options
   Checkbox:
     tag: label
-    className: ui-check
+    className: vc-checkbox
     checkbox: true
+  Radio:
+    tag: label
+    className: vc-radio
+  Switch:
+    tag: label
+    className: vc-switch
+  Modal:
+    tag: dialog
+    className: vc-modal
+    defaultRole: dialog
+  Drawer:
+    tag: aside
+    className: vc-drawer
+    defaultRole: dialog
+  Popover:
+    tag: div
+    className: vc-popover
+    defaultRole: dialog
+  Tooltip:
+    tag: span
+    className: vc-tooltip
+    defaultRole: tooltip
+  Progress:
+    tag: progress
+    className: vc-progress
+    void: true
+  Spinner:
+    tag: div
+    className: vc-spinner
   List:
     tag: ul
-    className: ui-list
+    className: vc-list
     defaultRole: list
   ListItem:
     tag: li
-    className: ui-list-item
+    className: vc-list-item
     defaultRole: listitem