view-contracts 0.1.0

package/src/generated/schema/allowed-components.ts

@@ -0,0 +1,36 @@
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
+export const ALLOWED_COMPONENTS = new Set([
+  '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',
+  'Text',
+  'TextArea',
+  'TextInput',
+  'Tooltip',
+]);

package/src/generated/schema/dsl-properties.ts

@@ -0,0 +1,63 @@
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
+export interface ViewAction { name: string; params?: Record<string, unknown> }
+import type { Role, WidthSize, HeightSize, Align, Justify, ContentAlign, Axis, Direction, Scroll, Border, Shadow, TextAlign, LineLimit, TextOverflow, FontWeight, ImageFit, KeyboardType, Clip } from './tokens.js';
+
+/** Shared DSL attributes from $defs.properties / properties catalog */
+export interface DslProperties {
+  id?: string;
+  role?: Role;
+  label?: string;
+  visible?: boolean;
+  enabled?: boolean;
+  selected?: boolean;
+  checked?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  width?: WidthSize;
+  height?: HeightSize;
+  minWidth?: number;
+  maxWidth?: string | number;
+  minHeight?: number;
+  maxHeight?: string | number;
+  aspectRatio?: number;
+  weight?: number;
+  padding?: string | number;
+  gap?: string | number;
+  align?: Align;
+  justify?: Justify;
+  selfAlign?: Align;
+  contentAlign?: ContentAlign;
+  axis?: Axis;
+  direction?: Direction;
+  scroll?: Scroll;
+  background?: string;
+  foreground?: string;
+  border?: Border;
+  radius?: string;
+  shadow?: Shadow;
+  opacity?: number;
+  clip?: Clip;
+  textStyle?: string;
+  textAlign?: TextAlign;
+  lineLimit?: LineLimit;
+  textOverflow?: TextOverflow;
+  fontWeight?: FontWeight;
+  headingLevel?: number;
+  fit?: ImageFit;
+  src?: string;
+  alt?: string;
+  name?: string;
+  onClick?: ViewAction;
+  onSubmit?: ViewAction;
+  onChange?: ViewAction;
+  focusable?: boolean;
+  autoFocus?: boolean;
+  keyboardType?: KeyboardType;
+  value?: string | number | boolean;
+  binding?: string;
+  placeholder?: string;
+  options?: unknown[];
+  error?: string | null;
+  help?: string | null;
+  variant?: string;
+}

package/src/generated/schema/index.ts

@@ -0,0 +1,4 @@
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
+export * from './tokens.js';
+export * from './dsl-properties.js';
+export * from './schema-document.js';

package/src/generated/schema/schema-document.ts

@@ -0,0 +1,33 @@
+/** Auto-generated from spec/ui-dsl.meta.json + ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
+import type { Role, WidthSize, HeightSize, Align, Justify, ContentAlign, Axis, Direction, Scroll, Border, Shadow, TextAlign, LineLimit, TextOverflow, FontWeight, ImageFit, KeyboardType, Clip } from './tokens.js';
+
+export type PropertyType = 'string' | 'number' | 'boolean' | 'array' | 'action' | 'object' | 'null' | string | string[];
+
+export interface PropertyDef {
+  type: PropertyType;
+  enum?: string;
+  description?: string;
+  'x-category': string;
+  'x-appliesTo'?: string[];
+  'x-notes'?: string;
+  $ref?: string;
+}
+
+export interface ChildrenConstraint {
+  'x-kind': 'any' | 'none' | 'single' | 'text' | 'list';
+  'x-items'?: string[];
+}
+
+export interface ElementDef {
+  description: string;
+  'x-category': string;
+  'x-notes'?: string;
+  properties: Record<string, PropertyDef | { $ref: string }>;
+  _children: ChildrenConstraint;
+}
+
+export interface UiDslSchema {
+  tokens: Record<string, string[]>;
+  properties: Record<string, PropertyDef>;
+  elements: Record<string, ElementDef>;
+}

package/src/generated/schema/tokens.ts

@@ -0,0 +1,19 @@
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
+export type Role = "button" | "link" | "heading" | "list" | "listitem" | "main" | "dialog" | "status";
+export type WidthSize = "wrap" | "fill";
+export type HeightSize = "wrap" | "fill";
+export type Align = "start" | "center" | "end" | "stretch";
+export type Justify = "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
+export type ContentAlign = "topStart" | "top" | "topEnd" | "start" | "center" | "end" | "bottomStart" | "bottom" | "bottomEnd";
+export type Axis = "vertical" | "horizontal";
+export type Direction = "ltr" | "rtl" | "system";
+export type Scroll = "none" | "vertical" | "horizontal" | "both";
+export type Border = "none";
+export type Shadow = "none" | "sm" | "md" | "lg";
+export type TextAlign = "start" | "center" | "end";
+export type LineLimit = "none";
+export type TextOverflow = "clip" | "ellipsis";
+export type FontWeight = "regular" | "medium" | "bold";
+export type ImageFit = "contain" | "cover" | "fill" | "none";
+export type KeyboardType = "text" | "number" | "email" | "url" | "password" | "tel";
+export type Clip = "none" | "bounds" | "shape";

package/src/renderer/react/runtime/actionRuntime.ts

@@ -0,0 +1,26 @@
+import type { ViewAction } from '@view-contracts/core';
+import { dispatchAction } from '@view-contracts/runtime';
+
+const globalHandlers: Record<string, (params?: unknown) => void | Promise<void>> = {};
+
+export function registerPreviewActions(
+  handlers: Record<string, (params?: unknown) => void | Promise<void>>,
+): void {
+  Object.assign(globalHandlers, handlers);
+}
+
+export function clearPreviewActions(): void {
+  for (const key of Object.keys(globalHandlers)) {
+    delete globalHandlers[key];
+  }
+}
+
+export async function dispatchPreviewAction(action?: ViewAction): Promise<void> {
+  if (!action) return;
+  const handler = globalHandlers[action.name];
+  if (handler) {
+    await handler(action.params);
+    return;
+  }
+  await dispatchAction(action);
+}

package/src/renderer/react/runtime/components.tsx

@@ -0,0 +1,216 @@
+import type { ElementType, FormEvent, ReactElement, ReactNode } from 'react';
+import { dispatchPreviewAction } from './actionRuntime.js';
+import { commonStyle, isHidden, toneClass } from './style.js';
+import type { Action, Align, CommonProps, FieldSize, Justify, Option } from './types.js';
+
+function cx(...names: Array<string | false | undefined>): string {
+  return names.filter(Boolean).join(' ');
+}
+
+function mapAlign(value?: Align): string | undefined {
+  if (!value) return undefined;
+  if (value === 'start') return 'flex-start';
+  if (value === 'end') return 'flex-end';
+  return value;
+}
+
+function mapJustify(value?: Justify): string | undefined {
+  if (!value) return undefined;
+  if (value === 'start') return 'flex-start';
+  if (value === 'end') return 'flex-end';
+  if (value === 'between') return 'space-between';
+  if (value === 'around') return 'space-around';
+  if (value === 'spaceBetween') return 'space-between';
+  if (value === 'spaceAround') return 'space-around';
+  if (value === 'spaceEvenly') return 'space-evenly';
+  return value;
+}
+
+function runAction(action?: Action): void {
+  void dispatchPreviewAction(action);
+}
+
+export function Page(props: CommonProps & { title?: string }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <main id={props.id} role={props.role} aria-label={props.ariaLabel ?? props.label} className="ui-page" style={commonStyle(props)}>
+      {props.children}
+    </main>
+  );
+}
+
+export function Box(props: CommonProps): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <div id={props.id} role={props.role} aria-label={props.ariaLabel ?? props.label} className="ui-box" style={commonStyle(props)}>
+      {props.children}
+    </div>
+  );
+}
+
+export function Column(props: CommonProps & { align?: Align; justify?: Justify }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <div
+      id={props.id}
+      role={props.role}
+      aria-label={props.ariaLabel ?? props.label}
+      className="ui-column"
+      style={{ ...commonStyle(props), display: 'flex', flexDirection: 'column', alignItems: mapAlign(props.align), justifyContent: mapJustify(props.justify) }}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export function Stack(props: CommonProps & { contentAlign?: CommonProps['contentAlign'] }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <div id={props.id} role={props.role} aria-label={props.ariaLabel ?? props.label} className="ui-stack" style={commonStyle(props)}>
+      {props.children}
+    </div>
+  );
+}
+
+export function Row(props: CommonProps & { align?: Align; justify?: Justify; wrap?: boolean }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <div
+      id={props.id}
+      role={props.role}
+      aria-label={props.ariaLabel ?? props.label}
+      className={cx('ui-row', props.wrap && 'ui-wrap')}
+      style={{ ...commonStyle(props), display: 'flex', flexDirection: 'row', alignItems: mapAlign(props.align), justifyContent: mapJustify(props.justify) }}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export function Spacer(props: CommonProps): ReactElement {
+  return <div aria-hidden className="ui-spacer" style={{ ...commonStyle(props), flexGrow: props.weight ?? 1 }} />;
+}
+
+export function Divider(props: CommonProps): ReactElement | null {
+  if (isHidden(props)) return null;
+  return <hr className="ui-divider" style={commonStyle(props)} />;
+}
+
+export function Heading(props: CommonProps & { level?: 1 | 2 | 3 | 4 | 5 | 6; children: ReactNode }): ReactElement | null {
+  if (isHidden(props)) return null;
+  const level = Math.min(6, Math.max(1, props.level ?? 2)) as 1 | 2 | 3 | 4 | 5 | 6;
+  const Tag = `h${level}` as ElementType;
+  return (
+    <Tag className={cx('ui-heading', `ui-heading-${level}`)} style={commonStyle(props)}>
+      {props.children}
+    </Tag>
+  );
+}
+
+export function Text(props: CommonProps & { children: ReactNode }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <p className="ui-text" style={commonStyle(props)}>
+      {props.children}
+    </p>
+  );
+}
+
+export function Link(props: CommonProps & { href?: string; onClick?: Action; children: ReactNode }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <a className="ui-link" style={commonStyle(props)} href={props.href} onClick={() => runAction(props.action ?? props.onClick)}>
+      {props.children}
+    </a>
+  );
+}
+
+export function Button(props: CommonProps & { type?: 'button' | 'submit'; children: ReactNode }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <button
+      id={props.id}
+      aria-label={props.ariaLabel ?? props.label}
+      className={cx('ui-button', `ui-button-${props.variant ?? 'secondary'}`)}
+      style={commonStyle(props)}
+      type={props.type ?? 'button'}
+      disabled={props.enabled === false}
+      onClick={() => runAction(props.action)}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+export function Form(props: CommonProps & { action?: Action; children: ReactNode }): ReactElement | null {
+  if (isHidden(props)) return null;
+  function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    runAction(props.action);
+  }
+  return (
+    <form id={props.id} aria-label={props.ariaLabel ?? props.label} className="ui-form" style={commonStyle(props)} onSubmit={onSubmit}>
+      {props.children}
+    </form>
+  );
+}
+
+function FieldFrame(props: { label?: string; help?: string; error?: string; children: ReactNode }): ReactElement {
+  return (
+    <label className="ui-field">
+      {props.label ? <span className="ui-field-label">{props.label}</span> : null}
+      {props.children}
+      {props.help ? <span className="ui-field-help">{props.help}</span> : null}
+      {props.error ? <span className="ui-field-error">{props.error}</span> : null}
+    </label>
+  );
+}
+
+export function TextInput(props: CommonProps & { name: string; label?: string; placeholder?: string; type?: string; required?: boolean; size?: FieldSize }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <FieldFrame label={props.label}>
+      <input className={cx('ui-input', `ui-field-${props.size ?? 'md'}`)} style={commonStyle(props)} name={props.name} placeholder={props.placeholder} type={props.type ?? 'text'} required={props.required} readOnly={props.readonly} disabled={props.enabled === false} />
+    </FieldFrame>
+  );
+}
+
+export function Select(props: CommonProps & { name: string; label?: string; options: Option[]; size?: FieldSize }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <FieldFrame label={props.label} help={props.help} error={props.error}>
+      <select className={cx('ui-select', `ui-field-${props.size ?? 'md'}`)} style={commonStyle(props)} name={props.name} disabled={props.enabled === false}>
+        {props.options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+      </select>
+    </FieldFrame>
+  );
+}
+
+export function TextArea(props: CommonProps & { name: string; label?: string; placeholder?: string; rows?: number }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <FieldFrame label={props.label} help={props.help} error={props.error}>
+      <textarea className="ui-textarea" style={commonStyle(props)} name={props.name} placeholder={props.placeholder} rows={props.rows ?? 4} readOnly={props.readonly} disabled={props.enabled === false} />
+    </FieldFrame>
+  );
+}
+
+export function Checkbox(props: CommonProps & { name: string; label: string }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return (
+    <label className="ui-check">
+      <input type="checkbox" name={props.name} defaultChecked={props.checked} disabled={props.enabled === false} />
+      <span>{props.label}</span>
+    </label>
+  );
+}
+
+export function List(props: CommonProps & { children: ReactNode }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return <ul role={props.role ?? 'list'} className="ui-list" style={commonStyle(props)}>{props.children}</ul>;
+}
+
+export function ListItem(props: CommonProps & { children: ReactNode }): ReactElement | null {
+  if (isHidden(props)) return null;
+  return <li role={props.role ?? 'listitem'} className="ui-list-item" style={commonStyle(props)}>{props.children}</li>;
+}

package/src/renderer/react/runtime/index.ts

@@ -0,0 +1,4 @@
+export * from './components.js';
+export * from './types.js';
+export { commonStyle, isHidden, toneClass } from './style.js';
+export { registerPreviewActions, clearPreviewActions, dispatchPreviewAction } from './actionRuntime.js';

package/src/renderer/react/runtime/shared.tsx

@@ -0,0 +1,53 @@
+import type { FormEvent, ReactElement, ReactNode } from 'react';
+import { dispatchPreviewAction } from './actionRuntime.js';
+import { commonStyle, isHidden, toneClass } from './style.js';
+import type { Action, Align, CommonProps, Justify } from './types.js';
+
+export function cx(...names: Array<string | false | undefined>): string {
+  return names.filter(Boolean).join(' ');
+}
+
+export function mapAlign(value?: Align): string | undefined {
+  if (!value) return undefined;
+  if (value === 'start') return 'flex-start';
+  if (value === 'end') return 'flex-end';
+  return value;
+}
+
+export function mapJustify(value?: Justify): string | undefined {
+  if (!value) return undefined;
+  if (value === 'start') return 'flex-start';
+  if (value === 'end') return 'flex-end';
+  if (value === 'between' || value === 'spaceBetween') return 'space-between';
+  if (value === 'around' || value === 'spaceAround') return 'space-around';
+  if (value === 'spaceEvenly') return 'space-evenly';
+  return value;
+}
+
+export function runAction(action?: Action): void {
+  void dispatchPreviewAction(action);
+}
+
+export function shellProps(props: CommonProps): Pick<CommonProps, 'id' | 'testId' | 'ariaLabel' | 'role'> {
+  return { id: props.id, testId: props.testId, ariaLabel: props.ariaLabel ?? props.label, role: props.role };
+}
+
+export function FieldFrame(props: { label?: string; help?: string; error?: string; children: ReactNode }): ReactElement {
+  return (
+    <div className="ui-field">
+      {props.label ? <span className="ui-field-label">{props.label}</span> : null}
+      {props.children}
+      {props.error ? <span className="ui-field-error">{props.error}</span> : null}
+      {!props.error && props.help ? <span className="ui-field-help">{props.help}</span> : null}
+    </div>
+  );
+}
+
+export function onFormSubmit(action?: Action) {
+  return (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    runAction(action);
+  };
+}
+
+export { commonStyle, isHidden, toneClass };

package/src/renderer/react/runtime/style.ts

@@ -0,0 +1,69 @@
+import type { CSSProperties } from 'react';
+import type { Clip, ContentAlign, Shadow } from '../../../generated/schema/tokens.js';
+import type { DslProperties } from '../../../generated/schema/dsl-properties.js';
+
+function len(value: number): string {
+  return `${value}px`;
+}
+
+const SHADOW: Record<Exclude<Shadow, 'none'>, string> = {
+  sm: '0 1px 3px rgba(15,23,42,0.08)',
+  md: '0 10px 30px rgba(15, 23, 42, 0.08)',
+  lg: '0 20px 40px rgba(15, 23, 42, 0.12)',
+};
+
+const CONTENT_ALIGN: Record<ContentAlign, string> = {
+  topStart: 'start start',
+  top: 'center start',
+  topEnd: 'end start',
+  start: 'start center',
+  center: 'center center',
+  end: 'end center',
+  bottomStart: 'start end',
+  bottom: 'center end',
+  bottomEnd: 'end end',
+};
+
+function shadowStyle(shadow: Shadow | undefined): string | undefined {
+  if (!shadow || shadow === 'none') return undefined;
+  return SHADOW[shadow];
+}
+
+export function commonStyle(props: DslProperties): CSSProperties {
+  const style: CSSProperties = {};
+  if (typeof props.width === 'number') style.width = len(props.width);
+  if (typeof props.minWidth === 'number') style.minWidth = len(props.minWidth);
+  if (typeof props.maxWidth === 'number') style.maxWidth = len(props.maxWidth);
+  if (typeof props.height === 'number') style.height = len(props.height);
+  if (typeof props.minHeight === 'number') style.minHeight = len(props.minHeight);
+  if (typeof props.maxHeight === 'number') style.maxHeight = len(props.maxHeight);
+  if (props.aspectRatio !== undefined) style.aspectRatio = String(props.aspectRatio);
+  if (props.weight !== undefined) style.flexGrow = props.weight;
+  if (typeof props.padding === 'number') style.padding = len(props.padding);
+  if (typeof props.margin === 'number') style.margin = len(props.margin);
+  if (typeof props.gap === 'number') style.gap = len(props.gap);
+  if (typeof props.radius === 'number') style.borderRadius = len(props.radius);
+  if (props.border) style.border = '1px solid var(--ui-border)';
+  const shadow = shadowStyle(props.shadow);
+  if (shadow) style.boxShadow = shadow;
+  if (props.opacity !== undefined) style.opacity = props.opacity;
+  if (props.clip && props.clip !== 'none') style.overflow = 'hidden';
+  if (props.background) style.background = `var(--ui-${props.background}, ${props.background})`;
+  if (props.foreground) style.color = `var(--ui-${props.foreground}, ${props.foreground})`;
+  if (props.textAlign) style.textAlign = props.textAlign === 'start' ? 'left' : props.textAlign === 'end' ? 'right' : 'center';
+  if (props.contentAlign) style.placeItems = CONTENT_ALIGN[props.contentAlign];
+  if (props.overflow) style.overflow = props.overflow;
+  if (props.selfAlign) style.alignSelf = props.selfAlign === 'start' ? 'flex-start' : props.selfAlign === 'end' ? 'flex-end' : props.selfAlign;
+  return style;
+}
+
+export function isHidden(props: DslProperties): boolean {
+  return props.visible === false;
+}
+
+/** Sample/extension helper — tone is not in ui-dsl.schema.json */
+export function toneClass(tone: string | undefined): string {
+  return tone ? `ui-tone-${tone}` : 'ui-tone-default';
+}
+
+export type { Clip, ContentAlign, Shadow };

package/src/renderer/react/runtime/theme.css

@@ -0,0 +1,68 @@
+:root {
+  --ui-bg: #f6f8fb;
+  --ui-surface: #ffffff;
+  --ui-surface-muted: #f8fafc;
+  --ui-text: #111827;
+  --ui-text-muted: #6b7280;
+  --ui-primary: #2563eb;
+  --ui-primary-weak: #dbeafe;
+  --ui-success: #047857;
+  --ui-success-weak: #d1fae5;
+  --ui-warning: #b45309;
+  --ui-warning-weak: #fef3c7;
+  --ui-danger: #dc2626;
+  --ui-danger-weak: #fee2e2;
+  --ui-border: #e5e7eb;
+  --ui-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); }
+button, input, textarea, select { font: inherit; }
+
+.ui-page { min-height: 100vh; }
+.ui-box { display: block; }
+.ui-column { display: flex; flex-direction: column; }
+.ui-stack { display: flex; flex-direction: column; }
+.ui-row { display: flex; flex-direction: row; }
+.ui-wrap { flex-wrap: wrap; }
+.ui-spacer { min-width: 0; min-height: 0; }
+.ui-divider { border: 0; border-top: 1px solid var(--ui-border); width: 100%; }
+
+.ui-heading { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
+.ui-heading-1 { font-size: 32px; }
+.ui-heading-2 { font-size: 22px; }
+.ui-heading-3 { font-size: 18px; }
+.ui-heading-4 { font-size: 15px; }
+.ui-text { margin: 0; line-height: 1.6; }
+.ui-link { color: var(--ui-primary); text-decoration: none; }
+.ui-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); }
+
+.ui-button { border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
+.ui-button-primary { background: var(--ui-primary); color: #fff; }
+.ui-button-secondary { background: #eef2f7; color: var(--ui-text); }
+.ui-button-ghost { background: transparent; color: var(--ui-text); }
+.ui-button-danger { background: var(--ui-danger); color: #fff; }
+
+.ui-form { display: flex; flex-direction: column; }
+.ui-field { display: flex; flex-direction: column; gap: 6px; }
+.ui-field-label { font-size: 13px; font-weight: 700; color: var(--ui-text); }
+.ui-field-help { font-size: 12px; color: var(--ui-text-muted); }
+.ui-field-error { font-size: 12px; color: var(--ui-danger); }
+.ui-input, .ui-select, .ui-textarea { width: 100%; border: 1px solid var(--ui-border); border-radius: 10px; background: #fff; color: var(--ui-text); outline: none; }
+.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
+.ui-field-sm { min-height: 34px; padding: 6px 10px; }
+.ui-field-md, .ui-input, .ui-select { min-height: 42px; padding: 9px 12px; }
+.ui-field-lg { min-height: 50px; padding: 12px 14px; }
+.ui-textarea { padding: 10px 12px; resize: vertical; }
+.ui-check { display: inline-flex; align-items: center; gap: 8px; }
+.ui-list { margin: 0; padding-left: 20px; }
+.ui-list-item { margin: 0; padding: 2px 0; }

package/src/renderer/react/runtime/types.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import type { ViewAction } from '@view-contracts/core';
+import type { DslProperties } from '../../../generated/schema/dsl-properties.js';
+
+export type {
+  Align,
+  Axis,
+  Border,
+  Breakpoint,
+  Clip,
+  ContentAlign,
+  Direction,
+  FontWeight,
+  HeightSize,
+  ImageFit,
+  Justify,
+  KeyboardType,
+  LineLimit,
+  Overflow,
+  Role,
+  Scroll,
+  Shadow,
+  TextAlign,
+  TextOverflow,
+  WidthSize,
+} from '../../../generated/schema/tokens.js';
+
+export type { DslProperties };
+
+/** view-contracts view TSX action binding (schema property: onClick / onChange). */
+export type Action = ViewAction;
+
+/** React preview props: schema catalog + JSX children + view action alias. */
+export interface CommonProps extends DslProperties {
+  children?: ReactNode;
+  /** View-layer alias for onClick in interactive components. */
+  action?: ViewAction;
+}
+
+export interface Option {
+  label: string;
+  value: string;
+}
+
+/** Preview-only field density (not in ui-dsl.schema.json). */
+export type FieldSize = 'sm' | 'md' | 'lg';