@topogram/cli 0.3.51 → 0.3.53

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

@@ -4,9 +4,9 @@ import { getExampleImplementation } from "../../../example-implementation.js";
 import { renderApiClientModule, renderLookupModule, renderVisibilityModule } from "./shared.js";
 import { buildDesignIntentCoverage, renderDesignIntentCss } from "./design-intent.js";
 import {
-  renderSvelteKitComponentRegion,
-  svelteKitComponentUsageSupport
-} from "./sveltekit-components.js";
+  renderSvelteKitWidgetRegion,
+  svelteKitWidgetUsageSupport
+} from "./sveltekit-widgets.js";
 
 function routePathToSvelteKitDirectory(routePath) {
   if (!routePath || routePath === "/") {
@@ -40,7 +40,7 @@ function screenRegions(screen) {
   for (const region of screen?.regions || []) {
     if (region?.name) names.add(region.name);
   }
-  for (const usage of screen?.components || []) {
+  for (const usage of screen?.widgets || []) {
     if (usage?.region) names.add(usage.region);
   }
   return [...names];
@@ -65,7 +65,7 @@ function sampleItemsForScreen(screen) {
       title: `${title} completed sample`,
       name: `${title} completed sample`,
       message: `${title} completed sample`,
-      description: "Second generated row for component rendering checks.",
+      description: "Second generated row for widget rendering checks.",
       status: "completed",
       priority: "low",
       created_at: "2026-01-02",
@@ -82,8 +82,8 @@ function screenRoutePagePath(screen) {
   return `${routePathToSvelteKitDirectory(screen.route)}/+page.svelte`;
 }
 
-function screenComponentUsages(screen) {
-  return Array.isArray(screen?.components) ? screen.components : [];
+function screenWidgetUsages(screen) {
+  return Array.isArray(screen?.widgets) ? screen.widgets : [];
 }
 
 function buildGenericSvelteKitScreenFiles(screen, contract, useTypescript) {
@@ -94,8 +94,8 @@ function buildGenericSvelteKitScreenFiles(screen, contract, useTypescript) {
   const canLoadFromApi = loadCapabilityId && !isDynamicRoute(screen.route);
   const renderedRegions = screenRegions(screen)
     .map((region) => {
-      const rendered = renderSvelteKitComponentRegion(screen, region, {
-        componentContracts: contract.components,
+      const rendered = renderSvelteKitWidgetRegion(screen, region, {
+        widgetContracts: contract.widgets,
         itemsExpression: "data.result.items",
         useTypescript
       });
@@ -129,7 +129,7 @@ export const load: PageLoad = async ({ fetch }) => {
   const result = await requestCapability(fetch, "${loadCapabilityId}");
   const resultObject = result && typeof result === "object" && !Array.isArray(result) ? result : {};
   return {
-    screen: ${JSON.stringify({ id: screen.id, title: screen.title, collection: screen.collection, web: screen.web }, null, 2)},
+    screen: ${JSON.stringify({ id: screen.id, title: screen.title, collection: screen.collection, surfaceHints: screen.surfaceHints }, null, 2)},
     result: Array.isArray(result) ? { items: result } : { items: resultObject.items ?? [], ...resultObject }
   };
 };
@@ -138,7 +138,7 @@ export const load: PageLoad = async ({ fetch }) => {
 
   files[`${routeDir}/+page.svelte`] = `<script${useTypescript ? ' lang="ts"' : ""}>
   ${canLoadFromApi ? "export let data;" : `const data = {
-    screen: ${JSON.stringify({ id: screen.id, title: screen.title, collection: screen.collection, web: screen.web }, null, 2)},
+    screen: ${JSON.stringify({ id: screen.id, title: screen.title, collection: screen.collection, surfaceHints: screen.surfaceHints }, null, 2)},
     result: {
       items: ${JSON.stringify(sampleItems, null, 2)}
     }
@@ -189,38 +189,38 @@ function buildSvelteKitGenerationCoverage(contract, files, implementationScreenI
           suggested_fix: "Check the SvelteKit generator contract-complete route emission for this screen."
         });
       }
-      const componentUsages = screenComponentUsages(screen).map((usage) => {
-        const componentId = usage.component?.id || null;
-        const marker = componentId ? `data-topogram-component="${componentId}"` : null;
-        const support = svelteKitComponentUsageSupport(usage, contract.components);
+      const widgetUsages = screenWidgetUsages(screen).map((usage) => {
+        const widgetId = usage.widget?.id || null;
+        const marker = widgetId ? `data-topogram-widget="${widgetId}"` : null;
+        const support = svelteKitWidgetUsageSupport(usage, contract.widgets);
         const usageRendered = Boolean(marker && contents.includes(marker));
-        if (componentId && rendered && renderer !== "implementation" && !support.supported) {
+        if (widgetId && rendered && renderer !== "implementation" && !support.supported) {
           diagnostics.push({
-            code: "component_pattern_not_supported",
+            code: "widget_pattern_not_supported",
             severity: "error",
             screen: screen.id,
             route: screen.route,
             region: usage.region || null,
             pattern: support.pattern || null,
-            component: componentId,
-            message: `Screen '${screen.id}' uses component '${componentId}' with unsupported SvelteKit component pattern '${support.pattern || "(missing)"}'.`,
-            suggested_fix: "Use a supported component pattern for this generator or provide an implementation override."
+            widget: widgetId,
+            message: `Screen '${screen.id}' uses widget '${widgetId}' with unsupported SvelteKit widget pattern '${support.pattern || "(missing)"}'.`,
+            suggested_fix: "Use a supported widget pattern for this generator or provide an implementation override."
           });
         }
-        if (componentId && rendered && !usageRendered) {
+        if (widgetId && rendered && !usageRendered) {
           diagnostics.push({
-            code: "component_usage_not_rendered",
+            code: "widget_usage_not_rendered",
             severity: "warning",
             screen: screen.id,
             route: screen.route,
             region: usage.region || null,
-            component: componentId,
-            message: `Screen '${screen.id}' uses component '${componentId}' but the generated SvelteKit page does not contain its component marker.`,
-            suggested_fix: "Render the component region with renderSvelteKitComponentRegion or add a supported component pattern."
+            widget: widgetId,
+            message: `Screen '${screen.id}' uses widget '${widgetId}' but the generated SvelteKit page does not contain its widget marker.`,
+            suggested_fix: "Render the widget region with renderSvelteKitWidgetRegion or add a supported widget pattern."
           });
         }
         return {
-          component: componentId,
+          widget: widgetId,
           region: usage.region || null,
           pattern: support.pattern || null,
           supported: support.supported,
@@ -234,7 +234,7 @@ function buildSvelteKitGenerationCoverage(contract, files, implementationScreenI
         page: pagePath,
         rendered,
         renderer,
-        component_usages: componentUsages
+        widget_usages: widgetUsages
       };
     });
 
@@ -245,16 +245,16 @@ function buildSvelteKitGenerationCoverage(contract, files, implementationScreenI
     projection: {
       id: contract.projection.id,
       name: contract.projection.name,
-      platform: contract.projection.platform
+      type: contract.projection.type
     },
     summary: {
       routed_screens: screens.length,
       rendered_screens: screens.filter((screen) => screen.rendered).length,
       implementation_screens: screens.filter((screen) => screen.renderer === "implementation").length,
       generator_screens: screens.filter((screen) => screen.renderer === "generator").length,
-      component_usages: screens.reduce((total, screen) => total + screen.component_usages.length, 0),
-      rendered_component_usages: screens.reduce(
-        (total, screen) => total + screen.component_usages.filter((usage) => usage.rendered).length,
+      widget_usages: screens.reduce((total, screen) => total + screen.widget_usages.length, 0),
+      rendered_widget_usages: screens.reduce(
+        (total, screen) => total + screen.widget_usages.filter((usage) => usage.rendered).length,
         0
       ),
       diagnostics: diagnostics.length,
@@ -374,8 +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"] =
-    `${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";
+    `${renderDesignIntentCss(contract.designTokens)}\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.widget-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.widget-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.widget-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.widget-card h2,\n.widget-card h3 {\n  margin: 0;\n}\n.widget-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"
@@ -451,7 +451,7 @@ function buildSvelteKitScaffold(contract, apiContracts, options = {}) {
   const coverage = buildSvelteKitGenerationCoverage(contract, files, implementationScreenIds);
   assertGenerationCoverage(coverage);
   files["src/lib/topogram/generation-coverage.json"] = `${JSON.stringify(coverage, null, 2)}\n`;
-  files["src/lib/topogram/ui-web-contract.json"] = `${JSON.stringify(contract, null, 2)}\n`;
+  files["src/lib/topogram/ui-surface-contract.json"] = `${JSON.stringify(contract, null, 2)}\n`;
   return files;
 }
 

package/src/generator/surfaces/web/{ui-web-contract.js → ui-surface-contract.js}

@@ -1,9 +1,9 @@
 import { buildWebRealization } from "../../../realization/ui/index.js";
 
-export function generateUiWebContract(graph, options = {}) {
+export function generateUiSurfaceContract(graph, options = {}) {
   if (!options.projectionId) {
     const output = {};
-    for (const projection of (graph.byKind.projection || []).filter((entry) => entry.platform === "ui_web")) {
+    for (const projection of (graph.byKind.projection || []).filter((entry) => (entry.type || entry.platform) === "web_surface")) {
       output[projection.id] = buildWebRealization(graph, { ...options, projectionId: projection.id }).contract;
     }
     return output;
@@ -12,11 +12,11 @@ export function generateUiWebContract(graph, options = {}) {
   return buildWebRealization(graph, options).contract;
 }
 
-export function generateUiWebDebug(graph, options = {}) {
-  const contracts = options.projectionId ? [generateUiWebContract(graph, options)] : Object.values(generateUiWebContract(graph, options));
+export function generateUiSurfaceDebug(graph, options = {}) {
+  const contracts = options.projectionId ? [generateUiSurfaceContract(graph, options)] : Object.values(generateUiSurfaceContract(graph, options));
   const lines = [];
 
-  lines.push("# UI Web Debug");
+  lines.push("# UI Surface Debug");
   lines.push("");
   lines.push(`Generated from \`${graph.root}\``);
   lines.push("");
@@ -24,8 +24,8 @@ export function generateUiWebDebug(graph, options = {}) {
   for (const contract of contracts) {
     lines.push(`## \`${contract.projection.id}\` - ${contract.projection.name}`);
     lines.push("");
-    if (contract.sharedProjection?.id) {
-      lines.push(`Shared projection: \`${contract.sharedProjection.id}\``);
+    if (contract.uiContract?.id) {
+      lines.push(`UI contract: \`${contract.uiContract.id}\``);
     }
     lines.push(
       `Generator defaults: ${
@@ -47,7 +47,7 @@ export function generateUiWebDebug(graph, options = {}) {
       lines.push(`### \`${screen.id}\``);
       lines.push("");
       lines.push(`Route: ${screen.route ? `\`${screen.route}\`` : "_none_"}`);
-      lines.push(`Layout hints: ${Object.keys(screen.web).length > 0 ? Object.entries(screen.web).map(([key, value]) => `\`${key}=${value}\``).join(", ") : "_none_"}`);
+      lines.push(`Surface hints: ${Object.keys(screen.surfaceHints || {}).length > 0 ? Object.entries(screen.surfaceHints || {}).map(([key, value]) => `\`${key}=${value}\``).join(", ") : "_none_"}`);
       lines.push("");
     }
 

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

@@ -183,7 +183,7 @@ function buildVanillaGenerationCoverage(contract, files, routes) {
       page: route.file,
       rendered,
       renderer: rendered ? "generator" : "missing",
-      component_usages: []
+      widget_usages: []
     };
   });
   return {
@@ -193,15 +193,15 @@ function buildVanillaGenerationCoverage(contract, files, routes) {
     projection: {
       id: contract.projection.id,
       name: contract.projection.name,
-      platform: contract.projection.platform
+      type: contract.projection.type
     },
     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,
+      widget_usages: 0,
+      rendered_widget_usages: 0,
       diagnostics: diagnostics.length,
       errors: diagnostics.filter((diagnostic) => diagnostic.severity === "error").length,
       warnings: diagnostics.filter((diagnostic) => diagnostic.severity === "warning").length
@@ -277,7 +277,7 @@ export function generateVanillaWebApp(graph, options = {}) {
         check: "node ./scripts/check.mjs"
       }
     }, null, 2)}\n`,
-    "styles.css": renderStyles(contract.design),
+    "styles.css": renderStyles(contract.designTokens),
     "app.js": renderBrowserScript(),
     "scripts/build.mjs": renderBuildScript(),
     "scripts/check.mjs": renderCheckScript(),
@@ -300,6 +300,6 @@ export function generateVanillaWebApp(graph, options = {}) {
   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`;
+  files["topogram/ui-surface-contract.json"] = `${JSON.stringify(contract, null, 2)}\n`;
   return files;
 }