view-contracts 0.3.4 → 0.4.0

package/renderers/swiftui/lowering/lowerToSwiftUI.ts

@@ -0,0 +1,542 @@
+import { LOWERING_STYLE_PROPERTIES } from '../../../src/schema/dsl-catalog.js';
+import type { ThemeIR, TokenIR } from '../../../src/design/types.js';
+import { mergeVisualProps, type VisualPropSet } from '../../../src/renderer/style/mergeVisualProps.js';
+import type {
+  IrBinding,
+  IrComponentNode,
+  IrConcat,
+  IrLiteral,
+  IrMapNode,
+  IrNode,
+  IrTextNode,
+  IrValue,
+  IrViewRefNode,
+} from '../../../src/ir/types.js';
+import type { SwiftUIElementConfig, SwiftUIElementMap } from '../elementMap.js';
+import { applyModifiers, visualPropSetToModifiers } from './modifiers.js';
+
+export interface SwiftUIRenderContext {
+  map: SwiftUIElementMap;
+  theme: ThemeIR;
+  tokens: TokenIR;
+  allowlistExtra: string[];
+  /** Root prop name for partial scope (e.g. "item" for KpiCard). */
+  propsRoot?: string;
+}
+
+function indent(level: number): string {
+  return '  '.repeat(level);
+}
+
+function propLiteral(props: Record<string, IrValue>, key: string): unknown | undefined {
+  const value = props[key];
+  if (value === null || value === undefined) return undefined;
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') return value;
+  if (typeof value === 'object' && 'kind' in value && value.kind === 'literal') {
+    return (value as IrLiteral).value;
+  }
+  return undefined;
+}
+
+function collectInstanceVisualLiterals(props: Record<string, IrValue>): Record<string, unknown> {
+  const literals: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key === 'variant' || key === 'id') continue;
+    if (!LOWERING_STYLE_PROPERTIES.has(key)) continue;
+    const lit = propLiteral(props, key);
+    if (lit !== undefined) literals[key] = lit;
+  }
+  return literals;
+}
+
+function isDynamicVariant(props: Record<string, IrValue>): boolean {
+  const v = props.variant;
+  if (v === null || v === undefined) return false;
+  if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') return false;
+  if (typeof v === 'object' && 'kind' in v) {
+    if (v.kind === 'literal') return false;
+    return v.kind === 'binding' || v.kind === 'concat';
+  }
+  return false;
+}
+
+function dynamicVariantSwiftExpr(props: Record<string, IrValue>, ctx: SwiftUIRenderContext, itemScope?: string): string | null {
+  const v = props.variant;
+  if (!v || typeof v !== 'object' || !('kind' in v)) return null;
+  if (v.kind === 'binding') return bindingExpr(v as IrBinding, ctx, itemScope);
+  if (v.kind === 'concat') {
+    const concat = v as IrConcat;
+    const parts = concat.parts.map(p => {
+      if (typeof p === 'string') return p;
+      return `\\(${bindingExpr(p, ctx, itemScope)})`;
+    }).join('');
+    return `"${parts}"`;
+  }
+  return null;
+}
+
+function mergedModifiersForProps(
+  elementName: string,
+  props: Record<string, IrValue>,
+  ctx: SwiftUIRenderContext,
+  itemScope?: string,
+): string[] {
+  const entry = ctx.map.elements[elementName];
+  const variantLit = propLiteral(props, 'variant');
+  const instanceLiterals = collectInstanceVisualLiterals(props);
+  if (entry?.spacingProp && entry.spacingProp in instanceLiterals) {
+    delete instanceLiterals[entry.spacingProp];
+  }
+
+  const dynamic = isDynamicVariant(props);
+
+  if (dynamic) {
+    // Dynamic variant: base+variant are resolved at runtime via theme dictionary.
+    // Compile-time applies only instance literals (which override variant at runtime).
+    const variantExpr = dynamicVariantSwiftExpr(props, ctx, itemScope)!;
+    const runtimeLookup = `.applyVcStyle(VcTheme.resolve(${JSON.stringify(elementName)}, variant: ${variantExpr}))`;
+
+    const instanceOnly = mergeVisualProps({
+      elementName,
+      theme: { defaults: {}, variants: {} },
+      tokens: ctx.tokens,
+      instanceLiterals,
+    });
+    const instanceModifiers = visualPropSetToModifiers(instanceOnly);
+
+    // Order: runtime lookup (base+variant) → instance overrides
+    return [runtimeLookup, ...instanceModifiers];
+  }
+
+  const merged = mergeVisualProps({
+    elementName,
+    theme: ctx.theme,
+    tokens: ctx.tokens,
+    variantLiteral: typeof variantLit === 'string' ? variantLit : undefined,
+    instanceLiterals,
+  });
+  return visualPropSetToModifiers(merged);
+}
+
+function bindingExpr(binding: IrBinding, ctx: SwiftUIRenderContext, itemScope?: string): string {
+  const root = binding.scope ?? itemScope ?? ctx.propsRoot ?? 'vm';
+  return binding.path ? `${root}.${binding.path}` : root;
+}
+
+function renderTextContent(children: IrNode[], ctx: SwiftUIRenderContext, itemScope?: string): string | null {
+  for (const child of children) {
+    if (child.kind === 'text') return JSON.stringify((child as IrTextNode).value);
+    if (child.kind === 'binding') return bindingExpr(child as IrBinding, ctx, itemScope);
+  }
+  return null;
+}
+
+type NodeRenderer = (node: IrNode, level: number, itemScope?: string) => string;
+
+function renderChildren(
+  children: IrNode[],
+  level: number,
+  renderNested: NodeRenderer,
+  ctx: SwiftUIRenderContext,
+  itemScope?: string,
+): string {
+  const parts = children.map((child) => {
+    if (child.kind === 'map') return renderMap(child, level, renderNested, ctx);
+    if (child.kind === 'text') return `${indent(level)}Text(${JSON.stringify((child as IrTextNode).value)})`;
+    if (child.kind === 'binding') return `${indent(level)}Text(${bindingExpr(child as IrBinding, ctx, itemScope)})`;
+    return renderNested(child, level, itemScope);
+  }).filter(Boolean);
+  return parts.join('\n');
+}
+
+function renderMap(node: IrMapNode, level: number, renderNested: NodeRenderer, ctx: SwiftUIRenderContext): string {
+  const item = node.item;
+  const body = renderNested(node.body, level + 2, item);
+  const source = bindingExpr(node.source, ctx, item);
+  return `${indent(level)}ForEach(${source}, id: \\.id) { ${item} in\n${body}\n${indent(level)}}`;
+}
+
+function renderLeaf(
+  node: IrComponentNode,
+  entry: SwiftUIElementConfig,
+  level: number,
+  itemScope: string | undefined,
+  ctx: SwiftUIRenderContext,
+  modifiers: string[],
+): string {
+  const pad = indent(level);
+
+  if (entry.leaf === 'text') {
+    const content = renderTextContent(node.children, ctx, itemScope);
+    if (!content) return `${pad}Text("")`;
+    const textLine = `${pad}Text(${content})`;
+    const modLines = modifiers.map((mod) => `${pad}${mod}`);
+    return [textLine, ...modLines].join('\n');
+  }
+
+  if (entry.leaf === 'button') {
+    const label = propLiteral(node.props, 'label');
+    const textContent = renderTextContent(node.children, ctx, itemScope);
+    const title = textContent ?? (typeof label === 'string' ? JSON.stringify(label) : '"Button"');
+    const line = `${pad}Button(${title}) {}`;
+    const modLines = modifiers.map((mod) => `${pad}${mod}`);
+    return [line, ...modLines].join('\n');
+  }
+
+  if (entry.leaf === 'textfield') {
+    const placeholder = propLiteral(node.props, 'placeholder');
+    const name = propLiteral(node.props, 'name');
+    const ph = typeof placeholder === 'string' ? JSON.stringify(placeholder) : '""';
+    const binding = typeof name === 'string' ? name : 'text';
+    const line = `${pad}TextField(${ph}, text: .constant(""))`;
+    const modLines = modifiers.map((mod) => `${pad}${mod}`);
+    return [line, ...modLines].join('\n');
+  }
+
+  if (entry.leaf === 'texteditor') {
+    const line = `${pad}TextEditor(text: .constant(""))`;
+    const modLines = modifiers.map((mod) => `${pad}${mod}`);
+    return [line, ...modLines].join('\n');
+  }
+
+  if (entry.leaf === 'picker') {
+    const label = propLiteral(node.props, 'label') ?? propLiteral(node.props, 'name') ?? '';
+    const line = `${pad}Picker(${JSON.stringify(label)}, selection: .constant("")) { Text("--") }`;
+    const modLines = modifiers.map((mod) => `${pad}${mod}`);
+    return [line, ...modLines].join('\n');
+  }
+
+  if (entry.leaf === 'spacer') {
+    return `${pad}Spacer()`;
+  }
+
+  if (entry.leaf === 'divider') {
+    return `${pad}Divider()`;
+  }
+
+  if (entry.leaf === 'image') {
+    const src = propLiteral(node.props, 'src') ?? propLiteral(node.props, 'name');
+    const systemName = typeof src === 'string' ? src : 'photo';
+    const line = `${pad}Image(systemName: ${JSON.stringify(systemName)})`;
+    const modLines = modifiers.map((mod) => `${pad}${mod}`);
+    return [line, ...modLines].join('\n');
+  }
+
+  if (entry.leaf === 'progressview') {
+    const line = `${pad}ProgressView()`;
+    const modLines = modifiers.map((mod) => `${pad}${mod}`);
+    return [line, ...modLines].join('\n');
+  }
+
+  if (entry.leaf === 'toggle') {
+    const label = propLiteral(node.props, 'label') ?? '';
+    const line = `${pad}Toggle(${JSON.stringify(label)}, isOn: .constant(false))`;
+    const modLines = modifiers.map((mod) => `${pad}${mod}`);
+    return [line, ...modLines].join('\n');
+  }
+
+  return `${pad}Text("/* unsupported leaf: ${node.name} */")`;
+}
+
+function renderContainer(
+  node: IrComponentNode,
+  entry: SwiftUIElementConfig,
+  level: number,
+  itemScope: string | undefined,
+  renderNested: NodeRenderer,
+  ctx: SwiftUIRenderContext,
+  modifiers: string[],
+): string {
+  const childBlock = renderChildren(node.children, level + 2, renderNested, ctx, itemScope);
+
+  if (entry.container === 'vstack') {
+    const spacingLit = entry.spacingProp ? propLiteral(node.props, entry.spacingProp) : undefined;
+    const spacing = typeof spacingLit === 'number' ? spacingLit : 0;
+    const inner = `${indent(level + 1)}VStack(alignment: .leading, spacing: ${spacing}) {\n${childBlock}\n${indent(level + 1)}}`;
+    return applyModifiers(inner, [...modifiers, '.frame(maxWidth: .infinity, alignment: .leading)'], level + 1);
+  }
+
+  if (entry.container === 'hstack') {
+    const spacingLit = entry.spacingProp ? propLiteral(node.props, entry.spacingProp) : undefined;
+    const spacing = typeof spacingLit === 'number' ? spacingLit : 0;
+    const alignLit = propLiteral(node.props, 'align');
+    const alignment = alignLit === 'center' ? '.center' : '.top';
+    const heightLit = propLiteral(node.props, 'height');
+    const justifyLit = propLiteral(node.props, 'justify');
+    const flexLit = propLiteral(node.props, 'flex');
+    const isTableElement = node.name === 'TableHeader' || node.name === 'TableRow';
+    const shouldFill = isTableElement || justifyLit !== undefined || typeof flexLit === 'number';
+    const frameMods: string[] = [];
+    if (shouldFill) frameMods.push('.frame(maxWidth: .infinity, alignment: .leading)');
+    if (typeof heightLit === 'number') frameMods.push(`.frame(height: ${heightLit})`);
+
+    let block = childBlock;
+    if (justifyLit === 'between') {
+      const childLines = node.children.map((child) => {
+        if (child.kind === 'map') return renderMap(child, level + 2, renderNested, ctx);
+        if (child.kind === 'text') return `${indent(level + 2)}Text(${JSON.stringify((child as IrTextNode).value)})`;
+        if (child.kind === 'binding') return `${indent(level + 2)}Text(${bindingExpr(child as IrBinding, ctx, itemScope)})`;
+        return renderNested(child, level + 2, itemScope);
+      }).filter(Boolean);
+      if (childLines.length >= 2) {
+        const first = childLines[0]!;
+        const rest = childLines.slice(1);
+        block = [first, `${indent(level + 2)}Spacer()`, ...rest].join('\n');
+      }
+    }
+
+    const inner = `${indent(level + 1)}HStack(alignment: ${alignment}, spacing: ${spacing}) {\n${block}\n${indent(level + 1)}}`;
+    return applyModifiers(inner, [...modifiers, ...frameMods], level + 1);
+  }
+
+  if (entry.container === 'group') {
+    const inner = childBlock
+      ? `${indent(level + 1)}VStack(alignment: .leading, spacing: 0) {\n${childBlock}\n${indent(level + 1)}}`
+      : `${indent(level + 1)}VStack { EmptyView() }`;
+    return applyModifiers(inner, [...modifiers, '.frame(maxWidth: .infinity, alignment: .leading)'], level + 1);
+  }
+
+  if (entry.container === 'navstack') {
+    const inner = childBlock;
+    return applyModifiers(inner, [...modifiers, '.frame(maxWidth: .infinity, maxHeight: .infinity)'], level + 1);
+  }
+
+  if (entry.container === 'scrollview') {
+    const inner = `${indent(level + 1)}ScrollView {\n${childBlock}\n${indent(level + 1)}}`;
+    return applyModifiers(inner, modifiers, level + 1);
+  }
+
+  if (entry.container === 'field') {
+    const label = propLiteral(node.props, 'label');
+    const labelView = typeof label === 'string' ? `\n${indent(level + 2)}Text(${JSON.stringify(label)})\n${indent(level + 2)}  .font(.caption)\n${indent(level + 2)}  .foregroundStyle(.secondary)` : '';
+    const inner = `${indent(level + 1)}VStack(alignment: .leading, spacing: 4) {${labelView}\n${childBlock}\n${indent(level + 1)}}`;
+    return applyModifiers(inner, modifiers, level + 1);
+  }
+
+  if (entry.container === 'tablestack') {
+    const separatorLit = propLiteral(node.props, 'separator');
+    const separatorColorLit = propLiteral(node.props, 'separatorColor');
+    const hasSeparator = typeof separatorLit === 'number' && separatorLit > 0;
+
+    const childParts = node.children.map((child) => {
+      if (child.kind === 'map') return renderMap(child, level + 2, renderNested, ctx);
+      return renderNested(child, level + 2, itemScope);
+    }).filter(Boolean);
+
+    let body: string[];
+    if (hasSeparator) {
+      const resolved = resolvedVisualProps(node.name, node.props, ctx);
+      const colorStr = resolved.separatorColor ?? separatorColorLit;
+      let colorExpr = 'Color.gray.opacity(0.2)';
+      if (typeof colorStr === 'string') {
+        const hex = colorStr.match(/^#([0-9a-fA-F]{6})$/);
+        if (hex) {
+          const r = parseInt(hex[1]!.slice(0, 2), 16) / 255;
+          const g = parseInt(hex[1]!.slice(2, 4), 16) / 255;
+          const b = parseInt(hex[1]!.slice(4, 6), 16) / 255;
+          colorExpr = `Color(red: ${r}, green: ${g}, blue: ${b})`;
+        }
+      }
+      const thickness = separatorLit as number;
+      const divLine = thickness === 1
+        ? `${indent(level + 2)}Divider().overlay(${colorExpr})`
+        : `${indent(level + 2)}Rectangle().fill(${colorExpr}).frame(height: ${thickness})`;
+      body = childParts.flatMap((part, i) =>
+        i < childParts.length - 1 ? [part, divLine] : [part],
+      );
+    } else {
+      body = childParts;
+    }
+
+    const inner = `${indent(level + 1)}VStack(alignment: .leading, spacing: 0) {\n${body.join('\n')}\n${indent(level + 1)}}`;
+    return applyModifiers(inner, [...modifiers, '.frame(maxWidth: .infinity, alignment: .leading)'], level + 1);
+  }
+
+  if (entry.container === 'cellgroup') {
+    const widthLit = propLiteral(node.props, 'width');
+    const flexLit = propLiteral(node.props, 'flex');
+    const alignLit = propLiteral(node.props, 'align');
+    const swiftAlign = alignLit === 'end' ? '.trailing' : alignLit === 'center' ? '.center' : '.leading';
+    const isFlex = typeof flexLit === 'number';
+    const cellMods = [...modifiers, '.padding(.horizontal, 4)', '.lineLimit(1)'];
+    if (typeof widthLit === 'number') {
+      cellMods.push(`.frame(width: ${widthLit}, alignment: ${swiftAlign})`);
+    } else if (isFlex) {
+      cellMods.push(`.frame(maxWidth: .infinity, alignment: ${swiftAlign})`);
+    }
+    const inner = childBlock
+      ? `${indent(level + 1)}VStack(alignment: ${swiftAlign}) {\n${childBlock}\n${indent(level + 1)}}`
+      : `${indent(level + 1)}VStack { EmptyView() }`;
+    return applyModifiers(inner, cellMods, level + 1);
+  }
+
+  const inner = childBlock
+    ? `${indent(level + 1)}Group {\n${childBlock}\n${indent(level + 1)}}`
+    : `${indent(level + 1)}Group { EmptyView() }`;
+  return applyModifiers(inner, modifiers, level + 1);
+}
+
+
+function resolvedVisualProps(
+  elementName: string,
+  props: Record<string, IrValue>,
+  ctx: SwiftUIRenderContext,
+): VisualPropSet {
+  const variantLit = propLiteral(props, 'variant');
+  const instanceLiterals = collectInstanceVisualLiterals(props);
+  return mergeVisualProps({
+    elementName,
+    theme: ctx.theme,
+    tokens: ctx.tokens,
+    variantLiteral: typeof variantLit === 'string' ? variantLit : undefined,
+    instanceLiterals,
+  });
+}
+
+function parseGridColumns(gridTemplateColumns: string | number | boolean | undefined): { kind: 'fixed-columns'; widths: string[] } | { kind: 'adaptive'; minWidth: number } | null {
+  if (!gridTemplateColumns || typeof gridTemplateColumns !== 'string') return null;
+  const adaptiveMatch = gridTemplateColumns.match(/repeat\(auto-fit,\s*minmax\((\d+)px/);
+  if (adaptiveMatch) return { kind: 'adaptive', minWidth: Number(adaptiveMatch[1]) };
+  const parts = gridTemplateColumns.trim().split(/\s+/);
+  if (parts.length >= 2) return { kind: 'fixed-columns', widths: parts };
+  return null;
+}
+
+function renderComponent(
+  node: IrComponentNode,
+  entry: SwiftUIElementConfig,
+  level: number,
+  itemScope: string | undefined,
+  renderNested: NodeRenderer,
+  ctx: SwiftUIRenderContext,
+): string {
+  const modifiers = mergedModifiersForProps(node.name, node.props, ctx, itemScope);
+
+  if (entry.leaf) {
+    return renderLeaf(node, entry, level, itemScope, ctx, modifiers);
+  }
+
+  if (entry.container === 'group' && !isDynamicVariant(node.props)) {
+    const resolved = resolvedVisualProps(node.name, node.props, ctx);
+    const display = resolved.display;
+    const gridCols = resolved.gridTemplateColumns;
+    const flexDir = resolved.flexDirection;
+
+    if (display === 'grid' && gridCols) {
+      const parsed = parseGridColumns(gridCols);
+      if (parsed?.kind === 'adaptive') {
+        return renderGridAdaptive(node, level, itemScope, renderNested, ctx, modifiers, parsed.minWidth);
+      }
+      if (parsed?.kind === 'fixed-columns') {
+        return renderGridFixedColumns(node, level, itemScope, renderNested, ctx, modifiers, parsed.widths);
+      }
+    }
+
+    if (display === 'flex' && flexDir === 'row') {
+      const childBlock = renderChildren(node.children, level + 2, renderNested, ctx, itemScope);
+      const gapLit = propLiteral(node.props, 'gap');
+      const gap = typeof gapLit === 'number' ? gapLit : (typeof resolved.gap === 'number' ? resolved.gap : 0);
+      const inner = `${indent(level + 1)}HStack(alignment: .top, spacing: ${gap}) {\n${childBlock}\n${indent(level + 1)}}`;
+      return applyModifiers(inner, [...modifiers, '.frame(maxWidth: .infinity, alignment: .leading)'], level + 1);
+    }
+  }
+
+  if (entry.container) {
+    return renderContainer(node, entry, level, itemScope, renderNested, ctx, modifiers);
+  }
+
+  throw new Error(`Unsupported SwiftUI element config for ${node.name}`);
+}
+
+function renderGridAdaptive(
+  node: IrComponentNode, level: number, itemScope: string | undefined,
+  renderNested: NodeRenderer, ctx: SwiftUIRenderContext, modifiers: string[], minWidth: number,
+): string {
+  const gapLit = propLiteral(node.props, 'gap');
+  const gap = typeof gapLit === 'number' ? gapLit : 16;
+  const childBlock = renderChildren(node.children, level + 2, renderNested, ctx, itemScope);
+  const inner = `${indent(level + 1)}LazyVGrid(columns: [GridItem(.adaptive(minimum: ${minWidth}))], spacing: ${gap}) {\n${childBlock}\n${indent(level + 1)}}`;
+  return applyModifiers(inner, [...modifiers, '.frame(maxWidth: .infinity)'], level + 1);
+}
+
+function resolveBackgroundColor(child: IrNode, ctx: SwiftUIRenderContext): string | null {
+  if (child.kind !== 'component') return null;
+  const resolved = resolvedVisualProps(child.name, (child as IrComponentNode).props, ctx);
+  const bg = resolved.background;
+  if (typeof bg !== 'string' || bg === 'transparent') return null;
+  const hex = bg.match(/^#([0-9a-fA-F]{6})$/);
+  if (hex) {
+    const r = parseInt(hex[1]!.slice(0, 2), 16) / 255;
+    const g = parseInt(hex[1]!.slice(2, 4), 16) / 255;
+    const b = parseInt(hex[1]!.slice(4, 6), 16) / 255;
+    return `Color(red: ${r}, green: ${g}, blue: ${b})`;
+  }
+  return `Color(${JSON.stringify(bg)})`;
+}
+
+function renderGridFixedColumns(
+  node: IrComponentNode, level: number, itemScope: string | undefined,
+  renderNested: NodeRenderer, ctx: SwiftUIRenderContext, modifiers: string[], widths: string[],
+): string {
+  const children = node.children;
+  const parts: string[] = [];
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i]!;
+    let rendered = '';
+    if (child.kind === 'map') rendered = renderMap(child, level + 2, renderNested, ctx);
+    else if (child.kind === 'text') rendered = `${indent(level + 2)}Text(${JSON.stringify((child as IrTextNode).value)})`;
+    else if (child.kind === 'binding') rendered = `${indent(level + 2)}Text(${bindingExpr(child as IrBinding, ctx, itemScope)})`;
+    else rendered = renderNested(child, level + 2, itemScope);
+    if (!rendered) continue;
+    const w = widths[i];
+    const pxMatch = w?.match(/^(\d+)px$/);
+    if (pxMatch) {
+      rendered += `\n${indent(level + 2)}.frame(width: ${Number(pxMatch[1])}, alignment: .topLeading)`;
+      rendered += `\n${indent(level + 2)}.frame(maxHeight: .infinity)`;
+      const bgColor = resolveBackgroundColor(child, ctx);
+      if (bgColor) rendered += `\n${indent(level + 2)}.background(${bgColor})`;
+    } else if (w === '1fr') {
+      rendered = `${indent(level + 2)}ScrollView {\n${rendered}\n${indent(level + 2)}}`;
+      rendered += `\n${indent(level + 2)}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)`;
+    }
+    parts.push(rendered);
+  }
+  const childBlock = parts.join('\n');
+  const inner = `${indent(level + 1)}HStack(spacing: 0) {\n${childBlock}\n${indent(level + 1)}}`;
+  return applyModifiers(inner, [...modifiers, '.frame(maxWidth: .infinity, maxHeight: .infinity)'], level + 1);
+}
+
+function renderViewRef(node: IrViewRefNode, level: number, itemScope: string | undefined, ctx: SwiftUIRenderContext): string {
+  const props = Object.entries(node.props).map(([key, value]) => {
+    if (typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'binding') {
+      return `${key}: ${bindingExpr(value as IrBinding, ctx, itemScope)}`;
+    }
+    return `${key}: ${JSON.stringify(value)}`;
+  });
+  const argStr = props.length > 0 ? `(${props.join(', ')})` : '()';
+  return `${indent(level)}${node.name}${argStr}`;
+}
+
+export function createSwiftUINodeRenderer(ctx: SwiftUIRenderContext): NodeRenderer {
+  const renderNested: NodeRenderer = (node, level, itemScope) => {
+    if (node.kind === 'viewRef') {
+      return renderViewRef(node, level, itemScope, ctx);
+    }
+    if (node.kind !== 'component') {
+      return '';
+    }
+    if (!ctx.map.elements[node.name]) {
+      throw new Error(`Element "${node.name}" is not in SwiftUI element map (prototype subset)`);
+    }
+    return renderComponent(node, ctx.map.elements[node.name]!, level, itemScope, renderNested, ctx);
+  };
+  return renderNested;
+}
+
+export function lowerIrToSwiftBody(root: IrNode, ctx: SwiftUIRenderContext, level = 2): string {
+  const render = createSwiftUINodeRenderer(ctx);
+  if (root.kind !== 'component') {
+    throw new Error('SwiftUI lowering root must be a component node');
+  }
+  return render(root, level);
+}

package/renderers/swiftui/lowering/modifiers.ts

@@ -0,0 +1,142 @@
+import type { VisualPropSet } from '../../../src/renderer/style/mergeVisualProps.js';
+
+function parsePx(value: string | number | boolean): number | null {
+  if (typeof value === 'number') return value;
+  if (typeof value === 'boolean') return null;
+  const match = value.match(/^([\d.]+)px$/);
+  return match ? Number(match[1]) : null;
+}
+
+function parseHexColor(value: string): string | null {
+  const match = value.match(/^#([0-9a-fA-F]{6})$/);
+  if (!match) return null;
+  const hex = match[1]!;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `Color(red: ${r / 255}, green: ${g / 255}, blue: ${b / 255})`;
+}
+
+type PaddingResult =
+  | { kind: 'uniform'; value: number }
+  | { kind: 'shorthand'; vertical: number; horizontal: number };
+
+function parsePaddingShorthand(value: string | number | boolean): PaddingResult | null {
+  const single = parsePx(value);
+  if (single !== null) return { kind: 'uniform', value: single };
+  if (typeof value !== 'string') return null;
+  const parts = value.trim().split(/\s+/);
+  if (parts.length === 2) {
+    const v = parsePx(parts[0]!);
+    const h = parsePx(parts[1]!);
+    if (v !== null && h !== null) return { kind: 'shorthand', vertical: v, horizontal: h };
+  }
+  return null;
+}
+
+function swiftFontSize(value: string | number | boolean): string | null {
+  if (value === '' || value === null || value === undefined) return null;
+  const px = parsePx(value);
+  if (px !== null) return `.font(.system(size: ${px}))`;
+  if (typeof value === 'string' && !value.endsWith('px')) return `.font(.system(size: ${JSON.stringify(value)}))`;
+  return null;
+}
+
+function swiftFontWeight(value: string | number | boolean): string | null {
+  if (typeof value !== 'string') return null;
+  const map: Record<string, string> = {
+    bold: '.fontWeight(.bold)',
+    semibold: '.fontWeight(.semibold)',
+    medium: '.fontWeight(.medium)',
+    regular: '.fontWeight(.regular)',
+  };
+  return map[value] ?? null;
+}
+
+/**
+ * Convert merged DSL visual props to a single SwiftUI modifier chain.
+ *
+ * Correct SwiftUI order:
+ *   foreground / font → padding → background → clipShape → shadow → overlay → frame → opacity
+ */
+export function visualPropSetToModifiers(merged: VisualPropSet): string[] {
+  const modifiers: string[] = [];
+
+  // 1. Text appearance (inherited, applies to child Text views)
+  const foreground = merged.foreground;
+  if (typeof foreground === 'string') {
+    const color = parseHexColor(foreground);
+    modifiers.push(color ? `.foregroundStyle(${color})` : `.foregroundStyle(Color(${JSON.stringify(foreground)}))`);
+  }
+
+  const sizeValue = merged.size ?? merged.fontSize;
+  if (sizeValue !== undefined && sizeValue !== '') {
+    const fontSize = swiftFontSize(sizeValue);
+    if (fontSize) modifiers.push(fontSize);
+  }
+
+  const fontWeight = swiftFontWeight(merged.fontWeight ?? merged.weight ?? '');
+  if (fontWeight) modifiers.push(fontWeight);
+
+  // 2. Padding (expands the "content area" that background fills)
+  const paddingRaw = merged.padding ?? '';
+  const paddingParsed = parsePaddingShorthand(paddingRaw);
+  if (paddingParsed) {
+    if (paddingParsed.kind === 'uniform') {
+      modifiers.push(`.padding(${paddingParsed.value})`);
+    } else {
+      modifiers.push(`.padding(.vertical, ${paddingParsed.vertical})`);
+      modifiers.push(`.padding(.horizontal, ${paddingParsed.horizontal})`);
+    }
+  }
+
+  // 3. Background (fills the padded area)
+  const background = merged.background;
+  if (typeof background === 'string' && background !== 'transparent') {
+    const color = parseHexColor(background);
+    modifiers.push(color ? `.background(${color})` : `.background(Color(${JSON.stringify(background)}))`);
+  }
+
+  // 4. Clip shape (clips background + content to rounded rect)
+  const radius = parsePx(merged.radius ?? '');
+  if (radius !== null) modifiers.push(`.clipShape(RoundedRectangle(cornerRadius: ${radius}))`);
+
+  // 5. Shadow (rendered on the clipped shape)
+  if (merged.shadow === true || merged.shadow === 'true') {
+    modifiers.push('.shadow(color: Color.black.opacity(0.08), radius: 4, x: 0, y: 2)');
+  }
+
+  // 6. Border overlay
+  const border = merged.border;
+  const borderColor = merged.borderColor;
+  if (border || borderColor) {
+    const borderWidth = parsePx(border ?? '1px') ?? 1;
+    const colorExpr = typeof borderColor === 'string' ? parseHexColor(borderColor) ?? 'Color.gray' : 'Color.gray';
+    modifiers.push(`.overlay(RoundedRectangle(cornerRadius: ${radius ?? 0}).stroke(${colorExpr}, lineWidth: ${borderWidth}))`);
+  }
+
+  // 7. Frame constraints
+  const minHeight = merged.minHeight;
+  if (minHeight !== undefined) {
+    const px = parsePx(minHeight);
+    if (px !== null) modifiers.push(`.frame(minHeight: ${px})`);
+  }
+
+  const maxWidth = merged.maxWidth;
+  if (maxWidth !== undefined) {
+    const px = parsePx(maxWidth);
+    if (px !== null) modifiers.push(`.frame(maxWidth: ${px})`);
+  }
+
+  // 8. Opacity (last — affects everything)
+  const opacity = merged.opacity;
+  if (typeof opacity === 'number' && opacity < 1) modifiers.push(`.opacity(${opacity})`);
+
+  return modifiers;
+}
+
+export function applyModifiers(body: string, modifiers: string[], indent: number): string {
+  if (modifiers.length === 0) return body;
+  const pad = '  '.repeat(indent);
+  return `${body}\n${modifiers.map((mod) => `${pad}${mod}`).join('\n')}`;
+}