view-contracts 0.3.0 → 0.3.3

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.3.0
+**Version:** 0.3.3
 
 ## 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.3.0",
+  "version": "0.3.3",
   "description": "Contract-first UI design toolchain — restricted TSX to View IR to platform renderers",
   "type": "module",
   "workspaces": [
@@ -24,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",
@@ -36,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",

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

@@ -1,4 +1,4 @@
-# Default theme variants — component appearance via .vc-{element}--{variant} rules.
+# Default theme variants — generic vocabulary only (no sample-specific layouts).
 variants:
   Button:
     primary:
@@ -16,26 +16,11 @@ variants:
   Text:
     muted:
       foreground: "{ui.text-muted}"
-  Card:
-    default:
-      background: "{ui.surface}"
-  Badge:
-    default:
-      background: "{ui.surface-muted}"
     primary:
-      background: "{ui.primary-weak}"
+      foreground: "{ui.primary}"
     success:
-      background: "{ui.success-weak}"
+      foreground: "{ui.success}"
     warning:
-      background: "{ui.warning-weak}"
+      foreground: "{ui.warning}"
     danger:
-      background: "{ui.danger-weak}"
-  Alert:
-    default:
-      background: "{ui.surface}"
-    success:
-      background: "{ui.success-weak}"
-    warning:
-      background: "{ui.warning-weak}"
-    danger:
-      background: "{ui.danger-weak}"
+      foreground: "{ui.danger}"

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

@@ -17,6 +17,8 @@
     "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,10 +3,16 @@
 # (allowlistExtra) and stay as React component imports — not listed here.
 
 elements:
+  App:
+    tag: div
+    className: vc-app
   Page:
     tag: main
     className: vc-page
     ariaLabel: true
+  SafeArea:
+    tag: div
+    className: vc-safe-area
   Box:
     tag: div
     className: vc-box
@@ -26,6 +32,10 @@ elements:
     tag: div
     className: vc-stack
     ariaLabel: true
+  ScrollArea:
+    tag: div
+    className: vc-scroll-area
+    scrollContainer: true
   Spacer:
     tag: div
     className: vc-spacer
@@ -43,6 +53,14 @@ elements:
   Text:
     tag: p
     className: vc-text
+  Image:
+    tag: img
+    className: vc-image
+    void: true
+  Icon:
+    tag: span
+    className: vc-icon
+    ariaHidden: true
   Link:
     tag: a
     className: vc-link
@@ -51,11 +69,20 @@ elements:
     tag: button
     className: vc-button
     actionEvent: onClick
+  IconButton:
+    tag: button
+    className: vc-icon-button
+    actionEvent: onClick
+    ariaLabel: true
   Form:
     tag: form
     className: vc-form
     actionEvent: onSubmit
     ariaLabel: true
+  Field:
+    tag: div
+    className: vc-field-container
+    fieldContainer: true
   TextInput:
     tag: input
     className: vc-text-input
@@ -76,6 +103,35 @@ elements:
     tag: label
     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: vc-list

package/renderers/react/lowering/lowerToJsx.ts

@@ -96,9 +96,40 @@ function extraFlexStyle(entry: ElementMapEntry, props: Record<string, IrValue>):
   return `, ${parts.join(', ')}`;
 }
 
+function scrollOverflowLiteral(mode: string): { overflowX: string; overflowY: string } {
+  if (mode === 'horizontal') return { overflowX: 'auto', overflowY: 'hidden' };
+  if (mode === 'both') return { overflowX: 'auto', overflowY: 'auto' };
+  if (mode === 'none') return { overflowX: 'hidden', overflowY: 'hidden' };
+  return { overflowX: 'hidden', overflowY: 'auto' };
+}
+
 function styleAttr(entry: ElementMapEntry, props: Record<string, IrValue>): string {
   const base = collectStyleProps(props);
   const flex = extraFlexStyle(entry, props);
+  if (entry.scrollContainer) {
+    const scrollLit = propLiteral(props, 'scroll');
+    const axisLit = propLiteral(props, 'axis');
+    const literalMode = typeof scrollLit === 'string'
+      ? scrollLit
+      : typeof axisLit === 'string'
+        ? (axisLit === 'horizontal' ? 'horizontal' : 'vertical')
+        : undefined;
+    if (literalMode) {
+      const { overflowX, overflowY } = scrollOverflowLiteral(literalMode);
+      return `style={{ ...commonStyle(${base})${flex}, overflowX: '${overflowX}', overflowY: '${overflowY}' }}`;
+    }
+    const scroll = propExpr(props, 'scroll');
+    const axis = propExpr(props, 'axis');
+    const modeExpr = scroll
+      ?? (axis ? `(${axis} === 'horizontal' ? 'horizontal' : 'vertical')` : `'vertical'`);
+    return `style={{ ...commonStyle(${base})${flex}, ...(() => {
+      const __scroll = ${modeExpr};
+      if (__scroll === 'horizontal') return { overflowX: 'auto', overflowY: 'hidden' };
+      if (__scroll === 'both') return { overflowX: 'auto', overflowY: 'auto' };
+      if (__scroll === 'none') return { overflowX: 'hidden', overflowY: 'hidden' };
+      return { overflowX: 'hidden', overflowY: 'auto' };
+    })() }}`;
+  }
   if (entry.flexGrowProp && props[entry.flexGrowProp]) {
     const grow = propExpr(props, entry.flexGrowProp);
     return `style={{ ...commonStyle(${base})${flex}, flexGrow: ${grow} ?? 1 }}`;
@@ -207,6 +238,53 @@ ${indent(level + 1)}<span>{${label}}</span>
 ${indent(level)}</label>`;
 }
 
+function emitRadio(props: Record<string, IrValue>, level: number): string {
+  const name = propExpr(props, 'binding') ?? propExpr(props, 'name') ?? '""';
+  const value = propExpr(props, 'value') ?? '""';
+  const label = propExpr(props, 'label') ?? '""';
+  const checked = props.checked ? `defaultChecked={${propExpr(props, 'checked')}}` : '';
+  const disabled = props.enabled ? `disabled={${propExpr(props, 'enabled')} === false}` : '';
+  return `${indent(level)}<label className="vc-radio">
+${indent(level + 1)}<input type="radio" name={${name}} value={${value}} ${checked} ${disabled} />
+${indent(level + 1)}<span>{${label}}</span>
+${indent(level)}</label>`;
+}
+
+function emitSwitch(props: Record<string, IrValue>, level: number): string {
+  const name = propExpr(props, 'binding') ?? propExpr(props, 'name') ?? '""';
+  const label = propExpr(props, 'label') ?? '""';
+  const checked = props.checked ? `defaultChecked={${propExpr(props, 'checked')}}` : '';
+  const disabled = props.enabled ? `disabled={${propExpr(props, 'enabled')} === false}` : '';
+  return `${indent(level)}<label className="vc-switch">
+${indent(level + 1)}<input type="checkbox" role="switch" name={${name}} ${checked} ${disabled} />
+${indent(level + 1)}<span>{${label}}</span>
+${indent(level)}</label>`;
+}
+
+function emitIcon(node: IrComponentNode, entry: ElementMapEntry, level: number): string {
+  const props = node.props;
+  const hasAlt = props.alt !== undefined;
+  if (hasAlt) {
+    const attrs: string[] = [
+      classNameAttr(node.name, entry, props),
+      styleAttr(entry, props),
+      `src={${propExpr(props, 'name') ?? '""'}}`,
+      `alt={${propExpr(props, 'alt') ?? '""'}}`,
+    ];
+    if (props.id) attrs.push(`id={${propExpr(props, 'id')}}`);
+    return `${indent(level)}<img ${attrs.join(' ')} />`;
+  }
+
+  const attrs: string[] = [
+    classNameAttr(node.name, entry, props),
+    styleAttr(entry, props),
+    `aria-hidden`,
+  ];
+  if (props.id) attrs.push(`id={${propExpr(props, 'id')}}`);
+  if (props.name) attrs.push(`data-icon={${propExpr(props, 'name')}}`);
+  return `${indent(level)}<span ${attrs.join(' ')} />`;
+}
+
 function emitSelectOptions(props: Record<string, IrValue>, level: number): string {
   const options = props.options;
   if (!options || typeof options !== 'object' || !('kind' in options)) return '';
@@ -225,13 +303,25 @@ function emitVoidInput(
   level: number,
 ): string {
   const attrs: string[] = [classNameAttr(elementName, entry, props), styleAttr(entry, props)];
+  if (entry.ariaHidden) attrs.push('aria-hidden');
+  if (props.id) attrs.push(`id={${propExpr(props, 'id')}}`);
+  if (props.role) attrs.push(`role={${propExpr(props, 'role')}}`);
+  else if (entry.defaultRole) attrs.push(`role="${entry.defaultRole}"`);
+  if (entry.ariaLabel) {
+    if (props.ariaLabel) attrs.push(`aria-label={${propExpr(props, 'ariaLabel')}}`);
+    else if (props.label) attrs.push(`aria-label={${propExpr(props, 'label')}}`);
+    else if (props.title) attrs.push(`aria-label={${propExpr(props, 'title')}}`);
+  }
   if (props.name) attrs.push(`name={${propExpr(props, 'name')}}`);
   if (props.placeholder) attrs.push(`placeholder={${propExpr(props, 'placeholder')}}`);
   if (entry.inputType) attrs.push(`type={${propExpr(props, 'type') ?? JSON.stringify(entry.inputType)}}`);
   if (props.required) attrs.push(`required={${propExpr(props, 'required')}}`);
   if (props.readonly) attrs.push(`readOnly={${propExpr(props, 'readonly')}}`);
   if (props.enabled) attrs.push(`disabled={${propExpr(props, 'enabled')} === false}`);
-  if (props.rows) attrs.push(`rows={${propExpr(props, 'rows') ?? '4'}`);
+  if (entry.tag === 'img' && props.src) attrs.push(`src={${propExpr(props, 'src')}}`);
+  if (entry.tag === 'img' && props.alt) attrs.push(`alt={${propExpr(props, 'alt')}}`);
+  if (entry.tag === 'progress' && props.value) attrs.push(`value={${propExpr(props, 'value')}}`);
+  if (props.rows) attrs.push(`rows={${propExpr(props, 'rows') ?? '4'}}`);
   return `${indent(level)}<${entry.tag} ${attrs.join(' ')} />`;
 }
 
@@ -322,6 +412,35 @@ function lowerVocabularyElement(
     return visibilityGuard(emitCheckbox(props, level), props, level);
   }
 
+  if (node.name === 'Radio') {
+    return visibilityGuard(emitRadio(props, level), props, level);
+  }
+
+  if (node.name === 'Switch') {
+    return visibilityGuard(emitSwitch(props, level), props, level);
+  }
+
+  if (node.name === 'Icon') {
+    return visibilityGuard(emitIcon(node, entry, level), props, level);
+  }
+
+  if (node.name === 'Spinner') {
+    const attrs = [
+      classNameAttr(node.name, entry, props),
+      styleAttr(entry, props),
+      'aria-busy="true"',
+    ];
+    if (props.id) attrs.push(`id={${propExpr(props, 'id')}}`);
+    if (props.role) attrs.push(`role={${propExpr(props, 'role')}}`);
+    else if (entry.defaultRole) attrs.push(`role="${entry.defaultRole}"`);
+    return visibilityGuard(`${indent(level)}<div ${attrs.join(' ')} />`, props, level);
+  }
+
+  if (entry.fieldContainer) {
+    const inner = childContent || `${indent(level + 1)}<div />`;
+    return visibilityGuard(emitFieldWrap(inner, props, level), props, level);
+  }
+
   if (entry.fieldWrap) {
     const tag = entry.tag;
     let inner: string;
@@ -354,7 +473,7 @@ function lowerVocabularyElement(
 
   const tag = entry.tag;
   if (entry.void) {
-    return visibilityGuard(`${indent(level)}${emitOpenTag(node.name, entry, props, tag)} />`, props, level);
+    return visibilityGuard(emitVoidInput(node.name, entry, props, level), props, level);
   }
 
   const open = emitOpenTag(node.name, entry, props, tag);

package/renderers/react/renderComponents.ts

@@ -2,10 +2,18 @@ import type { ViewIrDocument } from '../../src/ir/types.js';
 import { loadReactElementMap } from './elementMap.js';
 import { collectExtensionComponents, createNodeRenderer } from './lowering/lowerToJsx.js';
 
+export interface PreviewImportSpecifiers {
+  dispatch: string;
+  styleHelpers: string;
+  contracts: string;
+  extensions: string;
+}
+
 export interface RenderReactOptions {
   componentsImportFrom: string;
   allowlistExtra?: string[];
   elementMapPath?: string;
+  previewImports?: PreviewImportSpecifiers;
 }
 
 export async function renderReactComponent(
@@ -28,20 +36,27 @@ export async function renderReactComponent(
   collectExtensionComponents(doc.root, map, allowlistExtra, extensions);
   const extensionImports = [...extensions].sort();
 
+  const preview = options.previewImports;
+  const dispatchModule = preview?.dispatch ?? '../runtime/dispatch.js';
+  const styleModule = preview?.styleHelpers ?? '../components/style-helpers.js';
+  const contractsModule = preview?.contracts ?? '../contracts';
+  const componentsModule = preview?.extensions ?? options.componentsImportFrom;
+
   const imports: string[] = [
     `import type { ReactElement } from 'react';`,
-    `import { dispatchAction } from '../runtime/dispatch.js';`,
-    `import { commonStyle, mapAlign, mapJustify } from '../components/style-helpers.js';`,
-    `import type { ${doc.viewModel}, ActionDescriptor } from '../contracts';`,
+    `import { dispatchAction } from '${dispatchModule}';`,
+    `import { commonStyle, mapAlign, mapJustify } from '${styleModule}';`,
+    `import type { ${doc.viewModel}, ActionDescriptor } from '${contractsModule}';`,
   ];
   if (extensionImports.length > 0) {
-    imports.push(`import { ${extensionImports.join(', ')} } from '${options.componentsImportFrom}';`);
+    imports.push(`import { ${extensionImports.join(', ')} } from '${componentsModule}';`);
   }
 
-  return `/**
- * Auto-generated React component from ${doc.source}
- * DO NOT EDIT — regenerate with: view-contracts render react
- */
+  const headerComment = preview
+    ? `/**\n * Preview module — compiled live from ${doc.source}\n * Same lowering as generated/; not written to disk.\n */`
+    : `/**\n * Auto-generated React component from ${doc.source}\n * DO NOT EDIT — regenerate with: view-contracts render react\n */`;
+
+  return `${headerComment}
 ${imports.join('\n')}
 
 export function ${componentName}({ vm }: { vm: ${doc.viewModel} }): ReactElement {

package/renderers/react/renderRuntime.ts

@@ -1,25 +1,12 @@
-import { readFile, writeFile, mkdir, stat, cp, unlink } from 'node:fs/promises';
+import { readFile, writeFile, mkdir, stat, unlink } from 'node:fs/promises';
 import { resolve } from 'node:path';
 import type { ViewContractsConfig } from '../../src/config.js';
-import { projectRoot } from '../../src/config.js';
-import { loadThemeCss } from '../../src/catalog/loadThemeCss.js';
-import {
-  defaultThemePath,
-  defaultTokensPath,
-  emitTokenCss,
-  emitVariantCss,
-  extractStructuralThemeCss,
-  loadValidateDesign,
-} from '../../src/design/index.js';
-import { packageRoot } from '../../src/lib/packageRoot.js';
+import { projectRoot, requireDesignPaths } from '../../src/config.js';
+import { buildThemeCss } from '../../src/design/buildThemeCss.js';
+import { loadValidateDesign } from '../../src/design/index.js';
 import { renderTemplate } from '../../src/renderer/template.js';
-import { reactRuntimeDir, reactTemplatesDir } from './paths.js';
-
-const toolchainRoot = packageRoot();
-
-function toolchainSchemaDir(): string {
-  return resolve(toolchainRoot, 'src/generated/schema');
-}
+import { reactTemplatesDir } from './paths.js';
+import { rewriteExtensionImportsForGenerated, syncGeneratedRuntime } from './syncGeneratedRuntime.js';
 
 async function pathExists(target: string): Promise<boolean> {
   try {
@@ -30,53 +17,18 @@ async function pathExists(target: string): Promise<boolean> {
   }
 }
 
-function rewriteSchemaImports(content: string): string {
-  return content.split('../../../src/generated/schema/').join('./schema/');
-}
-
-async function copySchemaBundle(componentsDir: string): Promise<void> {
-  const schemaSrc = toolchainSchemaDir();
-  if (!(await pathExists(schemaSrc))) return;
-
-  const schemaDest = resolve(componentsDir, 'schema');
-  await cp(schemaSrc, schemaDest, { recursive: true });
-  for (const name of ['dsl-properties.ts', 'dsl-enums.ts', 'schema-document.ts', 'index.ts'] as const) {
-    const file = resolve(schemaDest, name);
-    if (await pathExists(file)) {
-      await writeFile(file, rewriteSchemaImports(await readFile(file, 'utf-8')), 'utf-8');
-    }
-  }
-}
-
-async function copyStyleBundle(componentsDir: string): Promise<void> {
-  const runtimeSrc = reactRuntimeDir();
-  const style = rewriteSchemaImports(await readFile(resolve(runtimeSrc, 'style.ts'), 'utf-8'));
-  await writeFile(resolve(componentsDir, 'style.ts'), style, 'utf-8');
-
-  const types = rewriteSchemaImports(await readFile(resolve(runtimeSrc, 'types.ts'), 'utf-8'));
-  await writeFile(resolve(componentsDir, 'types.ts'), types, 'utf-8');
-}
-
 async function writeThemeCss(
-  root: string,
+  configPath: string,
   themeOut: string,
   config: ViewContractsConfig,
   templatesDir?: string,
 ): Promise<void> {
-  const tokensPath = config.design?.tokens ?? defaultTokensPath();
-  const themePath = config.design?.theme ?? defaultThemePath();
-  const { tokenIR, themeIR } = await loadValidateDesign(tokensPath, themePath);
-  const runtimeTheme = resolve(reactRuntimeDir(), 'theme.css');
-  const runtimeCss = await loadThemeCss(runtimeTheme);
-  const variantCss = emitVariantCss(tokenIR, themeIR);
-  let css = `${emitTokenCss(tokenIR)}\n\n${variantCss}\n\n${extractStructuralThemeCss(runtimeCss)}`;
-  const extensionsCss = config.design?.extensionsCss ?? resolve(root, 'src/theme.extensions.css');
-  if (await pathExists(extensionsCss)) {
-    css += `\n\n${await readFile(extensionsCss, 'utf-8')}`;
-  }
+  const css = await buildThemeCss(config, configPath);
   const content = await renderTemplate(reactTemplatesDir(templatesDir), 'theme.css.hbs', { themeCss: css });
   await writeFile(themeOut, content, 'utf-8');
 
+  const { tokensPath, themePath } = requireDesignPaths(config);
+  const { tokenIR, themeIR } = await loadValidateDesign(tokensPath, themePath);
   const themeDir = resolve(config.generated.reactDir, '../theme');
   await mkdir(themeDir, { recursive: true });
   await writeFile(resolve(themeDir, 'tokens.json'), `${JSON.stringify(tokenIR, null, 2)}\n`, 'utf-8');
@@ -99,32 +51,16 @@ export async function renderReactRuntime(configPath: string, config: ViewContrac
     ? resolve(root, config.rendererTemplatesDir)
     : undefined;
   const templates = reactTemplatesDir(templatesDir);
-  const componentsDir = resolve(config.generated.reactDir, '../components');
-  const runtimeDir = resolve(config.generated.reactDir, '../runtime');
   const srcComponentsDir = resolve(root, 'src/components');
 
-  await mkdir(componentsDir, { recursive: true });
-  await mkdir(runtimeDir, { recursive: true });
-
+  const { componentsDir, runtimeDir } = await syncGeneratedRuntime(configPath, config, templatesDir);
   await removeStaleGeneratedFiles(componentsDir);
-  await copySchemaBundle(componentsDir);
-  await copyStyleBundle(componentsDir);
-  await writeFile(
-    resolve(componentsDir, 'style-helpers.ts'),
-    await renderTemplate(templates, 'style-helpers.ts.hbs', {}),
-    'utf-8',
-  );
-  await writeFile(
-    resolve(componentsDir, 'index.ts'),
-    await renderTemplate(templates, 'components-index.ts.hbs', {}),
-    'utf-8',
-  );
 
   for (const name of ['extensions.tsx', 'sample-types.ts'] as const) {
     const src = resolve(srcComponentsDir, name);
     let body = await readFile(src, 'utf-8');
-    if (name === 'sample-types.ts') {
-      body = body.replace("from './core.js'", "from './types.js'");
+    if (name === 'extensions.tsx') {
+      body = rewriteExtensionImportsForGenerated(body);
     }
     await writeFile(resolve(componentsDir, name), body, 'utf-8');
   }
@@ -140,17 +76,7 @@ export async function renderReactRuntime(configPath: string, config: ViewContrac
     'utf-8',
   );
 
-  await writeThemeCss(root, resolve(config.generated.reactDir, '../theme.css'), config, templatesDir);
-  await writeFile(
-    resolve(runtimeDir, 'types.ts'),
-    await renderTemplate(templates, 'runtime-types.ts.hbs', {}),
-    'utf-8',
-  );
-  await writeFile(
-    resolve(runtimeDir, 'dispatch.ts'),
-    await renderTemplate(templates, 'dispatch.ts.hbs', {}),
-    'utf-8',
-  );
+  await writeThemeCss(configPath, resolve(config.generated.reactDir, '../theme.css'), config, templatesDir);
 
   console.log(`  components → ${componentsDir}`);
   console.log(`  theme → ${resolve(config.generated.reactDir, '../theme.css')}`);

package/renderers/react/routes.yaml

@@ -10,7 +10,7 @@ react:
     screen:
       pattern: '{{projectRoot}}/generated/react/{{screenName}}.generated.tsx'
   preview:
-    entry: views/preview.entry.tsx
+    entry: .vite/preview-main.tsx
     generatedEntry: src/main.tsx
 
 swiftui: