view-contracts 0.1.0 → 0.3.0

package/renderers/react/lowering/lowerToJsx.ts

@@ -0,0 +1,433 @@
+import type { ElementMapEntry, ReactElementMap } from '../elementMap.js';
+import { LOWERING_STYLE_PROPERTIES } from '../../../src/generated/schema/lowering-style-properties.js';
+import type {
+  IrAction,
+  IrBinding,
+  IrComponentNode,
+  IrFragmentNode,
+  IrLiteral,
+  IrMapNode,
+  IrNode,
+  IrTextNode,
+  IrValue,
+} from '../../../src/ir/types.js';
+
+function indent(level: number): string {
+  return '  '.repeat(level);
+}
+
+function bindingExpr(binding: IrBinding, vmRef = 'vm'): string {
+  const root = binding.scope ?? vmRef;
+  return binding.path ? `${root}.${binding.path}` : root;
+}
+
+function renderAction(action: IrAction, cast = false): string {
+  const suffix = cast ? ' as ActionDescriptor' : '';
+  if (!action.params || Object.keys(action.params).length === 0) {
+    return `{ name: ${JSON.stringify(action.name)} }${suffix}`;
+  }
+  const params = Object.entries(action.params)
+    .map(([key, val]) => `${key}: ${renderValue(val, 0)}`)
+    .join(', ');
+  return `{ name: ${JSON.stringify(action.name)}, params: { ${params} } }${suffix}`;
+}
+
+function renderLiteralValue(value: unknown, level: number, castActions = false): string {
+  if (value === null) return 'null';
+  if (typeof value === 'string') return JSON.stringify(value);
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  if (Array.isArray(value)) {
+    return `[\n${value.map((item) => `${indent(level + 1)}${renderLiteralValue(item, level + 1, castActions)}`).join(',\n')}\n${indent(level)}]`;
+  }
+  if (typeof value === 'object' && value !== null) {
+    const obj = value as Record<string, unknown>;
+    if ('kind' in obj && obj.kind === 'action') {
+      return renderAction(obj as unknown as IrAction, castActions);
+    }
+    const entries = Object.entries(obj).map(([key, val]) => `${key}: ${renderLiteralValue(val, level + 1, castActions)}`);
+    return `{\n${entries.map((entry) => `${indent(level + 1)}${entry}`).join(',\n')}\n${indent(level)}}`;
+  }
+  return 'undefined';
+}
+
+export function renderValue(value: IrValue, level: number, castActions = false): string {
+  if (value === null) return 'null';
+  if (typeof value === 'string') return JSON.stringify(value);
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  if (Array.isArray(value)) {
+    return `[\n${value.map((item) => `${indent(level + 1)}${renderValue(item, level + 1, castActions)}`).join(',\n')}\n${indent(level)}]`;
+  }
+  if (typeof value === 'object' && value !== null && 'kind' in value) {
+    if (value.kind === 'binding') return bindingExpr(value as IrBinding);
+    if (value.kind === 'action') return renderAction(value as IrAction, castActions);
+    if (value.kind === 'literal') return renderLiteralValue((value as IrLiteral).value, level, castActions);
+  }
+  return 'undefined';
+}
+
+function propLiteral(props: Record<string, IrValue>, key: string): unknown | undefined {
+  const value = props[key];
+  if (value === null || value === undefined) return undefined;
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') return value;
+  if (typeof value === 'object' && 'kind' in value && value.kind === 'literal') {
+    return (value as IrLiteral).value;
+  }
+  return undefined;
+}
+
+function propExpr(props: Record<string, IrValue>, key: string): string | undefined {
+  const value = props[key];
+  if (value === null || value === undefined) return undefined;
+  return renderValue(value, 0);
+}
+
+function collectStyleProps(props: Record<string, IrValue>): string {
+  const entries = Object.entries(props).filter(([key]) => LOWERING_STYLE_PROPERTIES.has(key));
+  if (entries.length === 0) return '{}';
+  const body = entries.map(([key, val]) => `${key}: ${renderValue(val, 0)}`).join(', ');
+  return `{ ${body} }`;
+}
+
+function extraFlexStyle(entry: ElementMapEntry, props: Record<string, IrValue>): string {
+  if (!entry.flex) return '';
+  const parts = [`display: 'flex'`, `flexDirection: '${entry.flex === 'column' ? 'column' : 'row'}'`];
+  if (props.align) parts.push(`alignItems: mapAlign(${propExpr(props, 'align')})`);
+  if (props.justify) parts.push(`justifyContent: mapJustify(${propExpr(props, 'justify')})`);
+  return `, ${parts.join(', ')}`;
+}
+
+function styleAttr(entry: ElementMapEntry, props: Record<string, IrValue>): string {
+  const base = collectStyleProps(props);
+  const flex = extraFlexStyle(entry, props);
+  if (entry.flexGrowProp && props[entry.flexGrowProp]) {
+    const grow = propExpr(props, entry.flexGrowProp);
+    return `style={{ ...commonStyle(${base})${flex}, flexGrow: ${grow} ?? 1 }}`;
+  }
+  if (flex) return `style={{ ...commonStyle(${base})${flex} }}`;
+  return `style={commonStyle(${base})}`;
+}
+
+function actionHandler(props: Record<string, IrValue>, event: 'onClick' | 'onSubmit'): string | undefined {
+  const action = props.action ?? props[event === 'onClick' ? 'onClick' : 'onSubmit'];
+  if (!action || typeof action !== 'object' || !('kind' in action) || action.kind !== 'action') {
+    return undefined;
+  }
+  const expr = renderAction(action as IrAction, true);
+  if (event === 'onSubmit') {
+    return `onSubmit={(e) => { e.preventDefault(); void dispatchAction(${expr}); }}`;
+  }
+  return `onClick={() => { void dispatchAction(${expr}); }}`;
+}
+
+function componentToKebab(name: string): string {
+  return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+function variantClassSuffix(elementName: string, props: Record<string, IrValue>): string | undefined {
+  const variantLit = propLiteral(props, 'variant');
+  if (typeof variantLit === 'string') {
+    return ` vc-${componentToKebab(elementName)}--${variantLit}`;
+  }
+  const variant = propExpr(props, 'variant');
+  if (variant) return ` vc-${componentToKebab(elementName)}--\${${variant}}`;
+  return undefined;
+}
+
+function classNameAttr(
+  elementName: string,
+  entry: ElementMapEntry,
+  props: Record<string, IrValue>,
+  headingLevel?: number,
+): string {
+  const base = entry.className ?? '';
+  if (entry.tag === 'dynamic-heading' && headingLevel !== undefined) {
+    const levelClass = `${base} vc-heading-${headingLevel}`;
+    const variantSuffix = variantClassSuffix(elementName, props);
+    if (!variantSuffix) return `className="${levelClass}"`;
+    const variantLit = propLiteral(props, 'variant');
+    if (typeof variantLit === 'string') {
+      return `className="${levelClass}${variantSuffix}"`;
+    }
+    return `className={\`${levelClass}${variantSuffix}\`}`;
+  }
+  const variantSuffix = variantClassSuffix(elementName, props);
+  if (variantSuffix) {
+    const variantLit = propLiteral(props, 'variant');
+    if (typeof variantLit === 'string') {
+      return `className="${base}${variantSuffix}"`;
+    }
+    return `className={\`${base}${variantSuffix}\`}`;
+  }
+  if (entry.wrapProp && propLiteral(props, entry.wrapProp) === true) {
+    return `className="${base} vc-wrap"`;
+  }
+  if (entry.sizeClass && props.size) {
+    const size = propExpr(props, 'size');
+    return `className={\`${entry.className} ${entry.sizeClass}-\${${size} ?? 'md'}\`}`;
+  }
+  return `className="${base}"`;
+}
+
+function emitFieldWrap(inner: string, props: Record<string, IrValue>, level: number): string {
+  const labelLit = propLiteral(props, 'label');
+  const helpLit = propLiteral(props, 'help');
+  const errorLit = propLiteral(props, 'error');
+  const label = propExpr(props, 'label');
+  const help = propExpr(props, 'help');
+  const error = propExpr(props, 'error');
+  const lines = [`${indent(level)}<label className="vc-field">`];
+  if (typeof labelLit === 'string') {
+    lines.push(`${indent(level + 1)}<span className="vc-field-label">{${JSON.stringify(labelLit)}}</span>`);
+  } else if (label) {
+    lines.push(`${indent(level + 1)}{${label} ? <span className="vc-field-label">{${label}}</span> : null}`);
+  }
+  lines.push(`${indent(level + 1)}${inner}`);
+  if (typeof helpLit === 'string') {
+    lines.push(`${indent(level + 1)}<span className="vc-field-help">{${JSON.stringify(helpLit)}}</span>`);
+  } else if (help) {
+    lines.push(`${indent(level + 1)}{${help} ? <span className="vc-field-help">{${help}}</span> : null}`);
+  }
+  if (typeof errorLit === 'string') {
+    lines.push(`${indent(level + 1)}<span className="vc-field-error">{${JSON.stringify(errorLit)}}</span>`);
+  } else if (error) {
+    lines.push(`${indent(level + 1)}{${error} ? <span className="vc-field-error">{${error}}</span> : null}`);
+  }
+  lines.push(`${indent(level)}</label>`);
+  return lines.join('\n');
+}
+
+function emitCheckbox(props: Record<string, IrValue>, level: number): string {
+  const name = 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-checkbox">
+${indent(level + 1)}<input type="checkbox" name={${name}} ${checked} ${disabled} />
+${indent(level + 1)}<span>{${label}}</span>
+${indent(level)}</label>`;
+}
+
+function emitSelectOptions(props: Record<string, IrValue>, level: number): string {
+  const options = props.options;
+  if (!options || typeof options !== 'object' || !('kind' in options)) return '';
+  if (options.kind === 'literal' && Array.isArray((options as IrLiteral).value)) {
+    const items = (options as IrLiteral).value as Array<{ label: string; value: string }>;
+    return items.map((opt) => `${indent(level + 1)}<option key={${JSON.stringify(opt.value)}} value={${JSON.stringify(opt.value)}}>{${JSON.stringify(opt.label)}}</option>`).join('\n');
+  }
+  const expr = renderValue(options, 0);
+  return `${indent(level + 1)}{${expr}.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}`;
+}
+
+function emitVoidInput(
+  elementName: string,
+  entry: ElementMapEntry,
+  props: Record<string, IrValue>,
+  level: number,
+): string {
+  const attrs: string[] = [classNameAttr(elementName, entry, props), styleAttr(entry, props)];
+  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'}`);
+  return `${indent(level)}<${entry.tag} ${attrs.join(' ')} />`;
+}
+
+function emitOpenTag(
+  elementName: string,
+  entry: ElementMapEntry,
+  props: Record<string, IrValue>,
+  tag: string,
+  headingLevel?: number,
+): string {
+  const attrs: string[] = [];
+  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 (entry.actionEvent) {
+    const handler = actionHandler(props, entry.actionEvent);
+    if (handler) attrs.push(handler);
+  }
+  if (entry.tag === 'button' && props.enabled) attrs.push(`disabled={${propExpr(props, 'enabled')} === false}`);
+  if (entry.tag === 'a' && props.href) attrs.push(`href={${propExpr(props, 'href')}}`);
+  if (entry.tag === 'button') attrs.push(`type={${propExpr(props, 'type') ?? '"button"'}}`);
+  attrs.push(classNameAttr(elementName, entry, props, headingLevel));
+  attrs.push(styleAttr(entry, props));
+  return `<${tag} ${attrs.join(' ')}`;
+}
+
+function visibilityGuard(inner: string, props: Record<string, IrValue>, level: number): string {
+  if (props.visible === undefined) return inner;
+  const vis = propExpr(props, 'visible');
+  return `${indent(level)}{${vis} !== false ? (\n${inner}\n${indent(level)}) : null}`;
+}
+
+type NodeRenderer = (node: IrComponentNode, level: number, itemScope?: string) => string;
+
+function renderChildren(
+  children: IrNode[],
+  level: number,
+  renderNested: NodeRenderer,
+  itemScope?: string,
+): string {
+  if (children.length === 0) return '';
+  const vmRef = itemScope ?? 'vm';
+  const parts = children.map((child) => {
+    if (child.kind === 'text') {
+      const text = (child as IrTextNode).value;
+      return text ? `${indent(level)}{${JSON.stringify(text)}}` : '';
+    }
+    if (child.kind === 'binding') {
+      return `${indent(level)}{${bindingExpr(child, vmRef)}}`;
+    }
+    if (child.kind === 'map') return renderMap(child as IrMapNode, level, renderNested);
+    if (child.kind === 'fragment') {
+      return renderChildren(child.children, level, renderNested, itemScope);
+    }
+    if (child.kind === 'component') return renderNested(child, level, itemScope);
+    return '';
+  }).filter(Boolean);
+  return parts.join('\n');
+}
+
+function renderMap(node: IrMapNode, level: number, renderNested: NodeRenderer): string {
+  const item = node.item;
+  let body = renderNested(node.body as IrComponentNode, level + 1, item);
+  if (node.key) {
+    const keyAttr = ` key={${bindingExpr(node.key, item)}}`;
+    body = body.replace(/^( +)<(\w+)/, `$1<$2${keyAttr}`);
+  }
+  return `${indent(level)}{${bindingExpr(node.source)}.map((${item}) => (\n${body}\n${indent(level)}))}`;
+}
+
+function lowerVocabularyElement(
+  node: IrComponentNode,
+  entry: ElementMapEntry,
+  level: number,
+  itemScope: string | undefined,
+  renderNested: NodeRenderer,
+): string {
+  const props = node.props;
+  const childContent = renderChildren(node.children, level + 1, renderNested, itemScope);
+
+  if (entry.checkbox) {
+    return visibilityGuard(emitCheckbox(props, level), props, level);
+  }
+
+  if (entry.fieldWrap) {
+    const tag = entry.tag;
+    let inner: string;
+    if (entry.optionsProp && props[entry.optionsProp]) {
+      const open = emitOpenTag(node.name, entry, props, tag);
+      inner = `${indent(level + 1)}${open}>\n${emitSelectOptions(props, level + 2)}\n${indent(level + 1)}</${tag}>`;
+    } else {
+      inner = emitVoidInput(node.name, entry, props, level + 1);
+    }
+    return visibilityGuard(emitFieldWrap(inner, props, level), props, level);
+  }
+
+  if (entry.tag === 'dynamic-heading') {
+    const levelLit = propLiteral(props, 'level');
+    if (typeof levelLit === 'number') {
+      const clamped = Math.min(6, Math.max(1, levelLit));
+      const tag = `h${clamped}`;
+      const open = emitOpenTag(node.name, entry, props, tag, clamped);
+      const body = childContent
+        ? `${indent(level)}${open}>\n${childContent}\n${indent(level)}</${tag}>`
+        : `${indent(level)}${open} />`;
+      return visibilityGuard(body, props, level);
+    }
+    const levelExpr = propExpr(props, 'level') ?? '2';
+    const inner = childContent
+      ? `${indent(level + 1)}{(() => { const __level = Math.min(6, Math.max(1, ${levelExpr} ?? 2)); const Tag = ('h' + __level) as keyof JSX.IntrinsicElements; return <Tag className={\`vc-heading vc-heading-\${__level}\`} style={commonStyle(${collectStyleProps(props)})}>{/* children below */}</Tag>; })()}`
+      : '';
+    return visibilityGuard(inner || `${indent(level)}<h2 ${classNameAttr(node.name, entry, props, 2)} ${styleAttr(entry, props)} />`, props, level);
+  }
+
+  const tag = entry.tag;
+  if (entry.void) {
+    return visibilityGuard(`${indent(level)}${emitOpenTag(node.name, entry, props, tag)} />`, props, level);
+  }
+
+  const open = emitOpenTag(node.name, entry, props, tag);
+  let body: string;
+  if (!childContent && entry.optionsProp && props[entry.optionsProp]) {
+    body = `${indent(level)}${open}>\n${emitSelectOptions(props, level + 1)}\n${indent(level)}</${tag}>`;
+  } else if (!childContent) {
+    body = `${indent(level)}${open} />`;
+  } else {
+    body = `${indent(level)}${open}>\n${childContent}\n${indent(level)}</${tag}>`;
+  }
+  return visibilityGuard(body, props, level);
+}
+
+function renderExtensionProps(props: Record<string, IrValue>, itemScope?: string): string {
+  const vmRef = itemScope ?? 'vm';
+  return Object.entries(props).map(([key, value]) => {
+    if (key === 'action' && typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'action') {
+      return `${key}={${renderAction(value as IrAction, true)}}`;
+    }
+    if (typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'binding') {
+      return `${key}={${bindingExpr(value as IrBinding, vmRef)}}`;
+    }
+    if (key === 'children') return '';
+    return `${key}={${renderValue(value, 0, key === 'columns')}}`;
+  }).join(' ');
+}
+
+function renderExtensionElement(
+  node: IrComponentNode,
+  level: number,
+  itemScope: string | undefined,
+  renderNested: NodeRenderer,
+): string {
+  const props = renderExtensionProps(node.props, itemScope);
+  const propStr = props ? ` ${props}` : '';
+  const childContent = renderChildren(node.children, level + 1, renderNested, itemScope);
+  if (!childContent) {
+    return `${indent(level)}<${node.name}${propStr} />`;
+  }
+  return `${indent(level)}<${node.name}${propStr}>\n${childContent}\n${indent(level)}</${node.name}>`;
+}
+
+function isVocabulary(name: string, map: ReactElementMap, allowlistExtra: string[]): boolean {
+  return name in map.elements && !allowlistExtra.includes(name);
+}
+
+export function collectExtensionComponents(
+  node: IrNode,
+  map: ReactElementMap,
+  allowlistExtra: string[],
+  names: Set<string>,
+): void {
+  if (node.kind === 'component') {
+    if (!isVocabulary(node.name, map, allowlistExtra)) names.add(node.name);
+    for (const child of node.children) collectExtensionComponents(child, map, allowlistExtra, names);
+    return;
+  }
+  if (node.kind === 'map') collectExtensionComponents(node.body, map, allowlistExtra, names);
+  if (node.kind === 'fragment') {
+    for (const child of node.children) collectExtensionComponents(child, map, allowlistExtra, names);
+  }
+}
+
+export function createNodeRenderer(
+  map: ReactElementMap,
+  allowlistExtra: string[],
+): NodeRenderer {
+  const renderNested: NodeRenderer = (node, level, itemScope) => {
+    if (isVocabulary(node.name, map, allowlistExtra)) {
+      return lowerVocabularyElement(node, map.elements[node.name]!, level, itemScope, renderNested);
+    }
+    return renderExtensionElement(node, level, itemScope, renderNested);
+  };
+  return renderNested;
+}

package/renderers/react/paths.ts

@@ -0,0 +1,10 @@
+import { resolve } from 'node:path';
+import { packageRoot } from '../../src/lib/packageRoot.js';
+
+export function reactTemplatesDir(customDir?: string): string {
+  return customDir ?? resolve(packageRoot(), 'renderers/react/templates');
+}
+
+export function reactRuntimeDir(): string {
+  return resolve(packageRoot(), 'renderers/react/runtime');
+}

package/renderers/react/renderComponents.ts

@@ -0,0 +1,65 @@
+import type { ViewIrDocument } from '../../src/ir/types.js';
+import { loadReactElementMap } from './elementMap.js';
+import { collectExtensionComponents, createNodeRenderer } from './lowering/lowerToJsx.js';
+
+export interface RenderReactOptions {
+  componentsImportFrom: string;
+  allowlistExtra?: string[];
+  elementMapPath?: string;
+}
+
+export async function renderReactComponent(
+  doc: ViewIrDocument,
+  options: RenderReactOptions,
+): Promise<string> {
+  const map = await loadReactElementMap(options.elementMapPath);
+  const allowlistExtra = options.allowlistExtra ?? [];
+  const baseName = doc.exportName.replace(/View$/, '') || doc.exportName;
+  const componentName = baseName.charAt(0).toUpperCase() + baseName.slice(1);
+  const root = doc.root.kind === 'component' ? doc.root : null;
+  if (!root) {
+    throw new Error(`View IR root must be a component node (${doc.source})`);
+  }
+
+  const renderNode = createNodeRenderer(map, allowlistExtra);
+  const body = renderNode(root, 2);
+
+  const extensions = new Set<string>();
+  collectExtensionComponents(doc.root, map, allowlistExtra, extensions);
+  const extensionImports = [...extensions].sort();
+
+  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';`,
+  ];
+  if (extensionImports.length > 0) {
+    imports.push(`import { ${extensionImports.join(', ')} } from '${options.componentsImportFrom}';`);
+  }
+
+  return `/**
+ * Auto-generated React component from ${doc.source}
+ * DO NOT EDIT — regenerate with: view-contracts render react
+ */
+${imports.join('\n')}
+
+export function ${componentName}({ vm }: { vm: ${doc.viewModel} }): ReactElement {
+  return (
+${body}
+  );
+}
+`;
+}
+
+export async function renderReactFromIr(
+  doc: ViewIrDocument,
+  outputPath: string,
+  options: RenderReactOptions,
+): Promise<void> {
+  const { writeFile, mkdir } = await import('node:fs/promises');
+  const { dirname } = await import('node:path');
+  const content = await renderReactComponent(doc, options);
+  await mkdir(dirname(outputPath), { recursive: true });
+  await writeFile(outputPath, content, 'utf-8');
+}

package/renderers/react/renderRuntime.ts

@@ -0,0 +1,157 @@
+import { readFile, writeFile, mkdir, stat, cp, 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 { renderTemplate } from '../../src/renderer/template.js';
+import { reactRuntimeDir, reactTemplatesDir } from './paths.js';
+
+const toolchainRoot = packageRoot();
+
+function toolchainSchemaDir(): string {
+  return resolve(toolchainRoot, 'src/generated/schema');
+}
+
+async function pathExists(target: string): Promise<boolean> {
+  try {
+    await stat(target);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+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,
+  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 content = await renderTemplate(reactTemplatesDir(templatesDir), 'theme.css.hbs', { themeCss: css });
+  await writeFile(themeOut, content, 'utf-8');
+
+  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');
+  await writeFile(resolve(themeDir, 'theme.json'), `${JSON.stringify(themeIR, null, 2)}\n`, 'utf-8');
+}
+
+async function removeStaleGeneratedFiles(componentsDir: string): Promise<void> {
+  for (const name of ['ui-components.tsx', 'core.ts', 'actionRuntime.ts', 'shared.tsx', 'shared.ts'] as const) {
+    const target = resolve(componentsDir, name);
+    if (await pathExists(target)) {
+      await unlink(target);
+    }
+  }
+}
+
+/** Emit standalone generated runtime (no preview vocabulary copy; no @view-contracts imports). */
+export async function renderReactRuntime(configPath: string, config: ViewContractsConfig): Promise<void> {
+  const root = projectRoot(configPath);
+  const templatesDir = config.rendererTemplatesDir
+    ? 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 });
+
+  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'");
+    }
+    await writeFile(resolve(componentsDir, name), body, 'utf-8');
+  }
+
+  const handlersSrc = resolve(root, 'src/runtime/handlers.ts');
+  const handlersBody = (await readFile(handlersSrc, 'utf-8')).replace(
+    /export async function handleAppAction\(action:\s*\{[\s\S]*?\}\)/,
+    'export async function handleAppAction(action: DispatchableAction)',
+  );
+  await writeFile(
+    resolve(runtimeDir, 'handlers.ts'),
+    await renderTemplate(templates, 'handlers.ts.hbs', { handlersBody }),
+    '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',
+  );
+
+  console.log(`  components → ${componentsDir}`);
+  console.log(`  theme → ${resolve(config.generated.reactDir, '../theme.css')}`);
+}

package/renderers/react/routes.yaml

@@ -2,9 +2,10 @@
 # Vocabulary: spec/ui-dsl.schema.json. Per-target maps: renderers/{target}/elements.yaml
 
 react:
-  description: Production / preview React components via project componentsModule
-  importFrom: '@view-contracts/components'
+  description: Production React via compile-time IR lowering + template-emitted runtime
+  importFrom: '../components/index.js'
   themeCss: theme.css
+  templates: renderers/react/templates
   outputs:
     screen:
       pattern: '{{projectRoot}}/generated/react/{{screenName}}.generated.tsx'