view-contracts 0.3.4 → 0.4.0

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/renderComponents.ts

@@ -1,6 +1,12 @@
 import type { ViewIrDocument } from '../../src/ir/types.js';
+import { resolve } from 'node:path';
 import { loadReactElementMap } from './elementMap.js';
-import { collectExtensionComponents, createNodeRenderer } from './lowering/lowerToJsx.js';
+import {
+  collectExtensionComponents,
+  collectViewRefComponents,
+  createNodeRenderer,
+} from './lowering/lowerToJsx.js';
+import type { IrComponentNode, IrNode } from '../../src/ir/types.js';
 
 export interface PreviewImportSpecifiers {
   dispatch: string;
@@ -16,22 +22,65 @@ export interface RenderReactOptions {
   allowlistExtra?: string[];
   elementMapPath?: string;
   previewImports?: PreviewImportSpecifiers;
+  /** When set, viewRef nodes import from these paths instead of sibling .generated.js files. */
+  viewRefImportFrom?: Map<string, string>;
+  /** When true, omit viewRef import lines (partials defined in the same module). */
+  inlineViewRefs?: boolean;
   /** @deprecated Use runtimeImportFrom */
   componentsImportFrom?: string;
 }
 
-export async function renderReactComponent(
+function componentExportName(doc: ViewIrDocument): string {
+  if (doc.isPartial) return doc.exportName;
+  const baseName = doc.exportName.replace(/View$/, '') || doc.exportName;
+  return baseName.charAt(0).toUpperCase() + baseName.slice(1);
+}
+
+function requireComponentRoot(root: IrNode, source: string): IrComponentNode {
+  if (root.kind !== 'component') {
+    throw new Error(`View IR root must be a component node (${source})`);
+  }
+  return root;
+}
+
+function extractContractTypeNames(propsType: string | undefined): string[] {
+  if (!propsType) return [];
+  const matches = propsType.match(/\b[A-Z][A-Za-z0-9]*ViewModel\b/g);
+  return matches ? [...new Set(matches)] : [];
+}
+
+function partialFunctionParams(doc: ViewIrDocument): string {
+  if (!doc.propsType) return '';
+  const match = doc.propsType.match(/^\{\s*([^}]+)\s*\}$/);
+  if (!match) return `props: ${doc.propsType}`;
+  const inner = match[1].trim();
+  const propNames = inner.split(',').map((part) => part.split(':')[0]!.trim());
+  return `{ ${propNames.join(', ')} }: ${doc.propsType}`;
+}
+
+/** Root-level `{cond ? ...}` from visibilityGuard is invalid inside `return (...)` — wrap in fragment. */
+function formatComponentReturn(body: string): string {
+  const trimmed = body.trimStart();
+  if (trimmed.startsWith('{')) {
+    return `return (\n    <>${body}\n    </>\n  );`;
+  }
+  return `return (\n${body}\n  );`;
+}
+
+function stripModulePreamble(source: string): string {
+  let rest = source.replace(/^\/\*\*[\s\S]*?\*\/\s*/, '');
+  rest = rest.replace(/^import\s[^\n]+\n/gm, '');
+  return rest.trimStart();
+}
+
+async function buildRenderedModule(
   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 componentName = componentExportName(doc);
+  const root = requireComponentRoot(doc.root, doc.source);
 
   const renderNode = createNodeRenderer(map, allowlistExtra);
   const body = renderNode(root, 2);
@@ -40,34 +89,76 @@ export async function renderReactComponent(
   collectExtensionComponents(doc.root, map, allowlistExtra, extensions);
   const extensionImports = [...extensions].sort();
 
+  const viewRefs = new Set<string>();
+  collectViewRefComponents(doc.root, viewRefs);
+  const viewRefImports = [...viewRefs].sort();
+
   const preview = options.previewImports;
   const runtimeModule = preview?.dispatch ?? options.runtimeImportFrom;
   const contractsModule = preview?.contracts ?? options.contractsImportFrom;
   const extensionsModule = preview?.extensions ?? options.extensionsImportFrom;
 
-  const imports: string[] = [`import type { ReactElement } from 'react';`];
+  const contractTypes = new Set<string>();
+  if (doc.isPartial) {
+    for (const typeName of extractContractTypeNames(doc.propsType)) {
+      contractTypes.add(typeName);
+    }
+  } else {
+    contractTypes.add(doc.viewModel);
+  }
 
+  const imports: string[] = [`import type { ReactElement } from 'react';`];
   imports.push(`import { dispatchAction } from '${runtimeModule}';`);
-  imports.push(`import type { ${doc.viewModel}, ActionDescriptor } from '${contractsModule}';`);
+
+  const typeImports = [...contractTypes].sort();
+  const typeImportList = typeImports.length > 0
+    ? `${typeImports.join(', ')}, ActionDescriptor`
+    : 'ActionDescriptor';
+  imports.push(`import type { ${typeImportList} } from '${contractsModule}';`);
+
   if (extensionImports.length > 0) {
     imports.push(`import { ${extensionImports.join(', ')} } from '${extensionsModule}';`);
   }
 
+  for (const refName of viewRefImports) {
+    if (options.inlineViewRefs) continue;
+    const importFrom = options.viewRefImportFrom?.get(refName)
+      ?? `./${refName}.generated.js`;
+    imports.push(`import { ${refName} } from '${importFrom}';`);
+  }
+
   const headerComment = preview
     ? `/**\n * Preview module — compiled live from ${doc.source}\n * Same lowering as generated/; not written to disk.\n */`
     : `/**\n * Auto-generated React component from ${doc.source}\n * DO NOT EDIT — regenerate with: view-contracts render react\n */`;
 
+  if (doc.isPartial) {
+    const fnParams = partialFunctionParams(doc);
+
+    return `${headerComment}
+${imports.join('\n')}
+
+export function ${componentName}(${fnParams}): ReactElement {
+  ${formatComponentReturn(body)}
+}
+`;
+  }
+
   return `${headerComment}
 ${imports.join('\n')}
 
 export function ${componentName}({ vm }: { vm: ${doc.viewModel} }): ReactElement {
-  return (
-${body}
-  );
+  ${formatComponentReturn(body)}
 }
 `;
 }
 
+export async function renderReactComponent(
+  doc: ViewIrDocument,
+  options: RenderReactOptions,
+): Promise<string> {
+  return buildRenderedModule(doc, options);
+}
+
 export async function renderReactFromIr(
   doc: ViewIrDocument,
   outputPath: string,
@@ -75,7 +166,71 @@ export async function renderReactFromIr(
 ): Promise<void> {
   const { writeFile, mkdir } = await import('node:fs/promises');
   const { dirname } = await import('node:path');
-  const content = await renderReactComponent(doc, options);
+  const content = await buildRenderedModule(doc, options);
   await mkdir(dirname(outputPath), { recursive: true });
   await writeFile(outputPath, content, 'utf-8');
 }
+
+/** Render screen + partial modules for preview (single file, no cross-imports). */
+export async function renderReactPreviewBundle(
+  screen: ViewIrDocument,
+  partials: ViewIrDocument[],
+  options: RenderReactOptions,
+): Promise<string> {
+  const inlineOptions: RenderReactOptions = { ...options, inlineViewRefs: true };
+
+  const partialModules = await Promise.all(
+    partials.map((partial) => renderReactComponent(partial, inlineOptions)),
+  );
+  const screenModule = await renderReactComponent(screen, inlineOptions);
+
+  const stripImports = stripModulePreamble;
+
+  const map = await loadReactElementMap(options.elementMapPath);
+  const allowlistExtra = options.allowlistExtra ?? [];
+  const extensions = new Set<string>();
+  collectExtensionComponents(screen.root, map, allowlistExtra, extensions);
+  for (const partial of partials) {
+    collectExtensionComponents(partial.root, map, allowlistExtra, extensions);
+  }
+
+  const preview = options.previewImports;
+  const runtimeModule = preview?.dispatch ?? options.runtimeImportFrom;
+  const contractsModule = preview?.contracts ?? options.contractsImportFrom;
+  const extensionsModule = preview?.extensions ?? options.extensionsImportFrom;
+
+  const contractTypes = new Set<string>([screen.viewModel]);
+  for (const partial of partials) {
+    for (const typeName of extractContractTypeNames(partial.propsType)) {
+      contractTypes.add(typeName);
+    }
+  }
+
+  const imports: string[] = [
+    `import type { ReactElement } from 'react';`,
+    `import { dispatchAction } from '${runtimeModule}';`,
+    `import type { ${[...contractTypes].sort().join(', ')}, ActionDescriptor } from '${contractsModule}';`,
+  ];
+  const extensionImports = [...extensions].sort();
+  if (extensionImports.length > 0) {
+    imports.push(`import { ${extensionImports.join(', ')} } from '${extensionsModule}';`);
+  }
+
+  const headerComment = preview
+    ? `/**\n * Preview module — compiled live from ${screen.source}\n * Same lowering as generated/; not written to disk.\n */`
+    : '';
+
+  const partialBodies = partialModules.map(stripImports);
+  const screenBody = stripImports(screenModule);
+
+  return `${headerComment}
+${imports.join('\n')}
+
+${partialBodies.join('\n\n')}
+
+${screenBody}`;
+}
+
+export function partialReactOutputPath(reactDir: string, partial: ViewIrDocument): string {
+  return resolve(reactDir, 'components', `${partial.exportName}.generated.tsx`);
+}

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;
 }
 

package/renderers/swiftui/README.md

@@ -1,15 +1,53 @@
-# SwiftUI renderer scaffold
+# SwiftUI Renderer
 
-**Not implemented yet** beyond theme / screen stubs. View IR lowering and modifier emission are future work.
+Compiles View IR into native SwiftUI code at build time.
 
-SwiftUI `ViewModifier` 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.
+## Capabilities
 
-- 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)
+- **Full DSL element coverage** — all core elements (Box, Stack, Row, Table, Form, Button, Text, etc.) map to SwiftUI views via `elements.yaml`
+- **Theme codegen** — `VcTheme.swift` is generated from the design token / theme IR, supporting static and dynamic variant resolution
+- **Modifier cascade** — DSL visual properties are folded at compile time into SwiftUI modifier chains following the correct order: foreground/font → padding → background → clipShape → shadow → overlay → frame → opacity
+- **Padding shorthand** — `"24px 18px"` style shorthand is parsed into `.padding(.vertical, N)` + `.padding(.horizontal, N)`
+- **Dynamic variants** — `IrConcat` expressions (e.g. `` `badge-${row.statusTone}` ``) are lowered to runtime `VcTheme.resolve()` calls with a pre-built theme dictionary
+- **Table layout** — `Table` / `TableHeader` / `TableRow` / `TableColumn` / `TableCell` with fixed widths, flex columns, and configurable `separator` / `separatorColor`
+- **justify="between"** — `Row` elements with `justify="between"` emit `Spacer()` between children
+- **Mock data SSoT** — `mock.yaml` is converted to `SampleData.json` and bundled into the Xcode project; Swift ViewModels decode via `JSONDecoder` (no hand-written sample data)
 
-Implement SwiftUI code generation by reading View IR + renderer maps.
-Theme is emitted at build time via `src/design/emit/swiftui.ts` and `templates/theme/*.hbs` — same Token IR + Theme IR as React `theme.css`, not runtime JSON.
+## Files
 
-Extend vocabulary via `spec/ui-dsl.schema.json` (from `ui-dsl-*.csv`), then update renderer maps.
+| File | Role |
+|---|---|
+| `elements.yaml` | DSL element → SwiftUI view mapping |
+| `elementMap.ts` | TypeScript loader for elements.yaml |
+| `renderRuntime.ts` | Build orchestrator (theme, components, sample data JSON) |
+| `renderComponents.ts` | Entry point for per-component Swift file generation |
+| `renderTheme.ts` | `VcTheme.swift` generator (variant dictionary + `applyVcStyle`) |
+| `lowering/lowerToSwiftUI.ts` | IR → SwiftUI body code |
+| `lowering/modifiers.ts` | Visual property set → SwiftUI modifier chain |
+| `templates/` | Handlebars templates for boilerplate Swift files |
+
+## Usage
+
+Generated files are placed in `<project>/generated/swiftui/` during `view-contracts build`:
+
+```
+generated/swiftui/
+├── VcTheme.swift                    # Theme + variant dictionary
+├── AdminDashboard.generated.swift   # Screen view
+├── KpiCard.generated.swift          # Partial views
+├── ...
+└── AdminDashboard.SampleData.json   # Mock data from YAML SSoT
+```
+
+## iOS Preview App
+
+See `examples/admin-dashboard/ios-preview/` for a working SwiftUI preview app:
+
+```bash
+cd examples/admin-dashboard/ios-preview
+xcodegen generate   # generates .xcodeproj from project.yml
+# Open VcPreview.xcodeproj in Xcode, or build from CLI:
+xcodebuild -scheme VcPreview -destination 'platform=iOS Simulator,...' build
+```
+
+The preview app loads `SampleData.json` from the bundle and decodes it into typed `Codable` ViewModels.

package/renderers/swiftui/elementMap.ts

@@ -0,0 +1,45 @@
+import { resolve } from 'node:path';
+import { packageRoot } from '../../src/lib/packageRoot.js';
+import { loadYamlFile } from '../../src/renderer/elementMapValidation.js';
+
+export interface SwiftUIElementConfig {
+  container?: 'group' | 'vstack' | 'hstack' | 'navstack' | 'scrollview' | 'field' | 'cellgroup' | 'tablestack';
+  leaf?: 'text' | 'button' | 'textfield' | 'texteditor' | 'picker' | 'spacer' | 'divider' | 'image' | 'progressview' | 'toggle';
+  spacingProp?: string;
+}
+
+export interface SwiftUIElementMap {
+  elements: Record<string, SwiftUIElementConfig>;
+}
+
+const SOURCE_LABEL = 'renderers/swiftui/elements.yaml';
+
+let cachedMap: SwiftUIElementMap | null = null;
+
+function validateSwiftUIElementMap(map: SwiftUIElementMap): void {
+  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"`,
+      );
+    }
+    if ((entry.container === 'vstack' || entry.container === 'hstack') && entry.spacingProp === undefined) {
+      // spacingProp is optional for hstack/vstack containers without a DSL gap prop (e.g. TableHeader)
+    }
+  }
+}
+
+export async function loadSwiftUIElementMap(customPath?: string): Promise<SwiftUIElementMap> {
+  if (!customPath && cachedMap) return cachedMap;
+  const mapPath = customPath ?? resolve(packageRoot(), 'renderers/swiftui/elements.yaml');
+  const raw = await loadYamlFile<SwiftUIElementMap>(mapPath);
+  validateSwiftUIElementMap(raw);
+  if (!customPath) cachedMap = raw;
+  return raw;
+}
+
+export function isSwiftUIVocabulary(name: string, map: SwiftUIElementMap, allowlistExtra: string[] = []): boolean {
+  return name in map.elements && !allowlistExtra.includes(name);
+}

package/renderers/swiftui/elements.yaml

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

package/renderers/swiftui/index.ts

@@ -0,0 +1,5 @@
+export { loadSwiftUIElementMap, isSwiftUIVocabulary } from './elementMap.js';
+export type { SwiftUIElementConfig, SwiftUIElementMap } from './elementMap.js';
+export { renderSwiftComponent } from './renderComponents.js';
+export { mergeVisualProps } from '../../src/renderer/style/mergeVisualProps.js';
+export { visualPropSetToModifiers } from './lowering/modifiers.js';