view-contracts 0.4.5 → 0.5.0

package/renderers/compose/lowering/lowerToCompose.ts

@@ -0,0 +1,1062 @@
+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 { ComposeElementConfig, ComposeElementMap } from '../elementMap.js';
+import {
+  applyModifiers,
+  composeColorExpr,
+  composeContentAlignment,
+  dedupeModifiers,
+  extractApplyVcStyleExpr,
+  extractContentColor,
+  extractInheritedTextStyleParts,
+  extractClipRadiusDp,
+  extractPaddingModifiers,
+  extractTextMaxLines,
+  extractTextOverflow,
+  extractTextStyleModifiers,
+  hasFillMaxHeight,
+  hasStyledContainerModifiers,
+  hasTextFillMaxWidth,
+  hasWrapContentCenter,
+  paddingModifiersToPaddingValues,
+  stripBackgroundModifiers,
+  stripClipModifiers,
+  stripLayoutFrameModifiers,
+  stripPaddingModifiers,
+  visualPropSetToModifiers,
+} from './modifiers.js';
+
+export interface ComposeRenderContext {
+  map: ComposeElementMap;
+  theme: ThemeIR;
+  tokens: TokenIR;
+  allowlistExtra: string[];
+  propsRoot?: string;
+  /** How list `.map()` IR nodes should lower inside the current container. */
+  listScope?: 'none' | 'lazyColumn' | 'lazyGrid';
+  /** When true, Text leaves inherit table cell truncation behavior. */
+  cellTextBehavior?: boolean;
+  /** True when rendering inside a verticalScroll container. */
+  inVerticalScroll?: boolean;
+  /** True when rendering TableHeader column cells (compact vertical padding). */
+  inTableHeader?: boolean;
+}
+
+type NodeRenderer = (node: IrNode, level: number, itemScope?: string) => 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 dynamicVariantExpr(props: Record<string, IrValue>, ctx: ComposeRenderContext, 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 isDynamicVariant(props: Record<string, IrValue>): boolean {
+  const v = props.variant;
+  if (!v || typeof v !== 'object' || !('kind' in v)) return false;
+  return v.kind === 'binding' || v.kind === 'concat';
+}
+
+function mergedModifiersForProps(
+  elementName: string,
+  props: Record<string, IrValue>,
+  ctx: ComposeRenderContext,
+  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 isLeaf = Boolean(entry?.leaf);
+
+  if (isDynamicVariant(props)) {
+    const dynamicVariant = dynamicVariantExpr(props, ctx, itemScope)!;
+    const instanceOnly = mergeVisualProps({
+      elementName,
+      theme: { defaults: {}, variants: {} },
+      tokens: ctx.tokens,
+      instanceLiterals,
+    });
+    const instanceMods = visualPropSetToModifiers(instanceOnly, { isLeaf });
+    return [...instanceMods, `@runtimeStyle(VcTheme.resolve(${JSON.stringify(elementName)}, variant = ${dynamicVariant}))`];
+  }
+
+  const merged = mergeVisualProps({
+    elementName,
+    theme: ctx.theme,
+    tokens: ctx.tokens,
+    variantLiteral: typeof variantLit === 'string' ? variantLit : undefined,
+    instanceLiterals,
+  });
+  if (elementName === 'Box' && variantLit === 'card') {
+    delete merged.height;
+  }
+  return visualPropSetToModifiers(merged, { isLeaf });
+}
+
+function resolvedVisualProps(
+  elementName: string,
+  props: Record<string, IrValue>,
+  ctx: ComposeRenderContext,
+): 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: 'adaptive'; minWidth: number } | { kind: 'equal-columns'; count: number } | { kind: 'fixed-columns'; widths: string[] } | 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 resolveBackgroundColor(child: IrNode, ctx: ComposeRenderContext): 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;
+  return composeColorExpr(bg) ?? `Color(${JSON.stringify(bg)})`;
+}
+
+function resolveColorFromVisualProps(
+  elementName: string,
+  props: Record<string, IrValue>,
+  ctx: ComposeRenderContext,
+  channel: 'background' | 'foreground',
+): string {
+  const resolved = resolvedVisualProps(elementName, props, ctx);
+  const value = resolved[channel];
+  if (typeof value !== 'string') {
+    return channel === 'background' ? 'Color.Transparent' : 'Color.Unspecified';
+  }
+  if (channel === 'background' && (value === 'transparent' || !value)) return 'Color.Transparent';
+  return composeColorExpr(value) ?? 'Color.Unspecified';
+}
+
+function alignToTextAlign(alignLit: unknown): string {
+  if (alignLit === 'end') return 'TextAlign.End';
+  if (alignLit === 'center') return 'TextAlign.Center';
+  return 'TextAlign.Start';
+}
+
+function alignToBoxContentAlignment(alignLit: unknown): string {
+  if (alignLit === 'end') return 'Alignment.CenterEnd';
+  if (alignLit === 'center') return 'Alignment.Center';
+  return 'Alignment.CenterStart';
+}
+
+function renderGridEqualColumns(
+  node: IrComponentNode,
+  level: number,
+  itemScope: string | undefined,
+  renderNested: NodeRenderer,
+  ctx: ComposeRenderContext,
+  modifiers: string[],
+  _columnCount: number,
+): string {
+  const gapLit = propLiteral(node.props, 'gap');
+  const gap = typeof gapLit === 'number' ? `${gapLit}.dp` : '16.dp';
+  const modifierExpr = applyModifiers('Modifier.fillMaxWidth()', dedupeModifiers(modifiers));
+
+  // Row+weight is scroll-safe; LazyVerticalGrid crashes inside verticalScroll and in nested partials.
+  if (node.children.length === 1 && node.children[0]!.kind === 'map') {
+    const mapNode = node.children[0] as IrMapNode;
+    const item = mapNode.item;
+    const source = bindingExpr(mapNode.source, ctx, itemScope);
+    const body = renderNested(mapNode.body, level + 3, item);
+    return [
+      `${indent(level)}Row(modifier = ${modifierExpr}, horizontalArrangement = Arrangement.spacedBy(${gap}), verticalAlignment = Alignment.Top) {`,
+      `${indent(level + 1)}for (${item} in ${source}) {`,
+      `${indent(level + 2)}Box(modifier = Modifier.weight(1f).fillMaxWidth(), contentAlignment = Alignment.TopStart) {`,
+      body,
+      `${indent(level + 2)}}`,
+      `${indent(level + 1)}}`,
+      `${indent(level)}}`,
+    ].join('\n');
+  }
+  const parts = node.children.map((child) => {
+    let content = '';
+    if (child.kind === 'map') content = renderMap(child, level + 2, renderNested, ctx, 'none');
+    else if (child.kind === 'text') content = `${indent(level + 2)}Text(text = ${JSON.stringify((child as IrTextNode).value)})`;
+    else if (child.kind === 'binding') content = `${indent(level + 2)}Text(text = ${bindingExpr(child as IrBinding, ctx, itemScope)})`;
+    else content = renderNested(child, level + 2, itemScope);
+    if (!content) return '';
+    return `${indent(level + 1)}Box(modifier = Modifier.weight(1f).fillMaxSize(), propagateMinConstraints = true, contentAlignment = Alignment.TopStart) {\n${content}\n${indent(level + 1)}}`;
+  }).filter(Boolean);
+  return [
+    `${indent(level)}Row(modifier = ${modifierExpr}.height(IntrinsicSize.Min), horizontalArrangement = Arrangement.spacedBy(${gap}), verticalAlignment = Alignment.Top) {`,
+    parts.join('\n'),
+    `${indent(level)}}`,
+  ].join('\n');
+}
+
+function renderGridChildBlock(
+  children: IrNode[],
+  level: number,
+  renderNested: NodeRenderer,
+  ctx: ComposeRenderContext,
+  itemScope: string | undefined,
+): string {
+  const parts = children.map((child) => {
+    if (child.kind === 'map') {
+      return renderMap(child, level, renderNested, ctx, 'lazyGrid');
+    }
+    let rendered = '';
+    if (child.kind === 'text') rendered = `${indent(level + 1)}Text(text = ${JSON.stringify((child as IrTextNode).value)}, modifier = Modifier.fillMaxWidth())`;
+    else if (child.kind === 'binding') rendered = `${indent(level + 1)}Text(text = ${bindingExpr(child as IrBinding, ctx, itemScope)}, modifier = Modifier.fillMaxWidth())`;
+    else rendered = renderNested(child, level + 1, itemScope);
+    if (!rendered) return '';
+    if (child.kind !== 'text' && child.kind !== 'binding') {
+      return `${indent(level)}item {\n${indent(level + 1)}Box(modifier = Modifier.fillMaxWidth()) {\n${rendered}\n${indent(level + 1)}}\n${indent(level)}}`;
+    }
+    return `${indent(level)}item {\n${rendered}\n${indent(level)}}`;
+  }).filter(Boolean);
+  return parts.join('\n');
+}
+
+function renderGridFixedColumns(
+  node: IrComponentNode,
+  level: number,
+  itemScope: string | undefined,
+  renderNested: NodeRenderer,
+  ctx: ComposeRenderContext,
+  modifiers: string[],
+): string {
+  const modifierExpr = applyModifiers('Modifier.fillMaxWidth()', dedupeModifiers(modifiers));
+  const resolved = resolvedVisualProps(node.name, node.props, ctx);
+  const parsed = parseGridColumns(resolved.gridTemplateColumns);
+  const widths = parsed?.kind === 'fixed-columns' ? parsed.widths : [];
+  const parts: string[] = [];
+  for (let i = 0; i < node.children.length; i++) {
+    const child = node.children[i]!;
+    const widthToken = widths[i];
+    const pxMatch = widthToken?.match(/^(\d+)px$/);
+    if (pxMatch) {
+      let rendered = '';
+      if (child.kind === 'map') rendered = renderMap(child, level + 2, renderNested, ctx, 'none');
+      else if (child.kind === 'text') rendered = `${indent(level + 2)}Text(text = ${JSON.stringify((child as IrTextNode).value)})`;
+      else if (child.kind === 'binding') rendered = `${indent(level + 2)}Text(text = ${bindingExpr(child as IrBinding, ctx, itemScope)})`;
+      else rendered = renderNested(child, level + 2, itemScope);
+      if (!rendered) continue;
+      const bgColor = resolveBackgroundColor(child, ctx);
+      const bgMod = bgColor ? `.background(${bgColor})` : '';
+      parts.push([
+        `${indent(level + 1)}Box(modifier = Modifier.width(${Number(pxMatch[1])}.dp).fillMaxHeight()${bgMod}) {`,
+        rendered,
+        `${indent(level + 1)}}`,
+      ].join('\n'));
+    } else if (widthToken === '1fr') {
+      const prevScroll = ctx.inVerticalScroll;
+      ctx.inVerticalScroll = true;
+      let rendered = '';
+      if (child.kind === 'map') rendered = renderMap(child, level + 2, renderNested, ctx, 'none');
+      else if (child.kind === 'text') rendered = `${indent(level + 2)}Text(text = ${JSON.stringify((child as IrTextNode).value)})`;
+      else if (child.kind === 'binding') rendered = `${indent(level + 2)}Text(text = ${bindingExpr(child as IrBinding, ctx, itemScope)})`;
+      else rendered = renderNested(child, level + 2, itemScope);
+      ctx.inVerticalScroll = prevScroll;
+      if (!rendered) continue;
+      parts.push([
+        `${indent(level + 1)}Box(modifier = Modifier.weight(1f).fillMaxHeight(), contentAlignment = Alignment.TopStart) {`,
+        `${indent(level + 2)}Column(modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState())) {`,
+        rendered,
+        `${indent(level + 2)}}`,
+        `${indent(level + 1)}}`,
+      ].join('\n'));
+    } else {
+      let rendered = '';
+      if (child.kind === 'map') rendered = renderMap(child, level + 2, renderNested, ctx, 'none');
+      else if (child.kind === 'text') rendered = `${indent(level + 2)}Text(text = ${JSON.stringify((child as IrTextNode).value)})`;
+      else if (child.kind === 'binding') rendered = `${indent(level + 2)}Text(text = ${bindingExpr(child as IrBinding, ctx, itemScope)})`;
+      else rendered = renderNested(child, level + 2, itemScope);
+      if (!rendered) continue;
+      parts.push(rendered);
+    }
+  }
+  return [
+    `${indent(level)}Row(modifier = ${modifierExpr}, horizontalArrangement = Arrangement.spacedBy(0.dp)) {`,
+    parts.join('\n'),
+    `${indent(level)}}`,
+  ].join('\n');
+}
+
+function bindingExpr(binding: IrBinding, ctx: ComposeRenderContext, itemScope?: string): string {
+  const root = binding.scope ?? itemScope ?? ctx.propsRoot ?? 'vm';
+  return binding.path ? `${root}.${binding.path}` : root;
+}
+
+function wrapWithInheritedStyles(childBlock: string, modifiers: string[], level: number): string {
+  const contentColor = extractContentColor(modifiers);
+  const inheritParts = extractInheritedTextStyleParts(modifiers);
+  if (!contentColor && inheritParts.length === 0) return childBlock;
+  const providers: string[] = [];
+  if (contentColor) providers.push(`LocalContentColor provides ${contentColor}`);
+  if (inheritParts.length > 0) {
+    providers.push(`LocalTextStyle provides LocalTextStyle.current.merge(TextStyle(${inheritParts.join(', ')}))`);
+  }
+  return [
+    `${indent(level)}CompositionLocalProvider(${providers.join(', ')}) {`,
+    childBlock,
+    `${indent(level)}}`,
+  ].join('\n');
+}
+
+function headerCellPaddingMods(paddingMods: string[]): string[] {
+  return paddingMods.map((mod) => {
+    const horizontalVertical = mod.match(/\.padding\(horizontal = (\d+)\.dp, vertical = \d+\.dp\)/);
+    if (horizontalVertical) {
+      return `.padding(horizontal = ${horizontalVertical[1]}.dp)`;
+    }
+    const uniform = mod.match(/\.padding\((\d+)\.dp\)/);
+    if (uniform) {
+      return `.padding(horizontal = ${uniform[1]}.dp)`;
+    }
+    return mod;
+  });
+}
+
+function cellTextBehaviorMods(): string[] {
+  return ['@textMaxLines(1)', '@textOverflow(TextOverflow.Ellipsis)', '@textFillMaxWidth()'];
+}
+
+function withCellTextBehavior(modifiers: string[], ctx: ComposeRenderContext): string[] {
+  if (!ctx.cellTextBehavior) return modifiers;
+  return [...modifiers, ...cellTextBehaviorMods()];
+}
+
+function wrapWithContentCenter(inner: string, level: number): string {
+  return [
+    `${indent(level)}Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.TopCenter) {`,
+    inner,
+    `${indent(level)}}`,
+  ].join('\n');
+}
+
+function renderStyledBox(
+  level: number,
+  modifiers: string[],
+  childBlock: string,
+  contentAlignParam = '',
+): string {
+  const paddingMods = extractPaddingModifiers(modifiers);
+  const styleMods = stripPaddingModifiers(modifiers);
+  const outerModifier = applyModifiers('Modifier', styleMods);
+  const innerPaddingExpr = paddingMods.length > 0 && hasStyledContainerModifiers(styleMods)
+    ? applyModifiers('Modifier', paddingMods)
+    : null;
+  let inner = wrapWithInheritedStyles(childBlock, modifiers, level + 1);
+  if (innerPaddingExpr) {
+    inner = [
+      `${indent(level + 1)}Box(modifier = ${innerPaddingExpr}) {`,
+      inner,
+      `${indent(level + 1)}}`,
+    ].join('\n');
+  }
+  return [
+    `${indent(level)}Box(modifier = ${outerModifier}${contentAlignParam}) {`,
+    inner,
+    `${indent(level)}}`,
+  ].join('\n');
+}
+
+function formatTextComposable(
+  pad: string,
+  content: string,
+  modifiers: string[],
+  ctx: ComposeRenderContext,
+): string {
+  const paddingMods = extractPaddingModifiers(modifiers);
+  const runtimeStyleExpr = extractApplyVcStyleExpr(applyModifiers('Modifier', modifiers));
+  const layoutMods = dedupeModifiers(modifiers.filter((m) =>
+    !m.startsWith('@textStyle(')
+    && !m.startsWith('@runtimeStyle(')
+    && !m.includes('.padding(')
+    && !m.startsWith('@textMaxLines(')
+    && !m.startsWith('@textOverflow(')
+    && !m.startsWith('@textAlign(')
+    && m !== '@textFillMaxWidth()',
+  ));
+  const modifierBase = hasTextFillMaxWidth(modifiers) ? 'Modifier.fillMaxWidth()' : 'Modifier';
+  const textStyleParts = extractTextStyleModifiers(modifiers);
+  let styleExpr: string | null = null;
+  if (runtimeStyleExpr) {
+    styleExpr = textStyleParts.length > 0
+      ? `LocalTextStyle.current.merge(${runtimeStyleExpr}.asTextStyle()).merge(TextStyle(${textStyleParts.join(', ')}))`
+      : `${runtimeStyleExpr}.asTextStyle()`;
+  } else if (textStyleParts.length > 0) {
+    styleExpr = `LocalTextStyle.current.merge(TextStyle(${textStyleParts.join(', ')}))`;
+  }
+  const styleParam = styleExpr ? `, style = ${styleExpr}` : '';
+  const maxLines = extractTextMaxLines(modifiers);
+  const maxLinesParam = maxLines !== null ? `, maxLines = ${maxLines}` : '';
+  const overflow = extractTextOverflow(modifiers);
+  const overflowParam = overflow ? `, overflow = ${overflow}` : '';
+  const textLine = `${pad}  Text(text = ${content}${maxLinesParam}${overflowParam}${styleParam})`;
+
+  if (runtimeStyleExpr) {
+    const styleBase = ctx.cellTextBehavior ? 'Modifier' : 'Modifier.fillMaxWidth()';
+    const styleModifier = `${styleBase}.applyVcStyle(${runtimeStyleExpr})`;
+    if (paddingMods.length > 0) {
+      const outerModifier = applyModifiers(modifierBase, [...layoutMods, ...paddingMods]);
+      return [
+        `${pad}Box(modifier = ${outerModifier}) {`,
+        `${pad}  Box(modifier = ${styleModifier}) {`,
+        textLine,
+        `${pad}  }`,
+        `${pad}}`,
+      ].join('\n');
+    }
+    return [
+      `${pad}Box(modifier = ${styleModifier}) {`,
+      textLine,
+      `${pad}}`,
+    ].join('\n');
+  }
+
+  const modifierExpr = applyModifiers(modifierBase, [...layoutMods, ...paddingMods]);
+  return `${pad}Text(text = ${content}, modifier = ${modifierExpr}${maxLinesParam}${overflowParam}${styleParam})`;
+}
+
+function emitSelectLabelText(
+  props: Record<string, IrValue>,
+  ctx: ComposeRenderContext,
+  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}.firstOrNull()?.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 emitPickerOptions(
+  props: Record<string, IrValue>,
+  ctx: ComposeRenderContext,
+  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)}for (option in ${expr}) {\n${indent(level + 2)}DropdownMenuItem(text = { Text(text = option.label) }, onClick = { expanded = false })\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)}DropdownMenuItem(text = { Text(text = ${JSON.stringify(opt.label)}) }, onClick = { expanded = false })`,
+    ).join('\n');
+  }
+  return `${indent(level + 1)}DropdownMenuItem(text = { Text(text = "--") }, onClick = { expanded = false })`;
+}
+
+function tokenMutedColorExpr(tokens: TokenIR): string {
+  const entry = tokens.entries.find((item) => item.path === 'ui.text-muted');
+  const value = entry?.value ?? '#6b7280';
+  const match = value.match(/^#([0-9a-fA-F]{6})$/);
+  if (!match) return `Color(${JSON.stringify(value)})`;
+  const hex = match[1]!;
+  return `Color(${parseInt(hex.slice(0, 2), 16)}, ${parseInt(hex.slice(2, 4), 16)}, ${parseInt(hex.slice(4, 6), 16)})`;
+}
+
+function tokenTextColorExpr(tokens: TokenIR): string {
+  const entry = tokens.entries.find((item) => item.path === 'ui.text');
+  const value = entry?.value ?? '#111827';
+  const match = value.match(/^#([0-9a-fA-F]{6})$/);
+  if (!match) return `Color(${JSON.stringify(value)})`;
+  const hex = match[1]!;
+  return `Color(${parseInt(hex.slice(0, 2), 16)}, ${parseInt(hex.slice(2, 4), 16)}, ${parseInt(hex.slice(4, 6), 16)})`;
+}
+
+function renderTextContent(children: IrNode[], ctx: ComposeRenderContext, 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;
+}
+
+function renderChildren(
+  children: IrNode[],
+  level: number,
+  renderNested: NodeRenderer,
+  ctx: ComposeRenderContext,
+  itemScope?: string,
+  listScope: ComposeRenderContext['listScope'] = ctx.listScope ?? 'none',
+): string {
+  const parts = children.map((child) => {
+    if (child.kind === 'map') return renderMap(child, level, renderNested, ctx, listScope);
+    if (child.kind === 'text') return `${indent(level)}Text(text = ${JSON.stringify((child as IrTextNode).value)})`;
+    if (child.kind === 'binding') return `${indent(level)}Text(text = ${bindingExpr(child as IrBinding, ctx, itemScope)})`;
+    return renderNested(child, level, itemScope);
+  }).filter(Boolean);
+  return parts.join('\n');
+}
+
+function renderLazyGridChildren(
+  children: IrNode[],
+  level: number,
+  renderNested: NodeRenderer,
+  ctx: ComposeRenderContext,
+  itemScope?: string,
+): string {
+  const parts = children.map((child) => {
+    let content: string;
+    if (child.kind === 'map') {
+      return renderMap(child, level, renderNested, ctx, 'lazyGrid');
+    }
+    if (child.kind === 'text') content = `${indent(level + 1)}Text(text = ${JSON.stringify((child as IrTextNode).value)})`;
+    else if (child.kind === 'binding') content = `${indent(level + 1)}Text(text = ${bindingExpr(child as IrBinding, ctx, itemScope)})`;
+    else content = renderNested(child, level + 1, itemScope);
+    if (!content) return '';
+    return `${indent(level)}item {\n${content}\n${indent(level)}}`;
+  }).filter(Boolean);
+  return parts.join('\n');
+}
+
+function renderMap(
+  node: IrMapNode,
+  level: number,
+  renderNested: NodeRenderer,
+  ctx: ComposeRenderContext,
+  listScope: ComposeRenderContext['listScope'] = 'none',
+): string {
+  const source = bindingExpr(node.source, ctx);
+  const item = node.item;
+  const body = renderNested(node.body, level + 2, item);
+  if (listScope === 'lazyGrid') {
+    return `${indent(level)}gridItems(${source}, key = { it.id }) { ${item} ->\n${indent(level + 1)}Box(modifier = Modifier.fillMaxWidth()) {\n${body}\n${indent(level + 1)}}\n${indent(level)}}`;
+  }
+  if (listScope === 'lazyColumn') {
+    return `${indent(level)}lazyItems(${source}, key = { it.id }) { ${item} ->\n${body}\n${indent(level)}}`;
+  }
+  return `${indent(level)}for (${item} in ${source}) {\n${body}\n${indent(level)}}`;
+}
+
+function renderViewRef(node: IrViewRefNode, level: number, itemScope: string | undefined, ctx: ComposeRenderContext): 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)}`;
+  });
+  return `${indent(level)}${node.name}(${props.join(', ')})`;
+}
+
+function renderVcButton(
+  node: IrComponentNode,
+  level: number,
+  itemScope: string | undefined,
+  ctx: ComposeRenderContext,
+  modifiers: string[],
+): string {
+  const pad = indent(level);
+  const label = propLiteral(node.props, 'label');
+  const textContent = renderTextContent(node.children, ctx, itemScope);
+  const title = textContent ?? (typeof label === 'string' ? JSON.stringify(label) : '"Button"');
+  let containerColor = resolveColorFromVisualProps(node.name, node.props, ctx, 'background');
+  let contentColor = resolveColorFromVisualProps(node.name, node.props, ctx, 'foreground');
+  if (isDynamicVariant(node.props)) {
+    const dynamicVariant = dynamicVariantExpr(node.props, ctx, itemScope)!;
+    const styleExpr = `VcTheme.resolve("Button", variant = ${dynamicVariant})`;
+    containerColor = `${styleExpr}.background ?: Color.Transparent`;
+    contentColor = `${styleExpr}.foreground ?: Color.Unspecified`;
+  }
+  const layoutMods = dedupeModifiers(stripBackgroundModifiers(stripClipModifiers(stripPaddingModifiers(modifiers))));
+  const buttonLayoutMods = ctx.cellTextBehavior
+    ? [...layoutMods.filter((m) => m !== '.fillMaxWidth()'), '.wrapContentWidth()']
+    : layoutMods;
+  const modifierExpr = applyModifiers('Modifier', buttonLayoutMods);
+  const clipRadius = extractClipRadiusDp(modifiers);
+  const contentPadding = paddingModifiersToPaddingValues(extractPaddingModifiers(modifiers));
+  const shapeParam = clipRadius !== null ? `, shape = RoundedCornerShape(${clipRadius}.dp)` : '';
+  const paddingParam = contentPadding ? `, contentPadding = ${contentPadding}` : '';
+  const buttonTextStyle = extractTextStyleModifiers(modifiers);
+  const textStyleParam = buttonTextStyle.length > 0 ? `, style = TextStyle(${buttonTextStyle.join(', ')})` : '';
+  const cellTextParams = ctx.cellTextBehavior
+    ? ', maxLines = 1, overflow = TextOverflow.Ellipsis'
+    : '';
+  return [
+    `${pad}VcButton(onClick = {}, modifier = ${modifierExpr}, containerColor = ${containerColor}, contentColor = ${contentColor}${shapeParam}${paddingParam}) {`,
+    `${pad}  Text(text = ${title}${textStyleParam}${cellTextParams})`,
+    `${pad}}`,
+  ].join('\n');
+}
+
+function renderLeaf(
+  node: IrComponentNode,
+  entry: ComposeElementConfig,
+  level: number,
+  itemScope: string | undefined,
+  ctx: ComposeRenderContext,
+  modifiers: string[],
+): string {
+  const pad = indent(level);
+  const modifierExpr = applyModifiers('Modifier', modifiers);
+
+  if (entry.leaf === 'text') {
+    const content = renderTextContent(node.children, ctx, itemScope) ?? '""';
+    return formatTextComposable(pad, content, modifiers, ctx);
+  }
+  if (entry.leaf === 'button') {
+    return renderVcButton(node, level, itemScope, ctx, modifiers);
+  }
+  if (entry.leaf === 'textfield') {
+    const placeholder = propLiteral(node.props, 'placeholder');
+    const ph = typeof placeholder === 'string' ? JSON.stringify(placeholder) : '""';
+    const textColor = tokenTextColorExpr(ctx.tokens);
+    const mutedColor = tokenMutedColorExpr(ctx.tokens);
+    const fieldMods = dedupeModifiers(modifiers);
+    const modifierExpr = applyModifiers('Modifier', fieldMods);
+    const textStyleParts = extractTextStyleModifiers(modifiers);
+    const textStyleLine = textStyleParts.length > 0
+      ? `${pad}  textStyle = TextStyle(${textStyleParts.join(', ')}),`
+      : `${pad}  textStyle = TextStyle(color = ${textColor}, fontSize = 14.sp),`;
+    return [
+      `${pad}BasicTextField(`,
+      `${pad}  value = "",`,
+      `${pad}  onValueChange = {},`,
+      `${pad}  modifier = ${modifierExpr},`,
+      textStyleLine,
+      `${pad}  decorationBox = { innerTextField ->`,
+      `${pad}    Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.CenterStart) {`,
+      `${pad}      if ("".isEmpty()) {`,
+      `${pad}        Text(text = ${ph}, style = TextStyle(color = ${mutedColor}, fontSize = 14.sp))`,
+      `${pad}      }`,
+      `${pad}      innerTextField()`,
+      `${pad}    }`,
+      `${pad}  },`,
+      `${pad})`,
+    ].join('\n');
+  }
+  if (entry.leaf === 'texteditor') {
+    const placeholder = propLiteral(node.props, 'placeholder');
+    const ph = typeof placeholder === 'string' ? JSON.stringify(placeholder) : '""';
+    const mutedColor = tokenMutedColorExpr(ctx.tokens);
+    const minHeightMod = modifiers.find((mod) => mod.includes('heightIn(min ='));
+    const minHeight = minHeightMod?.match(/heightIn\(min = (\d+)\.dp\)/)?.[1] ?? '72';
+    const textMods = modifiers.filter((mod) => mod.startsWith('@textStyle('));
+    const containerMods = dedupeModifiers(modifiers.filter((mod) =>
+      !mod.startsWith('@textStyle(') && !mod.includes('heightIn(min ='),
+    ));
+    const containerExpr = applyModifiers('Modifier', dedupeModifiers(containerMods));
+    const textStyleParts = extractTextStyleModifiers(textMods);
+    const textStyleSuffix = textStyleParts.length > 0 ? `, textStyle = TextStyle(${textStyleParts.join(', ')})` : '';
+    return [
+      `${pad}Box(modifier = ${containerExpr}.heightIn(min = ${minHeight}.dp)) {`,
+      `${pad}  BasicTextField(`,
+      `${pad}    value = "",`,
+      `${pad}    onValueChange = {},`,
+      `${pad}    modifier = Modifier.fillMaxWidth()${textStyleSuffix},`,
+      `${pad}    decorationBox = { innerTextField ->`,
+      `${pad}      Box(modifier = Modifier.fillMaxWidth()) {`,
+      `${pad}        if ("".isEmpty()) {`,
+      `${pad}          Text(text = ${ph}, modifier = Modifier.align(Alignment.TopStart).padding(top = 8.dp, start = 4.dp), style = TextStyle(color = ${mutedColor}, fontSize = 14.sp))`,
+      `${pad}        }`,
+      `${pad}        innerTextField()`,
+      `${pad}      }`,
+      `${pad}    },`,
+      `${pad}  )`,
+      `${pad}}`,
+    ].join('\n');
+  }
+  if (entry.leaf === 'picker') {
+    const widthLit = propLiteral(node.props, 'width');
+    const widthPx = typeof widthLit === 'number' ? widthLit : null;
+    const widthMod = widthPx !== null ? `.width(${widthPx}.dp)` : '';
+    const layoutMods = stripLayoutFrameModifiers(dedupeModifiers(modifiers));
+    const pickerModifier = applyModifiers(`Modifier${widthMod}`, layoutMods);
+    const labelText = emitSelectLabelText(node.props, ctx, itemScope);
+    const textColor = tokenTextColorExpr(ctx.tokens);
+    const mutedColor = tokenMutedColorExpr(ctx.tokens);
+    const optionsBlock = emitPickerOptions(node.props, ctx, itemScope, level);
+    return [
+      `${pad}Box(modifier = ${pickerModifier}.heightIn(min = 42.dp)) {`,
+      `${pad}  var expanded by remember { mutableStateOf(false) }`,
+      `${pad}  TextButton(onClick = { expanded = true }, modifier = Modifier.fillMaxWidth(), contentPadding = PaddingValues(horizontal = 12.dp, vertical = 9.dp)) {`,
+      `${pad}    Text(text = ${labelText}, style = TextStyle(color = ${textColor}), maxLines = 1, modifier = Modifier.weight(1f))`,
+      `${pad}    Icon(Icons.Default.ArrowDropDown, contentDescription = null, tint = ${mutedColor})`,
+      `${pad}  }`,
+      `${pad}  DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {`,
+      optionsBlock,
+      `${pad}  }`,
+      `${pad}}`,
+    ].join('\n');
+  }
+  if (entry.leaf === 'spacer') {
+    return `${pad}Spacer(modifier = ${modifierExpr})`;
+  }
+  if (entry.leaf === 'divider') {
+    return `${pad}HorizontalDivider(modifier = ${modifierExpr})`;
+  }
+  if (entry.leaf === 'image') {
+    const src = propLiteral(node.props, 'src') ?? propLiteral(node.props, 'name');
+    const desc = typeof src === 'string' ? JSON.stringify(src) : '"image"';
+    return `${pad}Icon(imageVector = Icons.Default.Image, contentDescription = ${desc}, modifier = ${modifierExpr})`;
+  }
+  if (entry.leaf === 'progressview') {
+    return `${pad}CircularProgressIndicator(modifier = ${modifierExpr})`;
+  }
+  if (entry.leaf === 'toggle') {
+    const label = propLiteral(node.props, 'label');
+    const text = typeof label === 'string' ? JSON.stringify(label) : '""';
+    return [
+      `${pad}Row(modifier = ${modifierExpr}, verticalAlignment = Alignment.CenterVertically) {`,
+      `${pad}  Switch(checked = false, onCheckedChange = {})`,
+      `${pad}  Text(text = ${text})`,
+      `${pad}}`,
+    ].join('\n');
+  }
+  return `${pad}Text(text = "/* unsupported leaf: ${node.name} */")`;
+}
+
+function renderContainer(
+  node: IrComponentNode,
+  entry: ComposeElementConfig,
+  level: number,
+  itemScope: string | undefined,
+  renderNested: NodeRenderer,
+  ctx: ComposeRenderContext,
+  modifiers: string[],
+): string {
+  const childBlock = renderChildren(node.children, level + 1, renderNested, ctx, itemScope);
+  const modifierExpr = applyModifiers('Modifier', modifiers);
+
+  if (entry.container === 'vstack') {
+    const spacingLit = entry.spacingProp ? propLiteral(node.props, entry.spacingProp) : undefined;
+    const spacing = typeof spacingLit === 'number' ? `${spacingLit}.dp` : '0.dp';
+    const columnBlock = [
+      `${indent(level)}Column(modifier = ${modifierExpr}, verticalArrangement = Arrangement.spacedBy(${spacing})) {`,
+      wrapWithInheritedStyles(childBlock, modifiers, level + 1),
+      `${indent(level)}}`,
+    ].join('\n');
+    return hasWrapContentCenter(modifiers) ? wrapWithContentCenter(columnBlock, level) : columnBlock;
+  }
+
+  if (entry.container === 'hstack') {
+    const spacingLit = entry.spacingProp ? propLiteral(node.props, entry.spacingProp) : undefined;
+    const spacing = typeof spacingLit === 'number' ? `${spacingLit}.dp` : '0.dp';
+    const justifyLit = propLiteral(node.props, 'justify');
+    const wrapLit = propLiteral(node.props, 'wrap');
+    const arrangement = justifyLit === 'between'
+      ? 'Arrangement.SpaceBetween'
+      : justifyLit === 'end'
+        ? 'Arrangement.End'
+        : justifyLit === 'center'
+          ? 'Arrangement.Center'
+          : `Arrangement.spacedBy(${spacing})`;
+    const alignLit = propLiteral(node.props, 'align');
+    const alignItemsLit = propLiteral(node.props, 'alignItems');
+    const heightLit = propLiteral(node.props, 'height');
+    const alignment = alignItemsLit === 'center' || alignLit === 'center' || typeof heightLit === 'number'
+      ? 'Alignment.CenterVertically'
+      : alignItemsLit === 'end'
+        ? 'Alignment.Bottom'
+        : 'Alignment.Top';
+    const isTableElement = node.name === 'TableHeader' || node.name === 'TableRow';
+    const flexLit = propLiteral(node.props, 'flex');
+    const shouldFill = isTableElement || justifyLit !== undefined || typeof flexLit === 'number';
+    const frameMods: string[] = [];
+    if (shouldFill) frameMods.push('.fillMaxWidth()');
+    if (typeof heightLit === 'number') {
+      frameMods.push(isTableElement && node.name === 'TableHeader'
+        ? `.heightIn(min = ${heightLit}.dp)`
+        : `.height(${heightLit}.dp)`);
+    }
+    const layoutModifiers = isTableElement && typeof heightLit === 'number'
+      ? stripLayoutFrameModifiers(modifiers)
+      : modifiers;
+    const rowModifier = applyModifiers('Modifier', dedupeModifiers([...layoutModifiers, ...frameMods]));
+    const prevTableHeader = ctx.inTableHeader;
+    if (node.name === 'TableHeader') ctx.inTableHeader = true;
+    const childContent = wrapWithInheritedStyles(renderChildren(node.children, level + 1, renderNested, ctx, itemScope), modifiers, level + 1);
+    if (node.name === 'TableHeader') ctx.inTableHeader = prevTableHeader;
+
+    if (wrapLit === true && justifyLit !== 'between') {
+      return [
+        `${indent(level)}FlowRow(modifier = ${rowModifier}, horizontalArrangement = Arrangement.spacedBy(${spacing}), verticalArrangement = Arrangement.spacedBy(${spacing})) {`,
+        childContent,
+        `${indent(level)}}`,
+      ].join('\n');
+    }
+
+    return [
+      `${indent(level)}Row(modifier = ${rowModifier}, horizontalArrangement = ${arrangement}, verticalAlignment = ${alignment}) {`,
+      childContent,
+      `${indent(level)}}`,
+    ].join('\n');
+  }
+
+  if (entry.container === 'group' || entry.container === 'navstack') {
+    const resolved = !isDynamicVariant(node.props) ? resolvedVisualProps(node.name, node.props, ctx) : undefined;
+    const parsedGrid = resolved?.display === 'grid' ? parseGridColumns(resolved.gridTemplateColumns) : null;
+    if (parsedGrid?.kind === 'equal-columns') {
+      return renderGridEqualColumns(node, level, itemScope, renderNested, ctx, modifiers, parsedGrid.count);
+    }
+    if (parsedGrid?.kind === 'adaptive') {
+      const gapLit = propLiteral(node.props, 'gap');
+      const gap = typeof gapLit === 'number' ? `${gapLit}.dp` : '16.dp';
+      return [
+        `${indent(level)}LazyVerticalGrid(columns = GridCells.Adaptive(minSize = ${parsedGrid.minWidth}.dp), modifier = ${modifierExpr}.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(${gap}), verticalArrangement = Arrangement.spacedBy(${gap})) {`,
+        renderGridChildBlock(node.children, level + 1, renderNested, ctx, itemScope),
+        `${indent(level)}}`,
+      ].join('\n');
+    }
+    const contentAlignLit = propLiteral(node.props, 'contentAlign');
+    const fillHeightAlign = hasFillMaxHeight(modifiers) ? ', contentAlignment = Alignment.TopStart' : '';
+    const contentAlignParam = typeof contentAlignLit === 'string'
+      ? `, contentAlignment = ${composeContentAlignment(contentAlignLit)}`
+      : fillHeightAlign;
+    const boxBlock = renderStyledBox(level, modifiers, childBlock, contentAlignParam);
+    return hasWrapContentCenter(modifiers) ? wrapWithContentCenter(boxBlock, level) : boxBlock;
+  }
+
+  if (entry.container === 'scrollview') {
+    const prevScroll = ctx.inVerticalScroll;
+    ctx.inVerticalScroll = true;
+    const block = [
+      `${indent(level)}Column(modifier = ${modifierExpr}.verticalScroll(rememberScrollState())) {`,
+      childBlock,
+      `${indent(level)}}`,
+    ].join('\n');
+    ctx.inVerticalScroll = prevScroll;
+    return block;
+  }
+
+  if (entry.container === 'field') {
+    const label = propLiteral(node.props, 'label');
+    const gapLit = propLiteral(node.props, 'gap');
+    const gap = typeof gapLit === 'number' ? `${gapLit}.dp` : '4.dp';
+    const labelLine = typeof label === 'string'
+      ? `${indent(level + 1)}Text(text = ${JSON.stringify(label)}, modifier = Modifier.applyVcStyle(VcTheme.resolve("Text", variant = "field-label")), style = VcTheme.resolve("Text", variant = "field-label").asTextStyle())\n`
+      : '';
+    return [
+      `${indent(level)}Column(modifier = ${modifierExpr}, verticalArrangement = Arrangement.spacedBy(${gap})) {`,
+      `${labelLine}${childBlock}`,
+      `${indent(level)}}`,
+    ].join('\n');
+  }
+
+  if (entry.container === 'tablestack') {
+    const separatorLit = propLiteral(node.props, 'separator');
+    const separatorColorLit = propLiteral(node.props, 'separatorColor');
+    const hasSeparator = (typeof separatorLit === 'number' && separatorLit > 0) || separatorLit === undefined;
+    const resolved = resolvedVisualProps(node.name, node.props, ctx);
+    const colorStr = resolved.separatorColor ?? separatorColorLit;
+    let colorExpr = 'Color.Gray.copy(alpha = 0.2f)';
+    if (hasSeparator && typeof colorStr === 'string') {
+      const hex = colorStr.match(/^#([0-9a-fA-F]{6})$/);
+      if (hex) {
+        colorExpr = `Color(${parseInt(hex[1]!.slice(0, 2), 16)}, ${parseInt(hex[1]!.slice(2, 4), 16)}, ${parseInt(hex[1]!.slice(4, 6), 16)})`;
+      }
+    }
+    const divLine = `${indent(level + 1)}HorizontalDivider(modifier = Modifier, color = ${colorExpr})`;
+    const childParts = node.children.map((child) => {
+      if (child.kind === 'map' && hasSeparator) {
+        const mapNode = child as IrMapNode;
+        const source = bindingExpr(mapNode.source, ctx);
+        const item = mapNode.item;
+        const mapBody = renderNested(mapNode.body, level + 3, item);
+        return [
+          `${indent(level + 1)}for (${item} in ${source}) {`,
+          `${indent(level + 2)}${divLine.trim()}`,
+          mapBody,
+          `${indent(level + 1)}}`,
+        ].join('\n');
+      }
+      if (child.kind === 'map') return renderMap(child, level + 1, renderNested, ctx, 'none');
+      return renderNested(child, level + 1, itemScope);
+    }).filter(Boolean);
+    let body: string[];
+    if (hasSeparator) {
+      body = childParts;
+    } else {
+      body = childParts;
+    }
+    return [
+      `${indent(level)}Column(modifier = ${modifierExpr}) {`,
+      body.join('\n'),
+      `${indent(level)}}`,
+    ].join('\n');
+  }
+
+  if (entry.container === 'cellgroup') {
+    const widthLit = propLiteral(node.props, 'width');
+    const flexLit = propLiteral(node.props, 'flex');
+    const alignLit = propLiteral(node.props, 'align');
+    const textAlign = alignToTextAlign(alignLit);
+    const boxContentAlignment = alignToBoxContentAlignment(alignLit);
+    const isFlex = typeof flexLit === 'number';
+    const visualCellMods = stripLayoutFrameModifiers(modifiers);
+    const paddingMods = ctx.inTableHeader
+      ? headerCellPaddingMods(extractPaddingModifiers(visualCellMods))
+      : extractPaddingModifiers(visualCellMods);
+    const inheritedMods = visualCellMods.filter((mod) =>
+      mod.startsWith('@contentColor(') || mod.startsWith('@inheritTextStyle('),
+    );
+    const layoutMods: string[] = [];
+    if (typeof widthLit === 'number') {
+      layoutMods.push(`.width(${widthLit}.dp)`);
+    } else if (isFlex) {
+      layoutMods.push('.weight(1f).fillMaxWidth()');
+    }
+    const cellModifier = applyModifiers('Modifier', dedupeModifiers([...layoutMods, ...stripPaddingModifiers(visualCellMods)]));
+    const prevCellTextBehavior = ctx.cellTextBehavior;
+    ctx.cellTextBehavior = true;
+    const cellChildParts = node.children.map((child) => {
+      if (child.kind === 'map') return renderMap(child, level + 1, renderNested, ctx, 'none');
+      if (child.kind === 'text') {
+        return formatTextComposable(
+          indent(level + 1),
+          JSON.stringify((child as IrTextNode).value),
+          dedupeModifiers([...cellTextBehaviorMods(), `@textAlign(${textAlign})`, ...paddingMods, ...inheritedMods.map((m) => m)]),
+          ctx,
+        );
+      }
+      if (child.kind === 'binding') {
+        return formatTextComposable(
+          indent(level + 1),
+          bindingExpr(child as IrBinding, ctx, itemScope),
+          dedupeModifiers([...cellTextBehaviorMods(), `@textAlign(${textAlign})`, ...paddingMods, ...inheritedMods.map((m) => m)]),
+          ctx,
+        );
+      }
+      return renderNested(child, level + 1, itemScope);
+    }).filter(Boolean).join('\n');
+    ctx.cellTextBehavior = prevCellTextBehavior;
+    return [
+      `${indent(level)}Box(modifier = ${cellModifier}, contentAlignment = ${boxContentAlignment}) {`,
+      wrapWithInheritedStyles(cellChildParts, inheritedMods, level + 1),
+      `${indent(level)}}`,
+    ].join('\n');
+  }
+
+  const boxBlock = renderStyledBox(level, modifiers, childBlock);
+  return hasWrapContentCenter(modifiers) ? wrapWithContentCenter(boxBlock, level) : boxBlock;
+}
+
+function renderComponent(
+  node: IrComponentNode,
+  entry: ComposeElementConfig,
+  level: number,
+  itemScope: string | undefined,
+  renderNested: NodeRenderer,
+  ctx: ComposeRenderContext,
+): string {
+  const modifiers = withCellTextBehavior(
+    mergedModifiersForProps(node.name, node.props, ctx, itemScope),
+    ctx,
+  );
+  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 gridCols = resolved.gridTemplateColumns;
+    const flexDir = resolved.flexDirection;
+    if (resolved.display === 'grid' && gridCols) {
+      const parsed = parseGridColumns(gridCols);
+      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);
+      }
+    }
+    if (resolved.display === 'flex' && flexDir === 'row') {
+      const gapLit = propLiteral(node.props, 'gap');
+      const gap = typeof gapLit === 'number' ? `${gapLit}.dp` : (typeof resolved.gap === 'number' ? `${resolved.gap}.dp` : '0.dp');
+      const modifierExpr = applyModifiers('Modifier', modifiers);
+      const childBlock = renderChildren(node.children, level + 2, renderNested, ctx, itemScope);
+      return [
+        `${indent(level)}Row(modifier = ${modifierExpr}, horizontalArrangement = Arrangement.spacedBy(${gap}), verticalAlignment = Alignment.Top) {`,
+        childBlock,
+        `${indent(level)}}`,
+      ].join('\n');
+    }
+  }
+
+  if (entry.container) return renderContainer(node, entry, level, itemScope, renderNested, ctx, modifiers);
+  throw new Error(`Unsupported Compose element config for ${node.name}`);
+}
+
+export function createComposeNodeRenderer(ctx: ComposeRenderContext): 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 Compose element map`);
+    }
+    return renderComponent(node, ctx.map.elements[node.name]!, level, itemScope, renderNested, ctx);
+  };
+  return renderNested;
+}
+
+export function lowerIrToComposeBody(root: IrNode, ctx: ComposeRenderContext, level = 2): string {
+  const render = createComposeNodeRenderer(ctx);
+  if (root.kind !== 'component') {
+    throw new Error('Compose lowering root must be a component node');
+  }
+  return render(root, level);
+}