view-contracts 0.4.0 → 0.4.2

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "view-contracts",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Contract-first UI design toolchain — restricted TSX to View IR to platform renderers",
   "type": "module",
-  "workspaces": [
-    "packages/*"
-  ],
   "bin": {
     "view-contracts": "dist/view-contracts.bundle.mjs"
   },
   "exports": {
     ".": "./dist/view-contracts.bundle.mjs",
+    "./dsl": "./dist/dsl.js",
     "./preview": "./dist/preview.mjs",
     "./package.json": "./package.json"
   },
   "files": [
     "dist/view-contracts.bundle.mjs",
     "dist/view-contracts.bundle.mjs.map",
+    "dist/dsl.js",
+    "dist/dsl.js.map",
     "dist/preview.mjs",
     "dist/preview.mjs.map",
     "dist/preview-style-helpers.js",
@@ -24,6 +24,7 @@
     "renderers/react/runtime",
     "renderers/react/defaults",
     "src/generated/schema",
+    "src/dsl",
     "spec",
     "renderers",
     "cli-contract.yaml",

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;