view-contracts 0.2.0 → 0.3.0

package/renderers/react/runtime/theme.css

@@ -21,23 +21,23 @@
 body { margin: 0; background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); }
 button, input, textarea, select { font: inherit; }
 
-.ui-page { min-height: 100vh; }
-.ui-box { display: block; }
-.ui-column { display: flex; flex-direction: column; }
-.ui-stack { display: flex; flex-direction: column; }
-.ui-row { display: flex; flex-direction: row; }
-.ui-wrap { flex-wrap: wrap; }
-.ui-spacer { min-width: 0; min-height: 0; }
-.ui-divider { border: 0; border-top: 1px solid var(--ui-border); width: 100%; }
+.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%; }
 
-.ui-heading { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
-.ui-heading-1 { font-size: 32px; }
-.ui-heading-2 { font-size: 22px; }
-.ui-heading-3 { font-size: 18px; }
-.ui-heading-4 { font-size: 15px; }
-.ui-text { margin: 0; line-height: 1.6; }
-.ui-link { color: var(--ui-primary); text-decoration: none; }
-.ui-link:hover { text-decoration: underline; }
+.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; }
 
 .ui-tone-default { color: var(--ui-text); }
 .ui-tone-muted { color: var(--ui-text-muted); }
@@ -46,23 +46,38 @@ button, input, textarea, select { font: inherit; }
 .ui-tone-warning { color: var(--ui-warning); }
 .ui-tone-danger { color: var(--ui-danger); }
 
-.ui-button { border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
-.ui-button-primary { background: var(--ui-primary); color: #fff; }
-.ui-button-secondary { background: #eef2f7; color: var(--ui-text); }
-.ui-button-ghost { background: transparent; color: var(--ui-text); }
-.ui-button-danger { background: var(--ui-danger); color: #fff; }
+.vc-button { border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
 
-.ui-form { display: flex; flex-direction: column; }
-.ui-field { display: flex; flex-direction: column; gap: 6px; }
-.ui-field-label { font-size: 13px; font-weight: 700; color: var(--ui-text); }
-.ui-field-help { font-size: 12px; color: var(--ui-text-muted); }
-.ui-field-error { font-size: 12px; color: var(--ui-danger); }
-.ui-input, .ui-select, .ui-textarea { width: 100%; border: 1px solid var(--ui-border); border-radius: 10px; background: #fff; color: var(--ui-text); outline: none; }
-.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
-.ui-field-sm { min-height: 34px; padding: 6px 10px; }
-.ui-field-md, .ui-input, .ui-select { min-height: 42px; padding: 9px 12px; }
-.ui-field-lg { min-height: 50px; padding: 12px 14px; }
-.ui-textarea { padding: 10px 12px; resize: vertical; }
-.ui-check { display: inline-flex; align-items: center; gap: 8px; }
-.ui-list { margin: 0; padding-left: 20px; }
-.ui-list-item { margin: 0; padding: 2px 0; }
+.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-select, .vc-text-area { width: 100%; border: 1px solid var(--ui-border); border-radius: 10px; background: #fff; color: var(--ui-text); outline: none; }
+.vc-text-input:focus, .vc-select: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, .vc-text-input, .vc-select { min-height: 42px; padding: 9px 12px; }
+.vc-field-lg { min-height: 50px; padding: 12px 14px; }
+.vc-text-area { padding: 10px 12px; 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; }
+
+/* Extension components — structural layout; variant colors from theme.yaml via emitVariantCss */
+.vc-container { width: 100%; max-width: 1180px; margin: 0 auto; }
+.vc-grid { display: grid; }
+.vc-card { border: 1px solid var(--ui-border); }
+.vc-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
+.vc-alert { display: flex; gap: 12px; border: 1px solid var(--ui-border); border-radius: 12px; padding: 14px; }
+.vc-alert--success { border-color: #a7f3d0; }
+.vc-alert--warning { border-color: #fde68a; }
+.vc-alert--danger { border-color: #fecaca; }
+.vc-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 14px; background: #fff; }
+.vc-table { width: 100%; border-collapse: collapse; }
+.vc-table th { background: var(--ui-surface-muted); color: var(--ui-text-muted); font-size: 12px; text-align: left; padding: 12px 14px; }
+.vc-table td { border-top: 1px solid var(--ui-border); padding: 14px; font-size: 14px; }
+.vc-admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
+.vc-admin-sidebar { background: #0f172a; color: #cbd5e1; padding: 24px 18px; }
+.vc-admin-nav-item { padding: 10px 12px; border-radius: 10px; color: #cbd5e1; }
+.vc-admin-nav-item--active { background: rgba(255,255,255,0.1); color: #fff; }
+.vc-admin-content { padding: 32px; }

package/renderers/react/runtime/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { DslProperties } from '../../../src/generated/schema/dsl-properties.js';
-import type { FontWeight, Justify, Shadow, WidthSize } from '../../../src/generated/schema/tokens.js';
+import type { FontWeight, Justify, Shadow, WidthSize } from '../../../src/generated/schema/dsl-enums.js';
 
 export type {
   Align,
@@ -18,7 +18,7 @@ export type {
   TextAlign,
   TextOverflow,
   WidthSize,
-} from '../../../src/generated/schema/tokens.js';
+} from '../../../src/generated/schema/dsl-enums.js';
 
 export type { DslProperties };
 

package/renderers/react/templates/runtime-types.ts.hbs

@@ -3,3 +3,8 @@ export interface DispatchableAction {
   name: string;
   params?: Record<string, unknown>;
 }
+
+/** Optional theme context from App element — for future runtime theme switching. */
+export interface AppThemeContext {
+  theme?: string;
+}

package/renderers/react/templates/style-helpers.ts.hbs

@@ -1,2 +1,2 @@
 /** Auto-generated style helpers for lowered JSX — DO NOT EDIT */
-export { commonStyle, mapAlign, mapJustify } from './style.js';
+export { commonStyle, extensionClassName, mapAlign, mapJustify, resolveExtensionVariant } from './style.js';

package/renderers/swiftui/templates/Screen.swift.hbs

@@ -0,0 +1,21 @@
+// {{screenName}} — SwiftUI scaffold (Phase 5)
+// Theme IR: {{themeJsonPath}}
+// Token IR: {{tokensJsonPath}}
+//
+// TODO(Phase B): Load theme.json and emit PrimaryButtonStyle(), vcTextMuted(), etc.
+
+import SwiftUI
+
+struct {{screenName}}View: View {
+    var body: some View {
+        Text("{{screenName}} — SwiftUI scaffold")
+    }
+}
+
+#if DEBUG
+struct {{screenName}}View_Previews: PreviewProvider {
+    static var previews: some View {
+        {{screenName}}View()
+    }
+}
+#endif

package/renderers/swiftui/templates/VcTheme.swift.hbs

@@ -0,0 +1,21 @@
+// VcTheme — SwiftUI theme scaffold (Phase 5)
+// Load Token IR + Theme IR from bundle resources:
+//   {{tokensJsonPath}}
+//   {{themeJsonPath}}
+//
+// TODO(Phase B): Map Theme IR variants to ButtonStyle / ViewModifier implementations.
+
+import Foundation
+
+enum VcTheme {
+    static let tokensResource = "{{tokensJsonPath}}"
+    static let themeResource = "{{themeJsonPath}}"
+
+    /// Placeholder — decode theme.json into Swift types in Phase B.
+    static func loadThemeJson() -> Data? {
+        guard let url = Bundle.main.url(forResource: themeResource, withExtension: nil) else {
+            return nil
+        }
+        return try? Data(contentsOf: url)
+    }
+}

package/spec/ui-dsl.schema.json

@@ -227,7 +227,18 @@
       "x-category": "validation",
       "x-appliesTo": ["Field", "TextInput", "TextArea", "Select"]
     },
-    "variant": { "type": "string", "x-category": "visual", "x-notes": "design token variant" }
+    "variant": {
+      "type": "string",
+      "x-category": "visual",
+      "x-appliesTo": ["Button", "IconButton", "Box", "Text", "Heading"],
+      "x-notes": "design token variant"
+    },
+    "theme": {
+      "type": "string",
+      "x-category": "visual",
+      "x-appliesTo": ["App"],
+      "x-notes": "active theme id for runtime theme switching"
+    }
   },
   "elements": {
     "App": {
@@ -238,7 +249,8 @@
       "properties": {
         "id": { "$ref": "#/properties/id" },
         "padding": { "$ref": "#/properties/padding" },
-        "direction": { "$ref": "#/properties/direction" }
+        "direction": { "$ref": "#/properties/direction" },
+        "theme": { "$ref": "#/properties/theme" }
       },
       "_children": { "x-kind": "list", "x-items": ["Page"] }
     },
@@ -307,8 +319,7 @@
         "minWidth": { "$ref": "#/properties/minWidth" },
         "maxWidth": { "$ref": "#/properties/maxWidth" },
         "minHeight": { "$ref": "#/properties/minHeight" },
-        "maxHeight": { "$ref": "#/properties/maxHeight" },
-        "variant": { "$ref": "#/properties/variant" }
+        "maxHeight": { "$ref": "#/properties/maxHeight" }
       },
       "_children": { "x-kind": "any" }
     },
@@ -328,8 +339,7 @@
         "minWidth": { "$ref": "#/properties/minWidth" },
         "maxWidth": { "$ref": "#/properties/maxWidth" },
         "minHeight": { "$ref": "#/properties/minHeight" },
-        "maxHeight": { "$ref": "#/properties/maxHeight" },
-        "variant": { "$ref": "#/properties/variant" }
+        "maxHeight": { "$ref": "#/properties/maxHeight" }
       },
       "_children": { "x-kind": "any" }
     },
@@ -344,8 +354,7 @@
         "padding": { "$ref": "#/properties/padding" },
         "width": { "$ref": "#/properties/width" },
         "height": { "$ref": "#/properties/height" },
-        "background": { "$ref": "#/properties/background" },
-        "variant": { "$ref": "#/properties/variant" }
+        "background": { "$ref": "#/properties/background" }
       },
       "_children": { "x-kind": "any" }
     },
@@ -368,8 +377,7 @@
       "description": "Horizontal or vertical separator",
       "properties": {
         "id": { "$ref": "#/properties/id" },
-        "axis": { "$ref": "#/properties/axis" },
-        "variant": { "$ref": "#/properties/variant" }
+        "axis": { "$ref": "#/properties/axis" }
       },
       "_children": { "x-kind": "none" }
     },
@@ -430,7 +438,8 @@
         "fontWeight": { "$ref": "#/properties/fontWeight" },
         "foreground": { "$ref": "#/properties/foreground" },
         "opacity": { "$ref": "#/properties/opacity" },
-        "role": { "$ref": "#/properties/role" }
+        "role": { "$ref": "#/properties/role" },
+        "variant": { "$ref": "#/properties/variant" }
       },
       "_children": { "x-kind": "text" }
     },
@@ -445,7 +454,8 @@
         "textStyle": { "$ref": "#/properties/textStyle" },
         "textAlign": { "$ref": "#/properties/textAlign" },
         "foreground": { "$ref": "#/properties/foreground" },
-        "role": { "$ref": "#/properties/role" }
+        "role": { "$ref": "#/properties/role" },
+        "variant": { "$ref": "#/properties/variant" }
       },
       "_children": { "x-kind": "text" }
     },
@@ -718,8 +728,7 @@
       "properties": {
         "id": { "$ref": "#/properties/id" },
         "visible": { "$ref": "#/properties/visible" },
-        "value": { "$ref": "#/properties/value" },
-        "variant": { "$ref": "#/properties/variant" }
+        "value": { "$ref": "#/properties/value" }
       },
       "_children": { "x-kind": "none" }
     },
@@ -729,8 +738,7 @@
       "description": "Indeterminate loading",
       "properties": {
         "id": { "$ref": "#/properties/id" },
-        "visible": { "$ref": "#/properties/visible" },
-        "variant": { "$ref": "#/properties/variant" }
+        "visible": { "$ref": "#/properties/visible" }
       },
       "_children": { "x-kind": "none" }
     }

package/src/generated/schema/allowed-components.ts

@@ -1,4 +1,4 @@
-/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
 export const ALLOWED_COMPONENTS = new Set([
   'App',
   'Box',

package/src/generated/schema/{tokens.ts → dsl-enums.ts}

@@ -1,4 +1,4 @@
-/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
 export type Role = "button" | "link" | "heading" | "list" | "listitem" | "main" | "dialog" | "status";
 export type WidthSize = "wrap" | "fill";
 export type HeightSize = "wrap" | "fill";

package/src/generated/schema/dsl-properties.ts

@@ -1,6 +1,6 @@
-/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
 export interface ViewAction { name: string; params?: Record<string, unknown> }
-import type { Role, WidthSize, HeightSize, Align, Justify, ContentAlign, Axis, Direction, Scroll, Border, Shadow, TextAlign, LineLimit, TextOverflow, FontWeight, ImageFit, KeyboardType, Clip } from './tokens.js';
+import type { Role, WidthSize, HeightSize, Align, Justify, ContentAlign, Axis, Direction, Scroll, Border, Shadow, TextAlign, LineLimit, TextOverflow, FontWeight, ImageFit, KeyboardType, Clip } from './dsl-enums.js';
 
 /** Shared DSL attributes from $defs.properties / properties catalog */
 export interface DslProperties {
@@ -60,4 +60,5 @@ export interface DslProperties {
   error?: string | null;
   help?: string | null;
   variant?: string;
+  theme?: string;
 }

package/src/generated/schema/index.ts

@@ -1,4 +1,4 @@
-/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
-export * from './tokens.js';
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
+export * from './dsl-enums.js';
 export * from './dsl-properties.js';
 export * from './schema-document.js';

package/src/generated/schema/lowering-style-properties.ts

@@ -1,16 +1,12 @@
-/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
+/** Auto-generated from spec/ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
 /** Property names passed to commonStyle() during React HTML lowering (x-category from DSL + sample extensions). */
 export const LOWERING_STYLE_PROPERTIES = new Set<string>([
   "align",
   "aspectRatio",
   "axis",
-  "background",
-  "border",
-  "clip",
   "contentAlign",
   "direction",
   "fontWeight",
-  "foreground",
   "gap",
   "headingLevel",
   "height",
@@ -20,16 +16,12 @@ export const LOWERING_STYLE_PROPERTIES = new Set<string>([
   "maxWidth",
   "minHeight",
   "minWidth",
-  "opacity",
   "padding",
-  "radius",
   "scroll",
   "selfAlign",
-  "shadow",
   "textAlign",
   "textOverflow",
   "textStyle",
-  "variant",
   "weight",
   "width",
   "size",

package/src/generated/schema/react-renderer-element-config.ts

@@ -1,4 +1,4 @@
-/** Auto-generated from renderers/react/element-config.meta.json — view-contracts v0.1.0 — DO NOT EDIT */
+/** Auto-generated from renderers/react/element-config.meta.json — view-contracts v0.3.0 — DO NOT EDIT */
 /** Shape of entries in renderers/react/elements.yaml (target-specific HTML map, not DSL vocabulary). */
 export interface ReactRendererElementConfig {
   tag: string;
@@ -12,7 +12,6 @@ export interface ReactRendererElementConfig {
   levelProp?: string;
   defaultLevel?: number;
   actionEvent?: "onClick" | "onSubmit";
-  variantClass?: boolean;
   fieldWrap?: boolean;
   inputType?: string;
   sizeClass?: string;

package/src/generated/schema/schema-document.ts

@@ -1,5 +1,5 @@
-/** Auto-generated from spec/ui-dsl.meta.json + ui-dsl.schema.json — view-contracts v0.1.0 — DO NOT EDIT */
-import type { Role, WidthSize, HeightSize, Align, Justify, ContentAlign, Axis, Direction, Scroll, Border, Shadow, TextAlign, LineLimit, TextOverflow, FontWeight, ImageFit, KeyboardType, Clip } from './tokens.js';
+/** Auto-generated from spec/ui-dsl.meta.json + ui-dsl.schema.json — view-contracts v0.3.0 — DO NOT EDIT */
+import type { Role, WidthSize, HeightSize, Align, Justify, ContentAlign, Axis, Direction, Scroll, Border, Shadow, TextAlign, LineLimit, TextOverflow, FontWeight, ImageFit, KeyboardType, Clip } from './dsl-enums.js';
 
 export type PropertyType = 'string' | 'number' | 'boolean' | 'array' | 'action' | 'object' | 'null' | string | string[];