view-contracts 0.4.4 → 0.5.0

package/docs/cli-reference.md

@@ -2,7 +2,7 @@
 
 Contract-first UI design toolchain. Compiles restricted view-contract TSX to language-neutral View IR and renders platform targets (React, SwiftUI, Compose).
 
-**Version:** 0.4.4
+**Version:** 0.5.0
 
 ## Table of Contents
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "view-contracts",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "Contract-first UI design toolchain — restricted TSX to View IR to platform renderers",
   "type": "module",
   "bin": {

package/renderers/compose/README.md

@@ -1,15 +1,14 @@
-# Compose renderer scaffold
+# Compose renderer
 
-**Not implemented yet** beyond theme / screen stubs. View IR lowering and modifier emission are future work.
+Jetpack Compose renderer implemented as a SwiftUI-parity lowering path:
 
-Compose `Modifier` chains are **compositional** (not CSS-style override). view-contracts may later introduce a separate **modifier pipeline** concept (wrapper-style transforms, analogous to nested HTML layout shells) — that is **out of scope for the current phase**. When styling is implemented, defaults + variant + instance props will be **folded at compile time** into resolved values, not chained for cascade-like override. See [docs/ARCHITECTURE.md](../../docs/ARCHITECTURE.md) § Native renderers.
+- Full vocabulary map in `elements.yaml` (schema-backed).
+- Lowering implementation in `lowering/lowerToCompose.ts`.
+- Modifier synthesis in `lowering/modifiers.ts`.
+- Component emitter in `renderComponents.ts`.
+- Runtime emitter (screens, partials, theme, sample JSON, dispatch stub) in `renderRuntime.ts`.
 
 - Maps: `elements.yaml`, `properties.yaml` (hand-maintained under this directory)
 - Routes: `routes.yaml`
 - Templates: `templates/`
 - Theme codegen spec: [../NATIVE_THEME_EMIT.md](../NATIVE_THEME_EMIT.md)
-
-Implement Compose code generation by reading View IR + renderer maps.
-Theme is emitted at build time via `src/design/emit/compose.ts` and `templates/theme/*.hbs` — same Token IR + Theme IR as React `theme.css`, not runtime JSON.
-
-Vocabulary: `spec/ui-dsl.schema.json` (from `ui-dsl-*.csv`).

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Compose element map metadata",
+  "description": "Auxiliary metadata for renderers/compose/elements.yaml validation and docs.",
+  "type": "object",
+  "required": ["elements"],
+  "properties": {
+    "elements": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "properties": {
+          "container": { "type": "string" },
+          "leaf": { "type": "string" },
+          "spacingProp": { "type": "string" }
+        }
+      }
+    }
+  }
+}

package/renderers/compose/elementMap.ts

@@ -0,0 +1,44 @@
+import { resolve } from 'node:path';
+import { ALLOWED_COMPONENTS } from '../../src/schema/dsl-catalog.js';
+import { packageRoot } from '../../src/lib/packageRoot.js';
+import { loadYamlFile, validateVocabularyElementNames } from '../../src/renderer/elementMapValidation.js';
+
+export interface ComposeElementConfig {
+  container?: 'group' | 'vstack' | 'hstack' | 'navstack' | 'scrollview' | 'field' | 'cellgroup' | 'tablestack';
+  leaf?: 'text' | 'button' | 'textfield' | 'texteditor' | 'picker' | 'spacer' | 'divider' | 'image' | 'progressview' | 'toggle';
+  spacingProp?: string;
+}
+
+export interface ComposeElementMap {
+  elements: Record<string, ComposeElementConfig>;
+}
+
+const SOURCE_LABEL = 'renderers/compose/elements.yaml';
+
+let cachedMap: ComposeElementMap | null = null;
+
+function validateComposeElementMap(map: ComposeElementMap): void {
+  validateVocabularyElementNames(Object.keys(map.elements), ALLOWED_COMPONENTS, SOURCE_LABEL);
+  for (const [name, entry] of Object.entries(map.elements)) {
+    const hasContainer = entry.container !== undefined && entry.container !== null;
+    const hasLeaf = entry.leaf !== undefined && entry.leaf !== null;
+    if (hasContainer === hasLeaf) {
+      throw new Error(
+        `${SOURCE_LABEL}: element "${name}" must have exactly one of "container" or "leaf"`,
+      );
+    }
+  }
+}
+
+export async function loadComposeElementMap(customPath?: string): Promise<ComposeElementMap> {
+  if (!customPath && cachedMap) return cachedMap;
+  const mapPath = customPath ?? resolve(packageRoot(), 'renderers/compose/elements.yaml');
+  const raw = await loadYamlFile<ComposeElementMap>(mapPath);
+  validateComposeElementMap(raw);
+  if (!customPath) cachedMap = raw;
+  return raw;
+}
+
+export function isComposeVocabulary(name: string, map: ComposeElementMap, allowlistExtra: string[] = []): boolean {
+  return name in map.elements && !allowlistExtra.includes(name);
+}

package/renderers/compose/elements.yaml

@@ -0,0 +1,82 @@
+# Compose renderer element map — maps DSL elements to Jetpack Compose primitives.
+
+elements:
+  App:
+    container: group
+  Page:
+    container: navstack
+  SafeArea:
+    container: group
+  Box:
+    container: group
+  Row:
+    container: hstack
+    spacingProp: gap
+  Column:
+    container: vstack
+    spacingProp: gap
+  Stack:
+    container: vstack
+    spacingProp: gap
+  Spacer:
+    leaf: spacer
+  Divider:
+    leaf: divider
+  ScrollArea:
+    container: scrollview
+  List:
+    container: vstack
+    spacingProp: gap
+  ListItem:
+    container: group
+  Text:
+    leaf: text
+  Link:
+    leaf: text
+  Image:
+    leaf: image
+  Icon:
+    leaf: image
+  Button:
+    leaf: button
+  IconButton:
+    leaf: button
+  Form:
+    container: vstack
+    spacingProp: gap
+  Field:
+    container: field
+  TextInput:
+    leaf: textfield
+  TextArea:
+    leaf: texteditor
+  Select:
+    leaf: picker
+  Checkbox:
+    leaf: toggle
+  Radio:
+    leaf: picker
+  Switch:
+    leaf: toggle
+  Modal:
+    container: group
+  Drawer:
+    container: group
+  Popover:
+    container: group
+  Tooltip:
+    leaf: text
+  Progress:
+    leaf: progressview
+  Spinner:
+    leaf: progressview
+  Table:
+    container: tablestack
+  TableHeader:
+    container: hstack
+  TableColumn:
+    container: cellgroup
+  TableRow:
+    container: hstack
+  TableCell:
+    container: cellgroup

package/renderers/compose/index.ts

@@ -0,0 +1,5 @@
+export { loadComposeElementMap, isComposeVocabulary } from './elementMap.js';
+export type { ComposeElementConfig, ComposeElementMap } from './elementMap.js';
+export { renderComposeComponent } from './renderComponents.js';
+export { mergeVisualProps } from '../../src/renderer/style/mergeVisualProps.js';
+export { visualPropSetToModifiers } from './lowering/modifiers.js';