view-contracts 0.5.2 → 0.5.4

package/docs/cli-reference.md

@@ -2,7 +2,7 @@
 
 Contract-first UI design toolchain. Compiles restricted view-contract TSX to language-neutral View IR and renders platform targets (React, SwiftUI, Compose).
 
-**Version:** 0.5.2
+**Version:** 0.5.3
 
 ## Table of Contents
 

package/package.json

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

package/renderers/compose/lowering/lowerToCompose.ts

@@ -24,6 +24,7 @@ import {
   extractClipRadiusDp,
   extractPaddingModifiers,
   extractTextMaxLines,
+  composeRowArrangement,
   extractTextOverflow,
   extractTextStyleModifiers,
   hasFillMaxHeight,
@@ -429,11 +430,51 @@ function renderStyledBox(
   ].join('\n');
 }
 
+function isInlineDisplayVariant(
+  elementName: string,
+  variantLit: string,
+  ctx: ComposeRenderContext,
+): boolean {
+  const merged = mergeVisualProps({
+    elementName,
+    theme: ctx.theme,
+    tokens: ctx.tokens,
+    variantLiteral: variantLit,
+    instanceLiterals: {},
+  });
+  const display = merged.display;
+  return typeof display === 'string' && display.includes('inline');
+}
+
+function isShrinkWrapStyledText(
+  props: Record<string, IrValue>,
+  ctx: ComposeRenderContext,
+  itemScope?: string,
+): boolean {
+  if (ctx.cellTextBehavior) return true;
+  const variantLit = propLiteral(props, 'variant');
+  if (typeof variantLit === 'string') {
+    return isInlineDisplayVariant('Text', variantLit, ctx);
+  }
+  if (isDynamicVariant(props)) {
+    const v = props.variant;
+    if (typeof v === 'object' && v !== null && 'kind' in v && v.kind === 'concat') {
+      const concat = v as IrConcat;
+      const first = concat.parts[0];
+      if (first === 'badge-') return true;
+      if (typeof first === 'string' && first.startsWith('badge-')) return true;
+    }
+  }
+  return false;
+}
+
 function formatTextComposable(
   pad: string,
   content: string,
   modifiers: string[],
   ctx: ComposeRenderContext,
+  textProps?: Record<string, IrValue>,
+  itemScope?: string,
 ): string {
   const paddingMods = extractPaddingModifiers(modifiers);
   const runtimeStyleExpr = extractApplyVcStyleExpr(applyModifiers('Modifier', modifiers));
@@ -464,7 +505,8 @@ function formatTextComposable(
   const textLine = `${pad}  Text(text = ${content}${maxLinesParam}${overflowParam}${styleParam})`;
 
   if (runtimeStyleExpr) {
-    const styleBase = ctx.cellTextBehavior ? 'Modifier' : 'Modifier.fillMaxWidth()';
+    const shrinkWrap = textProps ? isShrinkWrapStyledText(textProps, ctx, itemScope) : ctx.cellTextBehavior === true;
+    const styleBase = shrinkWrap ? 'Modifier' : 'Modifier.fillMaxWidth()';
     const styleModifier = `${styleBase}.applyVcStyle(${runtimeStyleExpr})`;
     if (paddingMods.length > 0) {
       const outerModifier = applyModifiers(modifierBase, [...layoutMods, ...paddingMods]);
@@ -670,7 +712,7 @@ function renderLeaf(
 
   if (entry.leaf === 'text') {
     const content = renderTextContent(node.children, ctx, itemScope) ?? '""';
-    return formatTextComposable(pad, content, modifiers, ctx);
+    return formatTextComposable(pad, content, modifiers, ctx, node.props, itemScope);
   }
   if (entry.leaf === 'button') {
     return renderVcButton(node, level, itemScope, ctx, modifiers);
@@ -763,7 +805,9 @@ function renderLeaf(
     return `${pad}Spacer(modifier = ${modifierExpr})`;
   }
   if (entry.leaf === 'divider') {
-    return `${pad}HorizontalDivider(modifier = ${modifierExpr})`;
+    const axisLit = propLiteral(node.props, 'axis');
+    const divider = axisLit === 'vertical' ? 'VerticalDivider' : 'HorizontalDivider';
+    return `${pad}${divider}(modifier = ${modifierExpr})`;
   }
   if (entry.leaf === 'image') {
     const src = propLiteral(node.props, 'src') ?? propLiteral(node.props, 'name');
@@ -814,13 +858,7 @@ function renderContainer(
     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 arrangement = composeRowArrangement(justifyLit, spacing);
     const alignLit = propLiteral(node.props, 'align');
     const alignItemsLit = propLiteral(node.props, 'alignItems');
     const heightLit = propLiteral(node.props, 'height');
@@ -848,7 +886,7 @@ function renderContainer(
     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') {
+    if (wrapLit === true && justifyLit !== 'between' && justifyLit !== 'spaceBetween') {
       return [
         `${indent(level)}FlowRow(modifier = ${rowModifier}, horizontalArrangement = Arrangement.spacedBy(${spacing}), verticalArrangement = Arrangement.spacedBy(${spacing})) {`,
         childContent,
@@ -987,6 +1025,8 @@ function renderContainer(
           JSON.stringify((child as IrTextNode).value),
           dedupeModifiers([...cellTextBehaviorMods(), `@textAlign(${textAlign})`, ...paddingMods, ...inheritedMods.map((m) => m)]),
           ctx,
+          undefined,
+          itemScope,
         );
       }
       if (child.kind === 'binding') {
@@ -995,6 +1035,8 @@ function renderContainer(
           bindingExpr(child as IrBinding, ctx, itemScope),
           dedupeModifiers([...cellTextBehaviorMods(), `@textAlign(${textAlign})`, ...paddingMods, ...inheritedMods.map((m) => m)]),
           ctx,
+          undefined,
+          itemScope,
         );
       }
       return renderNested(child, level + 1, itemScope);

package/renderers/compose/lowering/modifiers.ts

@@ -85,6 +85,16 @@ function composeSelfAlign(value: string | number | boolean): string | null {
   return map[value] ?? null;
 }
 
+/** Map DSL justify enum to Compose Row horizontalArrangement (accepts schema + legacy aliases). */
+export function composeRowArrangement(justifyLit: unknown, spacing: string): string {
+  if (justifyLit === 'between' || justifyLit === 'spaceBetween') return 'Arrangement.SpaceBetween';
+  if (justifyLit === 'around' || justifyLit === 'spaceAround') return 'Arrangement.SpaceAround';
+  if (justifyLit === 'spaceEvenly') return 'Arrangement.SpaceEvenly';
+  if (justifyLit === 'end') return 'Arrangement.End';
+  if (justifyLit === 'center') return 'Arrangement.Center';
+  return `Arrangement.spacedBy(${spacing})`;
+}
+
 export function composeContentAlignment(value: string): string {
   const map: Record<string, string> = {
     topStart: 'Alignment.TopStart',

package/renderers/compose/renderTheme.ts

@@ -89,7 +89,10 @@ function resolveVariantEntries(
       case 'minHeight':
       case 'maxWidth': {
         const px = parsePx(value);
-        if (px !== null) entries.push({ property, kotlinValue: `${px}.dp` });
+        if (px !== null) {
+          const kotlinValue = property === 'fontSize' ? `${px}.sp` : `${px}.dp`;
+          entries.push({ property, kotlinValue });
+        }
         break;
       }
       case 'width': {
@@ -127,6 +130,12 @@ function resolveVariantEntries(
         entries.push({ property, kotlinValue: value === 'none' ? 'false' : 'true' });
         break;
       }
+      case 'display': {
+        if (value.includes('inline')) {
+          entries.push({ property: 'shrinkWrap', kotlinValue: 'true' });
+        }
+        break;
+      }
       default:
         break;
     }
@@ -135,13 +144,21 @@ function resolveVariantEntries(
 }
 
 const STRUCT_FIELD_ORDER = [
-  'foreground', 'background', 'padding', 'paddingH', 'paddingV', 'widthFill', 'heightFill',
+  'foreground', 'background', 'padding', 'paddingH', 'paddingV', 'widthFill', 'heightFill', 'shrinkWrap',
   'radius', 'fontSize', 'fontWeight', 'shadow', 'borderWidth', 'borderColor', 'minHeight', 'maxWidth',
 ];
 
+function finalizeVariantEntries(entries: ResolvedEntry[]): ResolvedEntry[] {
+  if (entries.some((entry) => entry.property === 'shrinkWrap')) {
+    return entries.filter((entry) => entry.property !== 'widthFill');
+  }
+  return entries;
+}
+
 function emitVariantStyleInit(entries: ResolvedEntry[]): string {
-  if (entries.length === 0) return 'VcVariantStyle()';
-  const sorted = [...entries].sort(
+  const finalized = finalizeVariantEntries(entries);
+  if (finalized.length === 0) return 'VcVariantStyle()';
+  const sorted = [...finalized].sort(
     (a, b) => STRUCT_FIELD_ORDER.indexOf(a.property) - STRUCT_FIELD_ORDER.indexOf(b.property),
   );
   return `VcVariantStyle(${sorted.map((e) => `${e.property} = ${e.kotlinValue}`).join(', ')})`;
@@ -183,6 +200,7 @@ export function renderComposeTheme(theme: ThemeIR, tokens: TokenIR): string {
   lines.push('import androidx.compose.ui.text.TextStyle');
   lines.push('import androidx.compose.ui.text.font.FontWeight');
   lines.push('import androidx.compose.ui.unit.Dp');
+  lines.push('import androidx.compose.ui.unit.TextUnit');
   lines.push('import androidx.compose.ui.unit.dp');
   lines.push('import androidx.compose.ui.unit.sp');
   lines.push('');
@@ -194,8 +212,9 @@ export function renderComposeTheme(theme: ThemeIR, tokens: TokenIR): string {
   lines.push('  val paddingV: Dp? = null,');
   lines.push('  val widthFill: Boolean? = null,');
   lines.push('  val heightFill: Boolean? = null,');
+  lines.push('  val shrinkWrap: Boolean? = null,');
   lines.push('  val radius: Dp? = null,');
-  lines.push('  val fontSize: Dp? = null,');
+  lines.push('  val fontSize: TextUnit? = null,');
   lines.push('  val fontWeight: FontWeight? = null,');
   lines.push('  val shadow: Boolean? = null,');
   lines.push('  val borderWidth: Dp? = null,');
@@ -207,7 +226,7 @@ export function renderComposeTheme(theme: ThemeIR, tokens: TokenIR): string {
   lines.push('fun VcVariantStyle.asTextStyle(): TextStyle {');
   lines.push('  var style = TextStyle()');
   lines.push('  foreground?.let { style = style.copy(color = it) }');
-  lines.push('  fontSize?.let { style = style.copy(fontSize = it.value.sp) }');
+  lines.push('  fontSize?.let { style = style.copy(fontSize = it) }');
   lines.push('  fontWeight?.let { style = style.copy(fontWeight = it) }');
   lines.push('  return style');
   lines.push('}');
@@ -223,7 +242,7 @@ export function renderComposeTheme(theme: ThemeIR, tokens: TokenIR): string {
   lines.push('');
   lines.push('fun Modifier.applyVcStyle(style: VcVariantStyle): Modifier {');
   lines.push('  var out = this');
-  lines.push('  if (style.widthFill == true) out = out.fillMaxWidth()');
+  lines.push('  if (style.widthFill == true && style.shrinkWrap != true) out = out.fillMaxWidth()');
   lines.push('  if (style.heightFill == true) out = out.fillMaxHeight()');
   lines.push('  if (style.shadow == true) out = out.then(vcSoftShadowModifier(style.radius ?: 0.dp))');
   lines.push('  style.background?.let { out = out.background(it, RoundedCornerShape(style.radius ?: 0.dp)) }');

package/renderers/react/lowering/lowerToJsx.ts

@@ -109,19 +109,19 @@ function actionHandler(props: Record<string, IrValue>, event: 'onClick' | 'onSub
   return `onClick={() => { void dispatchAction(${expr}); }}`;
 }
 
-function onChangeHandler(props: Record<string, IrValue>): string | undefined {
+function onChangeHandler(props: Record<string, IrValue>, targetProp = 'e.target.value'): string | undefined {
   const onChange = props.onChange;
   if (!onChange || typeof onChange !== 'object' || !('kind' in onChange) || onChange.kind !== 'action') {
     return undefined;
   }
   const action = onChange as IrAction;
   if (!action.params || Object.keys(action.params).length === 0) {
-    return `onChange={(e) => { void dispatchAction({ name: ${JSON.stringify(action.name)}, params: { value: e.target.value } } as ActionDescriptor); }}`;
+    return `onChange={(e) => { void dispatchAction({ name: ${JSON.stringify(action.name)}, params: { value: ${targetProp} } } as ActionDescriptor); }}`;
   }
   const existingParams = Object.entries(action.params)
     .map(([key, val]) => `${key}: ${renderValue(val, 0)}`)
     .join(', ');
-  return `onChange={(e) => { void dispatchAction({ name: ${JSON.stringify(action.name)}, params: { ${existingParams}, value: e.target.value } } as ActionDescriptor); }}`;
+  return `onChange={(e) => { void dispatchAction({ name: ${JSON.stringify(action.name)}, params: { ${existingParams}, value: ${targetProp} } } as ActionDescriptor); }}`;
 }
 
 function componentToKebab(name: string): string {
@@ -197,10 +197,13 @@ function emitFieldWrap(inner: string, props: Record<string, IrValue>, level: num
 function emitCheckbox(props: Record<string, IrValue>, level: number): string {
   const name = propExpr(props, 'name') ?? '""';
   const label = propExpr(props, 'label') ?? '""';
-  const checked = props.checked ? `defaultChecked={${propExpr(props, 'checked')}}` : '';
   const disabled = props.enabled ? `disabled={${propExpr(props, 'enabled')} === false}` : '';
+  const changeAttr = onChangeHandler(props, 'e.target.checked') ?? '';
+  const checkedAttr = props.checked
+    ? (changeAttr ? `checked={${propExpr(props, 'checked')}}` : `defaultChecked={${propExpr(props, 'checked')}}`)
+    : '';
   return `${indent(level)}<label className="vc-checkbox">
-${indent(level + 1)}<input type="checkbox" name={${name}} ${checked} ${disabled} />
+${indent(level + 1)}<input type="checkbox" name={${name}} ${checkedAttr} ${disabled} ${changeAttr} />
 ${indent(level + 1)}<span>{${label}}</span>
 ${indent(level)}</label>`;
 }
@@ -209,10 +212,13 @@ function emitRadio(props: Record<string, IrValue>, level: number): string {
   const name = propExpr(props, 'binding') ?? propExpr(props, 'name') ?? '""';
   const value = propExpr(props, 'value') ?? '""';
   const label = propExpr(props, 'label') ?? '""';
-  const checked = props.checked ? `defaultChecked={${propExpr(props, 'checked')}}` : '';
   const disabled = props.enabled ? `disabled={${propExpr(props, 'enabled')} === false}` : '';
+  const changeAttr = onChangeHandler(props, 'e.target.value') ?? '';
+  const checkedAttr = props.checked
+    ? (changeAttr ? `checked={${propExpr(props, 'checked')}}` : `defaultChecked={${propExpr(props, 'checked')}}`)
+    : '';
   return `${indent(level)}<label className="vc-radio">
-${indent(level + 1)}<input type="radio" name={${name}} value={${value}} ${checked} ${disabled} />
+${indent(level + 1)}<input type="radio" name={${name}} value={${value}} ${checkedAttr} ${disabled} ${changeAttr} />
 ${indent(level + 1)}<span>{${label}}</span>
 ${indent(level)}</label>`;
 }
@@ -220,10 +226,13 @@ ${indent(level)}</label>`;
 function emitSwitch(props: Record<string, IrValue>, level: number): string {
   const name = propExpr(props, 'binding') ?? propExpr(props, 'name') ?? '""';
   const label = propExpr(props, 'label') ?? '""';
-  const checked = props.checked ? `defaultChecked={${propExpr(props, 'checked')}}` : '';
   const disabled = props.enabled ? `disabled={${propExpr(props, 'enabled')} === false}` : '';
+  const changeAttr = onChangeHandler(props, 'e.target.checked') ?? '';
+  const checkedAttr = props.checked
+    ? (changeAttr ? `checked={${propExpr(props, 'checked')}}` : `defaultChecked={${propExpr(props, 'checked')}}`)
+    : '';
   return `${indent(level)}<label className="vc-switch">
-${indent(level + 1)}<input type="checkbox" role="switch" name={${name}} ${checked} ${disabled} />
+${indent(level + 1)}<input type="checkbox" role="switch" name={${name}} ${checkedAttr} ${disabled} ${changeAttr} />
 ${indent(level + 1)}<span>{${label}}</span>
 ${indent(level)}</label>`;
 }
@@ -282,7 +291,7 @@ function emitVoidInput(
   }
   if (props.name) attrs.push(`name={${propExpr(props, 'name')}}`);
   if (props.placeholder) attrs.push(`placeholder={${propExpr(props, 'placeholder')}}`);
-  if (entry.inputType) attrs.push(`type={${propExpr(props, 'type') ?? JSON.stringify(entry.inputType)}}`);
+  if (entry.inputType) attrs.push(`type={${propExpr(props, 'inputType') ?? JSON.stringify(entry.inputType)}}`);
   if (props.required) attrs.push(`required={${propExpr(props, 'required')}}`);
   if (props.readonly) attrs.push(`readOnly={${propExpr(props, 'readonly')}}`);
   if (props.enabled) attrs.push(`disabled={${propExpr(props, 'enabled')} === false}`);
@@ -320,7 +329,10 @@ function emitOpenTag(
     const handler = actionHandler(props, entry.actionEvent);
     if (handler) attrs.push(handler);
   }
+  if (props.name) attrs.push(`name={${propExpr(props, 'name')}}`);
   if (entry.tag === 'select' || entry.tag === 'textarea' || entry.tag === 'input') {
+    if (props.required) attrs.push(`required={${propExpr(props, 'required')}}`);
+    if (props.enabled) attrs.push(`disabled={${propExpr(props, 'enabled')} === false}`);
     const changeHandler = onChangeHandler(props);
     if (changeHandler) {
       if (props.value) attrs.push(`value={${propExpr(props, 'value')}}`);