view-contracts 0.4.0 → 0.4.1

package/package.json

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

package/renderers/react/defaults/theme.yaml

@@ -29,6 +29,21 @@ defaults:
     border: "{ui.layout.border-1}"
     borderColor: "{ui.border}"
     minHeight: "{ui.space.input-min-height}"
+  TableHeader:
+    background: "{ui.surface-muted}"
+    alignItems: "{ui.layout.align-center}"
+  TableColumn:
+    padding: "{ui.space.table-column-padding}"
+    fontSize: "{ui.space.table-column-font-size}"
+    fontWeight: "{ui.layout.font-semibold}"
+    foreground: "{ui.text-muted}"
+  TableCell:
+    padding: "{ui.space.table-cell-padding}"
+    fontSize: "{ui.space.table-cell-font-size}"
+  TableRow:
+    alignItems: "{ui.layout.align-center}"
+  Box:
+    width: "{ui.layout.width-full}"
 variants:
   Button:
     primary:
@@ -46,6 +61,16 @@ variants:
   Text:
     muted:
       foreground: "{ui.text-muted}"
+    field-label:
+      fontSize: "{ui.space.font-field-label}"
+      fontWeight: "{ui.layout.font-bold}"
+      foreground: "{ui.text}"
+    field-help:
+      fontSize: "{ui.space.font-field-help}"
+      foreground: "{ui.text-muted}"
+    field-error:
+      fontSize: "{ui.space.font-field-help}"
+      foreground: "{ui.danger}"
     primary:
       foreground: "{ui.primary}"
     success:
@@ -54,3 +79,7 @@ variants:
       foreground: "{ui.warning}"
     danger:
       foreground: "{ui.danger}"
+  Box:
+    card:
+      background: "{ui.surface}"
+      width: "{ui.layout.width-full}"

package/renderers/react/defaults/tokens.yaml

@@ -1,4 +1,4 @@
-# Default design tokens — mirrors renderers/react/runtime/theme.css :root variables.
+# Default design tokens — merged into generated/react/theme.css via emitTokenCss().
 ui:
   bg:
     $type: color
@@ -61,9 +61,18 @@ ui:
     font-bold:
       $type: layout
       $value: "700"
+    font-semibold:
+      $type: layout
+      $value: "600"
     border-1:
       $type: layout
       $value: "1px solid"
+    align-center:
+      $type: layout
+      $value: "center"
+    width-full:
+      $type: layout
+      $value: "100%"
   space:
     radius-md:
       $type: dimension
@@ -83,3 +92,54 @@ ui:
     textarea-padding:
       $type: dimension
       $value: "10px 12px"
+    field-gap:
+      $type: dimension
+      $value: "6px"
+    field-inner-gap:
+      $type: dimension
+      $value: "4px"
+    checkbox-gap:
+      $type: dimension
+      $value: "8px"
+    list-indent:
+      $type: dimension
+      $value: "20px"
+    list-item-padding:
+      $type: dimension
+      $value: "2px 0"
+    line-height-body:
+      $type: dimension
+      $value: "1.6"
+    line-height-heading:
+      $type: dimension
+      $value: "1.2"
+    font-field-label:
+      $type: dimension
+      $value: "13px"
+    font-field-help:
+      $type: dimension
+      $value: "12px"
+    table-column-padding:
+      $type: dimension
+      $value: "12px 14px"
+    table-column-font-size:
+      $type: dimension
+      $value: "12px"
+    table-cell-padding:
+      $type: dimension
+      $value: "14px"
+    table-cell-font-size:
+      $type: dimension
+      $value: "14px"
+    input-min-height-sm:
+      $type: dimension
+      $value: "34px"
+    input-min-height-lg:
+      $type: dimension
+      $value: "50px"
+    input-padding-sm:
+      $type: dimension
+      $value: "6px 10px"
+    input-padding-lg:
+      $type: dimension
+      $value: "12px 14px"

package/renderers/react/lowering/lowerToJsx.ts

@@ -160,20 +160,20 @@ function emitFieldWrap(inner: string, props: Record<string, IrValue>, level: num
   const error = propExpr(props, 'error');
   const lines = [`${indent(level)}<label className="vc-field">`];
   if (typeof labelLit === 'string') {
-    lines.push(`${indent(level + 1)}<span className="vc-field-label">{${JSON.stringify(labelLit)}}</span>`);
+    lines.push(`${indent(level + 1)}<span className="vc-text vc-text--field-label">{${JSON.stringify(labelLit)}}</span>`);
   } else if (label) {
-    lines.push(`${indent(level + 1)}{${label} ? <span className="vc-field-label">{${label}}</span> : null}`);
+    lines.push(`${indent(level + 1)}{${label} ? <span className="vc-text vc-text--field-label">{${label}}</span> : null}`);
   }
   lines.push(`${indent(level + 1)}${inner}`);
   if (typeof helpLit === 'string') {
-    lines.push(`${indent(level + 1)}<span className="vc-field-help">{${JSON.stringify(helpLit)}}</span>`);
+    lines.push(`${indent(level + 1)}<span className="vc-text vc-text--field-help">{${JSON.stringify(helpLit)}}</span>`);
   } else if (help) {
-    lines.push(`${indent(level + 1)}{${help} ? <span className="vc-field-help">{${help}}</span> : null}`);
+    lines.push(`${indent(level + 1)}{${help} ? <span className="vc-text vc-text--field-help">{${help}}</span> : null}`);
   }
   if (typeof errorLit === 'string') {
-    lines.push(`${indent(level + 1)}<span className="vc-field-error">{${JSON.stringify(errorLit)}}</span>`);
+    lines.push(`${indent(level + 1)}<span className="vc-text vc-text--field-error">{${JSON.stringify(errorLit)}}</span>`);
   } else if (error) {
-    lines.push(`${indent(level + 1)}{${error} ? <span className="vc-field-error">{${error}}</span> : null}`);
+    lines.push(`${indent(level + 1)}{${error} ? <span className="vc-text vc-text--field-error">{${error}}</span> : null}`);
   }
   lines.push(`${indent(level)}</label>`);
   return lines.join('\n');

package/renderers/react/paths.ts

@@ -1 +1,5 @@
-export { reactTemplatesDir, reactRuntimeDir } from '../../src/lib/rendererPaths.js';
+export {
+  reactTemplatesDir,
+  reactRuntimeDir,
+  reactStructuralCssPath,
+} from '../../src/lib/rendererPaths.js';

package/renderers/react/runtime/structural.css

@@ -0,0 +1,38 @@
+/* DSL structural layer — layout/control mechanics only; no visual token values. */
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); font-size: var(--ui-space-font-body); }
+button, input, textarea, select { font: inherit; }
+
+.vc-page { min-height: 100vh; min-width: 0; }
+.vc-box { display: block; min-width: 0; }
+.vc-column { display: flex; flex-direction: column; min-width: 0; }
+.vc-stack { display: flex; flex-direction: column; min-width: 0; }
+.vc-row { display: flex; flex-direction: row; min-width: 0; }
+.vc-wrap { flex-wrap: wrap; }
+.vc-spacer { min-width: 0; min-height: 0; }
+
+.vc-heading { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
+.vc-text { margin: 0; line-height: 1.6; }
+.vc-link { color: var(--ui-primary); text-decoration: none; }
+.vc-link:hover { text-decoration: underline; }
+.vc-divider { border: 0; border-top: 1px solid var(--ui-border); width: 100%; }
+
+.vc-button { border: 0; cursor: pointer; }
+
+.vc-form { display: flex; flex-direction: column; min-width: 0; }
+.vc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+
+.vc-text-input, .vc-text-area, .vc-select { outline: none; }
+.vc-text-input:focus, .vc-text-area:focus, .vc-select:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
+.vc-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
+.vc-text-area { resize: vertical; }
+
+.vc-checkbox { display: inline-flex; align-items: center; gap: 8px; }
+.vc-list { margin: 0; padding-left: 20px; }
+.vc-list-item { margin: 0; padding: 2px 0; }
+
+.vc-table { width: 100%; display: flex; flex-direction: column; min-width: 0; }
+.vc-table-header { display: flex; align-items: center; min-width: 0; }
+.vc-table-column { display: flex; align-items: center; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.vc-table-row { display: flex; align-items: center; border-top: 1px solid var(--ui-border); min-width: 0; }
+.vc-table-cell { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

package/renderers/react/style/foldLiterals.ts

@@ -39,13 +39,23 @@ export function foldLiteralsToCss(literals: Record<string, unknown>): FoldedCss
   const style: FoldedCss = {};
   const width = literals.width;
   if (typeof width === 'number') style.width = len(width);
-  else if (typeof width === 'string' && width !== 'wrap' && width !== 'fill') style.width = width;
+  else if (width === 'fill') style.width = '100%';
+  else if (typeof width === 'string' && width !== 'wrap') style.width = width;
 
   if (typeof literals.minWidth === 'number') style.minWidth = len(literals.minWidth);
-  if (typeof literals.maxWidth === 'number') style.maxWidth = len(literals.maxWidth);
-  if (typeof literals.height === 'number') style.height = len(literals.height);
+  const maxWidth = literals.maxWidth;
+  if (typeof maxWidth === 'number') style.maxWidth = len(maxWidth);
+  else if (maxWidth === 'fill') style.maxWidth = '100%';
+
+  const height = literals.height;
+  if (typeof height === 'number') style.height = len(height);
+  else if (height === 'fill') style.height = '100%';
+  else if (typeof height === 'string' && height !== 'wrap') style.height = height;
+
   if (typeof literals.minHeight === 'number') style.minHeight = len(literals.minHeight);
-  if (typeof literals.maxHeight === 'number') style.maxHeight = len(literals.maxHeight);
+  const maxHeight = literals.maxHeight;
+  if (typeof maxHeight === 'number') style.maxHeight = len(maxHeight);
+  else if (maxHeight === 'fill') style.maxHeight = '100%';
   if (literals.aspectRatio !== undefined) style.aspectRatio = String(literals.aspectRatio);
 
   const weight = literals.weight;

package/renderers/swiftui/lowering/lowerToSwiftUI.ts

@@ -28,6 +28,45 @@ 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;
@@ -103,9 +142,11 @@ function mergedModifiersForProps(
       instanceLiterals,
     });
     const instanceModifiers = visualPropSetToModifiers(instanceOnly);
+    const paddingMods = instanceModifiers.filter((mod) => mod.startsWith('.padding'));
+    const otherInstanceMods = instanceModifiers.filter((mod) => !mod.startsWith('.padding'));
 
-    // Order: runtime lookup (base+variant) → instance overrides
-    return [runtimeLookup, ...instanceModifiers];
+    // Padding must sit inside background/border from applyVcStyle.
+    return [...paddingMods, runtimeLookup, ...otherInstanceMods];
   }
 
   const merged = mergeVisualProps({
@@ -118,6 +159,87 @@ function mergedModifiersForProps(
   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;
@@ -185,25 +307,84 @@ function renderLeaf(
 
   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}`);
+    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 line = `${pad}TextEditor(text: .constant(""))`;
-    const modLines = modifiers.map((mod) => `${pad}${mod}`);
-    return [line, ...modLines].join('\n');
+    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 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');
+    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') {
@@ -253,21 +434,23 @@ function renderContainer(
     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);
+    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 alignment = alignLit === 'center' ? '.center' : '.top';
     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: .leading)');
+    if (shouldFill) frameMods.push(`.frame(maxWidth: .infinity, alignment: ${hStackFrameAlign})`);
     if (typeof heightLit === 'number') frameMods.push(`.frame(height: ${heightLit})`);
 
     let block = childBlock;
@@ -283,6 +466,19 @@ function renderContainer(
         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)}}`;
@@ -293,12 +489,12 @@ function renderContainer(
     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);
+    return applyModifiers(inner, modifiers, level + 1);
   }
 
   if (entry.container === 'navstack') {
     const inner = childBlock;
-    return applyModifiers(inner, [...modifiers, '.frame(maxWidth: .infinity, maxHeight: .infinity)'], level + 1);
+    return applyModifiers(inner, modifiers, level + 1);
   }
 
   if (entry.container === 'scrollview') {
@@ -308,8 +504,12 @@ function renderContainer(
 
   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)}}`;
+    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);
   }
 
@@ -349,7 +549,7 @@ function renderContainer(
     }
 
     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);
+    return applyModifiers(inner, modifiers, level + 1);
   }
 
   if (entry.container === 'cellgroup') {
@@ -358,15 +558,15 @@ function renderContainer(
     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)'];
+    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)}VStack(alignment: ${swiftAlign}) {\n${childBlock}\n${indent(level + 1)}}`
-      : `${indent(level + 1)}VStack { EmptyView() }`;
+      ? `${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);
   }
 
@@ -393,8 +593,10 @@ function resolvedVisualProps(
   });
 }
 
-function parseGridColumns(gridTemplateColumns: string | number | boolean | undefined): { kind: 'fixed-columns'; widths: string[] } | { kind: 'adaptive'; minWidth: number } | null {
+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+/);
@@ -427,6 +629,9 @@ function renderComponent(
       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);
       }
@@ -437,7 +642,7 @@ function renderComponent(
       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);
+      return applyModifiers(inner, modifiers, level + 1);
     }
   }
 
@@ -454,9 +659,21 @@ function renderGridAdaptive(
 ): 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);
+  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 {
@@ -492,10 +709,12 @@ function renderGridFixedColumns(
     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)`;
+      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)`;
     }
@@ -503,7 +722,7 @@ function renderGridFixedColumns(
   }
   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);
+  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 {