view-contracts 0.3.5 → 0.4.1

package/renderers/swiftui/lowering/lowerToSwiftUI.ts

@@ -0,0 +1,761 @@
+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 tokenHexColorExpr(tokens: TokenIR, path: string, fallback: string): string {
+  const entry = tokens.entries.find((item) => item.path === path);
+  const value = entry?.value ?? fallback;
+  const match = value.match(/^#([0-9a-fA-F]{6})$/);
+  if (!match) return `Color(${JSON.stringify(value)})`;
+  const hex = match[1]!;
+  const r = parseInt(hex.slice(0, 2), 16) / 255;
+  const g = parseInt(hex.slice(2, 4), 16) / 255;
+  const b = parseInt(hex.slice(4, 6), 16) / 255;
+  return `Color(red: ${r}, green: ${g}, blue: ${b})`;
+}
+
+function renderGridChildBlock(
+  children: IrNode[],
+  level: number,
+  renderNested: NodeRenderer,
+  ctx: SwiftUIRenderContext,
+  itemScope: string | undefined,
+): string {
+  const childFrameMod = `${indent(level + 2)}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)`;
+  const parts = children.map((child) => {
+    if (child.kind === 'map') {
+      const mapNode = child as IrMapNode;
+      const item = mapNode.item;
+      let body = renderNested(mapNode.body, level + 2, item);
+      body += `\n${childFrameMod}`;
+      const source = bindingExpr(mapNode.source, ctx, itemScope);
+      return `${indent(level + 2)}ForEach(${source}, id: \\.id) { ${item} in\n${body}\n${indent(level + 2)}}`;
+    }
+    let rendered = '';
+    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) return '';
+    return `${rendered}\n${childFrameMod}`;
+  }).filter(Boolean);
+  return parts.join('\n');
+}
+
+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);
+    const paddingMods = instanceModifiers.filter((mod) => mod.startsWith('.padding'));
+    const otherInstanceMods = instanceModifiers.filter((mod) => !mod.startsWith('.padding'));
+
+    // Padding must sit inside background/border from applyVcStyle.
+    return [...paddingMods, runtimeLookup, ...otherInstanceMods];
+  }
+
+  const merged = mergeVisualProps({
+    elementName,
+    theme: ctx.theme,
+    tokens: ctx.tokens,
+    variantLiteral: typeof variantLit === 'string' ? variantLit : undefined,
+    instanceLiterals,
+  });
+  return visualPropSetToModifiers(merged);
+}
+
+function emitPickerSelection(
+  props: Record<string, IrValue>,
+  ctx: SwiftUIRenderContext,
+  itemScope: string | undefined,
+): string {
+  const options = props.options;
+  if (typeof options === 'object' && options !== null && 'kind' in options && options.kind === 'literal' && Array.isArray((options as IrLiteral).value)) {
+    const items = (options as IrLiteral).value as Array<{ value: string }>;
+    return `.constant(${JSON.stringify(items[0]?.value ?? '')})`;
+  }
+  if (typeof options === 'object' && options !== null && 'kind' in options && options.kind === 'binding') {
+    const expr = bindingExpr(options as IrBinding, ctx, itemScope);
+    return `Binding(get: { ${expr}.first?.value ?? "" }, set: { _ in })`;
+  }
+  return '.constant("")';
+}
+
+function emitPickerOptions(
+  props: Record<string, IrValue>,
+  ctx: SwiftUIRenderContext,
+  itemScope: string | undefined,
+  level: number,
+): string {
+  const options = props.options;
+  if (!options || typeof options !== 'object' || !('kind' in options)) {
+    return `${indent(level + 1)}Text("--").tag("")`;
+  }
+  if (options.kind === 'binding') {
+    const expr = bindingExpr(options as IrBinding, ctx, itemScope);
+    return `${indent(level + 1)}ForEach(${expr}, id: \\.value) { option in\n${indent(level + 2)}Text(option.label).tag(option.value)\n${indent(level + 1)}}`;
+  }
+  if (options.kind === 'literal' && Array.isArray((options as IrLiteral).value)) {
+    const items = (options as IrLiteral).value as Array<{ label: string; value: string }>;
+    return items.map((opt) =>
+      `${indent(level + 1)}Text(${JSON.stringify(opt.label)}).tag(${JSON.stringify(opt.value)})`,
+    ).join('\n');
+  }
+  return `${indent(level + 1)}Text("--").tag("")`;
+}
+
+function leafExtraModifiers(elementName: string): string[] {
+  return [];
+}
+
+function emitMenuOptions(
+  props: Record<string, IrValue>,
+  ctx: SwiftUIRenderContext,
+  itemScope: string | undefined,
+  level: number,
+): string {
+  const options = props.options;
+  if (typeof options === 'object' && options !== null && 'kind' in options && options.kind === 'binding') {
+    const expr = bindingExpr(options as IrBinding, ctx, itemScope);
+    return `${indent(level + 1)}ForEach(${expr}, id: \\.value) { option in\n${indent(level + 2)}Button(option.label) {}\n${indent(level + 1)}}`;
+  }
+  if (typeof options === 'object' && options !== null && 'kind' in options && options.kind === 'literal' && Array.isArray((options as IrLiteral).value)) {
+    const items = (options as IrLiteral).value as Array<{ label: string; value: string }>;
+    return items.map((opt) =>
+      `${indent(level + 1)}Button(${JSON.stringify(opt.label)}) {}`,
+    ).join('\n');
+  }
+  return `${indent(level + 1)}Button("--") {}`;
+}
+
+function emitSelectLabelText(
+  props: Record<string, IrValue>,
+  ctx: SwiftUIRenderContext,
+  itemScope: string | undefined,
+): string {
+  const options = props.options;
+  if (typeof options === 'object' && options !== null && 'kind' in options && options.kind === 'binding') {
+    const expr = bindingExpr(options as IrBinding, ctx, itemScope);
+    return `${expr}.first?.label ?? ""`;
+  }
+  if (typeof options === 'object' && options !== null && 'kind' in options && options.kind === 'literal' && Array.isArray((options as IrLiteral).value)) {
+    const items = (options as IrLiteral).value as Array<{ label: string }>;
+    return JSON.stringify(items[0]?.label ?? '');
+  }
+  return '""';
+}
+
+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 ph = typeof placeholder === 'string' ? JSON.stringify(placeholder) : '""';
+    const mutedColor = tokenHexColorExpr(ctx.tokens, 'ui.text-muted', '#6b7280');
+    const line = `${pad}TextField("", text: .constant(""), prompt: Text(${ph}).foregroundStyle(${mutedColor}))`;
+    const allMods = [...modifiers, ...leafExtraModifiers(node.name)];
+    const modLines = allMods.map((mod) => `${pad}${mod}`);
+    return [line, ...modLines].join('\n');
+  }
+
+  if (entry.leaf === 'texteditor') {
+    const placeholder = propLiteral(node.props, 'placeholder');
+    const ph = typeof placeholder === 'string' ? JSON.stringify(placeholder) : '""';
+    const mutedColor = tokenHexColorExpr(ctx.tokens, 'ui.text-muted', '#6b7280');
+    const minHeightMod = modifiers.find((mod) => mod.startsWith('.frame(minHeight:'));
+    const minHeight = minHeightMod?.match(/minHeight: (\d+)/)?.[1] ?? '72';
+
+    // Split modifiers: text-related go on TextEditor, visual/layout go on ZStack
+    const textMods = modifiers.filter((mod) =>
+      mod.startsWith('.foregroundStyle(') || mod.startsWith('.font(') || mod.startsWith('.fontWeight(')
+    );
+    const containerMods = modifiers.filter((mod) =>
+      !mod.startsWith('.foregroundStyle(') && !mod.startsWith('.font(') &&
+      !mod.startsWith('.fontWeight(') && !mod.startsWith('.frame(minHeight:')
+    );
+
+    const textModLines = textMods.map((mod) => `${pad}    ${mod}`);
+    const containerModLines = containerMods.map((mod) => `${pad}${mod}`);
+    return [
+      `${pad}ZStack(alignment: .topLeading) {`,
+      `${pad}  if true {`,
+      `${pad}    Text(${ph})`,
+      `${pad}      .font(.system(size: 14))`,
+      `${pad}      .foregroundStyle(${mutedColor})`,
+      `${pad}      .padding(.top, 8)`,
+      `${pad}      .padding(.horizontal, 4)`,
+      `${pad}      .allowsHitTesting(false)`,
+      `${pad}  }`,
+      `${pad}  TextEditor(text: .constant(""))`,
+      `${pad}    .scrollContentBackground(.hidden)`,
+      ...textModLines,
+      `${pad}}`,
+      `${pad}.frame(minHeight: ${minHeight})`,
+      ...containerModLines,
+    ].join('\n');
+  }
+
+  if (entry.leaf === 'picker') {
+    const textColor = tokenHexColorExpr(ctx.tokens, 'ui.text', '#111827');
+    const mutedColor = tokenHexColorExpr(ctx.tokens, 'ui.text-muted', '#6b7280');
+    const optionsBlock = emitMenuOptions(node.props, ctx, itemScope, level);
+    const labelText = emitSelectLabelText(node.props, ctx, itemScope);
+    const labelMods = modifiers.filter((mod) => !mod.startsWith('.frame'));
+    const widthLit = propLiteral(node.props, 'width');
+    const widthMod = typeof widthLit === 'number'
+      ? `${pad}.frame(width: ${widthLit})`
+      : `${pad}.frame(maxWidth: .infinity)`;
+    const lines = [
+      `${pad}Menu {`,
+      optionsBlock,
+      `${pad}} label: {`,
+      `${pad}  HStack(spacing: 0) {`,
+      `${pad}    Text(${labelText})`,
+      `${pad}      .foregroundStyle(${textColor})`,
+      `${pad}      .lineLimit(1)`,
+      `${pad}    Spacer(minLength: 0)`,
+      `${pad}    Image(systemName: "chevron.down")`,
+      `${pad}      .font(.system(size: 12, weight: .semibold))`,
+      `${pad}      .foregroundStyle(${mutedColor})`,
+      `${pad}  }`,
+      `${pad}  .padding(.vertical, 9)`,
+      `${pad}  .padding(.leading, 12)`,
+      `${pad}  .padding(.trailing, 12)`,
+      ...labelMods.map((mod) => `${pad}  ${mod}`),
+      `${pad}}`,
+      widthMod,
+      `${pad}.frame(minHeight: 42)`,
+      `${pad}.frame(maxWidth: .infinity)`,
+    ];
+    return lines.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, 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 heightLit = propLiteral(node.props, 'height');
+    const alignment = alignLit === 'center' || typeof heightLit === 'number' ? '.center' : '.top';
+    const justifyLit = propLiteral(node.props, 'justify');
+    const flexLit = propLiteral(node.props, 'flex');
+    const wrapLit = propLiteral(node.props, 'wrap');
+    const isTableElement = node.name === 'TableHeader' || node.name === 'TableRow';
+    const shouldFill = isTableElement || justifyLit !== undefined || typeof flexLit === 'number';
+    const hStackFrameAlign = justifyLit === 'end' ? '.trailing' : justifyLit === 'center' ? '.center' : '.leading';
+    const frameMods: string[] = [];
+    if (shouldFill) frameMods.push(`.frame(maxWidth: .infinity, alignment: ${hStackFrameAlign})`);
+    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');
+      }
+    } else if (wrapLit === true) {
+      block = 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)})`;
+        const rendered = renderNested(child, level + 2, itemScope);
+        if (!rendered) return '';
+        return rendered;
+      }).filter(Boolean).join('\n');
+
+      // Use FlowLayout (custom Layout protocol) for wrapping
+      const inner = `${indent(level + 1)}FlowLayout(spacing: ${spacing}) {\n${block}\n${indent(level + 1)}}`;
+      return applyModifiers(inner, [...modifiers, ...frameMods], level + 1);
+    }
+
+    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, level + 1);
+  }
+
+  if (entry.container === 'navstack') {
+    const inner = childBlock;
+    return applyModifiers(inner, modifiers, 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 gapLit = propLiteral(node.props, 'gap');
+    const gap = typeof gapLit === 'number' ? gapLit : 4;
+    const labelView = typeof label === 'string'
+      ? `\n${indent(level + 2)}Text(${JSON.stringify(label)})\n${indent(level + 2)}  .applyVcStyle(VcTheme.resolve("Text", variant: "field-label"))`
+      : '';
+    const inner = `${indent(level + 1)}VStack(alignment: .leading, spacing: ${gap}) {${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, 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, '.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)}Group {\n${childBlock}\n${indent(level + 2)}.frame(maxWidth: .infinity, alignment: ${swiftAlign})\n${indent(level + 1)}}`
+      : `${indent(level + 1)}Group { 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 } | { kind: 'equal-columns'; count: number } | null {
+  if (!gridTemplateColumns || typeof gridTemplateColumns !== 'string') return null;
+  const equalRepeatMatch = gridTemplateColumns.match(/repeat\((\d+),\s*minmax\(0,\s*1fr\)\)/);
+  if (equalRepeatMatch) return { kind: 'equal-columns', count: Number(equalRepeatMatch[1]) };
+  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 === 'equal-columns') {
+        return renderGridEqualColumns(node, level, itemScope, renderNested, ctx, modifiers, parsed.count);
+      }
+      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, 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 = renderGridChildBlock(node.children, level, renderNested, ctx, itemScope);
+  const inner = `${indent(level + 1)}LazyVGrid(columns: [GridItem(.adaptive(minimum: ${minWidth}))], spacing: ${gap}) {\n${childBlock}\n${indent(level + 1)}}\n${indent(level + 1)}.frame(maxWidth: .infinity, alignment: .topLeading)`;
+  return applyModifiers(inner, modifiers, level + 1);
+}
+
+function renderGridEqualColumns(
+  node: IrComponentNode, level: number, itemScope: string | undefined,
+  renderNested: NodeRenderer, ctx: SwiftUIRenderContext, modifiers: string[], count: number,
+): string {
+  const gapLit = propLiteral(node.props, 'gap');
+  const gap = typeof gapLit === 'number' ? gapLit : 16;
+  const columns = `Array(repeating: GridItem(.flexible(), spacing: ${gap}), count: ${count})`;
+  const childBlock = renderGridChildBlock(node.children, level, renderNested, ctx, itemScope);
+  const inner = `${indent(level + 1)}LazyVGrid(columns: ${columns}, spacing: ${gap}) {\n${childBlock}\n${indent(level + 1)}}\n${indent(level + 1)}.frame(maxWidth: .infinity, alignment: .topLeading)`;
+  return applyModifiers(inner, modifiers, 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, alignment: .topLeading)`;
+      const bgColor = resolveBackgroundColor(child, ctx);
+      if (bgColor) rendered += `\n${indent(level + 2)}.background(${bgColor})`;
+    } else if (w === '1fr') {
+      // Content inside ScrollView must explicitly fill width
+      rendered += `\n${indent(level + 3)}.frame(maxWidth: .infinity, alignment: .topLeading)`;
+      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, alignment: .topLeading)'], 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);
+}