view-contracts 0.4.1 → 0.4.3

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "view-contracts",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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/src/dsl/index.ts

@@ -0,0 +1,16 @@
+export { screen, view } from './screen.js';
+export type {
+  ViewAction,
+  ActionHandlers,
+  ScreenContext,
+  ViewContract,
+  ViewPartial,
+  ViewScreenProps,
+  CommonProps,
+  Option,
+  Tone,
+  Align,
+  Justify,
+  ButtonVariant,
+  FieldSize,
+} from './types.js';

package/src/dsl/screen.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import type { FC } from 'react';
+import type { ScreenContext, ViewContract, ViewPartial, ViewScreenProps } from './types.js';
+
+export type {
+  ViewAction,
+  ActionHandlers,
+  ScreenContext,
+  ViewContract,
+  ViewPartial,
+  ViewScreenProps,
+  CommonProps,
+  Option,
+  Tone,
+  Align,
+  Justify,
+  ButtonVariant,
+  FieldSize,
+} from './types.js';
+
+/**
+ * Wrap a restricted view-contract TSX definition.
+ *
+ * - **Preview runtime**: returns a React component (`vm` + `actions` props).
+ * - **Compiler**: statically extracts JSX from the render callback → View IR.
+ */
+export function screen<TViewModel>(
+  render: (ctx: ScreenContext<TViewModel>) => ReactNode,
+): FC<ViewScreenProps<TViewModel>> {
+  function ViewScreen({ vm, actions = {} }: ViewScreenProps<TViewModel>) {
+    return <>{render({ vm, actions })}</>;
+  }
+  return Object.assign(ViewScreen, {
+    __viewContract: true as const,
+    render,
+  }) as FC<ViewScreenProps<TViewModel>>;
+}
+
+/**
+ * Reusable view-contract sub-component (composable inside screen() or other view()).
+ *
+ * Compiled by inlining into the parent View IR; preview runtime renders as a normal React FC.
+ */
+export function view<TProps>(
+  render: (props: TProps) => ReactNode,
+): FC<TProps> & ViewPartial<TProps> {
+  function ViewComponent(props: TProps) {
+    return <>{render(props)}</>;
+  }
+  return Object.assign(ViewComponent, {
+    __viewPartial: true as const,
+    render,
+  }) as FC<TProps> & ViewPartial<TProps>;
+}

package/src/dsl/types.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+
+/** Action descriptor referenced from view contracts (names must match OpenAPI operationId). */
+export interface ViewAction {
+  name: string;
+  params?: Record<string, unknown>;
+}
+
+export type ActionHandlers = Record<string, (params?: unknown) => void | Promise<void>>;
+
+export interface ScreenContext<TViewModel> {
+  vm: TViewModel;
+  actions: ActionHandlers;
+}
+
+export interface ViewContract<TViewModel> {
+  readonly __viewContract: true;
+  readonly render: (ctx: ScreenContext<TViewModel>) => ReactNode;
+}
+
+export type Tone = 'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger';
+export type Align = 'start' | 'center' | 'end' | 'stretch';
+export type Justify = 'start' | 'center' | 'end' | 'between' | 'around';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type FieldSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Shared layout/visual props.
+ * Dimension props (width, height, gap, padding, …) are numbers in logical units;
+ * the web preview maps them to px.
+ */
+export interface CommonProps {
+  id?: string;
+  testId?: string;
+  ariaLabel?: string;
+  children?: ReactNode;
+  hidden?: boolean;
+  width?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  height?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  padding?: number;
+  margin?: number;
+  gap?: number;
+  radius?: number;
+  border?: boolean;
+  shadow?: boolean;
+  tone?: Tone;
+}
+
+export interface Option {
+  label: string;
+  value: string;
+}
+
+export interface ViewPartial<TProps> {
+  readonly __viewPartial: true;
+  readonly render: (props: TProps) => ReactNode;
+}
+
+export type ViewScreenProps<TViewModel> = {
+  vm: TViewModel;
+  actions?: ActionHandlers;
+  /** Optional theme id — propagated from App element for future multi-theme runtime. */
+  theme?: string;
+};