view-contracts 0.3.0 → 0.3.3

package/renderers/react/runtime/style.ts

@@ -1,15 +1,16 @@
 import type { CSSProperties } from 'react';
-import type { Align, ContentAlign, FontWeight, Justify } from '../../../src/generated/schema/dsl-enums.js';
-import type { CommonProps } from './types.js';
+import type { LoweredStyleInput } from './types.js';
 
-export function mapAlign(value?: Align): string | undefined {
+/** Map flex alignment shorthand (from lowering) to CSS align-items / align-self values. */
+export function mapAlign(value?: string): 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): string | undefined {
+/** Map flex justification shorthand (from lowering) to CSS justify-content values. */
+export function mapJustify(value?: string): string | undefined {
   if (!value) return undefined;
   if (value === 'start') return 'flex-start';
   if (value === 'end') return 'flex-end';
@@ -23,7 +24,7 @@ function len(value: number): string {
   return `${value}px`;
 }
 
-const CONTENT_ALIGN: Record<ContentAlign, string> = {
+const PLACE_ITEMS: Record<string, string> = {
   topStart: 'start start',
   top: 'center start',
   topEnd: 'end start',
@@ -40,7 +41,7 @@ function fontSizeStyle(size: number | string | undefined): string | undefined {
   return typeof size === 'number' ? len(size) : size;
 }
 
-export function commonStyle(props: CommonProps): CSSProperties {
+export function commonStyle(props: LoweredStyleInput): CSSProperties {
   const style: CSSProperties = {};
   if (typeof props.width === 'number') style.width = len(props.width);
   if (typeof props.minWidth === 'number') style.minWidth = len(props.minWidth);
@@ -51,24 +52,29 @@ export function commonStyle(props: CommonProps): CSSProperties {
   if (props.aspectRatio !== undefined) style.aspectRatio = String(props.aspectRatio);
   if (typeof props.weight === 'number') style.flexGrow = props.weight;
   if (typeof props.padding === 'number') style.padding = len(props.padding);
-  if (typeof (props as { margin?: number }).margin === 'number') style.margin = len((props as { margin: number }).margin);
+  if (typeof props.margin === 'number') style.margin = len(props.margin);
   if (typeof props.gap === 'number') style.gap = len(props.gap);
-  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 as { overflow?: string }).overflow) style.overflow = (props as { overflow: string }).overflow;
-  if (props.selfAlign) style.alignSelf = props.selfAlign === 'start' ? 'flex-start' : props.selfAlign === 'end' ? 'flex-end' : props.selfAlign;
+  if (props.textAlign) {
+    style.textAlign = props.textAlign === 'start' ? 'left' : props.textAlign === 'end' ? 'right' : props.textAlign as CSSProperties['textAlign'];
+  }
+  if (props.contentAlign) style.placeItems = PLACE_ITEMS[props.contentAlign];
+  if (props.overflow) style.overflow = props.overflow as CSSProperties['overflow'];
+  if (props.selfAlign) {
+    style.alignSelf = props.selfAlign === 'start' ? 'flex-start' : props.selfAlign === 'end' ? 'flex-end' : props.selfAlign;
+  }
   const fontSize = fontSizeStyle(props.size);
   if (fontSize) style.fontSize = fontSize;
   const fontWeight = typeof props.weight === 'string' ? props.weight : props.fontWeight;
-  if (fontWeight) style.fontWeight = fontWeight as FontWeight;
+  if (fontWeight) style.fontWeight = fontWeight;
   return style;
 }
 
-export function isHidden(props: CommonProps): boolean {
-  return props.visible === false;
+/** Preview vocabulary helper — lowered production JSX does not use visible. */
+export function isHidden(props: { visible?: boolean; hidden?: boolean }): boolean {
+  return props.hidden === true || props.visible === false;
 }
 
-/** Sample/extension helper — tone is not in ui-dsl.schema.json */
+/** Sample/extension helper for preview tone class names. */
 export function toneClass(tone: string | undefined): string {
   return tone ? `ui-tone-${tone}` : 'ui-tone-default';
 }
@@ -97,5 +103,3 @@ export function extensionClassName(
   if (options?.extra) parts.push(options.extra);
   return parts.filter(Boolean).join(' ');
 }
-
-export type { ContentAlign };

package/renderers/react/runtime/theme.css

@@ -1,22 +1,3 @@
-: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; }
@@ -53,31 +34,32 @@ 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-select, .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:focus, .vc-select:focus, .vc-text-area:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
+.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: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, .vc-select { min-height: 42px; padding: 9px 12px; }
+.vc-field-md, .vc-text-input { min-height: 42px; padding: 9px 12px; }
+.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;
+  -moz-appearance: none;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  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-checkbox { display: inline-flex; align-items: center; gap: 8px; }
 .vc-list { margin: 0; padding-left: 20px; }
 .vc-list-item { margin: 0; padding: 2px 0; }
-
-/* Extension components — structural layout; variant colors from theme.yaml via emitVariantCss */
-.vc-container { width: 100%; max-width: 1180px; margin: 0 auto; }
-.vc-grid { display: grid; }
-.vc-card { border: 1px solid var(--ui-border); }
-.vc-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
-.vc-alert { display: flex; gap: 12px; border: 1px solid var(--ui-border); border-radius: 12px; padding: 14px; }
-.vc-alert--success { border-color: #a7f3d0; }
-.vc-alert--warning { border-color: #fde68a; }
-.vc-alert--danger { border-color: #fecaca; }
-.vc-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 14px; background: #fff; }
-.vc-table { width: 100%; border-collapse: collapse; }
-.vc-table th { background: var(--ui-surface-muted); color: var(--ui-text-muted); font-size: 12px; text-align: left; padding: 12px 14px; }
-.vc-table td { border-top: 1px solid var(--ui-border); padding: 14px; font-size: 14px; }
-.vc-admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
-.vc-admin-sidebar { background: #0f172a; color: #cbd5e1; padding: 24px 18px; }
-.vc-admin-nav-item { padding: 10px 12px; border-radius: 10px; color: #cbd5e1; }
-.vc-admin-nav-item--active { background: rgba(255,255,255,0.1); color: #fff; }
-.vc-admin-content { padding: 32px; }

package/renderers/react/runtime/types.ts

@@ -1,26 +1,4 @@
-import type { ReactNode } from 'react';
-import type { DslProperties } from '../../../src/generated/schema/dsl-properties.js';
-import type { FontWeight, Justify, Shadow, WidthSize } from '../../../src/generated/schema/dsl-enums.js';
-
-export type {
-  Align,
-  Axis,
-  Border,
-  Clip,
-  ContentAlign,
-  Direction,
-  FontWeight,
-  HeightSize,
-  ImageFit,
-  Justify,
-  KeyboardType,
-  LineLimit,
-  TextAlign,
-  TextOverflow,
-  WidthSize,
-} from '../../../src/generated/schema/dsl-enums.js';
-
-export type { DslProperties };
+/** Runtime types for lowered React output and project extensions — no DSL schema imports. */
 
 export interface ViewAction {
   name: string;
@@ -29,35 +7,34 @@ export interface ViewAction {
 
 export type DispatchableAction = ViewAction;
 
-/** view-contracts view TSX action binding (schema property: onClick / onChange). */
+/** Action binding from lowered views or hand-written extensions. */
 export type Action = ViewAction;
 
 /**
- * Preview + sample extension props layered on the DSL catalog.
- * Widens a few catalog types so sample views can use pragmatic literals (e.g. radius={16}, justify="between").
+ * Style props passed to commonStyle() by the React lowering pass.
+ * Numeric dimensions are logical units; commonStyle maps them to px.
  */
-export interface CommonProps extends Omit<DslProperties, 'justify' | 'radius' | 'shadow' | 'width' | 'weight' | 'fontWeight'> {
-  children?: ReactNode;
-  /** View-layer alias for onClick in interactive components. */
-  action?: ViewAction;
-  justify?: Justify | 'between' | 'around';
-  radius?: string | number;
-  shadow?: Shadow | boolean;
-  width?: WidthSize | number;
-  /** Flex grow (number) or sample font weight alias (string) on Text. */
+export interface LoweredStyleInput {
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+  height?: number | string;
+  minHeight?: number | string;
+  maxHeight?: number | string;
+  aspectRatio?: number | string;
   weight?: number | string;
-  fontWeight?: FontWeight | string;
-  /** Sample/preview extension props (not in ui-dsl.schema.json). */
-  tone?: string;
+  padding?: number | string;
+  margin?: number;
+  gap?: number | string;
+  textAlign?: string;
+  contentAlign?: string;
+  selfAlign?: string;
+  overflow?: string;
   size?: number | string;
-  ariaLabel?: string;
-  testId?: string;
+  fontWeight?: string;
 }
 
 export interface Option {
   label: string;
   value: string;
 }
-
-/** Preview-only field density (not in ui-dsl.schema.json). */
-export type FieldSize = 'sm' | 'md' | 'lg';

package/renderers/react/syncGeneratedRuntime.ts

@@ -0,0 +1,77 @@
+import { readFile, writeFile, mkdir, stat, rm } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import type { ViewContractsConfig } from '../../src/config.js';
+import { projectRoot } from '../../src/config.js';
+import { renderTemplate } from '../../src/renderer/template.js';
+import { reactRuntimeDir, reactTemplatesDir } from './paths.js';
+
+async function pathExists(target: string): Promise<boolean> {
+  try {
+    await stat(target);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function removeStaleSchemaDir(componentsDir: string): Promise<void> {
+  const schemaDest = resolve(componentsDir, 'schema');
+  if (await pathExists(schemaDest)) {
+    await rm(schemaDest, { recursive: true, force: true });
+  }
+}
+
+async function copyStyleBundle(componentsDir: string): Promise<void> {
+  const runtimeSrc = reactRuntimeDir();
+  await writeFile(resolve(componentsDir, 'style.ts'), await readFile(resolve(runtimeSrc, 'style.ts'), 'utf-8'), 'utf-8');
+  await writeFile(resolve(componentsDir, 'types.ts'), await readFile(resolve(runtimeSrc, 'types.ts'), 'utf-8'), 'utf-8');
+}
+
+/** Copy package runtime (style, types, dispatch) into generated/ — standalone output, no renderers/ imports. */
+export async function syncGeneratedRuntime(
+  configPath: string,
+  config: ViewContractsConfig,
+  templatesDir?: string,
+): Promise<{ componentsDir: string; runtimeDir: string }> {
+  const root = projectRoot(configPath);
+  const templates = reactTemplatesDir(templatesDir ?? (config.rendererTemplatesDir ? resolve(root, config.rendererTemplatesDir) : undefined));
+  const componentsDir = resolve(config.generated.reactDir, '../components');
+  const runtimeDir = resolve(config.generated.reactDir, '../runtime');
+
+  await mkdir(componentsDir, { recursive: true });
+  await mkdir(runtimeDir, { recursive: true });
+
+  await removeStaleSchemaDir(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',
+  );
+  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',
+  );
+
+  return { componentsDir, runtimeDir };
+}
+
+/** Rewrite preview virtual imports to generated/components-relative paths. */
+export function rewriteExtensionImportsForGenerated(body: string): string {
+  return body
+    .replace(/from 'view-contracts:runtime\/dispatch'/g, "from '../runtime/dispatch.js'")
+    .replace(/from "view-contracts:runtime\/dispatch"/g, 'from "../runtime/dispatch.js"')
+    .replace(/from 'view-contracts:runtime\/types'/g, "from './types.js'")
+    .replace(/from "view-contracts:runtime\/types"/g, 'from "./types.js"');
+}

package/renderers/react/templates/components-index.ts.hbs

@@ -2,4 +2,4 @@
 export * from './extensions.js';
 export type { TableColumn } from './extensions.js';
 export { commonStyle, mapAlign, mapJustify, isHidden, toneClass } from './style.js';
-export type { Action, CommonProps, Option } from './types.js';
+export type { Action, Option, LoweredStyleInput } from './types.js';

package/spec/ui-dsl-extensions.meta.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://view-contracts.dev/spec/ui-dsl-extensions.meta.json",
+  "title": "View Contracts UI DSL Extensions Registry",
+  "type": "object",
+  "required": ["extensions"],
+  "additionalProperties": false,
+  "properties": {
+    "extensions": {
+      "type": "object",
+      "minProperties": 1,
+      "additionalProperties": {
+        "type": "object",
+        "required": ["description", "children", "renderer", "properties"],
+        "additionalProperties": false,
+        "properties": {
+          "description": { "type": "string", "minLength": 1 },
+          "children": {
+            "type": "string",
+            "enum": ["none", "any"]
+          },
+          "renderer": {
+            "type": "string",
+            "enum": ["react-only", "all"]
+          },
+          "properties": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "object",
+              "required": ["type", "category"],
+              "additionalProperties": false,
+              "properties": {
+                "type": {
+                  "type": "string",
+                  "enum": ["string", "number", "boolean", "binding", "array", "object"]
+                },
+                "category": {
+                  "type": "string",
+                  "enum": [
+                    "identity",
+                    "state",
+                    "size",
+                    "spacing",
+                    "alignment",
+                    "direction",
+                    "overflow",
+                    "visual",
+                    "text",
+                    "image",
+                    "interaction",
+                    "data",
+                    "validation"
+                  ]
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.2 — DO NOT EDIT */
 export const ALLOWED_COMPONENTS = new Set([
   'App',
   'Box',

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

@@ -1,4 +1,4 @@
-/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.2 — DO NOT EDIT */
 export type Role = "button" | "link" | "heading" | "list" | "listitem" | "main" | "dialog" | "status";
 export type WidthSize = "wrap" | "fill";
 export type HeightSize = "wrap" | "fill";

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

@@ -1,4 +1,4 @@
-/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.2 — 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 './dsl-enums.js';
 

package/src/generated/schema/index.ts

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

package/src/generated/schema/lowering-style-properties.ts

@@ -1,4 +1,4 @@
-/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.2 — DO NOT EDIT */
 /** Property names passed to commonStyle() during React HTML lowering (x-category from DSL + sample extensions). */
 export const LOWERING_STYLE_PROPERTIES = new Set<string>([
   "align",

package/src/generated/schema/react-renderer-element-config.ts

@@ -1,4 +1,4 @@
-/** Auto-generated from renderers/react/element-config.meta.json — view-contracts v0.3.0 — DO NOT EDIT */
+/** Auto-generated from renderers/react/element-config.meta.json — view-contracts v0.3.2 — DO NOT EDIT */
 /** Shape of entries in renderers/react/elements.yaml (target-specific HTML map, not DSL vocabulary). */
 export interface ReactRendererElementConfig {
   tag: string;
@@ -17,6 +17,8 @@ export interface ReactRendererElementConfig {
   sizeClass?: string;
   optionsProp?: string;
   checkbox?: boolean;
+  fieldContainer?: boolean;
+  scrollContainer?: boolean;
   defaultRole?: string;
 }
 

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

@@ -1,4 +1,4 @@
-/** Auto-generated from spec/ui-dsl.meta.json + ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
+/** Auto-generated from spec/ui-dsl.meta.json + ui-dsl.schema.json — view-contracts v0.3.2 — DO NOT EDIT */
 import type { Role, WidthSize, HeightSize, Align, Justify, ContentAlign, Axis, Direction, Scroll, Border, Shadow, TextAlign, LineLimit, TextOverflow, FontWeight, ImageFit, KeyboardType, Clip } from './dsl-enums.js';
 
 export type PropertyType = 'string' | 'number' | 'boolean' | 'array' | 'action' | 'object' | 'null' | string | string[];