view-contracts 0.5.6 → 0.5.8

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.6
+**Version:** 0.5.8
 
 ## Table of Contents
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "view-contracts",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Contract-first UI design toolchain — restricted TSX to View IR to platform renderers",
   "type": "module",
   "bin": {
@@ -46,6 +46,7 @@
     "bundle": "node esbuild.bundle.mjs",
     "bundle:min": "node esbuild.bundle.mjs --minify",
     "build:views": "tsx src/cli.ts build -c examples/admin-dashboard/view-contracts.config.yaml",
+    "sync:generated": "cli-contracts version-sync && npm run build:cli && npm run schema:generate && npm run build:views",
     "render:swiftui-prototype": "tsx scripts/render-swiftui-prototype.ts",
     "build:example": "vite build --config examples/admin-dashboard/.vite/vite.config.ts",
     "compile": "tsx src/cli.ts compile -c examples/admin-dashboard/view-contracts.config.yaml",
@@ -54,11 +55,11 @@
     "contracts:check": "tsx src/cli.ts contracts check -c examples/admin-dashboard/view-contracts.config.yaml",
     "schema:generate": "tsx scripts/schema-generate.ts",
     "cli-contracts:validate": "cli-contracts validate",
+    "typecheck": "tsc -b",
     "test": "vitest run",
     "test:unit": "vitest run",
     "test:smoke": "node dist/view-contracts.bundle.mjs --version && node dist/view-contracts.bundle.mjs --help",
     "test:ci": "npm run test:unit && npm run build:publish && npm run test:smoke",
-    "version": "node -e \"const fs=require('fs');const f='cli-contract.yaml';fs.writeFileSync(f,fs.readFileSync(f,'utf8').replace(/^  version: .*/m,'  version: '+process.env.npm_package_version))\" && git add cli-contract.yaml",
     "prepublishOnly": "npm run build:publish && npm run test:ci"
   },
   "keywords": [
@@ -86,9 +87,9 @@
     "node": ">=20.0.0"
   },
   "peerDependencies": {
-    "vite": "^5.0.0 || ^6.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "vite": "^5.0.0 || ^6.0.0"
   },
   "peerDependenciesMeta": {
     "vite": {
@@ -107,8 +108,8 @@
     "handlebars": "^4.7.9",
     "js-yaml": "^4.1.1",
     "micro-contracts": "^0.17.10",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "typescript": "^5.9.3"
   },
   "devDependencies": {
@@ -119,7 +120,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.7.0",
     "ajv": "^8.18.0",
-    "cli-contracts": "^0.33.13",
+    "cli-contracts": "^0.34.6",
     "esbuild": "^0.28.0",
     "pixelmatch": "^7.2.0",
     "playwright": "^1.61.0",

package/spec/ui-dsl.schema.json

@@ -99,6 +99,13 @@
       "password",
       "tel"
     ],
+    "inputType": [
+      "text",
+      "password",
+      "email",
+      "url",
+      "tel"
+    ],
     "clip": [
       "none",
       "bounds",
@@ -268,6 +275,16 @@
       "enum": "border",
       "x-notes": "none|token|{width,color}"
     },
+    "separator": {
+      "type": "number",
+      "x-category": "visual",
+      "x-notes": "Row separator width in px/dp/pt (0=off)"
+    },
+    "separatorColor": {
+      "type": "string",
+      "x-category": "visual",
+      "x-notes": "Row separator color token"
+    },
     "radius": {
       "type": "string",
       "x-category": "visual",
@@ -338,8 +355,8 @@
     },
     "name": {
       "type": "string",
-      "x-category": "image",
-      "description": "Icon token or asset name in the renderer icon set"
+      "x-category": "identity",
+      "description": "Form field name (for FormData) or icon token in the renderer icon set"
     },
     "onClick": {
       "type": "action",
@@ -368,6 +385,12 @@
       "x-category": "interaction",
       "enum": "keyboardType"
     },
+    "inputType": {
+      "type": "string",
+      "x-category": "interaction",
+      "enum": "inputType",
+      "description": "HTML input type variant (text, password, email, url, tel)"
+    },
     "value": {
       "type": [
         "string",
@@ -414,6 +437,47 @@
       "x-category": "visual",
       "x-notes": "active theme id for runtime theme switching"
     },
+    "display": {
+      "type": "string",
+      "x-category": "layout",
+      "x-notes": "CSS display value (grid, flex, etc.)"
+    },
+    "gridTemplateColumns": {
+      "type": "string",
+      "x-category": "layout",
+      "x-notes": "CSS grid-template-columns"
+    },
+    "flexDirection": {
+      "type": "string",
+      "x-category": "layout",
+      "x-notes": "CSS flex-direction"
+    },
+    "alignItems": {
+      "type": "string",
+      "x-category": "alignment",
+      "x-notes": "CSS align-items"
+    },
+    "margin": {
+      "type": [
+        "string",
+        "number"
+      ],
+      "x-category": "spacing",
+      "x-notes": "space token or per-side"
+    },
+    "borderColor": {
+      "type": "string",
+      "x-category": "visual",
+      "x-notes": "border color token"
+    },
+    "fontSize": {
+      "type": [
+        "string",
+        "number"
+      ],
+      "x-category": "text",
+      "x-notes": "CSS font-size"
+    },
     "flex": {
       "type": "number",
       "x-category": "size",
@@ -1093,6 +1157,9 @@
         "fontWeight": {
           "$ref": "#/properties/fontWeight"
         },
+        "fontSize": {
+          "$ref": "#/properties/fontSize"
+        },
         "variant": {
           "$ref": "#/properties/variant"
         },
@@ -1172,6 +1239,9 @@
         "required": {
           "$ref": "#/properties/required"
         },
+        "name": {
+          "$ref": "#/properties/name"
+        },
         "value": {
           "$ref": "#/properties/value"
         },
@@ -1193,6 +1263,9 @@
         "keyboardType": {
           "$ref": "#/properties/keyboardType"
         },
+        "inputType": {
+          "$ref": "#/properties/inputType"
+        },
         "focusable": {
           "$ref": "#/properties/focusable"
         },
@@ -1226,6 +1299,9 @@
         "minHeight": {
           "$ref": "#/properties/minHeight"
         },
+        "fontSize": {
+          "$ref": "#/properties/fontSize"
+        },
         "variant": {
           "$ref": "#/properties/variant"
         }
@@ -1254,6 +1330,9 @@
         "required": {
           "$ref": "#/properties/required"
         },
+        "name": {
+          "$ref": "#/properties/name"
+        },
         "value": {
           "$ref": "#/properties/value"
         },
@@ -1275,6 +1354,9 @@
         "focusable": {
           "$ref": "#/properties/focusable"
         },
+        "width": {
+          "$ref": "#/properties/width"
+        },
         "minHeight": {
           "$ref": "#/properties/minHeight"
         },
@@ -1299,6 +1381,9 @@
         "borderColor": {
           "$ref": "#/properties/borderColor"
         },
+        "fontSize": {
+          "$ref": "#/properties/fontSize"
+        },
         "variant": {
           "$ref": "#/properties/variant"
         }
@@ -1324,6 +1409,9 @@
         "required": {
           "$ref": "#/properties/required"
         },
+        "name": {
+          "$ref": "#/properties/name"
+        },
         "value": {
           "$ref": "#/properties/value"
         },
@@ -1369,6 +1457,9 @@
         "minHeight": {
           "$ref": "#/properties/minHeight"
         },
+        "fontSize": {
+          "$ref": "#/properties/fontSize"
+        },
         "variant": {
           "$ref": "#/properties/variant"
         }
@@ -1702,6 +1793,18 @@
         "gap": {
           "$ref": "#/properties/gap"
         },
+        "border": {
+          "$ref": "#/properties/border"
+        },
+        "borderColor": {
+          "$ref": "#/properties/borderColor"
+        },
+        "separator": {
+          "$ref": "#/properties/separator"
+        },
+        "separatorColor": {
+          "$ref": "#/properties/separatorColor"
+        },
         "variant": {
           "$ref": "#/properties/variant"
         }
@@ -1722,6 +1825,18 @@
         "height": {
           "$ref": "#/properties/height"
         },
+        "border": {
+          "$ref": "#/properties/border"
+        },
+        "borderColor": {
+          "$ref": "#/properties/borderColor"
+        },
+        "background": {
+          "$ref": "#/properties/background"
+        },
+        "alignItems": {
+          "$ref": "#/properties/alignItems"
+        },
         "variant": {
           "$ref": "#/properties/variant"
         }
@@ -1750,6 +1865,24 @@
         "align": {
           "$ref": "#/properties/align"
         },
+        "border": {
+          "$ref": "#/properties/border"
+        },
+        "borderColor": {
+          "$ref": "#/properties/borderColor"
+        },
+        "padding": {
+          "$ref": "#/properties/padding"
+        },
+        "fontSize": {
+          "$ref": "#/properties/fontSize"
+        },
+        "fontWeight": {
+          "$ref": "#/properties/fontWeight"
+        },
+        "foreground": {
+          "$ref": "#/properties/foreground"
+        },
         "variant": {
           "$ref": "#/properties/variant"
         }
@@ -1769,6 +1902,15 @@
         "height": {
           "$ref": "#/properties/height"
         },
+        "border": {
+          "$ref": "#/properties/border"
+        },
+        "borderColor": {
+          "$ref": "#/properties/borderColor"
+        },
+        "alignItems": {
+          "$ref": "#/properties/alignItems"
+        },
         "variant": {
           "$ref": "#/properties/variant"
         }
@@ -1794,6 +1936,21 @@
         "align": {
           "$ref": "#/properties/align"
         },
+        "border": {
+          "$ref": "#/properties/border"
+        },
+        "borderColor": {
+          "$ref": "#/properties/borderColor"
+        },
+        "padding": {
+          "$ref": "#/properties/padding"
+        },
+        "fontSize": {
+          "$ref": "#/properties/fontSize"
+        },
+        "foreground": {
+          "$ref": "#/properties/foreground"
+        },
         "variant": {
           "$ref": "#/properties/variant"
         }