view-contracts 0.4.0 → 0.4.1

package/renderers/swiftui/lowering/modifiers.ts

@@ -49,6 +49,10 @@ function swiftFontWeight(value: string | number | boolean): string | null {
     semibold: '.fontWeight(.semibold)',
     medium: '.fontWeight(.medium)',
     regular: '.fontWeight(.regular)',
+    '700': '.fontWeight(.bold)',
+    '600': '.fontWeight(.semibold)',
+    '500': '.fontWeight(.medium)',
+    '400': '.fontWeight(.regular)',
   };
   return map[value] ?? null;
 }
@@ -56,8 +60,15 @@ function swiftFontWeight(value: string | number | boolean): string | null {
 /**
  * Convert merged DSL visual props to a single SwiftUI modifier chain.
  *
- * Correct SwiftUI order:
+ * SwiftUI modifier order for fill elements:
+ *   foreground / font → padding → frame(fill) → background → clipShape → shadow → overlay → frame(fixed) → opacity
+ *
+ * For non-fill elements:
  *   foreground / font → padding → background → clipShape → shadow → overlay → frame → opacity
+ *
+ * The key insight: .frame(maxWidth: .infinity) MUST come BEFORE .background()
+ * so the background fills the expanded area. Otherwise the background only
+ * covers the natural content width.
  */
 export function visualPropSetToModifiers(merged: VisualPropSet): string[] {
   const modifiers: string[] = [];
@@ -90,7 +101,43 @@ export function visualPropSetToModifiers(merged: VisualPropSet): string[] {
     }
   }
 
-  // 3. Background (fills the padded area)
+  // Pre-compute frame/size values needed to determine fill vs fixed
+  const width = merged.width;
+  const height = merged.height;
+  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';
+
+  // 2.5. Fill frame constraints — BEFORE background so bg fills the expanded area
+  // alignment: .leading/.top/.topLeading ensures content stays at top-left (matching CSS block behavior)
+  const maxWidthPx = maxWidth === 'fill' ? null : (maxWidth !== undefined ? parsePx(maxWidth) : null);
+
+  if (needsFillWidth && needsFillHeight) {
+    if (maxWidthPx !== null) {
+      modifiers.push(`.frame(maxWidth: ${maxWidthPx}, maxHeight: .infinity, alignment: .topLeading)`);
+    } else {
+      modifiers.push('.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)');
+    }
+  } else if (needsFillWidth) {
+    if (maxWidthPx !== null) {
+      modifiers.push(`.frame(maxWidth: ${maxWidthPx}, alignment: .leading)`);
+    } else {
+      modifiers.push('.frame(maxWidth: .infinity, alignment: .leading)');
+    }
+  } else if (needsFillHeight) {
+    modifiers.push('.frame(maxHeight: .infinity, alignment: .top)');
+  }
+
+  if (!needsFillHeight && minHeight === '100vh') {
+    modifiers.push('.frame(maxHeight: .infinity, alignment: .top)');
+  }
+
+  // 3. Background (fills the frame area — now expanded for fill elements)
   const background = merged.background;
   if (typeof background === 'string' && background !== 'transparent') {
     const color = parseHexColor(background);
@@ -115,17 +162,49 @@ export function visualPropSetToModifiers(merged: VisualPropSet): string[] {
     modifiers.push(`.overlay(RoundedRectangle(cornerRadius: ${radius ?? 0}).stroke(${colorExpr}, lineWidth: ${borderWidth}))`);
   }
 
-  // 7. Frame constraints
-  const minHeight = merged.minHeight;
-  if (minHeight !== undefined) {
-    const px = parsePx(minHeight);
-    if (px !== null) modifiers.push(`.frame(minHeight: ${px})`);
+  // 7. Non-fill frame constraints (fixed sizes, maxWidth cap without fill)
+  if (!needsFillWidth) {
+    if (typeof width === 'number') {
+      modifiers.push(`.frame(width: ${width})`);
+    } else if (width !== undefined && width !== 'wrap') {
+      const px = parsePx(width);
+      if (px !== null) modifiers.push(`.frame(width: ${px})`);
+    }
+    if (maxWidth !== undefined && maxWidth !== 'fill') {
+      const px = parsePx(maxWidth);
+      if (px !== null) modifiers.push(`.frame(maxWidth: ${px})`);
+    }
   }
 
-  const maxWidth = merged.maxWidth;
-  if (maxWidth !== undefined) {
-    const px = parsePx(maxWidth);
-    if (px !== null) modifiers.push(`.frame(maxWidth: ${px})`);
+  if (!needsFillHeight) {
+    if (typeof height === 'number') {
+      modifiers.push(`.frame(height: ${height})`);
+    } else if (height !== undefined && height !== 'wrap') {
+      const px = parsePx(height);
+      if (px !== null) modifiers.push(`.frame(height: ${px})`);
+    }
+    if (minHeight !== undefined && minHeight !== '100vh') {
+      if (typeof minHeight === 'number') {
+        modifiers.push(`.frame(minHeight: ${minHeight})`);
+      } else {
+        const px = parsePx(minHeight);
+        if (px !== null) modifiers.push(`.frame(minHeight: ${px})`);
+      }
+    }
+    if (maxHeight !== undefined && maxHeight !== 'fill') {
+      const px = parsePx(maxHeight);
+      if (px !== null) modifiers.push(`.frame(maxHeight: ${px})`);
+    }
+  }
+
+  // margin: 0 auto → center within parent by expanding outer frame (positioning, not sizing)
+  if (hasCenteringMargin) {
+    modifiers.push('.frame(maxWidth: .infinity, alignment: .center)');
+  } else if (typeof margin === 'number') {
+    modifiers.push(`.padding(${margin})`);
+  } else if (margin !== undefined) {
+    const px = parsePx(margin);
+    if (px !== null) modifiers.push(`.padding(${px})`);
   }
 
   // 8. Opacity (last — affects everything)

package/renderers/swiftui/renderRuntime.ts

@@ -9,6 +9,51 @@ import { renderSwiftTheme } from './renderTheme.js';
 import { renderSwiftComponent } from './renderComponents.js';
 import { loadPreviewMockYaml, previewMockFilePath, pathExists } from '../../src/preview/previewMock.js';
 
+const FLOW_LAYOUT_SWIFT = `import SwiftUI
+
+/// CSS flex-wrap equivalent: wraps children to next line when horizontal space runs out.
+struct FlowLayout: Layout {
+    var spacing: CGFloat = 8
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        let containerWidth = proposal.width ?? .infinity
+        var x: CGFloat = 0
+        var y: CGFloat = 0
+        var rowHeight: CGFloat = 0
+
+        for subview in subviews {
+            let size = subview.sizeThatFits(.unspecified)
+            if x + size.width > containerWidth && x > 0 {
+                y += rowHeight + spacing
+                x = 0
+                rowHeight = 0
+            }
+            x += size.width + spacing
+            rowHeight = max(rowHeight, size.height)
+        }
+        return CGSize(width: containerWidth, height: y + rowHeight)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        var x = bounds.minX
+        var y = bounds.minY
+        var rowHeight: CGFloat = 0
+
+        for subview in subviews {
+            let size = subview.sizeThatFits(.unspecified)
+            if x + size.width > bounds.maxX && x > bounds.minX {
+                y += rowHeight + spacing
+                x = bounds.minX
+                rowHeight = 0
+            }
+            subview.place(at: CGPoint(x: x, y: y), proposal: ProposedViewSize(size))
+            x += size.width + spacing
+            rowHeight = max(rowHeight, size.height)
+        }
+    }
+}
+`;
+
 function swiftuiTemplatesDir(): string {
   return resolve(packageRoot(), 'renderers/swiftui/templates');
 }
@@ -33,6 +78,9 @@ export async function renderSwiftUIRuntime(
     );
   }
 
+  // FlowLayout helper (CSS flex-wrap equivalent)
+  await writeFile(resolve(swiftuiDir, 'FlowLayout.swift'), FLOW_LAYOUT_SWIFT, 'utf-8');
+
   if (compiledDocs && design) {
     for (const partial of compiledDocs.partials) {
       try {

package/renderers/swiftui/renderTheme.ts

@@ -72,8 +72,39 @@ function resolveVariantEntries(
       case 'radius':
       case 'fontSize':
       case 'minHeight':
-      case 'maxWidth':
-      case 'width':
+      case 'maxWidth': {
+        const px = parsePx(value);
+        if (px !== null) entries.push({ property, swiftValue: String(px) });
+        break;
+      }
+      case 'width': {
+        if (value === '100%' || value === 'fill') {
+          entries.push({ property: 'widthFill', swiftValue: 'true' });
+        } else {
+          const px = parsePx(value);
+          if (px !== null) entries.push({ property, swiftValue: String(px) });
+        }
+        break;
+      }
+      case 'height': {
+        if (value === '100%' || value === 'fill') {
+          entries.push({ property: 'heightFill', swiftValue: 'true' });
+        } else {
+          const px = parsePx(value);
+          if (px !== null) entries.push({ property, swiftValue: String(px) });
+        }
+        break;
+      }
+      case 'border': {
+        const match = value.match(/^([\d.]+)px/);
+        if (match) entries.push({ property: 'borderWidth', swiftValue: String(Number(match[1])) });
+        break;
+      }
+      case 'borderColor': {
+        const color = swiftColorLiteral(value);
+        if (color) entries.push({ property: 'borderColor', swiftValue: color });
+        break;
+      }
       case 'margin': {
         const px = parsePx(value);
         if (px !== null) entries.push({ property, swiftValue: String(px) });
@@ -88,14 +119,27 @@ function resolveVariantEntries(
         entries.push({ property, swiftValue: value === 'true' || value === 'none' ? 'false' : 'true' });
         break;
       }
+      case 'display':
+      case 'flexDirection':
+      case 'gridTemplateColumns':
+      case 'alignItems':
+      case 'justifyContent':
+      case 'typography':
+        // Consumed at compile time by lowerToSwiftUI.ts (container type / alignment selection).
+        // Not representable as a runtime VcVariantStyle field.
+        break;
       default:
+        console.warn(
+          `[view-contracts] SwiftUI theme: variant property "${property}" is not handled ` +
+          `(value: "${value}"). Add a case to renderTheme.ts resolveVariantEntries().`,
+        );
         break;
     }
   }
   return entries;
 }
 
-const STRUCT_FIELD_ORDER = ['foreground', 'background', 'padding', 'paddingH', 'paddingV', 'radius', 'fontSize', 'fontWeight', 'shadow', 'minHeight', 'maxWidth'];
+const STRUCT_FIELD_ORDER = ['foreground', 'background', 'padding', 'paddingH', 'paddingV', 'widthFill', 'heightFill', 'radius', 'fontSize', 'fontWeight', 'shadow', 'borderWidth', 'borderColor', 'minHeight', 'maxWidth'];
 
 function emitVariantStyleInit(entries: ResolvedEntry[], indent: string): string {
   if (entries.length === 0) return `${indent}VcVariantStyle()`;
@@ -133,16 +177,21 @@ export function renderSwiftTheme(theme: ThemeIR, tokens: TokenIR): string {
   lines.push(`    var padding: CGFloat?`);
   lines.push(`    var paddingH: CGFloat?`);
   lines.push(`    var paddingV: CGFloat?`);
+  lines.push(`    var widthFill: Bool?`);
+  lines.push(`    var heightFill: Bool?`);
   lines.push(`    var radius: CGFloat?`);
   lines.push(`    var fontSize: CGFloat?`);
   lines.push(`    var fontWeight: Font.Weight?`);
   lines.push(`    var shadow: Bool?`);
+  lines.push(`    var borderWidth: CGFloat?`);
+  lines.push(`    var borderColor: Color?`);
   lines.push(`    var minHeight: CGFloat?`);
   lines.push(`    var maxWidth: CGFloat?`);
   lines.push(`}`);
   lines.push(``);
 
   // Nil-transparent: only apply properties the style actually defines.
+  // frame(maxWidth/maxHeight: .infinity) MUST come BEFORE background so bg fills expanded area.
   lines.push(`extension View {`);
   lines.push(`    func applyVcStyle(_ s: VcVariantStyle) -> some View {`);
   lines.push(`        self`);
@@ -151,14 +200,31 @@ export function renderSwiftTheme(theme: ThemeIR, tokens: TokenIR): string {
   lines.push(`            .ifSet(s.padding) { $0.padding($1) }`);
   lines.push(`            .ifSet(s.paddingH) { $0.padding(.horizontal, $1) }`);
   lines.push(`            .ifSet(s.paddingV) { $0.padding(.vertical, $1) }`);
+  lines.push(`            .vcFillFrame(widthFill: s.widthFill ?? false, heightFill: s.heightFill ?? false)`);
   lines.push(`            .ifSet(s.background) { $0.background($1) }`);
   lines.push(`            .ifSet(s.radius) { $0.clipShape(RoundedRectangle(cornerRadius: $1)) }`);
+  lines.push(`            .ifSet(s.borderColor) { $0.overlay(RoundedRectangle(cornerRadius: s.radius ?? 0).stroke($1, lineWidth: s.borderWidth ?? 1)) }`);
   lines.push(`            .ifSet(s.shadow) { v, on in on ? AnyView(v.shadow(color: Color.black.opacity(0.08), radius: 4, x: 0, y: 2)) : AnyView(v) }`);
   lines.push(`    }`);
   lines.push(`}`);
   lines.push(``);
   lines.push(`extension View {`);
   lines.push(`    @ViewBuilder`);
+  lines.push(`    func vcFillFrame(widthFill: Bool, heightFill: Bool) -> some View {`);
+  lines.push(`        if widthFill && heightFill {`);
+  lines.push(`            self.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)`);
+  lines.push(`        } else if widthFill {`);
+  lines.push(`            self.frame(maxWidth: .infinity, alignment: .leading)`);
+  lines.push(`        } else if heightFill {`);
+  lines.push(`            self.frame(maxHeight: .infinity, alignment: .top)`);
+  lines.push(`        } else {`);
+  lines.push(`            self`);
+  lines.push(`        }`);
+  lines.push(`    }`);
+  lines.push(`}`);
+  lines.push(``);
+  lines.push(`extension View {`);
+  lines.push(`    @ViewBuilder`);
   lines.push(`    func ifSet<T, V: View>(_ value: T?, _ transform: (Self, T) -> V) -> some View {`);
   lines.push(`        if let value { transform(self, value) } else { self }`);
   lines.push(`    }`);

package/renderers/react/runtime/theme.css

@@ -1,57 +0,0 @@
-* { box-sizing: border-box; }
-body { margin: 0; background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); }
-button, input, textarea, select { font: inherit; }
-
-.vc-page { min-height: 100vh; }
-.vc-box { display: block; }
-.vc-column { display: flex; flex-direction: column; }
-.vc-stack { display: flex; flex-direction: column; }
-.vc-row { display: flex; flex-direction: row; }
-.vc-wrap { flex-wrap: wrap; }
-.vc-spacer { min-width: 0; min-height: 0; }
-.vc-divider { border: 0; border-top: 1px solid var(--ui-border); width: 100%; }
-
-.vc-heading { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
-.vc-heading-1 { font-size: 32px; }
-.vc-heading-2 { font-size: 22px; }
-.vc-heading-3 { font-size: 18px; }
-.vc-heading-4 { font-size: 15px; }
-.vc-text { margin: 0; line-height: 1.6; }
-.vc-link { color: var(--ui-primary); text-decoration: none; }
-.vc-link:hover { text-decoration: underline; }
-
-.vc-button { border: 0; cursor: pointer; }
-
-.vc-form { display: flex; flex-direction: column; }
-.vc-field { display: flex; flex-direction: column; gap: 6px; }
-.vc-field-label { font-size: 13px; font-weight: 700; color: var(--ui-text); }
-.vc-field-help { font-size: 12px; color: var(--ui-text-muted); }
-.vc-field-error { font-size: 12px; color: var(--ui-danger); }
-.vc-text-input, .vc-text-area { width: 100%; outline: none; }
-.vc-text-input:focus, .vc-text-area:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
-.vc-field-sm { min-height: 34px; padding: 6px 10px; }
-.vc-field-md { min-height: 42px; }
-.vc-field-lg { min-height: 50px; padding: 12px 14px; }
-.vc-select {
-  width: 100%;
-  outline: none;
-  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-select:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
-.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; }
-.vc-table-header { display: flex; background: var(--ui-surface-muted, #f8f9fa); }
-.vc-table-column { text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 600; color: var(--ui-text-muted, #6b7280); 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, #e5e7eb); }
-.vc-table-cell { padding: 14px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }