view-contracts 0.4.4 → 0.5.0

package/renderers/compose/lowering/modifiers.ts

@@ -0,0 +1,449 @@
+import type { VisualPropSet } from '../../../src/renderer/style/mergeVisualProps.js';
+
+function parsePx(value: string | number | boolean): number | null {
+  if (typeof value === 'number') return value;
+  if (typeof value === 'boolean') return null;
+  const match = value.match(/^([\d.]+)px$/);
+  return match ? Number(match[1]) : null;
+}
+
+function parseHexColor(value: string): string | null {
+  const match = value.match(/^#([0-9a-fA-F]{6})$/);
+  if (!match) return null;
+  const hex = match[1]!;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `Color(${r}, ${g}, ${b})`;
+}
+
+function parseRgbaColor(value: string): string | null {
+  const match = value.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/);
+  if (!match) return null;
+  const r = Number(match[1]) / 255;
+  const g = Number(match[2]) / 255;
+  const b = Number(match[3]) / 255;
+  const a = Number(match[4]);
+  return `Color(${r}f, ${g}f, ${b}f, ${a}f)`;
+}
+
+export function composeColorExpr(value: string): string | null {
+  if (value === 'transparent') return 'Color.Transparent';
+  return parseHexColor(value) ?? parseRgbaColor(value) ?? null;
+}
+
+type PaddingResult =
+  | { kind: 'uniform'; value: number }
+  | { kind: 'shorthand'; vertical: number; horizontal: number };
+
+function parsePaddingShorthand(value: string | number | boolean): PaddingResult | null {
+  const single = parsePx(value);
+  if (single !== null) return { kind: 'uniform', value: single };
+  if (typeof value !== 'string') return null;
+  const parts = value.trim().split(/\s+/);
+  if (parts.length === 2) {
+    const v = parsePx(parts[0]!);
+    const h = parsePx(parts[1]!);
+    if (v !== null && h !== null) return { kind: 'shorthand', vertical: v, horizontal: h };
+  }
+  return null;
+}
+
+function composeFontWeight(value: string | number | boolean): string | null {
+  if (typeof value !== 'string') return null;
+  const map: Record<string, string> = {
+    bold: 'FontWeight.Bold',
+    semibold: 'FontWeight.SemiBold',
+    medium: 'FontWeight.Medium',
+    regular: 'FontWeight.Normal',
+    '700': 'FontWeight.Bold',
+    '600': 'FontWeight.SemiBold',
+    '500': 'FontWeight.Medium',
+    '400': 'FontWeight.Normal',
+  };
+  return map[value] ?? null;
+}
+
+function composeTextAlign(value: string | number | boolean): string | null {
+  if (typeof value !== 'string') return null;
+  const map: Record<string, string> = {
+    start: 'TextAlign.Start',
+    center: 'TextAlign.Center',
+    end: 'TextAlign.End',
+  };
+  return map[value] ?? null;
+}
+
+function composeSelfAlign(value: string | number | boolean): string | null {
+  if (typeof value !== 'string') return null;
+  const map: Record<string, string> = {
+    start: 'Alignment.Start',
+    center: 'Alignment.CenterVertically',
+    end: 'Alignment.Bottom',
+    stretch: 'Alignment.CenterVertically',
+  };
+  return map[value] ?? null;
+}
+
+export function composeContentAlignment(value: string): string {
+  const map: Record<string, string> = {
+    topStart: 'Alignment.TopStart',
+    top: 'Alignment.TopCenter',
+    topEnd: 'Alignment.TopEnd',
+    start: 'Alignment.CenterStart',
+    center: 'Alignment.Center',
+    end: 'Alignment.CenterEnd',
+    bottomStart: 'Alignment.BottomStart',
+    bottom: 'Alignment.BottomCenter',
+    bottomEnd: 'Alignment.BottomEnd',
+  };
+  return map[value] ?? 'Alignment.TopStart';
+}
+
+export interface VisualPropModifierOptions {
+  /** When true, text appearance props target the Text composable directly. */
+  isLeaf?: boolean;
+}
+
+/**
+ * Convert merged DSL visual props to Compose modifier / text-behavior tags.
+ *
+ * Order for Compose (outside-in, opposite of SwiftUI):
+ *   foreground/font → fillMax frame → shadow → background → clip → border → fixed sizes → padding → margin → opacity → text behavior
+ */
+export function visualPropSetToModifiers(
+  merged: VisualPropSet,
+  options: VisualPropModifierOptions = {},
+): string[] {
+  const mods: string[] = [];
+  const isLeaf = options.isLeaf ?? false;
+
+  // 1. Text appearance (inherited or leaf-local)
+  const foreground = merged.foreground;
+  if (typeof foreground === 'string') {
+    const color = composeColorExpr(foreground);
+    if (color) {
+      mods.push(isLeaf ? `@textStyle(color = ${color})` : `@contentColor(${color})`);
+    }
+  }
+
+  const sizeValue = merged.size ?? merged.fontSize;
+  if (sizeValue !== undefined && sizeValue !== '') {
+    const px = typeof sizeValue === 'number' ? sizeValue : parsePx(sizeValue);
+    if (px !== null) {
+      mods.push(isLeaf ? `@textStyle(fontSize = ${px}.sp)` : `@inheritTextStyle(fontSize = ${px}.sp)`);
+    }
+  }
+
+  const fontWeight = composeFontWeight(merged.fontWeight ?? merged.weight ?? '');
+  if (fontWeight) {
+    mods.push(isLeaf ? `@textStyle(fontWeight = ${fontWeight})` : `@inheritTextStyle(fontWeight = ${fontWeight})`);
+  }
+
+  const width = merged.width;
+  const height = merged.height;
+  const minWidth = merged.minWidth;
+  const minHeight = merged.minHeight;
+  const maxWidth = merged.maxWidth;
+  const maxHeight = merged.maxHeight;
+  const margin = merged.margin;
+  const hasCenteringMargin = margin === '0 auto';
+
+  const needsFillWidth = width === '100%' || width === 'fill' || maxWidth === 'fill';
+  const needsFillHeight = height === '100%' || height === 'fill' || minHeight === '100vh';
+  const maxWidthPx = maxWidth === 'fill' ? null : (maxWidth !== undefined ? parsePx(maxWidth) : null);
+
+  // 2. Fill frame constraints — BEFORE background so bg fills the expanded area
+  let addedFillHeight = false;
+  if (needsFillWidth && needsFillHeight) {
+    if (maxWidthPx !== null) {
+      mods.push(`.widthIn(max = ${maxWidthPx}.dp).fillMaxHeight()`);
+    } else {
+      mods.push('.fillMaxWidth().fillMaxHeight()');
+    }
+    addedFillHeight = true;
+  } else if (needsFillWidth) {
+    if (maxWidthPx !== null) {
+      mods.push(`.widthIn(max = ${maxWidthPx}.dp)`);
+    } else {
+      mods.push('.fillMaxWidth()');
+    }
+  } else if (needsFillHeight) {
+    mods.push('.fillMaxHeight()');
+    addedFillHeight = true;
+  }
+
+  if (!addedFillHeight && minHeight === '100vh') {
+    mods.push('.fillMaxHeight()');
+  }
+
+  const radiusPx = parsePx(merged.radius ?? '');
+
+  // 3. Shadow (outermost decoration in Compose)
+  if (merged.shadow === true || merged.shadow === 'true') {
+    mods.push(`.shadow(elevation = 4.dp, shape = RoundedCornerShape(${radiusPx ?? 0}.dp), clip = false, ambientColor = Color.Black.copy(alpha = 0.08f), spotColor = Color.Black.copy(alpha = 0.08f))`);
+  }
+
+  // 4. Background
+  const background = merged.background;
+  if (typeof background === 'string' && background !== 'transparent') {
+    const color = composeColorExpr(background);
+    if (color && color !== 'Color.Transparent') {
+      mods.push(`.background(${color}, RoundedCornerShape(${radiusPx ?? 0}.dp))`);
+    }
+  }
+
+  // 5. Clip shape
+  const clipMode = merged.clip;
+  if (clipMode !== 'none' && radiusPx !== null) {
+    mods.push(`.clip(RoundedCornerShape(${radiusPx}.dp))`);
+  }
+
+  // 6. Border
+  const border = merged.border;
+  const borderColor = merged.borderColor;
+  if (border || borderColor) {
+    const borderWidth = parsePx(border ?? '1px') ?? 1;
+    const colorExpr = typeof borderColor === 'string' ? composeColorExpr(borderColor) ?? 'Color.Gray' : 'Color.Gray';
+    mods.push(`.border(${borderWidth}.dp, ${colorExpr}, RoundedCornerShape(${radiusPx ?? 0}.dp))`);
+  }
+
+  // 7. Non-fill frame constraints
+  if (!needsFillWidth) {
+    if (typeof width === 'number') {
+      mods.push(`.width(${width}.dp)`);
+    } else if (width !== undefined && width !== 'wrap') {
+      const px = parsePx(width);
+      if (px !== null) mods.push(`.width(${px}.dp)`);
+    }
+    if (typeof minWidth === 'number') {
+      mods.push(`.widthIn(min = ${minWidth}.dp)`);
+    } else if (minWidth !== undefined) {
+      const px = parsePx(minWidth);
+      if (px !== null) mods.push(`.widthIn(min = ${px}.dp)`);
+    }
+    if (maxWidth !== undefined && maxWidth !== 'fill') {
+      const px = parsePx(maxWidth);
+      if (px !== null) mods.push(`.widthIn(max = ${px}.dp)`);
+    }
+  }
+
+  if (!needsFillHeight) {
+    if (typeof height === 'number') {
+      mods.push(`.height(${height}.dp)`);
+    } else if (height !== undefined && height !== 'wrap') {
+      const px = parsePx(height);
+      if (px !== null) mods.push(`.height(${px}.dp)`);
+    }
+    if (minHeight !== undefined && minHeight !== '100vh') {
+      if (typeof minHeight === 'number') {
+        mods.push(`.heightIn(min = ${minHeight}.dp)`);
+      } else {
+        const px = parsePx(minHeight);
+        if (px !== null) mods.push(`.heightIn(min = ${px}.dp)`);
+      }
+    }
+    if (maxHeight !== undefined && maxHeight !== 'fill') {
+      const px = parsePx(maxHeight);
+      if (px !== null) mods.push(`.heightIn(max = ${px}.dp)`);
+    }
+  }
+
+  if (typeof merged.aspectRatio === 'number') {
+    mods.push(`.aspectRatio(${merged.aspectRatio}f)`);
+  }
+
+  if (typeof merged.weight === 'number') {
+    mods.push(`.weight(${merged.weight}f)`);
+  }
+
+  // 8. Padding (innermost in Compose)
+  const paddingRaw = merged.padding ?? '';
+  const paddingParsed = parsePaddingShorthand(paddingRaw);
+  if (paddingParsed) {
+    if (paddingParsed.kind === 'uniform') {
+      mods.push(`.padding(${paddingParsed.value}.dp)`);
+    } else {
+      mods.push(`.padding(horizontal = ${paddingParsed.horizontal}.dp, vertical = ${paddingParsed.vertical}.dp)`);
+    }
+  }
+
+  // 9. margin: 0 auto → center within parent
+  if (hasCenteringMargin) {
+    mods.push('@wrapContentCenter()');
+  } else if (typeof margin === 'number') {
+    mods.push(`.padding(${margin}.dp)`);
+  } else if (margin !== undefined && typeof margin === 'string') {
+    const px = parsePx(margin);
+    if (px !== null) mods.push(`.padding(${px}.dp)`);
+  }
+
+  // 8. Opacity
+  const opacity = merged.opacity;
+  if (typeof opacity === 'number' && opacity < 1) mods.push(`.alpha(${opacity}f)`);
+
+  // Text truncation / alignment (consumed by formatTextComposable or cellgroup)
+  const textAlign = composeTextAlign(merged.textAlign ?? '');
+  if (textAlign) mods.push(`@textAlign(${textAlign})`);
+
+  const lineLimit = merged.lineLimit;
+  if (lineLimit !== undefined && lineLimit !== 'none' && lineLimit !== '') {
+    const lines = typeof lineLimit === 'number' ? lineLimit : parsePx(lineLimit);
+    if (lines !== null) mods.push(`@textMaxLines(${lines})`);
+  }
+
+  const textOverflow = merged.textOverflow;
+  if (textOverflow === 'ellipsis') {
+    mods.push('@textOverflow(TextOverflow.Ellipsis)');
+  } else if (textOverflow === 'clip') {
+    mods.push('@textOverflow(TextOverflow.Clip)');
+  }
+
+  const selfAlign = composeSelfAlign(merged.selfAlign ?? '');
+  if (selfAlign) mods.push(`.align(${selfAlign})`);
+
+  return mods;
+}
+
+const NON_MODIFIER_TAGS = [
+  '@textStyle(',
+  '@contentColor(',
+  '@inheritTextStyle(',
+  '@wrapContentCenter()',
+  '@textMaxLines(',
+  '@textOverflow(',
+  '@textAlign(',
+  '@textFillMaxWidth()',
+];
+
+export function stripLayoutFrameModifiers(mods: string[]): string[] {
+  return mods.filter((m) =>
+    !m.includes('.width(')
+    && !m.includes('.widthIn(')
+    && !m.includes('.height(')
+    && !m.includes('.heightIn(')
+    && !m.includes('.weight(')
+    && m !== '.fillMaxWidth()'
+    && m !== '.fillMaxHeight()'
+    && !m.startsWith('.fillMaxWidth().')
+    && !m.endsWith('.fillMaxWidth()')
+    && !m.includes('.fillMaxHeight()'),
+  );
+}
+
+export function stripBackgroundModifiers(mods: string[]): string[] {
+  return mods.filter((m) => !m.includes('.background('));
+}
+
+export function stripPaddingModifiers(mods: string[]): string[] {
+  return mods.filter((m) => !m.includes('.padding('));
+}
+
+export function stripClipModifiers(mods: string[]): string[] {
+  return mods.filter((m) => !m.includes('.clip(RoundedCornerShape('));
+}
+
+export function extractPaddingModifiers(mods: string[]): string[] {
+  return mods.filter((m) => m.includes('.padding('));
+}
+
+export function extractClipRadiusDp(mods: string[]): number | null {
+  const clip = mods.find((m) => m.includes('.clip(RoundedCornerShape('));
+  const match = clip?.match(/RoundedCornerShape\((\d+)\.dp\)/);
+  return match ? Number(match[1]) : null;
+}
+
+/** Convert extracted `.padding(...)` modifiers to a Compose PaddingValues expression. */
+export function paddingModifiersToPaddingValues(mods: string[]): string | null {
+  if (mods.length === 0) return null;
+  const mod = mods[0]!;
+  const horizontalVertical = mod.match(/\.padding\(horizontal = (\d+)\.dp, vertical = (\d+)\.dp\)/);
+  if (horizontalVertical) {
+    return `PaddingValues(horizontal = ${horizontalVertical[1]}.dp, vertical = ${horizontalVertical[2]}.dp)`;
+  }
+  const uniform = mod.match(/\.padding\((\d+)\.dp\)/);
+  if (uniform) {
+    return `PaddingValues(${uniform[1]}.dp)`;
+  }
+  return null;
+}
+
+export function hasStyledContainerModifiers(mods: string[]): boolean {
+  return mods.some((m) => m.startsWith('@runtimeStyle(') || m.includes('.background('));
+}
+
+export function hasFillMaxHeight(modifiers: string[]): boolean {
+  return modifiers.some((m) => m.includes('.fillMaxHeight()'));
+}
+
+export function dedupeModifiers(mods: string[]): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const mod of mods) {
+    if (seen.has(mod)) continue;
+    seen.add(mod);
+    out.push(mod);
+  }
+  return out;
+}
+
+export function applyModifiers(base: string, modifiers: string[]): string {
+  if (modifiers.length === 0) return base;
+  return modifiers
+    .filter((m) => !NON_MODIFIER_TAGS.some((tag) => m.startsWith(tag) || m === tag))
+    .map((m) => (m.startsWith('@runtimeStyle(')
+      ? `.applyVcStyle(${m.replace(/^@runtimeStyle\(/, '').replace(/\)$/, '')})`
+      : m))
+    .reduce((acc, mod) => `${acc}${mod}`, base);
+}
+
+export function extractTextStyleModifiers(modifiers: string[]): string[] {
+  const parts = modifiers
+    .filter((m) => m.startsWith('@textStyle('))
+    .map((m) => m.replace(/^@textStyle\(/, '').replace(/\)$/, ''));
+  const textAlign = modifiers.find((m) => m.startsWith('@textAlign('));
+  if (textAlign) {
+    const value = textAlign.replace(/^@textAlign\(/, '').replace(/\)$/, '');
+    parts.push(`textAlign = ${value}`);
+  }
+  return parts;
+}
+
+export function extractTextMaxLines(modifiers: string[]): number | null {
+  const match = modifiers.find((m) => m.startsWith('@textMaxLines('));
+  if (!match) return null;
+  const value = match.replace(/^@textMaxLines\(/, '').replace(/\)$/, '');
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+export function extractTextOverflow(modifiers: string[]): string | null {
+  const match = modifiers.find((m) => m.startsWith('@textOverflow('));
+  if (!match) return null;
+  return match.replace(/^@textOverflow\(/, '').replace(/\)$/, '');
+}
+
+export function hasTextFillMaxWidth(modifiers: string[]): boolean {
+  return modifiers.includes('@textFillMaxWidth()');
+}
+
+export function extractContentColor(modifiers: string[]): string | null {
+  const match = modifiers.find((m) => m.startsWith('@contentColor('));
+  if (!match) return null;
+  return match.replace(/^@contentColor\(/, '').replace(/\)$/, '');
+}
+
+export function extractInheritedTextStyleParts(modifiers: string[]): string[] {
+  return modifiers
+    .filter((m) => m.startsWith('@inheritTextStyle('))
+    .map((m) => m.replace(/^@inheritTextStyle\(/, '').replace(/\)$/, ''));
+}
+
+export function hasWrapContentCenter(modifiers: string[]): boolean {
+  return modifiers.includes('@wrapContentCenter()');
+}
+
+export function extractApplyVcStyleExpr(modifierExpr: string): string | null {
+  const match = modifierExpr.match(/\.applyVcStyle\((VcTheme\.resolve\([^)]+\))\)/);
+  return match?.[1] ?? null;
+}

package/renderers/compose/properties.yaml

@@ -0,0 +1,34 @@
+# Compose-specific property lowering hints.
+# These rules are descriptive metadata for renderer maintenance.
+
+properties:
+  width:
+    lowering: modifier.fillMaxWidth | modifier.width
+  height:
+    lowering: modifier.fillMaxHeight | modifier.height
+  maxWidth:
+    lowering: modifier.widthIn(max)
+  minHeight:
+    lowering: modifier.heightIn(min)
+  padding:
+    lowering: modifier.padding
+  margin:
+    lowering: wrapper Box + contentAlignment
+  background:
+    lowering: modifier.background
+  foreground:
+    lowering: text color/style
+  radius:
+    lowering: rounded corner shape
+  border:
+    lowering: modifier.border
+  borderColor:
+    lowering: modifier.border color
+  shadow:
+    lowering: modifier.shadow
+  opacity:
+    lowering: modifier.alpha
+  fontSize:
+    lowering: TextStyle.fontSize
+  fontWeight:
+    lowering: TextStyle.fontWeight

package/renderers/compose/renderComponents.ts

@@ -0,0 +1,118 @@
+import type { ViewIrDocument } from '../../src/ir/types.js';
+import type { ThemeIR, TokenIR } from '../../src/design/types.js';
+import { loadComposeElementMap } from './elementMap.js';
+import { lowerIrToComposeBody, type ComposeRenderContext } from './lowering/lowerToCompose.js';
+
+export interface RenderComposeOptions {
+  theme: ThemeIR;
+  tokens: TokenIR;
+  allowlistExtra?: string[];
+  elementMapPath?: string;
+}
+
+function tsTypeToKotlin(type: string): string {
+  const arrayMatch = type.match(/^(\w+)\[\]$/);
+  if (arrayMatch) return `List<${tsTypeToKotlin(arrayMatch[1]!)}>`;
+  if (type === 'string') return 'String';
+  if (type === 'number') return 'Double';
+  if (type === 'boolean') return 'Boolean';
+  return type;
+}
+
+function partialPropsSignature(doc: ViewIrDocument): string {
+  if (!doc.propsType) return '';
+  const match = doc.propsType.match(/^\{\s*([^}]+)\s*\}$/);
+  if (!match) return `props: ${doc.propsType}`;
+  const inner = match[1].trim();
+  return inner.split(',').map((part) => {
+    const colon = part.indexOf(':');
+    const name = colon >= 0 ? part.slice(0, colon).trim() : part.trim();
+    const rawType = colon >= 0 ? part.slice(colon + 1).trim() : 'Any';
+    const type = tsTypeToKotlin(rawType);
+    return `${name}: ${type}`;
+  }).join(', ');
+}
+
+function propsRootFromDoc(doc: ViewIrDocument): string | undefined {
+  if (!doc.propsType) return undefined;
+  const match = doc.propsType.match(/^\{\s*([^}]+)\s*\}$/);
+  if (!match) return undefined;
+  const first = match[1].split(',')[0]!.split(':')[0]!.trim();
+  return first;
+}
+
+export async function renderComposeComponent(
+  doc: ViewIrDocument,
+  options: RenderComposeOptions,
+): Promise<string> {
+  const map = await loadComposeElementMap(options.elementMapPath);
+  const allowlistExtra = options.allowlistExtra ?? [];
+  const functionName = doc.isPartial ? doc.exportName : `${doc.exportName.replace(/View$/, '') || doc.exportName}Screen`;
+
+  const ctx: ComposeRenderContext = {
+    map,
+    theme: options.theme,
+    tokens: options.tokens,
+    allowlistExtra,
+    propsRoot: propsRootFromDoc(doc),
+  };
+
+  const body = lowerIrToComposeBody(doc.root, ctx, 2);
+  const params = doc.isPartial
+    ? partialPropsSignature(doc)
+    : (doc.viewModel ? `vm: ${doc.viewModel}` : '');
+
+  const packageName = 'generated.compose';
+
+  return `/**
+ * Auto-generated Compose view from ${doc.source}
+ * DO NOT EDIT — generated by view-contracts.
+ */
+@file:OptIn(ExperimentalLayoutApi::class)
+
+package ${packageName}
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items as gridItems
+import androidx.compose.foundation.lazy.items as lazyItems
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowDropDown
+import androidx.compose.material.icons.filled.Image
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import generated.compose.components.*
+import generated.compose.VcButton
+import generated.compose.VcTheme
+import generated.compose.applyVcStyle
+import generated.compose.asTextStyle
+
+@Composable
+fun ${functionName}(${params}) {
+${body}
+}
+`;
+}