view-contracts 0.3.5 → 0.4.0

package/docs/cli-reference.md

@@ -13,6 +13,7 @@ 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)
+  - [preview](#view-contracts-preview)
 
 ---
 
@@ -200,3 +201,38 @@ view-contracts contracts check -c view-contracts.config.yaml
 **Exit 1:** Lint failed.
 
 ---
+
+### preview
+
+Start DSL preview HTTP server.
+
+Compiles views/*.view.tsx on demand and serves a React preview over HTTP. No Vite setup required in the consumer project.
+
+**Usage:**
+
+```
+view-contracts preview
+```
+```
+view-contracts preview -c view-contracts.config.yaml
+```
+```
+view-contracts preview --port 3000 --screen AdminDashboard
+```
+
+#### Options
+
+| Option | Aliases | Required | Default | Description |
+|---|---|---|---|---|
+| `--config` | -c | No |  | Path to view-contracts.config.yaml (discovered upward from cwd when omitted). |
+| `--port` | -p | No |  | HTTP listen port. |
+| `--host` |  | No |  | HTTP listen host. |
+| `--screen` |  | No |  | Screen name from view-bindings.yaml (default first react target). |
+
+#### Exit Codes
+
+**Exit 0:** Server stopped normally.
+
+**Exit 1:** Startup or compile failed.
+
+---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "view-contracts",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Contract-first UI design toolchain — restricted TSX to View IR to platform renderers",
   "type": "module",
   "workspaces": [
@@ -9,9 +9,18 @@
   "bin": {
     "view-contracts": "dist/view-contracts.bundle.mjs"
   },
+  "exports": {
+    ".": "./dist/view-contracts.bundle.mjs",
+    "./preview": "./dist/preview.mjs",
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist/view-contracts.bundle.mjs",
     "dist/view-contracts.bundle.mjs.map",
+    "dist/preview.mjs",
+    "dist/preview.mjs.map",
+    "dist/preview-style-helpers.js",
+    "dist/preview-style-helpers.js.map",
     "renderers/react/runtime",
     "renderers/react/defaults",
     "src/generated/schema",
@@ -36,6 +45,7 @@
     "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",
+    "render:swiftui-prototype": "tsx scripts/render-swiftui-prototype.ts",
     "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",
@@ -74,8 +84,25 @@
   "engines": {
     "node": ">=20.0.0"
   },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "commander": "^14.0.3",
+    "esbuild": "^0.28.0",
     "handlebars": "^4.7.9",
     "js-yaml": "^4.1.1",
     "micro-contracts": "^0.17.10",

package/renderers/compose/renderRuntime.ts

@@ -0,0 +1,40 @@
+import { mkdir, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import type { ViewBindingsFile, ViewContractsConfig } from '../../src/config.js';
+import { packageRoot } from '../../src/lib/packageRoot.js';
+import { renderTemplate } from '../../src/renderer/template.js';
+
+function composeTemplatesDir(): string {
+  return resolve(packageRoot(), 'renderers/compose/templates');
+}
+
+export async function renderComposeRuntime(
+  config: ViewContractsConfig,
+  bindings: ViewBindingsFile,
+): Promise<void> {
+  const composeDir = resolve(config.generated.reactDir, '../compose');
+  await mkdir(composeDir, { recursive: true });
+
+  await writeFile(
+    resolve(composeDir, 'VcTheme.kt'),
+    await renderTemplate(composeTemplatesDir(), 'VcTheme.kt.hbs', {
+      packageName: 'generated.compose',
+    }),
+    'utf-8',
+  );
+
+  for (const view of bindings.views) {
+    if (view.targets.includes('compose')) {
+      const out = resolve(composeDir, `${view.screenName}Screen.kt`);
+      await writeFile(
+        out,
+        await renderTemplate(composeTemplatesDir(), 'Screen.kt.hbs', {
+          screenName: view.screenName,
+          packageName: 'generated.compose',
+        }),
+        'utf-8',
+      );
+      console.log(`  compose → ${out}`);
+    }
+  }
+}

package/renderers/react/defaults/theme.yaml

@@ -6,6 +6,29 @@ defaults:
     radius: "{ui.space.radius-md}"
     padding: "{ui.space.button-padding}"
     fontWeight: "{ui.layout.font-bold}"
+  TextInput:
+    background: "{ui.surface}"
+    foreground: "{ui.text}"
+    radius: "{ui.space.radius-md}"
+    padding: "{ui.space.input-padding}"
+    border: "{ui.layout.border-1}"
+    borderColor: "{ui.border}"
+    minHeight: "{ui.space.input-min-height}"
+  TextArea:
+    background: "{ui.surface}"
+    foreground: "{ui.text}"
+    radius: "{ui.space.radius-md}"
+    padding: "{ui.space.textarea-padding}"
+    border: "{ui.layout.border-1}"
+    borderColor: "{ui.border}"
+  Select:
+    background: "{ui.surface}"
+    foreground: "{ui.text}"
+    radius: "{ui.space.radius-md}"
+    padding: "{ui.space.select-padding}"
+    border: "{ui.layout.border-1}"
+    borderColor: "{ui.border}"
+    minHeight: "{ui.space.input-min-height}"
 variants:
   Button:
     primary:

package/renderers/react/defaults/tokens.yaml

@@ -61,6 +61,9 @@ ui:
     font-bold:
       $type: layout
       $value: "700"
+    border-1:
+      $type: layout
+      $value: "1px solid"
   space:
     radius-md:
       $type: dimension
@@ -68,3 +71,15 @@ ui:
     button-padding:
       $type: dimension
       $value: "10px 14px"
+    input-padding:
+      $type: dimension
+      $value: "9px 12px"
+    input-min-height:
+      $type: dimension
+      $value: "42px"
+    select-padding:
+      $type: dimension
+      $value: "9px 36px 9px 12px"
+    textarea-padding:
+      $type: dimension
+      $value: "10px 12px"

package/renderers/react/elementMap.ts

@@ -1,15 +1,39 @@
 import { resolve } from 'node:path';
-import { ALLOWED_COMPONENTS } from '../../src/generated/schema/allowed-components.js';
-import type { ReactElementMapFile, ReactRendererElementConfig } from '../../src/generated/schema/react-renderer-element-config.js';
+import { ALLOWED_COMPONENTS } from '../../src/schema/dsl-catalog.js';
+import { ELEMENT_CATALOG } from '../../src/schema/dsl-catalog.js';
 import { packageRoot } from '../../src/lib/packageRoot.js';
 import {
   loadYamlFile,
   validateMapEntryFields,
   validateVocabularyElementNames,
 } from '../../src/renderer/elementMapValidation.js';
-import { loadUiDslSchema } from '../../src/schema/loadSchema.js';
 
-export type { ReactElementMapFile, ReactRendererElementConfig };
+/** Shape of entries in renderers/react/elements.yaml (renderer-owned SSoT). */
+export interface ReactRendererElementConfig {
+  tag: string;
+  className?: string;
+  ariaLabel?: boolean;
+  ariaHidden?: boolean;
+  flex?: 'row' | 'column';
+  wrapProp?: string;
+  flexGrowProp?: string;
+  void?: boolean;
+  actionEvent?: 'onClick' | 'onSubmit';
+  fieldWrap?: boolean;
+  inputType?: string;
+  sizeClass?: string;
+  optionsProp?: string;
+  checkbox?: boolean;
+  fieldContainer?: boolean;
+  scrollContainer?: boolean;
+  defaultRole?: string;
+  tableCell?: boolean;
+}
+
+export interface ReactElementMapFile {
+  elements: Record<string, ReactRendererElementConfig>;
+}
+
 export type ReactElementMap = ReactElementMapFile;
 export type ElementMapEntry = ReactRendererElementConfig;
 
@@ -41,8 +65,8 @@ export function isLowerableVocabularyElement(
 }
 
 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));
+  const map = await loadReactElementMap(customPath);
+  const missing = Object.keys(ELEMENT_CATALOG).filter((name) => !(name in map.elements));
   if (missing.length > 0) {
     throw new Error(
       `${SOURCE_LABEL}: ${missing.length} DSL element(s) have no React HTML map yet: ${missing.join(', ')}`,

package/renderers/react/elements.yaml

@@ -45,11 +45,6 @@ elements:
     tag: hr
     className: vc-divider
     void: true
-  Heading:
-    tag: dynamic-heading
-    className: vc-heading
-    levelProp: level
-    defaultLevel: 2
   Text:
     tag: p
     className: vc-text
@@ -140,3 +135,20 @@ elements:
     tag: li
     className: vc-list-item
     defaultRole: listitem
+  Table:
+    tag: table
+    className: vc-table
+  TableHeader:
+    tag: thead
+    className: vc-table-header
+  TableColumn:
+    tag: th
+    className: vc-table-column
+    tableCell: true
+  TableRow:
+    tag: tr
+    className: vc-table-row
+  TableCell:
+    tag: td
+    className: vc-table-cell
+    tableCell: true

package/renderers/react/lowering/foldStyle.ts

@@ -2,7 +2,7 @@
  * Compile-time style folding for React lowering.
  * Production generated JSX must not call runtime style helpers.
  */
-import { LOWERING_STYLE_PROPERTIES } from '../../../src/generated/schema/lowering-style-properties.js';
+import { LOWERING_STYLE_PROPERTIES } from '../../../src/schema/dsl-catalog.js';
 import type { IrLiteral, IrValue } from '../../../src/ir/types.js';
 import type { ElementMapEntry } from '../elementMap.js';
 import { foldLiteralsToCss, foldedStyleToJsx, type FoldedCss } from '../style/foldLiterals.js';
@@ -57,6 +57,18 @@ export function styleAttrForElement(entry: ElementMapEntry, props: Record<string
   let folded = foldLiteralsToCss(literals);
   folded = { ...folded, ...foldFlexContainer(entry) };
 
+  if (entry.tableCell) {
+    if ('alignItems' in folded) {
+      const ai = String(folded.alignItems);
+      folded.textAlign = ai === 'flex-end' ? 'right' : ai === 'center' ? 'center' : 'left';
+      delete folded.alignItems;
+    }
+    if ('width' in folded && !('flex' in folded)) {
+      folded.flexShrink = 0;
+      folded.flexGrow = 0;
+    }
+  }
+
   if (entry.scrollContainer) {
     const scrollLit = propLiteral(props, 'scroll');
     const axisLit = propLiteral(props, 'axis');

package/renderers/react/lowering/lowerToJsx.ts

@@ -4,6 +4,7 @@ import type {
   IrAction,
   IrBinding,
   IrComponentNode,
+  IrConcat,
   IrFragmentNode,
   IrLiteral,
   IrMapNode,
@@ -22,6 +23,14 @@ function bindingExpr(binding: IrBinding, vmRef = 'vm'): string {
   return binding.path ? `${root}.${binding.path}` : root;
 }
 
+function concatSegments(concat: IrConcat): string {
+  return concat.parts.map(p => typeof p === 'string' ? p : `\${${bindingExpr(p)}}`).join('');
+}
+
+function renderConcat(concat: IrConcat): string {
+  return `\`${concatSegments(concat)}\``;
+}
+
 function renderAction(action: IrAction, cast = false): string {
   const suffix = cast ? ' as ActionDescriptor' : '';
   if (!action.params || Object.keys(action.params).length === 0) {
@@ -62,6 +71,7 @@ export function renderValue(value: IrValue, level: number, castActions = false):
     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);
+    if (value.kind === 'concat') return renderConcat(value as IrConcat);
   }
   return 'undefined';
 }
@@ -108,6 +118,10 @@ function variantClassSuffix(elementName: string, props: Record<string, IrValue>)
   if (typeof variantLit === 'string') {
     return ` vc-${componentToKebab(elementName)}--${variantLit}`;
   }
+  const variantVal = props.variant;
+  if (variantVal && typeof variantVal === 'object' && 'kind' in variantVal && variantVal.kind === 'concat') {
+    return ` vc-${componentToKebab(elementName)}--${concatSegments(variantVal as IrConcat)}`;
+  }
   const variant = propExpr(props, 'variant');
   if (variant) return ` vc-${componentToKebab(elementName)}--\${${variant}}`;
   return undefined;
@@ -117,19 +131,8 @@ 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');
@@ -280,7 +283,6 @@ function emitOpenTag(
   entry: ElementMapEntry,
   props: Record<string, IrValue>,
   tag: string,
-  headingLevel?: number,
 ): string {
   const attrs: string[] = [];
   if (entry.ariaHidden) attrs.push('aria-hidden');
@@ -299,7 +301,7 @@ function emitOpenTag(
   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(classNameAttr(elementName, entry, props));
   pushStyleAttr(attrs, entry, props);
   return `<${tag} ${attrs.join(' ')}`;
 }
@@ -402,27 +404,6 @@ function lowerVocabularyElement(
     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 foldedStyle = foldedStyleToJsx(foldLiteralsToCss(collectLiteralStyleProps(props)));
-    const styleFragment = foldedStyle ? ` ${foldedStyle}` : '';
-    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}\`}${styleFragment}>{/* children below */}</Tag>; })()}`
-      : '';
-    const fallbackStyle = styleAttrForElement(entry, props);
-    return visibilityGuard(inner || `${indent(level)}<h2 ${classNameAttr(node.name, entry, props, 2)}${fallbackStyle ? ` ${fallbackStyle}` : ''} />`, props, level);
-  }
-
   const tag = entry.tag;
   if (entry.void) {
     return visibilityGuard(emitVoidInput(node.name, entry, props, level), props, level);

package/renderers/react/paths.ts

@@ -1,10 +1 @@
-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');
-}
+export { reactTemplatesDir, reactRuntimeDir } from '../../src/lib/rendererPaths.js';

package/renderers/react/preview/components.ts

@@ -0,0 +1,23 @@
+/**
+ * React preview composition root.
+ * Wires vocabulary stubs + renderer runtime + project extensions.
+ * This file belongs to the React renderer, NOT to core src/.
+ */
+import { vocabularyStubs } from './vocabulary.js';
+
+export const {
+  App, Box, Button, Checkbox, Column, Divider, Drawer,
+  Field, Form, Heading, Icon, IconButton, Image, Link,
+  List, ListItem, Modal, Page, Popover, Progress, Radio,
+  Row, SafeArea, ScrollArea, Select, Spacer, Spinner,
+  Stack, Switch, Table, TableCell, TableColumn, TableHeader,
+  TableRow, Text, TextArea, TextInput, Tooltip,
+} = vocabularyStubs;
+
+export {
+  isHidden,
+  toneClass,
+  registerPreviewActions,
+  clearPreviewActions,
+  dispatchPreviewAction,
+} from '../runtime/index.js';

package/renderers/react/preview/index.ts

@@ -0,0 +1,3 @@
+export { startPreview, PreviewApp } from './start.js';
+export type { PreviewOptions } from './start.js';
+export { PreviewShell } from '../../../src/preview/shell.js';

package/renderers/react/preview/start.tsx

@@ -0,0 +1,42 @@
+import type { ComponentType, ReactElement } from 'react';
+import type { ActionHandlers } from '@view-contracts/core';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '@view-contracts/theme';
+import { registerPreviewActions } from '../runtime/actionRuntime.js';
+import { PreviewShell } from '../../../src/preview/shell.js';
+
+export interface PreviewOptions<TVm> {
+  View: ComponentType<{ vm: TVm; actions?: ActionHandlers }>;
+  vm: TVm;
+  actions?: ActionHandlers;
+  onAction?: ActionHandlers;
+}
+
+/** Mount a view-contract screen for design preview (views/ + view-contracts packages only). */
+export function startPreview<TVm>(options: PreviewOptions<TVm>): void {
+  const actions = options.actions ?? {};
+  if (options.onAction) {
+    registerPreviewActions({ ...actions, ...options.onAction });
+  } else {
+    registerPreviewActions(actions);
+  }
+
+  const View = options.View;
+  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+      <PreviewShell>
+        <View vm={options.vm} actions={actions} />
+      </PreviewShell>
+    </React.StrictMode>,
+  );
+}
+
+export function PreviewApp<TVm>(props: PreviewOptions<TVm>): ReactElement {
+  const View = props.View;
+  return (
+    <PreviewShell>
+      <View vm={props.vm} actions={props.actions} />
+    </PreviewShell>
+  );
+}

package/renderers/react/preview/style-helpers.ts

@@ -0,0 +1,5 @@
+/** Preview style helpers — re-export from renderer runtime. */
+export {
+  extensionClassName,
+  resolveExtensionVariant,
+} from '../runtime/style.js';

package/renderers/react/preview/vocabulary.tsx

@@ -0,0 +1,75 @@
+/**
+ * Preview vocabulary stubs — React components for authoring/preview only.
+ * Production apps use compile-time HTML lowering (lowerToJsx), not these stubs.
+ *
+ * All element names and style property lists come from dsl-catalog (SSoT).
+ */
+import type { FormEvent, ReactElement, ReactNode } from 'react';
+import { dispatchPreviewAction } from '../runtime/actionRuntime.js';
+import { isHidden, toneClass } from '../runtime/style.js';
+import { foldLiteralsToCss } from '../style/foldLiterals.js';
+import { ELEMENT_CATALOG, LOWERING_STYLE_PROPERTIES } from '../../../src/schema/dsl-catalog.js';
+import type { Action } from '../runtime/types.js';
+
+function componentToKebab(name: string): string {
+  return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+function previewClassName(elementName: string, props: Record<string, unknown>): string {
+  const kebab = componentToKebab(elementName);
+  const parts = [`vc-${kebab}`];
+  if (typeof props.level === 'number') {
+    parts.push(`vc-${kebab}-${props.level}`);
+  }
+  const variant = props.variant ?? props.tone;
+  if (typeof variant === 'string') {
+    parts.push(`vc-${kebab}--${variant}`);
+    if (props.tone) parts.push(toneClass(variant));
+  }
+  return parts.join(' ');
+}
+
+function previewStyleProps(props: Record<string, unknown>): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (LOWERING_STYLE_PROPERTIES.has(key)) out[key] = value;
+  }
+  return out;
+}
+
+function vocabularyStub(elementName: string) {
+  return function VocabularyElement(props: Record<string, unknown>): ReactElement | null {
+    if (isHidden(props)) return null;
+    const { children, action, onClick, onSubmit, label } = props;
+    const clickAction = (action ?? onClick) as Action | undefined;
+    const submitAction = (action ?? onSubmit) as Action | undefined;
+    const onClickHandler = clickAction
+      ? () => { void dispatchPreviewAction(clickAction); }
+      : undefined;
+    const onSubmitHandler = submitAction
+      ? (event: FormEvent<HTMLDivElement>) => {
+          event.preventDefault();
+          void dispatchPreviewAction(submitAction);
+        }
+      : undefined;
+    const content = (children as ReactNode) ?? (typeof label === 'string' ? label : null);
+    const inlineStyle = foldLiteralsToCss(previewStyleProps(props));
+    return (
+      <div
+        data-vc-element={elementName}
+        className={previewClassName(elementName, props)}
+        style={Object.keys(inlineStyle).length > 0 ? inlineStyle : undefined}
+        onClick={onClickHandler}
+        onSubmit={onSubmitHandler}
+      >
+        {content}
+      </div>
+    );
+  };
+}
+
+/** All vocabulary stubs keyed by element name, derived from ELEMENT_CATALOG. */
+export const vocabularyStubs: Record<string, ReturnType<typeof vocabularyStub>> =
+  Object.fromEntries(
+    Object.keys(ELEMENT_CATALOG).map((name) => [name, vocabularyStub(name)]),
+  );

package/renderers/react/runtime/theme.css

@@ -20,13 +20,6 @@ button, input, textarea, select { font: inherit; }
 .vc-link { color: var(--ui-primary); text-decoration: none; }
 .vc-link:hover { text-decoration: underline; }
 
-.ui-tone-default { color: var(--ui-text); }
-.ui-tone-muted { color: var(--ui-text-muted); }
-.ui-tone-primary { color: var(--ui-primary); }
-.ui-tone-success { color: var(--ui-success); }
-.ui-tone-warning { color: var(--ui-warning); }
-.ui-tone-danger { color: var(--ui-danger); }
-
 .vc-button { border: 0; cursor: pointer; }
 
 .vc-form { display: flex; flex-direction: column; }
@@ -34,19 +27,13 @@ button, input, textarea, select { font: inherit; }
 .vc-field-label { font-size: 13px; font-weight: 700; color: var(--ui-text); }
 .vc-field-help { font-size: 12px; color: var(--ui-text-muted); }
 .vc-field-error { font-size: 12px; color: var(--ui-danger); }
-.vc-text-input, .vc-text-area { width: 100%; border: 1px solid var(--ui-border); border-radius: 10px; background: #fff; color: var(--ui-text); outline: none; }
+.vc-text-input, .vc-text-area { width: 100%; outline: none; }
 .vc-text-input:focus, .vc-text-area:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
 .vc-field-sm { min-height: 34px; padding: 6px 10px; }
-.vc-field-md, .vc-text-input { min-height: 42px; padding: 9px 12px; }
+.vc-field-md { min-height: 42px; }
 .vc-field-lg { min-height: 50px; padding: 12px 14px; }
 .vc-select {
   width: 100%;
-  min-height: 42px;
-  padding: 9px 36px 9px 12px;
-  border: 1px solid var(--ui-border);
-  border-radius: 10px;
-  background-color: #fff;
-  color: var(--ui-text);
   outline: none;
   appearance: none;
   -webkit-appearance: none;
@@ -58,8 +45,13 @@ button, input, textarea, select { font: inherit; }
   background-size: 16px;
 }
 .vc-select:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
-.vc-field-lg { min-height: 50px; padding: 12px 14px; }
-.vc-text-area { padding: 10px 12px; resize: vertical; }
+.vc-text-area { resize: vertical; }
 .vc-checkbox { display: inline-flex; align-items: center; gap: 8px; }
 .vc-list { margin: 0; padding-left: 20px; }
 .vc-list-item { margin: 0; padding: 2px 0; }
+
+.vc-table { width: 100%; display: flex; flex-direction: column; }
+.vc-table-header { display: flex; background: var(--ui-surface-muted, #f8f9fa); }
+.vc-table-column { text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 600; color: var(--ui-text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.vc-table-row { display: flex; align-items: center; border-top: 1px solid var(--ui-border, #e5e7eb); }
+.vc-table-cell { padding: 14px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

package/renderers/react/style/foldLiterals.ts

@@ -116,6 +116,17 @@ export function foldLiteralsToCss(literals: Record<string, unknown>): FoldedCss
     if (mapped) style.justifyContent = mapped;
   }
 
+  if (typeof literals.display === 'string') style.display = literals.display;
+  if (typeof literals.gridTemplateColumns === 'string') style.gridTemplateColumns = literals.gridTemplateColumns;
+  if (typeof literals.flexDirection === 'string') style.flexDirection = literals.flexDirection;
+  if (typeof literals.alignItems === 'string') style.alignItems = literals.alignItems;
+
+  const borderColor = literals.borderColor;
+  if (typeof borderColor === 'string') style.borderColor = tokenRefToCssVar(borderColor) ?? borderColor;
+
+  const flex = literals.flex;
+  if (typeof flex === 'number') style.flex = flex;
+
   return style;
 }