@topogram/cli 0.3.49 → 0.3.50

package/CHANGELOG.md

@@ -53,11 +53,12 @@
 ## 0.3.11 - 2026-05-01
 
 - Add `domain` statement kind for grouping the spec by business slice
-  (FIS, RNF, DrugTrac, etc.). Identifier prefix `dom_`. Required fields:
-  `name`, `description`, `status`. Optional: `in_scope`, `out_of_scope`,
-  `owners`, `parent_domain`, `aliases`. Validator enforces identifier
-  prefix, scope-list shapes, owner refs (`actor`|`role`), parent_domain
-  refs, and parent-domain cycle detection.
+  (order fulfillment, billing, support, reporting, etc.). Identifier
+  prefix `dom_`. Required fields: `name`, `description`, `status`.
+  Optional: `in_scope`, `out_of_scope`, `owners`, `parent_domain`,
+  `aliases`. Validator enforces identifier prefix, scope-list shapes,
+  owner refs (`actor`|`role`), parent_domain refs, and parent-domain
+  cycle detection.
 - Add optional singular `domain` field on `capability`, `entity`, `rule`,
   `verification`, `orchestration`, `operation`, and `decision`. Cross-kind
   validator hard-errors on unknown ids and wrong-kind references.
@@ -83,9 +84,9 @@
   with the `domain` row and the optional-field paragraph;
   `docs/topogram-workspace-layout.md` appends a "Domain organization"
   subsection.
-- New fixture `engine/tests/fixtures/domains/feedlot/` (3 domains,
-  10 capabilities, 12 entities, 4 cross-platform projections) and
-  golden tests at `engine/tests/active/domain-kind.test.js`.
+- New multi-domain fixture (3 domains, 10 capabilities, 12 entities, 4
+  cross-platform projections) and golden tests at
+  `engine/tests/active/domain-kind.test.js`.
 
 ### SDLC layer (Phase 2)
 

package/README.md

@@ -6,7 +6,7 @@ The active product workflow is authoring-to-generated-app. Engine development sh
 
 ## Package Shape
 
-The engine is the publishable private CLI package:
+The engine is the publishable CLI package:
 
 ```json
 {
@@ -17,7 +17,7 @@ The engine is the publishable private CLI package:
 }
 ```
 
-This lets source checkouts and private-package consumers call:
+This lets source checkouts and package consumers call:
 
 ```bash
 topogram new ../my-app
@@ -111,7 +111,7 @@ topogram new ../todo-demo --template @topogram/template-todo
 topogram new ../todo-demo --template todo
 ```
 
-Catalog aliases resolve through the private catalog index at
+Catalog aliases resolve through the public catalog index at
 `github:attebury/topograms/topograms.catalog.json`. The catalog is package
 backed; executable starter content still lives in template packages. Use
 `topogram catalog show <id>` to inspect an entry and get the correct `new` or
@@ -131,7 +131,7 @@ template update metadata while keeping normal check/generate behavior.
 Do not create generated projects under `engine/`. The CLI refuses paths inside the engine directory.
 
 Template pack authoring and trust policy are documented in `../docs/template-authoring.md`.
-Catalog layout and private access are documented in `../docs/catalog.md`.
+Catalog layout and optional private-source access are documented in `../docs/catalog.md`.
 Projects created from executable templates include `.topogram-template-trust.json`;
 regenerate it with `topogram trust template` after reviewing copied
 `implementation/` code. Use `topogram template status` for the lifecycle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topogram/cli",
-  "version": "0.3.49",
+  "version": "0.3.50",
   "description": "Topogram CLI for checking Topogram workspaces and generating app bundles.",
   "license": "Apache-2.0",
   "repository": {

package/src/generator/registry.js

@@ -63,7 +63,7 @@ export const GENERATOR_MANIFESTS = [
     inputs: ["ui-web-contract"],
     outputs: ["web-app", "generation-coverage"],
     stack: { runtime: "browser", framework: "vanilla", language: "javascript" },
-    capabilities: { routes: true, components: false, coverage: false },
+    capabilities: { routes: true, components: false, coverage: true },
     componentSupport: { patterns: [], behaviors: [], unsupported: "contract-only" },
     source: "bundled",
     profile: "vanilla"

package/src/generator/runtime/app-bundle.js

@@ -17,6 +17,7 @@ import {
   buildVerificationSummary,
   getDefaultEnvironmentProjections,
   resolveRuntimeTopology,
+  runtimeDemoUserId,
   runtimePorts,
   runtimeUrls
 } from "./shared.js";
@@ -104,7 +105,7 @@ function buildAppBundlePlan(graph, options = {}) {
 }
 
 function renderAppBundleEnvExample(plan) {
-  const demo = plan.runtimeReference.demoEnv;
+  const demoUserId = runtimeDemoUserId(plan.runtimeReference);
   const databaseName = plan.runtimeReference.environment.databaseName || "topogram_app";
   const topology = {
     primaryApi: { port: plan.topology.components.find((component) => component.type === "api")?.port },
@@ -118,8 +119,8 @@ TOPOGRAM_ENVIRONMENT_PROFILE=${plan.profiles.environment}
 TOPOGRAM_DEPLOY_PROFILE=${plan.profiles.deployment}
 
 # Local runtime defaults
-${plan.projections.api ? `SERVER_PORT=${ports.server}\n` : ""}${plan.projections.ui ? `WEB_PORT=${ports.web}\n` : ""}${plan.projections.api && plan.projections.ui ? `PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}\n` : ""}PUBLIC_TOPOGRAM_DEMO_USER_ID=${demo.userId}
-TOPOGRAM_DEMO_USER_ID=${demo.userId}
+${plan.projections.api ? `SERVER_PORT=${ports.server}\n` : ""}${plan.projections.ui ? `WEB_PORT=${ports.web}\n` : ""}${plan.projections.api && plan.projections.ui ? `PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}\n` : ""}PUBLIC_TOPOGRAM_DEMO_USER_ID=${demoUserId}
+TOPOGRAM_DEMO_USER_ID=${demoUserId}
 ${plan.runtimeReference.environment.envExample || ""}
 
 # Smoke-test defaults
@@ -135,8 +136,8 @@ SERVER_PORT=${ports.server}
 WEB_PORT=${ports.web}
 DATABASE_URL=file:./var/${databaseName}.sqlite
 PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}
-PUBLIC_TOPOGRAM_DEMO_USER_ID=${demo.userId}
-TOPOGRAM_DEMO_USER_ID=${demo.userId}
+PUBLIC_TOPOGRAM_DEMO_USER_ID=${demoUserId}
+TOPOGRAM_DEMO_USER_ID=${demoUserId}
 ${plan.runtimeReference.environment.envExample || ""}
 TOPOGRAM_SEED_DEMO=true
 
@@ -159,8 +160,8 @@ POSTGRES_PASSWORD=postgres
 DATABASE_URL=postgresql://\${POSTGRES_USER}@localhost:5432/${databaseName}
 DATABASE_ADMIN_URL=postgresql://\${POSTGRES_USER}@localhost:5432/postgres
 PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}
-PUBLIC_TOPOGRAM_DEMO_USER_ID=${demo.userId}
-TOPOGRAM_DEMO_USER_ID=${demo.userId}
+PUBLIC_TOPOGRAM_DEMO_USER_ID=${demoUserId}
+TOPOGRAM_DEMO_USER_ID=${demoUserId}
 ${plan.runtimeReference.environment.envExample || ""}
 TOPOGRAM_SEED_DEMO=true
 

package/src/generator/runtime/compile-check.js

@@ -3,6 +3,7 @@ import {
   generateWebBundle,
   getDefaultEnvironmentProjections,
   resolveRuntimeTopology,
+  runtimeDemoUserId,
   runtimeUrls
 } from "./shared.js";
 import { getExampleImplementation } from "../../example-implementation.js";
@@ -75,13 +76,13 @@ function renderCompileCheckEnvExample(graph, options = {}) {
   if (dbProjection?.platform === "db_sqlite") {
     return `DATABASE_URL=./var/${runtimeReference.environment.databaseName || "topogram_app"}.sqlite
 PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}
-PUBLIC_TOPOGRAM_DEMO_USER_ID=${runtimeReference.demoEnv.userId}
+PUBLIC_TOPOGRAM_DEMO_USER_ID=${runtimeDemoUserId(runtimeReference)}
 ${runtimeReference.environment.envExample || ""}
 `;
   }
   return `DATABASE_URL=postgresql://postgres:postgres@localhost:5432/${runtimeReference.environment.databaseName || "topogram_app"}?schema=public
 PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}
-PUBLIC_TOPOGRAM_DEMO_USER_ID=${runtimeReference.demoEnv.userId}
+PUBLIC_TOPOGRAM_DEMO_USER_ID=${runtimeDemoUserId(runtimeReference)}
 ${runtimeReference.environment.envExample || ""}
 `;
 }

package/src/generator/runtime/environment.js

@@ -7,6 +7,7 @@ import {
   dbEnvVarsForComponent,
   getDefaultEnvironmentProjections,
   resolveRuntimeTopology,
+  runtimeDemoUserId,
   runtimePorts,
   runtimeUrls
 } from "./shared.js";
@@ -158,7 +159,7 @@ function buildEnvironmentPlan(graph, options = {}) {
 }
 
 function renderEnvironmentEnvExample(plan) {
-  const demo = plan.runtimeReference.demoEnv;
+  const demoUserId = runtimeDemoUserId(plan.runtimeReference);
   const databaseName = plan.runtimeReference.environment.databaseName || "topogram_app";
   const urls = runtimeUrls(plan.runtimeReference, {
     primaryApi: { port: plan.ports.server },
@@ -184,8 +185,8 @@ function renderEnvironmentEnvExample(plan) {
 TOPOGRAM_ENVIRONMENT_PROFILE=${plan.environment.profile}
 
 # Local stack ports
-${plan.components.apis.length ? `SERVER_PORT=${plan.ports.server}\n` : ""}${plan.components.webs.length ? `WEB_PORT=${plan.ports.web}\n` : ""}${plan.components.webs.length && plan.components.apis.length ? `PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}\n` : ""}${plan.components.webs.length ? `TOPOGRAM_CORS_ORIGINS=${urls.web},http://127.0.0.1:${plan.ports.web}\n` : ""}PUBLIC_TOPOGRAM_DEMO_USER_ID=${demo.userId}
-TOPOGRAM_DEMO_USER_ID=${demo.userId}
+${plan.components.apis.length ? `SERVER_PORT=${plan.ports.server}\n` : ""}${plan.components.webs.length ? `WEB_PORT=${plan.ports.web}\n` : ""}${plan.components.webs.length && plan.components.apis.length ? `PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}\n` : ""}${plan.components.webs.length ? `TOPOGRAM_CORS_ORIGINS=${urls.web},http://127.0.0.1:${plan.ports.web}\n` : ""}PUBLIC_TOPOGRAM_DEMO_USER_ID=${demoUserId}
+TOPOGRAM_DEMO_USER_ID=${demoUserId}
 ${plan.runtimeReference.environment.envExample || ""}
 TOPOGRAM_SEED_DEMO=true
 `;
@@ -204,8 +205,8 @@ WEB_PORT=${plan.ports.web}
 DATABASE_URL=file:./var/${databaseName}.sqlite
 ${extraDatabaseLines ? `${extraDatabaseLines}\n` : ""}PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}
 TOPOGRAM_CORS_ORIGINS=${urls.web},http://127.0.0.1:${plan.ports.web}
-PUBLIC_TOPOGRAM_DEMO_USER_ID=${demo.userId}
-TOPOGRAM_DEMO_USER_ID=${demo.userId}
+PUBLIC_TOPOGRAM_DEMO_USER_ID=${demoUserId}
+TOPOGRAM_DEMO_USER_ID=${demoUserId}
 ${plan.runtimeReference.environment.envExample || ""}
 TOPOGRAM_SEED_DEMO=true
 `;
@@ -229,8 +230,8 @@ DATABASE_URL=postgresql://\${POSTGRES_USER}@localhost:${plan.ports.database || 5
 DATABASE_ADMIN_URL=postgresql://\${POSTGRES_USER}@localhost:${plan.ports.database || 5432}/postgres
 ${extraDatabaseLines ? `${extraDatabaseLines}\n` : ""}PUBLIC_TOPOGRAM_API_BASE_URL=${urls.api}
 TOPOGRAM_CORS_ORIGINS=${urls.web},http://127.0.0.1:${plan.ports.web}
-PUBLIC_TOPOGRAM_DEMO_USER_ID=${demo.userId}
-TOPOGRAM_DEMO_USER_ID=${demo.userId}
+PUBLIC_TOPOGRAM_DEMO_USER_ID=${demoUserId}
+TOPOGRAM_DEMO_USER_ID=${demoUserId}
 ${plan.runtimeReference.environment.envExample || ""}
 TOPOGRAM_SEED_DEMO=true
 `;

package/src/generator/runtime/runtime-check.js

@@ -3,6 +3,7 @@ import {
   buildVerificationSummary,
   getDefaultEnvironmentProjections,
   resolveRuntimeTopology,
+  runtimeDemoUserId,
   selectChecksByVerification,
   runtimePorts,
   runtimeUrls
@@ -74,11 +75,10 @@ function buildRuntimeCheckPlan(graph, options = {}) {
 
 function renderRuntimeCheckEnvExample(graph, options = {}) {
   const runtimeReference = getExampleImplementation(graph, options).runtime.reference;
-  const demo = runtimeReference.demoEnv;
   const urls = runtimeUrls(runtimeReference, resolveRuntimeTopology(graph, options));
   return `TOPOGRAM_API_BASE_URL=${urls.api}
 TOPOGRAM_WEB_BASE_URL=${urls.web}
-TOPOGRAM_DEMO_USER_ID=${demo.userId}
+TOPOGRAM_DEMO_USER_ID=${runtimeDemoUserId(runtimeReference)}
 ${runtimeReference.environment.envExample || ""}
 `;
 }
@@ -166,9 +166,9 @@ function envValue(name) {
   const fallbackMap = {
     TOPOGRAM_API_BASE_URL: process.env.PUBLIC_TOPOGRAM_API_BASE_URL || "http://localhost:${ports.server}",
     TOPOGRAM_WEB_BASE_URL: process.env.PUBLIC_TOPOGRAM_WEB_BASE_URL || \`http://localhost:\${process.env.WEB_PORT || "${ports.web}"}\`,
-    ${runtimeReference.runtimeCheck.demoContainerEnvVar}: process.env.PUBLIC_TOPOGRAM_DEMO_CONTAINER_ID || process.env.PUBLIC_TOPOGRAM_DEMO_PROJECT_ID || "",
-    ${runtimeReference.runtimeCheck.demoPrimaryEnvVar}: process.env.PUBLIC_TOPOGRAM_DEMO_PRIMARY_ID || process.env.PUBLIC_TOPOGRAM_DEMO_TASK_ID || process.env.PUBLIC_TOPOGRAM_DEMO_ISSUE_ID || "",
-    TOPOGRAM_DEMO_USER_ID: process.env.PUBLIC_TOPOGRAM_DEMO_USER_ID || "",
+    ${runtimeReference.runtimeCheck.demoContainerEnvVar}: process.env.PUBLIC_TOPOGRAM_DEMO_CONTAINER_ID || "",
+    ${runtimeReference.runtimeCheck.demoPrimaryEnvVar}: process.env.PUBLIC_TOPOGRAM_DEMO_PRIMARY_ID || "",
+    TOPOGRAM_DEMO_USER_ID: process.env.PUBLIC_TOPOGRAM_AUTH_USER_ID || process.env.PUBLIC_TOPOGRAM_DEMO_USER_ID || "",
     TOPOGRAM_AUTH_USER_ID: process.env.TOPOGRAM_DEMO_USER_ID || ""
   };
 

package/src/generator/runtime/shared.js

@@ -513,3 +513,12 @@ export function runtimeUrls(runtimeReference, topology = null) {
     web: `http://localhost:${ports.web}`
   };
 }
+
+/**
+ * @param {Record<string, any>|null|undefined} runtimeReference
+ * @returns {string}
+ */
+export function runtimeDemoUserId(runtimeReference) {
+  const demo = runtimeReference?.demoEnv || {};
+  return demo.userId || demo.memberId || demo.ownerId || demo.primaryActorId || "";
+}

package/src/generator/runtime/smoke.js

@@ -2,6 +2,7 @@ import {
   buildVerificationSummary,
   getDefaultEnvironmentProjections,
   resolveRuntimeTopology,
+  runtimeDemoUserId,
   runtimeUrls,
   selectChecksByVerification
 } from "./shared.js";
@@ -126,7 +127,7 @@ process.on("unhandledRejection", reportFatal);
 const apiBase = process.env.TOPOGRAM_API_BASE_URL || "";
 const webBase = process.env.TOPOGRAM_WEB_BASE_URL || "";
 const demoContainerId = process.env.${runtimeReference.smoke.defaultContainerEnvVar} || "${runtimeReference.demoEnv.containerId}";
-const demoUserId = process.env.TOPOGRAM_DEMO_USER_ID || "${runtimeReference.demoEnv.userId}";
+const demoUserId = process.env.TOPOGRAM_AUTH_USER_ID || process.env.TOPOGRAM_DEMO_USER_ID || "${runtimeDemoUserId(runtimeReference)}";
 const authToken = process.env.TOPOGRAM_AUTH_TOKEN || "";
 
 if (!apiBase || !webBase) {

package/src/generator/surfaces/web/design-intent.js

@@ -0,0 +1,308 @@
+// @ts-check
+
+const DEFAULT_DESIGN_INTENT = Object.freeze({
+  density: "comfortable",
+  tone: "neutral",
+  radiusScale: "medium",
+  colorRoles: Object.freeze({
+    primary: "accent"
+  }),
+  typographyRoles: Object.freeze({
+    body: "readable",
+    heading: "prominent"
+  }),
+  actionRoles: Object.freeze({
+    primary: "prominent"
+  }),
+  accessibility: Object.freeze({
+    contrast: "aa",
+    focus: "visible"
+  })
+});
+
+const DENSITY_VALUES = {
+  compact: {
+    spaceUnit: "0.75rem",
+    pagePadding: "1.5rem 1rem 3rem",
+    controlPadding: "0.55rem 0.75rem"
+  },
+  comfortable: {
+    spaceUnit: "1rem",
+    pagePadding: "2rem 1.25rem 4rem",
+    controlPadding: "0.7rem 1rem"
+  },
+  spacious: {
+    spaceUnit: "1.25rem",
+    pagePadding: "2.5rem 1.5rem 5rem",
+    controlPadding: "0.85rem 1.15rem"
+  }
+};
+
+const RADIUS_VALUES = {
+  none: {
+    card: "0",
+    control: "0",
+    pill: "0"
+  },
+  small: {
+    card: "8px",
+    control: "8px",
+    pill: "999px"
+  },
+  medium: {
+    card: "14px",
+    control: "12px",
+    pill: "999px"
+  },
+  large: {
+    card: "18px",
+    control: "16px",
+    pill: "999px"
+  }
+};
+
+const COLOR_VALUES = {
+  accent: "#0f5cc0",
+  critical: "#b42318",
+  danger: "#b42318",
+  success: "#027a48",
+  warning: "#b54708",
+  neutral: "#516173",
+  muted: "#607284"
+};
+
+const TONE_VALUES = {
+  neutral: {
+    text: "#182026",
+    muted: "#607284",
+    background: "linear-gradient(180deg, #f5f7fb 0%, #edf2f7 100%)",
+    surface: "#ffffff",
+    surfaceSubtle: "#fbfcfe",
+    border: "#d7e1ec"
+  },
+  operational: {
+    text: "#182026",
+    muted: "#607284",
+    background: "linear-gradient(180deg, #f5f7fb 0%, #edf2f7 100%)",
+    surface: "#ffffff",
+    surfaceSubtle: "#fbfcfe",
+    border: "#d7e1ec"
+  },
+  editorial: {
+    text: "#1f2933",
+    muted: "#5c6670",
+    background: "linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)",
+    surface: "#ffffff",
+    surfaceSubtle: "#f8fafc",
+    border: "#d8dee8"
+  },
+  playful: {
+    text: "#1f2937",
+    muted: "#5b6472",
+    background: "linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%)",
+    surface: "#ffffff",
+    surfaceSubtle: "#f7fbff",
+    border: "#d6e4f5"
+  }
+};
+
+/**
+ * @param {string|null|undefined} value
+ * @returns {string}
+ */
+function cssToken(value) {
+  return String(value || "default").replace(/[^A-Za-z0-9_-]/g, "_");
+}
+
+/**
+ * @param {Record<string, string>|null|undefined} source
+ * @param {Record<string, string>} fallback
+ * @returns {Record<string, string>}
+ */
+function mergeStringMap(source, fallback) {
+  return {
+    ...fallback,
+    ...(source && typeof source === "object" ? source : {})
+  };
+}
+
+/**
+ * @param {any} design
+ * @returns {{
+ *   density: string,
+ *   tone: string,
+ *   radiusScale: string,
+ *   colorRoles: Record<string, string>,
+ *   typographyRoles: Record<string, string>,
+ *   actionRoles: Record<string, string>,
+ *   accessibility: Record<string, string>
+ * }}
+ */
+export function normalizeDesignIntent(design) {
+  const value = design && typeof design === "object" ? design : {};
+  return {
+    density: typeof value.density === "string" ? value.density : DEFAULT_DESIGN_INTENT.density,
+    tone: typeof value.tone === "string" ? value.tone : DEFAULT_DESIGN_INTENT.tone,
+    radiusScale: typeof value.radiusScale === "string" ? value.radiusScale : DEFAULT_DESIGN_INTENT.radiusScale,
+    colorRoles: mergeStringMap(value.colorRoles, DEFAULT_DESIGN_INTENT.colorRoles),
+    typographyRoles: mergeStringMap(value.typographyRoles, DEFAULT_DESIGN_INTENT.typographyRoles),
+    actionRoles: mergeStringMap(value.actionRoles, DEFAULT_DESIGN_INTENT.actionRoles),
+    accessibility: mergeStringMap(value.accessibility, DEFAULT_DESIGN_INTENT.accessibility)
+  };
+}
+
+/**
+ * @param {Record<string, string>} map
+ * @param {string} prefix
+ * @returns {string[]}
+ */
+function tokenMapLines(map, prefix) {
+  return Object.entries(map)
+    .sort(([left], [right]) => left.localeCompare(right))
+    .map(([role, value]) => `  --topogram-design-${prefix}-${cssToken(role)}: ${cssToken(value)};`);
+}
+
+/**
+ * @param {any} design
+ * @returns {string}
+ */
+export function renderDesignIntentCss(design) {
+  const normalized = normalizeDesignIntent(design);
+  const tone = TONE_VALUES[normalized.tone] || TONE_VALUES.neutral;
+  const density = DENSITY_VALUES[normalized.density] || DENSITY_VALUES.comfortable;
+  const radius = RADIUS_VALUES[normalized.radiusScale] || RADIUS_VALUES.medium;
+  const primaryColor = COLOR_VALUES[normalized.colorRoles.primary] || COLOR_VALUES.accent;
+  const dangerColor = COLOR_VALUES[normalized.colorRoles.danger] || COLOR_VALUES.critical;
+  const focusColor = primaryColor;
+
+  return `/* Topogram semantic design intent. Generators map normalized UI tokens to stack CSS here. */
+:root {
+  --topogram-design-density: ${cssToken(normalized.density)};
+  --topogram-design-tone: ${cssToken(normalized.tone)};
+  --topogram-design-radius-scale: ${cssToken(normalized.radiusScale)};
+${tokenMapLines(normalized.colorRoles, "color").join("\n")}
+${tokenMapLines(normalized.typographyRoles, "typography").join("\n")}
+${tokenMapLines(normalized.actionRoles, "action").join("\n")}
+${tokenMapLines(normalized.accessibility, "accessibility").join("\n")}
+  --topogram-space-unit: ${density.spaceUnit};
+  --topogram-page-padding: ${density.pagePadding};
+  --topogram-control-padding: ${density.controlPadding};
+  --topogram-radius-card: ${radius.card};
+  --topogram-radius-control: ${radius.control};
+  --topogram-radius-pill: ${radius.pill};
+  --topogram-text-color: ${tone.text};
+  --topogram-muted-color: ${tone.muted};
+  --topogram-surface-background: ${tone.background};
+  --topogram-surface-card: ${tone.surface};
+  --topogram-surface-subtle: ${tone.surfaceSubtle};
+  --topogram-border-color: ${tone.border};
+  --topogram-action-primary-background: ${primaryColor};
+  --topogram-action-primary-color: #ffffff;
+  --topogram-action-danger-background: ${dangerColor};
+  --topogram-focus-outline: 3px solid ${focusColor};
+}
+`;
+}
+
+/**
+ * @param {ReturnType<typeof normalizeDesignIntent>} design
+ * @returns {Array<{ category: string, role: string|null, value: string, marker: string }>}
+ */
+function requiredDesignMarkers(design) {
+  return [
+    {
+      category: "density",
+      role: null,
+      value: design.density,
+      marker: "--topogram-design-density"
+    },
+    {
+      category: "tone",
+      role: null,
+      value: design.tone,
+      marker: "--topogram-design-tone"
+    },
+    {
+      category: "radius_scale",
+      role: null,
+      value: design.radiusScale,
+      marker: "--topogram-design-radius-scale"
+    },
+    ...Object.entries(design.colorRoles).map(([role, value]) => ({
+      category: "color_roles",
+      role,
+      value,
+      marker: `--topogram-design-color-${cssToken(role)}`
+    })),
+    ...Object.entries(design.typographyRoles).map(([role, value]) => ({
+      category: "typography_roles",
+      role,
+      value,
+      marker: `--topogram-design-typography-${cssToken(role)}`
+    })),
+    ...Object.entries(design.actionRoles).map(([role, value]) => ({
+      category: "action_roles",
+      role,
+      value,
+      marker: `--topogram-design-action-${cssToken(role)}`
+    })),
+    ...Object.entries(design.accessibility).map(([role, value]) => ({
+      category: "accessibility",
+      role,
+      value,
+      marker: `--topogram-design-accessibility-${cssToken(role)}`
+    }))
+  ];
+}
+
+/**
+ * @param {any} contract
+ * @param {Record<string, string>} files
+ * @param {string} cssPath
+ * @returns {{ coverage: any, diagnostics: any[] }}
+ */
+export function buildDesignIntentCoverage(contract, files, cssPath) {
+  const design = normalizeDesignIntent(contract?.design);
+  const css = files[cssPath] || "";
+  const markers = requiredDesignMarkers(design);
+  const mapped = markers.filter((item) => css.includes(item.marker));
+  const missing = markers.filter((item) => !css.includes(item.marker));
+  const coverage = {
+    status: missing.length === 0 ? "mapped" : "unmapped",
+    css_path: cssPath,
+    tokens: {
+      density: design.density,
+      tone: design.tone,
+      radius_scale: design.radiusScale,
+      color_roles: design.colorRoles,
+      typography_roles: design.typographyRoles,
+      action_roles: design.actionRoles,
+      accessibility: design.accessibility
+    },
+    mapped: mapped.map((item) => ({
+      category: item.category,
+      role: item.role,
+      value: item.value,
+      marker: item.marker
+    })),
+    missing: missing.map((item) => ({
+      category: item.category,
+      role: item.role,
+      value: item.value,
+      marker: item.marker
+    }))
+  };
+  return {
+    coverage,
+    diagnostics: missing.map((item) => ({
+      code: "design_intent_not_mapped",
+      severity: "error",
+      category: item.category,
+      role: item.role,
+      value: item.value,
+      marker: item.marker,
+      message: `UI design intent token '${item.category}${item.role ? `.${item.role}` : ""}' was not mapped into ${cssPath}.`,
+      suggested_fix: "Render Topogram semantic design variables with renderDesignIntentCss before writing the web stylesheet."
+    }))
+  };
+}

package/src/generator/surfaces/web/react.js

@@ -4,6 +4,7 @@ import {
   reactComponentUsageSupport,
   renderReactComponentRegion
 } from "./react-components.js";
+import { buildDesignIntentCoverage, renderDesignIntentCss } from "./design-intent.js";
 import { renderApiClientModule, renderLookupModule, renderVisibilityModule } from "./shared.js";
 
 function componentNameForScreen(screenId) {
@@ -197,6 +198,8 @@ function screenPagePath(screen) {
 
 function buildReactGenerationCoverage(contract, files, routeScreens) {
   const diagnostics = [];
+  const designIntent = buildDesignIntentCoverage(contract, files, "src/app.css");
+  diagnostics.push(...designIntent.diagnostics);
   const routeScreenIds = new Set(routeScreens.map((screen) => screen.id));
   const screens = (contract.screens || [])
     .filter((screen) => routeScreenIds.has(screen.id))
@@ -286,6 +289,7 @@ function buildReactGenerationCoverage(contract, files, routeScreens) {
       errors: diagnostics.filter((diagnostic) => diagnostic.severity === "error").length,
       warnings: diagnostics.filter((diagnostic) => diagnostic.severity === "warning").length
     },
+    design_intent: designIntent.coverage,
     screens,
     diagnostics
   };
@@ -477,42 +481,45 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 );
 `;
   files["src/vite-env.d.ts"] = `/// <reference types="vite/client" />\n`;
-  files["src/app.css"] = `:root {
+  files["src/app.css"] = `${renderDesignIntentCss(contract.design)}
+
+:root {
   font-family: system-ui, sans-serif;
-  color: #182026;
-  background: linear-gradient(180deg, #f5f7fb 0%, #edf2f7 100%);
+  color: var(--topogram-text-color);
+  background: var(--topogram-surface-background);
 }
 body { margin: 0; }
-a { color: #0f5cc0; text-decoration: none; }
+a { color: var(--topogram-action-primary-background); text-decoration: none; }
 a:hover { text-decoration: underline; }
-main { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
+main { max-width: 72rem; margin: 0 auto; padding: var(--topogram-page-padding); }
 .app-shell { min-height: 100vh; }
 .app-workspace { display: grid; grid-template-columns: 18rem minmax(0, 1fr); min-height: 100vh; }
 .app-main-shell { min-width: 0; }
-.app-sidebar { position: sticky; top: 0; align-self: start; min-height: 100vh; display: grid; align-content: start; gap: 1rem; padding: 1.25rem 1rem; border-right: 1px solid rgba(24, 32, 38, 0.08); background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); }
-.app-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(24, 32, 38, 0.08); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); }
+.app-sidebar { position: sticky; top: 0; align-self: start; min-height: 100vh; display: grid; align-content: start; gap: var(--topogram-space-unit); padding: 1.25rem 1rem; border-right: 1px solid rgba(24, 32, 38, 0.08); background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); }
+.app-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--topogram-space-unit); padding: 1rem 1.25rem; border-bottom: 1px solid rgba(24, 32, 38, 0.08); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); }
 .app-nav-links, .app-nav nav, .app-tabbar { display: flex; gap: 0.75rem; flex-wrap: wrap; }
 .app-nav.menu-bar { border-bottom-style: dashed; }
 .app-nav.compact { justify-content: flex-end; }
 .app-tabbar { position: sticky; bottom: 0; z-index: 10; justify-content: space-around; padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(24, 32, 38, 0.08); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); }
 .brand { font-weight: 700; letter-spacing: 0.01em; }
-.brand-mark { font-weight: 700; color: #607284; }
-.command-palette-button { background: #182026; color: white; border: none; border-radius: 999px; padding: 0.6rem 0.9rem; font: inherit; cursor: pointer; }
-.app-footer { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem 2rem; color: #607284; }
-.card { background: white; border-radius: 16px; padding: 1.25rem; box-shadow: 0 12px 30px rgba(24, 32, 38, 0.08); }
-.hero, .stack, .grid, .filters, .task-meta, .resource-meta, .definition-list { display: grid; gap: 1rem; }
+.brand-mark { font-weight: 700; color: var(--topogram-muted-color); }
+.command-palette-button { background: var(--topogram-text-color); color: white; border: none; border-radius: var(--topogram-radius-pill); padding: var(--topogram-control-padding); font: inherit; cursor: pointer; }
+.app-footer { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem 2rem; color: var(--topogram-muted-color); }
+.card { background: var(--topogram-surface-card); border-radius: var(--topogram-radius-card); padding: 1.25rem; box-shadow: 0 12px 30px rgba(24, 32, 38, 0.08); }
+.hero, .stack, .grid, .filters, .resource-meta, .definition-list { display: grid; gap: var(--topogram-space-unit); }
 .grid.two { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
 .filters { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 1rem 0 1.25rem; }
 label { display: grid; gap: 0.35rem; font-size: 0.95rem; }
 input, textarea, button, select { font: inherit; }
-input, textarea, select { width: 100%; box-sizing: border-box; border: 1px solid #c9d4e2; border-radius: 12px; padding: 0.7rem 0.85rem; background: white; }
+input, textarea, select { width: 100%; box-sizing: border-box; border: 1px solid #c9d4e2; border-radius: var(--topogram-radius-control); padding: var(--topogram-control-padding); background: white; }
 textarea { min-height: 8rem; resize: vertical; }
-button, .button-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border: none; border-radius: 999px; padding: 0.7rem 1rem; background: #0f5cc0; color: white; font-weight: 600; cursor: pointer; }
-.button-link.secondary { background: #e9eef6; color: #182026; }
+button, .button-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border: none; border-radius: var(--topogram-radius-pill); padding: var(--topogram-control-padding); background: var(--topogram-action-primary-background); color: var(--topogram-action-primary-color); font-weight: 600; cursor: pointer; }
+button:focus-visible, .button-link:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: var(--topogram-focus-outline); outline-offset: 2px; }
+.button-link.secondary { background: #e9eef6; color: var(--topogram-text-color); }
 .button-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
-.task-list, .resource-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; }
-.task-list li, .resource-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid #e0e8f1; border-radius: 14px; background: #fbfcfe; }
-.table-wrap { margin-top: 1rem; overflow-x: auto; border: 1px solid #d7e1ec; border-radius: 14px; background: white; }
+.resource-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; }
+.resource-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--topogram-space-unit); padding: 1rem; border: 1px solid #e0e8f1; border-radius: var(--topogram-radius-card); background: var(--topogram-surface-subtle); }
+.table-wrap { margin-top: 1rem; overflow-x: auto; border: 1px solid var(--topogram-border-color); border-radius: var(--topogram-radius-card); background: white; }
 .resource-table { width: 100%; border-collapse: collapse; min-width: 42rem; }
 .resource-table th, .resource-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid #e7edf5; vertical-align: top; }
 .resource-table th { font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: #516173; background: #f8fbff; }
@@ -521,28 +528,28 @@ button, .button-link { display: inline-flex; align-items: center; justify-conten
 .data-grid thead th { position: sticky; top: 0; z-index: 1; background: #eef5ff; }
 .data-grid-shell { box-shadow: inset 0 0 0 1px rgba(15, 92, 192, 0.04); }
 .cell-stack { display: grid; gap: 0.35rem; }
-.cell-secondary { color: #607284; font-size: 0.92rem; }
+.cell-secondary { color: var(--topogram-muted-color); font-size: 0.92rem; }
 .definition-list { grid-template-columns: minmax(8rem, 12rem) 1fr; align-items: start; }
 .definition-list dt { font-weight: 600; color: #516173; }
 .definition-list dd { margin: 0; }
-.badge { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: 999px; background: #eef4ff; color: #0f5cc0; font-size: 0.85rem; font-weight: 600; }
-.muted { color: #607284; }
+.badge { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: var(--topogram-radius-pill); background: #eef4ff; color: var(--topogram-action-primary-background); font-size: 0.85rem; font-weight: 600; }
+.muted { color: var(--topogram-muted-color); }
 .empty-state { padding: 1rem 0; }
 .error-text { color: #b42318; }
-.component-card { border: 1px solid #d7e1ec; border-radius: 14px; background: #fbfcfe; padding: 1rem; margin-top: 1rem; }
-.component-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
-.component-eyebrow { margin: 0 0 0.25rem; color: #607284; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
+.component-card { border: 1px solid var(--topogram-border-color); border-radius: var(--topogram-radius-card); background: var(--topogram-surface-subtle); padding: 1rem; margin-top: 1rem; }
+.component-header { display: flex; align-items: center; justify-content: space-between; gap: var(--topogram-space-unit); flex-wrap: wrap; }
+.component-eyebrow { margin: 0 0 0.25rem; color: var(--topogram-muted-color); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
 .component-card h2, .component-card h3 { margin: 0; }
 .component-table-wrap { margin-top: 1rem; }
 .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; }
-.summary-grid div, .board-column { border: 1px solid #e0e8f1; border-radius: 12px; background: white; padding: 0.85rem; }
+.summary-grid div, .board-column { border: 1px solid #e0e8f1; border-radius: var(--topogram-radius-control); background: white; padding: 0.85rem; }
 .summary-grid strong { display: block; font-size: 1.5rem; }
-.summary-grid span, .calendar-list span { color: #607284; font-size: 0.9rem; }
+.summary-grid span, .calendar-list span { color: var(--topogram-muted-color); font-size: 0.9rem; }
 .board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin-top: 1rem; }
-.board-card, .calendar-card { display: grid; gap: 0.25rem; border: 1px solid #e0e8f1; border-radius: 10px; background: #f8fbff; padding: 0.75rem; }
+.board-card, .calendar-card { display: grid; gap: 0.25rem; border: 1px solid #e0e8f1; border-radius: var(--topogram-radius-control); background: #f8fbff; padding: 0.75rem; }
 .calendar-list { display: grid; gap: 0.75rem; margin-top: 1rem; }
 @media (max-width: 900px) { .app-workspace { grid-template-columns: 1fr; } .app-sidebar { position: static; min-height: auto; border-right: none; border-bottom: 1px solid rgba(24, 32, 38, 0.08); } }
-@media (max-width: 640px) { .definition-list { grid-template-columns: 1fr; } .task-list li, .resource-list li { flex-direction: column; } .resource-table { min-width: 36rem; } .app-nav { flex-wrap: wrap; } }
+@media (max-width: 640px) { .definition-list { grid-template-columns: 1fr; } .resource-list li { flex-direction: column; } .resource-table { min-width: 36rem; } .app-nav { flex-wrap: wrap; } }
 `;
   files["src/App.tsx"] = buildAppTsx(contract, webReferenceWithDefaults);
   files["src/lib/topogram/api-contracts.json"] = `${JSON.stringify(realization.apiContracts, null, 2)}\n`;

package/src/generator/surfaces/web/sveltekit.js

@@ -2,6 +2,7 @@ import { buildWebRealization } from "../../../realization/ui/index.js";
 import { lookupRouteSegment } from "../services/runtime-helpers.js";
 import { getExampleImplementation } from "../../../example-implementation.js";
 import { renderApiClientModule, renderLookupModule, renderVisibilityModule } from "./shared.js";
+import { buildDesignIntentCoverage, renderDesignIntentCss } from "./design-intent.js";
 import {
   renderSvelteKitComponentRegion,
   svelteKitComponentUsageSupport
@@ -165,6 +166,8 @@ ${renderedRegions || `    ${defaultCollection}`}
 
 function buildSvelteKitGenerationCoverage(contract, files, implementationScreenIds) {
   const diagnostics = [];
+  const designIntent = buildDesignIntentCoverage(contract, files, "src/app.css");
+  diagnostics.push(...designIntent.diagnostics);
   const screens = (contract.screens || [])
     .filter((screen) => Boolean(screen.route) && screen.route !== "/")
     .map((screen) => {
@@ -258,6 +261,7 @@ function buildSvelteKitGenerationCoverage(contract, files, implementationScreenI
       errors: diagnostics.filter((diagnostic) => diagnostic.severity === "error").length,
       warnings: diagnostics.filter((diagnostic) => diagnostic.severity === "warning").length
     },
+    design_intent: designIntent.coverage,
     screens,
     diagnostics
   };
@@ -319,9 +323,9 @@ function buildSvelteKitScaffold(contract, apiContracts, options = {}) {
   const navigationPatterns = (contract.navigation?.patterns || []).join(" ");
   const hasCommandPalette = (contract.navigation?.patterns || []).includes("command_palette");
   const homeDescription = webReference.home.heroDescriptionTemplate.replace("PROFILE", `\`${profile}\``);
-  const demoTaskEnvVar = webReference.home.demoPrimaryEnvVar;
-  const ownerEnvVar = webReference.createPrimary.defaultAssigneeEnvVar;
-  const projectEnvVar = webReference.createPrimary.defaultContainerEnvVar;
+  const demoPrimaryEnvVar = webReference.home.demoPrimaryEnvVar;
+  const ownerEnvVar = webReference.createPrimary.defaultOwnerEnvVar || webReference.createPrimary.defaultAssigneeEnvVar;
+  const containerEnvVar = webReference.createPrimary.defaultContainerEnvVar;
   files["package.json"] = JSON.stringify(
     {
       name: contract.projection.id,
@@ -370,7 +374,8 @@ function buildSvelteKitScaffold(contract, apiContracts, options = {}) {
   files["src/app.html"] =
     "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    %sveltekit.head%\n  </head>\n  <body data-sveltekit-preload-data=\"hover\">\n    <div style=\"display: contents\">%sveltekit.body%</div>\n  </body>\n</html>\n";
   files["src/app.css"] =
-    ":root {\n  font-family: system-ui, sans-serif;\n  color: #182026;\n  background: linear-gradient(180deg, #f5f7fb 0%, #edf2f7 100%);\n}\nbody {\n  margin: 0;\n}\na {\n  color: #0f5cc0;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\nmain {\n  max-width: 72rem;\n  margin: 0 auto;\n  padding: 2rem 1.25rem 4rem;\n}\n.app-shell {\n  min-height: 100vh;\n}\n.app-workspace {\n  display: grid;\n  grid-template-columns: 18rem minmax(0, 1fr);\n  min-height: 100vh;\n}\n.app-main-shell {\n  min-width: 0;\n}\n.app-sidebar {\n  position: sticky;\n  top: 0;\n  align-self: start;\n  min-height: 100vh;\n  display: grid;\n  align-content: start;\n  gap: 1rem;\n  padding: 1.25rem 1rem;\n  border-right: 1px solid rgba(24, 32, 38, 0.08);\n  background: rgba(255, 255, 255, 0.86);\n  backdrop-filter: blur(12px);\n}\n.app-nav {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 1rem 1.25rem;\n  border-bottom: 1px solid rgba(24, 32, 38, 0.08);\n  background: rgba(255, 255, 255, 0.9);\n  backdrop-filter: blur(12px);\n}\n.app-nav-links,\n.app-nav nav,\n.app-tabbar {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n}\n.app-nav.menu-bar {\n  border-bottom-style: dashed;\n}\n.app-nav.compact {\n  justify-content: flex-end;\n}\n.app-tabbar {\n  position: sticky;\n  bottom: 0;\n  z-index: 10;\n  justify-content: space-around;\n  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));\n  border-top: 1px solid rgba(24, 32, 38, 0.08);\n  background: rgba(255, 255, 255, 0.92);\n  backdrop-filter: blur(12px);\n}\n.brand {\n  font-weight: 700;\n  letter-spacing: 0.01em;\n}\n.brand-mark {\n  font-weight: 700;\n  color: #607284;\n}\n.command-palette-button {\n  background: #182026;\n  color: white;\n  border: none;\n  border-radius: 999px;\n  padding: 0.6rem 0.9rem;\n  font: inherit;\n  cursor: pointer;\n}\n.app-footer {\n  max-width: 72rem;\n  margin: 0 auto;\n  padding: 0 1.25rem 2rem;\n  color: #607284;\n}\n.card {\n  background: white;\n  border-radius: 16px;\n  padding: 1.25rem;\n  box-shadow: 0 12px 30px rgba(24, 32, 38, 0.08);\n}\n.hero {\n  display: grid;\n  gap: 1rem;\n}\n.grid {\n  display: grid;\n  gap: 1rem;\n}\n.grid.two {\n  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));\n}\n.filters {\n  display: grid;\n  gap: 0.75rem;\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n  margin: 1rem 0 1.25rem;\n}\nlabel {\n  display: grid;\n  gap: 0.35rem;\n  font-size: 0.95rem;\n}\ninput,\ntextarea,\nbutton,\nselect {\n  font: inherit;\n}\ninput,\ntextarea,\nselect {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid #c9d4e2;\n  border-radius: 12px;\n  padding: 0.7rem 0.85rem;\n  background: white;\n}\ntextarea {\n  min-height: 8rem;\n  resize: vertical;\n}\nbutton,\n.button-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.35rem;\n  border: none;\n  border-radius: 999px;\n  padding: 0.7rem 1rem;\n  background: #0f5cc0;\n  color: white;\n  font-weight: 600;\n  cursor: pointer;\n}\n.button-link.secondary {\n  background: #e9eef6;\n  color: #182026;\n}\n.button-row {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.stack {\n  display: grid;\n  gap: 1rem;\n}\n.task-list,\n.resource-list {\n  list-style: none;\n  padding: 0;\n  margin: 1rem 0 0;\n  display: grid;\n  gap: 0.75rem;\n}\n.task-list li,\n.resource-list li {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid #e0e8f1;\n  border-radius: 14px;\n  background: #fbfcfe;\n}\n.table-wrap {\n  margin-top: 1rem;\n  overflow-x: auto;\n  border: 1px solid #d7e1ec;\n  border-radius: 14px;\n  background: white;\n}\n.resource-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 42rem;\n}\n.resource-table th,\n.resource-table td {\n  padding: 0.85rem 1rem;\n  text-align: left;\n  border-bottom: 1px solid #e7edf5;\n  vertical-align: top;\n}\n.resource-table th {\n  font-size: 0.85rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: #516173;\n  background: #f8fbff;\n}\n.resource-table tbody tr:hover {\n  background: #fbfdff;\n}\n.data-grid {\n  min-width: 64rem;\n  font-size: 0.95rem;\n}\n.data-grid thead th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: #eef5ff;\n}\n.data-grid-shell {\n  box-shadow: inset 0 0 0 1px rgba(15, 92, 192, 0.04);\n}\n.cell-stack,\n.task-meta,\n.definition-list {\n  display: grid;\n  gap: 0.5rem;\n}\n.cell-secondary {\n  color: #607284;\n  font-size: 0.92rem;\n}\n.definition-list {\n  grid-template-columns: minmax(8rem, 12rem) 1fr;\n  align-items: start;\n}\n.definition-list dt {\n  font-weight: 600;\n  color: #516173;\n}\n.definition-list dd {\n  margin: 0;\n}\n.badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.25rem 0.6rem;\n  border-radius: 999px;\n  background: #eef4ff;\n  color: #0f5cc0;\n  font-size: 0.85rem;\n  font-weight: 600;\n}\n.muted {\n  color: #607284;\n}\n.empty-state {\n  padding: 1rem 0;\n}\n.component-card {\n  border: 1px solid #d7e1ec;\n  border-radius: 14px;\n  background: #fbfcfe;\n  padding: 1rem;\n  margin-top: 1rem;\n}\n.component-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.component-eyebrow {\n  margin: 0 0 0.25rem;\n  color: #607284;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n.component-card h2,\n.component-card h3 {\n  margin: 0;\n}\n.component-table-wrap {\n  margin-top: 1rem;\n}\n.summary-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n  gap: 0.75rem;\n}\n.summary-grid div,\n.board-column {\n  border: 1px solid #e0e8f1;\n  border-radius: 12px;\n  background: white;\n  padding: 0.85rem;\n}\n.summary-grid strong {\n  display: block;\n  font-size: 1.5rem;\n}\n.summary-grid span,\n.calendar-list span {\n  color: #607284;\n  font-size: 0.9rem;\n}\n.board-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n.board-card,\n.calendar-card {\n  display: grid;\n  gap: 0.25rem;\n  border: 1px solid #e0e8f1;\n  border-radius: 10px;\n  background: #f8fbff;\n  padding: 0.75rem;\n}\n.calendar-list {\n  display: grid;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\nsmall.route-hint {\n  display: block;\n  color: #607284;\n  margin-top: 0.25rem;\n}\n@media (max-width: 900px) {\n  .app-workspace {\n    grid-template-columns: 1fr;\n  }\n  .app-sidebar {\n    position: static;\n    min-height: auto;\n    border-right: none;\n    border-bottom: 1px solid rgba(24, 32, 38, 0.08);\n  }\n}\n@media (max-width: 640px) {\n  .definition-list {\n    grid-template-columns: 1fr;\n  }\n  .task-list li,\n  .resource-list li {\n    flex-direction: column;\n  }\n  .resource-table {\n    min-width: 36rem;\n  }\n  .app-nav {\n    flex-wrap: wrap;\n  }\n}\n";
+    `${renderDesignIntentCss(contract.design)}\n` +
+    ":root {\n  font-family: system-ui, sans-serif;\n  color: var(--topogram-text-color);\n  background: var(--topogram-surface-background);\n}\nbody {\n  margin: 0;\n}\na {\n  color: var(--topogram-action-primary-background);\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\nmain {\n  max-width: 72rem;\n  margin: 0 auto;\n  padding: var(--topogram-page-padding);\n}\n.app-shell {\n  min-height: 100vh;\n}\n.app-workspace {\n  display: grid;\n  grid-template-columns: 18rem minmax(0, 1fr);\n  min-height: 100vh;\n}\n.app-main-shell {\n  min-width: 0;\n}\n.app-sidebar {\n  position: sticky;\n  top: 0;\n  align-self: start;\n  min-height: 100vh;\n  display: grid;\n  align-content: start;\n  gap: var(--topogram-space-unit);\n  padding: 1.25rem 1rem;\n  border-right: 1px solid rgba(24, 32, 38, 0.08);\n  background: rgba(255, 255, 255, 0.86);\n  backdrop-filter: blur(12px);\n}\n.app-nav {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--topogram-space-unit);\n  padding: 1rem 1.25rem;\n  border-bottom: 1px solid rgba(24, 32, 38, 0.08);\n  background: rgba(255, 255, 255, 0.9);\n  backdrop-filter: blur(12px);\n}\n.app-nav-links,\n.app-nav nav,\n.app-tabbar {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n}\n.app-nav.menu-bar {\n  border-bottom-style: dashed;\n}\n.app-nav.compact {\n  justify-content: flex-end;\n}\n.app-tabbar {\n  position: sticky;\n  bottom: 0;\n  z-index: 10;\n  justify-content: space-around;\n  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));\n  border-top: 1px solid rgba(24, 32, 38, 0.08);\n  background: rgba(255, 255, 255, 0.92);\n  backdrop-filter: blur(12px);\n}\n.brand {\n  font-weight: 700;\n  letter-spacing: 0.01em;\n}\n.brand-mark {\n  font-weight: 700;\n  color: var(--topogram-muted-color);\n}\n.command-palette-button {\n  background: var(--topogram-text-color);\n  color: white;\n  border: none;\n  border-radius: var(--topogram-radius-pill);\n  padding: var(--topogram-control-padding);\n  font: inherit;\n  cursor: pointer;\n}\n.app-footer {\n  max-width: 72rem;\n  margin: 0 auto;\n  padding: 0 1.25rem 2rem;\n  color: var(--topogram-muted-color);\n}\n.card {\n  background: var(--topogram-surface-card);\n  border-radius: var(--topogram-radius-card);\n  padding: 1.25rem;\n  box-shadow: 0 12px 30px rgba(24, 32, 38, 0.08);\n}\n.hero {\n  display: grid;\n  gap: var(--topogram-space-unit);\n}\n.grid {\n  display: grid;\n  gap: var(--topogram-space-unit);\n}\n.grid.two {\n  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));\n}\n.filters {\n  display: grid;\n  gap: 0.75rem;\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n  margin: 1rem 0 1.25rem;\n}\nlabel {\n  display: grid;\n  gap: 0.35rem;\n  font-size: 0.95rem;\n}\ninput,\ntextarea,\nbutton,\nselect {\n  font: inherit;\n}\ninput,\ntextarea,\nselect {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid #c9d4e2;\n  border-radius: var(--topogram-radius-control);\n  padding: var(--topogram-control-padding);\n  background: white;\n}\ntextarea {\n  min-height: 8rem;\n  resize: vertical;\n}\nbutton,\n.button-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.35rem;\n  border: none;\n  border-radius: var(--topogram-radius-pill);\n  padding: var(--topogram-control-padding);\n  background: var(--topogram-action-primary-background);\n  color: var(--topogram-action-primary-color);\n  font-weight: 600;\n  cursor: pointer;\n}\nbutton:focus-visible,\n.button-link:focus-visible,\na:focus-visible,\ninput:focus-visible,\ntextarea:focus-visible,\nselect:focus-visible {\n  outline: var(--topogram-focus-outline);\n  outline-offset: 2px;\n}\n.button-link.secondary {\n  background: #e9eef6;\n  color: var(--topogram-text-color);\n}\n.button-row {\n  display: flex;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.stack {\n  display: grid;\n  gap: var(--topogram-space-unit);\n}\n\n.resource-list {\n  list-style: none;\n  padding: 0;\n  margin: 1rem 0 0;\n  display: grid;\n  gap: 0.75rem;\n}\n\n.resource-list li {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--topogram-space-unit);\n  padding: 1rem;\n  border: 1px solid #e0e8f1;\n  border-radius: var(--topogram-radius-card);\n  background: var(--topogram-surface-subtle);\n}\n.table-wrap {\n  margin-top: 1rem;\n  overflow-x: auto;\n  border: 1px solid var(--topogram-border-color);\n  border-radius: var(--topogram-radius-card);\n  background: white;\n}\n.resource-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 42rem;\n}\n.resource-table th,\n.resource-table td {\n  padding: 0.85rem 1rem;\n  text-align: left;\n  border-bottom: 1px solid #e7edf5;\n  vertical-align: top;\n}\n.resource-table th {\n  font-size: 0.85rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: #516173;\n  background: #f8fbff;\n}\n.resource-table tbody tr:hover {\n  background: #fbfdff;\n}\n.data-grid {\n  min-width: 64rem;\n  font-size: 0.95rem;\n}\n.data-grid thead th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: #eef5ff;\n}\n.data-grid-shell {\n  box-shadow: inset 0 0 0 1px rgba(15, 92, 192, 0.04);\n}\n.cell-stack,\n.resource-meta,\n.definition-list {\n  display: grid;\n  gap: 0.5rem;\n}\n.cell-secondary {\n  color: var(--topogram-muted-color);\n  font-size: 0.92rem;\n}\n.definition-list {\n  grid-template-columns: minmax(8rem, 12rem) 1fr;\n  align-items: start;\n}\n.definition-list dt {\n  font-weight: 600;\n  color: #516173;\n}\n.definition-list dd {\n  margin: 0;\n}\n.badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.25rem 0.6rem;\n  border-radius: var(--topogram-radius-pill);\n  background: #eef4ff;\n  color: var(--topogram-action-primary-background);\n  font-size: 0.85rem;\n  font-weight: 600;\n}\n.muted {\n  color: var(--topogram-muted-color);\n}\n.empty-state {\n  padding: 1rem 0;\n}\n.component-card {\n  border: 1px solid var(--topogram-border-color);\n  border-radius: var(--topogram-radius-card);\n  background: var(--topogram-surface-subtle);\n  padding: 1rem;\n  margin-top: 1rem;\n}\n.component-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--topogram-space-unit);\n  flex-wrap: wrap;\n}\n.component-eyebrow {\n  margin: 0 0 0.25rem;\n  color: var(--topogram-muted-color);\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n.component-card h2,\n.component-card h3 {\n  margin: 0;\n}\n.component-table-wrap {\n  margin-top: 1rem;\n}\n.summary-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n  gap: 0.75rem;\n}\n.summary-grid div,\n.board-column {\n  border: 1px solid #e0e8f1;\n  border-radius: var(--topogram-radius-control);\n  background: white;\n  padding: 0.85rem;\n}\n.summary-grid strong {\n  display: block;\n  font-size: 1.5rem;\n}\n.summary-grid span,\n.calendar-list span {\n  color: var(--topogram-muted-color);\n  font-size: 0.9rem;\n}\n.board-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n.board-card,\n.calendar-card {\n  display: grid;\n  gap: 0.25rem;\n  border: 1px solid #e0e8f1;\n  border-radius: var(--topogram-radius-control);\n  background: #f8fbff;\n  padding: 0.75rem;\n}\n.calendar-list {\n  display: grid;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\nsmall.route-hint {\n  display: block;\n  color: var(--topogram-muted-color);\n  margin-top: 0.25rem;\n}\n@media (max-width: 900px) {\n  .app-workspace {\n    grid-template-columns: 1fr;\n  }\n  .app-sidebar {\n    position: static;\n    min-height: auto;\n    border-right: none;\n    border-bottom: 1px solid rgba(24, 32, 38, 0.08);\n  }\n}\n@media (max-width: 640px) {\n  .definition-list {\n    grid-template-columns: 1fr;\n  }\n  .resource-list li {\n    flex-direction: column;\n  }\n  .resource-table {\n    min-width: 36rem;\n  }\n  .app-nav {\n    flex-wrap: wrap;\n  }\n}\n";
   const navMarkup = navLinks.map((link) => `      <a href="${link.route}">${link.label}</a>`).join("\n");
   const shellLayout =
     shellMode === "split_view"
@@ -381,7 +386,7 @@ function buildSvelteKitScaffold(contract, apiContracts, options = {}) {
   files["src/routes/+layout.svelte"] = `<script${useTypescript ? ' lang="ts"' : ""}>\n  import "../app.css";\n</script>\n\n<div class="app-shell" data-shell="${shellMode}" data-windowing="${windowingMode}" data-navigation-patterns="${navigationPatterns}">\n  ${shellLayout}\n${footerEnabled ? `\n  <footer class="app-footer">\n    <span>Generated from Topogram</span>\n  </footer>` : ""}\n</div>\n`;
   files["src/routes/+page.svelte"] = webRenderers.renderHomePage({
     useTypescript,
-    demoPrimaryEnvVar: demoTaskEnvVar,
+    demoPrimaryEnvVar,
     screens: contract.screens.map((screen) => ({
       id: screen.id,
       title: screen.title || screen.id,
@@ -402,16 +407,16 @@ function buildSvelteKitScaffold(contract, apiContracts, options = {}) {
     Object.assign(files, buildGenericSvelteKitScreenFiles(screen, contract, useTypescript));
   }
 
-  const taskList = contract.screens.find((screen) => screen.id === webScreenReference.listScreenId);
-  const taskDetail = contract.screens.find((screen) => screen.id === webScreenReference.detailScreenId);
-  const taskCreate = contract.screens.find((screen) => screen.id === webScreenReference.createScreenId);
-  const taskEdit = contract.screens.find((screen) => screen.id === webScreenReference.editScreenId);
-  const taskExports = webScreenReference.exportsScreenId
+  const primaryList = contract.screens.find((screen) => screen.id === webScreenReference.listScreenId);
+  const primaryDetail = contract.screens.find((screen) => screen.id === webScreenReference.detailScreenId);
+  const primaryCreate = contract.screens.find((screen) => screen.id === webScreenReference.createScreenId);
+  const primaryEdit = contract.screens.find((screen) => screen.id === webScreenReference.editScreenId);
+  const primaryExports = webScreenReference.exportsScreenId
     ? contract.screens.find((screen) => screen.id === webScreenReference.exportsScreenId)
     : null;
-  const taskListLookups = Object.fromEntries((taskList?.lookups || []).map((lookup) => [lookup.field, lookupDescriptor(lookup)]));
-  const taskCreateLookups = Object.fromEntries((taskCreate?.lookups || []).map((lookup) => [lookup.field, lookupDescriptor(lookup)]));
-  const taskEditLookups = Object.fromEntries((taskEdit?.lookups || []).map((lookup) => [lookup.field, lookupDescriptor(lookup)]));
+  const primaryListLookups = Object.fromEntries((primaryList?.lookups || []).map((lookup) => [lookup.field, lookupDescriptor(lookup)]));
+  const primaryCreateLookups = Object.fromEntries((primaryCreate?.lookups || []).map((lookup) => [lookup.field, lookupDescriptor(lookup)]));
+  const primaryEditLookups = Object.fromEntries((primaryEdit?.lookups || []).map((lookup) => [lookup.field, lookupDescriptor(lookup)]));
   const routePageScreenIds = new Map(
     (contract.screens || [])
       .filter((screen) => screen.route && screen.route !== "/")
@@ -419,19 +424,19 @@ function buildSvelteKitScaffold(contract, apiContracts, options = {}) {
   );
   const implementationScreenIds = new Set();
 
-  if (taskList?.route && taskDetail?.route && taskCreate?.route && taskEdit?.route) {
+  if (primaryList?.route && primaryDetail?.route && primaryCreate?.route && primaryEdit?.route) {
     for (const [relativePath, contents] of Object.entries(webRenderers.renderRoutes({
       useTypescript,
       contract,
-      taskList,
-      taskDetail,
-      taskCreate,
-      taskEdit,
-      taskExports,
-      taskListLookups,
-      taskCreateLookups,
-      taskEditLookups,
-      projectEnvVar,
+      primaryList,
+      primaryDetail,
+      primaryCreate,
+      primaryEdit,
+      primaryExports,
+      primaryListLookups,
+      primaryCreateLookups,
+      primaryEditLookups,
+      containerEnvVar,
       ownerEnvVar,
       webReference,
       prettyScreenKind

package/src/generator/surfaces/web/vanilla.js

@@ -1,6 +1,7 @@
 // @ts-check
 
-import { getProjection } from "../shared.js";
+import { buildWebRealization } from "../../../realization/ui/index.js";
+import { buildDesignIntentCoverage, renderDesignIntentCss } from "./design-intent.js";
 
 function slugify(value) {
   return String(value || "page")
@@ -9,14 +10,8 @@ function slugify(value) {
     .replace(/^-+|-+$/g, "") || "page";
 }
 
-function titleForScreen(graph, screenId) {
-  for (const projection of graph.byKind.projection || []) {
-    const screen = (projection.uiScreens || []).find((entry) => entry.id === screenId);
-    if (screen?.title) {
-      return screen.title;
-    }
-  }
-  return screenId
+function titleForScreen(screenId) {
+  return String(screenId || "page")
     .split(/[_\-\s]+/)
     .filter(Boolean)
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
@@ -55,10 +50,12 @@ ${body}
 `;
 }
 
-function renderStyles() {
-  return `:root {
-  color: #182026;
-  background: #f6f8fb;
+function renderStyles(design) {
+  return `${renderDesignIntentCss(design)}
+
+:root {
+  color: var(--topogram-text-color);
+  background: var(--topogram-surface-background);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
@@ -70,14 +67,14 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--topogram-space-unit);
   padding: 1rem 1.25rem;
-  border-bottom: 1px solid #d8e0ea;
-  background: #ffffff;
+  border-bottom: 1px solid var(--topogram-border-color);
+  background: var(--topogram-surface-card);
 }
 
 .brand {
-  color: #182026;
+  color: var(--topogram-text-color);
   font-weight: 700;
   text-decoration: none;
 }
@@ -89,27 +86,32 @@ nav {
 }
 
 nav a {
-  color: #0f5cc0;
+  color: var(--topogram-action-primary-background);
   text-decoration: none;
 }
 
 main {
   display: grid;
-  gap: 1rem;
+  gap: var(--topogram-space-unit);
   max-width: 56rem;
   margin: 0 auto;
-  padding: 2rem 1.25rem 4rem;
+  padding: var(--topogram-page-padding);
 }
 
 .panel {
-  border: 1px solid #d8e0ea;
-  border-radius: 8px;
-  background: #ffffff;
+  border: 1px solid var(--topogram-border-color);
+  border-radius: var(--topogram-radius-card);
+  background: var(--topogram-surface-card);
   padding: 1.25rem;
 }
 
 .muted {
-  color: #607284;
+  color: var(--topogram-muted-color);
+}
+
+a:focus-visible {
+  outline: var(--topogram-focus-outline);
+  outline-offset: 2px;
 }
 `;
 }
@@ -158,6 +160,67 @@ console.log(\`Checked \${htmlFiles.length} vanilla page(s).\`);
 `;
 }
 
+function buildVanillaGenerationCoverage(contract, files, routes) {
+  const diagnostics = [];
+  const designIntent = buildDesignIntentCoverage(contract, files, "styles.css");
+  diagnostics.push(...designIntent.diagnostics);
+  const screens = routes.map((route) => {
+    const contents = files[route.file] || "";
+    const rendered = Boolean(contents);
+    if (!rendered) {
+      diagnostics.push({
+        code: "screen_route_not_rendered",
+        severity: "error",
+        screen: route.screenId,
+        route: route.path,
+        message: `Screen '${route.screenId}' has route '${route.path}' but no vanilla HTML page was generated.`,
+        suggested_fix: "Check the vanilla web generator route emission for this screen."
+      });
+    }
+    return {
+      id: route.screenId,
+      route: route.path,
+      page: route.file,
+      rendered,
+      renderer: rendered ? "generator" : "missing",
+      component_usages: []
+    };
+  });
+  return {
+    type: "generation_coverage",
+    surface: "web",
+    generator: "topogram/vanilla-web",
+    projection: {
+      id: contract.projection.id,
+      name: contract.projection.name,
+      platform: contract.projection.platform
+    },
+    summary: {
+      routed_screens: screens.length,
+      rendered_screens: screens.filter((screen) => screen.rendered).length,
+      implementation_screens: 0,
+      generator_screens: screens.filter((screen) => screen.renderer === "generator").length,
+      component_usages: 0,
+      rendered_component_usages: 0,
+      diagnostics: diagnostics.length,
+      errors: diagnostics.filter((diagnostic) => diagnostic.severity === "error").length,
+      warnings: diagnostics.filter((diagnostic) => diagnostic.severity === "warning").length
+    },
+    design_intent: designIntent.coverage,
+    screens,
+    diagnostics
+  };
+}
+
+function assertGenerationCoverage(coverage) {
+  const errors = (coverage.diagnostics || []).filter((diagnostic) => diagnostic.severity === "error");
+  if (errors.length === 0) {
+    return;
+  }
+  const details = errors.map((diagnostic) => diagnostic.message).join("; ");
+  throw new Error(`Vanilla web generation coverage failed: ${details}`);
+}
+
 function renderDevScript() {
   return `import http from "node:http";
 import fs from "node:fs";
@@ -192,20 +255,19 @@ http.createServer((req, res) => {
 }
 
 export function generateVanillaWebApp(graph, options = {}) {
-  const projection = getProjection(graph, options.projectionId);
-  const routeEntries = projection.uiRoutes?.length
-    ? projection.uiRoutes
-    : [{ screenId: "home", path: "/" }];
-  const routes = routeEntries.map((route) => ({
-    screenId: route.screenId,
-    path: route.path,
-    title: titleForScreen(graph, route.screenId),
-    file: routeFileName(route.path)
+  const realization = buildWebRealization(graph, options);
+  const contract = realization.contract;
+  const routeScreens = (contract.screens || []).filter((screen) => Boolean(screen.route));
+  const routes = (routeScreens.length > 0 ? routeScreens : [{ id: "home", route: "/", title: "Home" }]).map((screen) => ({
+    screenId: screen.id,
+    path: screen.route || "/",
+    title: screen.title || titleForScreen(screen.id),
+    file: routeFileName(screen.route || "/")
   }));
   const nav = routes.map(({ title, file }) => ({ title, file }));
   const files = {
     "package.json": `${JSON.stringify({
-      name: projection.id,
+      name: contract.projection.id,
       private: true,
       version: "0.1.0",
       type: "module",
@@ -215,7 +277,7 @@ export function generateVanillaWebApp(graph, options = {}) {
         check: "node ./scripts/check.mjs"
       }
     }, null, 2)}\n`,
-    "styles.css": renderStyles(),
+    "styles.css": renderStyles(contract.design),
     "app.js": renderBrowserScript(),
     "scripts/build.mjs": renderBuildScript(),
     "scripts/check.mjs": renderCheckScript(),
@@ -229,11 +291,15 @@ export function generateVanillaWebApp(graph, options = {}) {
       body: `      <section class="panel">
         <p class="muted">Page ${index + 1} of ${routes.length}</p>
         <h1>${route.title}</h1>
-        <p>This page was generated from the <code>${projection.id}</code> Topogram web projection.</p>
+        <p>This page was generated from the <code>${contract.projection.id}</code> Topogram web projection.</p>
         <p class="muted">Generated timestamp: <span data-generated-at>pending</span></p>
       </section>`
     });
   });
 
+  const coverage = buildVanillaGenerationCoverage(contract, files, routes);
+  assertGenerationCoverage(coverage);
+  files["topogram/generation-coverage.json"] = `${JSON.stringify(coverage, null, 2)}\n`;
+  files["topogram/ui-web-contract.json"] = `${JSON.stringify(contract, null, 2)}\n`;
   return files;
 }