@topogram/cli 0.3.51 → 0.3.53

package/src/generator/surfaces/web/{react-components.js → react-widgets.js}

@@ -3,12 +3,12 @@
 import { UI_GENERATOR_RENDERED_COMPONENT_PATTERNS } from "../../../ui/taxonomy.js";
 
 /**
- * @typedef {{ id?: string, name?: string }} ComponentReference
- * @typedef {{ component?: ComponentReference, region?: string, pattern?: string }} ComponentUsage
- * @typedef {{ patterns?: string[] }} ComponentContract
- * @typedef {Record<string, ComponentContract>} ComponentContractMap
- * @typedef {{ itemsExpression?: string, componentContracts?: ComponentContractMap, useTypescript?: boolean }} RenderOptions
- * @typedef {{ components?: ComponentUsage[] }} ScreenContract
+ * @typedef {{ id?: string, name?: string }} WidgetReference
+ * @typedef {{ widget?: WidgetReference, region?: string, pattern?: string }} WidgetUsage
+ * @typedef {{ patterns?: string[] }} WidgetContract
+ * @typedef {Record<string, WidgetContract>} WidgetContractMap
+ * @typedef {{ itemsExpression?: string, widgetContracts?: WidgetContractMap, useTypescript?: boolean }} RenderOptions
+ * @typedef {{ widgets?: WidgetUsage[] }} ScreenContract
  */
 
 /**
@@ -33,44 +33,44 @@ function escapeText(value) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @returns {string}
  */
-function componentName(usage) {
-  return usage?.component?.name || usage?.component?.id || "Component";
+function widgetName(usage) {
+  return usage?.widget?.name || usage?.widget?.id || "Widget";
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @returns {string}
  */
-function componentId(usage) {
-  return usage?.component?.id || "component";
+function widgetId(usage) {
+  return usage?.widget?.id || "widget";
 }
 
 /**
- * @param {ComponentUsage} usage
- * @param {ComponentContractMap | undefined} componentContracts
+ * @param {WidgetUsage} usage
+ * @param {WidgetContractMap | undefined} widgetContracts
  * @returns {string[]}
  */
-function componentPatterns(usage, componentContracts) {
-  const id = usage?.component?.id;
-  const contract = id ? componentContracts?.[id] : null;
+function widgetPatterns(usage, widgetContracts) {
+  const id = usage?.widget?.id;
+  const contract = id ? widgetContracts?.[id] : null;
   return Array.isArray(contract?.patterns) ? contract.patterns : [];
 }
 
 /**
- * @param {ComponentUsage} usage
- * @param {ComponentContractMap | undefined} componentContracts
+ * @param {WidgetUsage} usage
+ * @param {WidgetContractMap | undefined} widgetContracts
  * @param {string} pattern
  * @returns {boolean}
  */
-function usagePattern(usage, componentContracts) {
-  return usage?.pattern || componentPatterns(usage, componentContracts)[0] || null;
+function usagePattern(usage, widgetContracts) {
+  return usage?.pattern || widgetPatterns(usage, widgetContracts)[0] || null;
 }
 
-export function reactComponentUsageSupport(usage, componentContracts) {
-  const pattern = usagePattern(usage, componentContracts);
+export function reactWidgetUsageSupport(usage, widgetContracts) {
+  const pattern = usagePattern(usage, widgetContracts);
   return {
     pattern,
     supported: UI_GENERATOR_RENDERED_COMPONENT_PATTERNS.has(pattern || "")
@@ -78,16 +78,16 @@ export function reactComponentUsageSupport(usage, componentContracts) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderSummaryStats(usage, options) {
   const items = options.itemsExpression || "items";
-  return `<section className="component-card component-summary" data-topogram-component="${escapeAttribute(componentId(usage))}">
+  return `<section className="widget-card widget-summary" data-topogram-widget="${escapeAttribute(widgetId(usage))}">
           <div>
-            <p className="component-eyebrow">Component</p>
-            <h2>${escapeText(componentName(usage))}</h2>
+            <p className="widget-eyebrow">Widget</p>
+            <h2>${escapeText(widgetName(usage))}</h2>
           </div>
           <div className="summary-grid">
             <div>
@@ -107,22 +107,22 @@ function renderSummaryStats(usage, options) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderCollectionTable(usage, options) {
   const items = options.itemsExpression || "items";
   const itemParam = options.useTypescript ? "(item: any)" : "(item)";
-  return `<div className="component-card component-table" data-topogram-component="${escapeAttribute(componentId(usage))}">
-          <div className="component-header">
+  return `<div className="widget-card widget-table" data-topogram-widget="${escapeAttribute(widgetId(usage))}">
+          <div className="widget-header">
             <div>
-              <p className="component-eyebrow">Component</p>
-              <h2>${escapeText(componentName(usage))}</h2>
+              <p className="widget-eyebrow">Widget</p>
+              <h2>${escapeText(widgetName(usage))}</h2>
             </div>
             <span className="badge">{${items}.length} items</span>
           </div>
-          <div className="table-wrap component-table-wrap">
+          <div className="table-wrap widget-table-wrap">
             <table className="resource-table data-grid">
               <thead>
                 <tr>
@@ -146,18 +146,18 @@ function renderCollectionTable(usage, options) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderBoard(usage, options) {
   const items = options.itemsExpression || "items";
   const itemParam = options.useTypescript ? "(item: any)" : "(item)";
-  return `<div className="component-card component-board" data-topogram-component="${escapeAttribute(componentId(usage))}">
-          <div className="component-header">
+  return `<div className="widget-card widget-board" data-topogram-widget="${escapeAttribute(widgetId(usage))}">
+          <div className="widget-header">
             <div>
-              <p className="component-eyebrow">Component</p>
-              <h2>${escapeText(componentName(usage))}</h2>
+              <p className="widget-eyebrow">Widget</p>
+              <h2>${escapeText(widgetName(usage))}</h2>
             </div>
           </div>
           <div className="board-grid">
@@ -176,18 +176,18 @@ function renderBoard(usage, options) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderCalendar(usage, options) {
   const items = options.itemsExpression || "items";
   const itemParam = options.useTypescript ? "(item: any)" : "(item)";
-  return `<div className="component-card component-calendar" data-topogram-component="${escapeAttribute(componentId(usage))}">
-          <div className="component-header">
+  return `<div className="widget-card widget-calendar" data-topogram-widget="${escapeAttribute(widgetId(usage))}">
+          <div className="widget-header">
             <div>
-              <p className="component-eyebrow">Component</p>
-              <h2>${escapeText(componentName(usage))}</h2>
+              <p className="widget-eyebrow">Widget</p>
+              <h2>${escapeText(widgetName(usage))}</h2>
             </div>
           </div>
           <div className="calendar-list">
@@ -202,13 +202,13 @@ function renderCalendar(usage, options) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderUsage(usage, options) {
-  const componentContracts = options.componentContracts || {};
-  const { pattern } = reactComponentUsageSupport(usage, componentContracts);
+  const widgetContracts = options.widgetContracts || {};
+  const { pattern } = reactWidgetUsageSupport(usage, widgetContracts);
   if (pattern === "summary_stats") {
     return renderSummaryStats(usage, options);
   }
@@ -227,10 +227,10 @@ function renderUsage(usage, options) {
 /**
  * @param {ScreenContract} screen
  * @param {string} region
- * @returns {ComponentUsage[]}
+ * @returns {WidgetUsage[]}
  */
-export function reactComponentUsagesForRegion(screen, region) {
-  return (screen?.components || []).filter((usage) => usage?.region === region);
+export function reactWidgetUsagesForRegion(screen, region) {
+  return (screen?.widgets || []).filter((usage) => usage?.region === region);
 }
 
 /**
@@ -238,8 +238,8 @@ export function reactComponentUsagesForRegion(screen, region) {
  * @param {string} region
  * @returns {boolean}
  */
-export function hasReactComponentRegion(screen, region) {
-  return reactComponentUsagesForRegion(screen, region).length > 0;
+export function hasReactWidgetRegion(screen, region) {
+  return reactWidgetUsagesForRegion(screen, region).length > 0;
 }
 
 /**
@@ -248,8 +248,8 @@ export function hasReactComponentRegion(screen, region) {
  * @param {RenderOptions} [options]
  * @returns {string}
  */
-export function renderReactComponentRegion(screen, region, options = {}) {
-  const rendered = reactComponentUsagesForRegion(screen, region)
+export function renderReactWidgetRegion(screen, region, options = {}) {
+  const rendered = reactWidgetUsagesForRegion(screen, region)
     .map((usage) => renderUsage(usage, options))
     .filter(Boolean);
   if (rendered.length === 0) {

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

@@ -1,9 +1,9 @@
 import { buildWebRealization } from "../../../realization/ui/index.js";
 import { getExampleImplementation } from "../../../example-implementation.js";
 import {
-  reactComponentUsageSupport,
-  renderReactComponentRegion
-} from "./react-components.js";
+  reactWidgetUsageSupport,
+  renderReactWidgetRegion
+} from "./react-widgets.js";
 import { buildDesignIntentCoverage, renderDesignIntentCss } from "./design-intent.js";
 import { renderApiClientModule, renderLookupModule, renderVisibilityModule } from "./shared.js";
 
@@ -52,7 +52,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];
@@ -76,7 +76,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"
@@ -137,8 +137,8 @@ function buildReactScreenPage(screen, contract) {
   const sampleItems = sampleItemsForScreen(screen);
   const renderedRegions = screenRegions(screen)
     .map((region) => {
-      const rendered = renderReactComponentRegion(screen, region, {
-        componentContracts: contract.components,
+      const rendered = renderReactWidgetRegion(screen, region, {
+        widgetContracts: contract.widgets,
         itemsExpression: "items",
         useTypescript: true
       });
@@ -188,8 +188,8 @@ ${renderedRegions || `        ${defaultCollection}`}
 `;
 }
 
-function screenComponentUsages(screen) {
-  return Array.isArray(screen?.components) ? screen.components : [];
+function screenWidgetUsages(screen) {
+  return Array.isArray(screen?.widgets) ? screen.widgets : [];
 }
 
 function screenPagePath(screen) {
@@ -217,38 +217,38 @@ function buildReactGenerationCoverage(contract, files, routeScreens) {
           suggested_fix: "Check the React 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 = reactComponentUsageSupport(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 = reactWidgetUsageSupport(usage, contract.widgets);
         const usageRendered = Boolean(marker && contents.includes(marker));
-        if (componentId && rendered && !support.supported) {
+        if (widgetId && rendered && !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 React 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 React 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 React page does not contain its component marker.`,
-            suggested_fix: "Render the component region with renderReactComponentRegion or add a supported component pattern."
+            widget: widgetId,
+            message: `Screen '${screen.id}' uses widget '${widgetId}' but the generated React page does not contain its widget marker.`,
+            suggested_fix: "Render the widget region with renderReactWidgetRegion or add a supported widget pattern."
           });
         }
         return {
-          component: componentId,
+          widget: widgetId,
           region: usage.region || null,
           pattern: support.pattern || null,
           supported: support.supported,
@@ -262,7 +262,7 @@ function buildReactGenerationCoverage(contract, files, routeScreens) {
         page: pagePath,
         rendered,
         renderer: rendered ? "generator" : "missing",
-        component_usages: componentUsages
+        widget_usages: widgetUsages
       };
     });
 
@@ -273,16 +273,16 @@ function buildReactGenerationCoverage(contract, files, routeScreens) {
     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: 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,
@@ -481,7 +481,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 );
 `;
   files["src/vite-env.d.ts"] = `/// <reference types="vite/client" />\n`;
-  files["src/app.css"] = `${renderDesignIntentCss(contract.design)}
+  files["src/app.css"] = `${renderDesignIntentCss(contract.designTokens)}
 
 :root {
   font-family: system-ui, sans-serif;
@@ -536,11 +536,11 @@ button:focus-visible, .button-link:focus-visible, a:focus-visible, input:focus-v
 .muted { color: var(--topogram-muted-color); }
 .empty-state { padding: 1rem 0; }
 .error-text { color: #b42318; }
-.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; }
+.widget-card { border: 1px solid var(--topogram-border-color); border-radius: var(--topogram-radius-card); background: var(--topogram-surface-subtle); padding: 1rem; margin-top: 1rem; }
+.widget-header { display: flex; align-items: center; justify-content: space-between; gap: var(--topogram-space-unit); flex-wrap: wrap; }
+.widget-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; }
+.widget-card h2, .widget-card h3 { margin: 0; }
+.widget-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: var(--topogram-radius-control); background: white; padding: 0.85rem; }
 .summary-grid strong { display: block; font-size: 1.5rem; }
@@ -553,7 +553,7 @@ button:focus-visible, .button-link:focus-visible, a:focus-visible, input:focus-v
 `;
   files["src/App.tsx"] = buildAppTsx(contract, webReferenceWithDefaults);
   files["src/lib/topogram/api-contracts.json"] = `${JSON.stringify(realization.apiContracts, 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`;
   files["src/lib/auth/visibility.ts"] = buildReactVisibilityModule();
   files["src/lib/api/client.ts"] = buildReactClientModule(webReferenceWithDefaults);
   files["src/lib/api/lookups.ts"] = buildLookupModule(webReferenceWithDefaults);

package/src/generator/surfaces/web/{sveltekit-components.js → sveltekit-widgets.js}

@@ -3,12 +3,12 @@
 import { UI_GENERATOR_RENDERED_COMPONENT_PATTERNS } from "../../../ui/taxonomy.js";
 
 /**
- * @typedef {{ id?: string, name?: string }} ComponentReference
- * @typedef {{ component?: ComponentReference, region?: string, pattern?: string }} ComponentUsage
- * @typedef {{ patterns?: string[] }} ComponentContract
- * @typedef {Record<string, ComponentContract>} ComponentContractMap
- * @typedef {{ itemsExpression?: string, componentContracts?: ComponentContractMap, useTypescript?: boolean }} RenderOptions
- * @typedef {{ components?: ComponentUsage[] }} ScreenContract
+ * @typedef {{ id?: string, name?: string }} WidgetReference
+ * @typedef {{ widget?: WidgetReference, region?: string, pattern?: string }} WidgetUsage
+ * @typedef {{ patterns?: string[] }} WidgetContract
+ * @typedef {Record<string, WidgetContract>} WidgetContractMap
+ * @typedef {{ itemsExpression?: string, widgetContracts?: WidgetContractMap, useTypescript?: boolean }} RenderOptions
+ * @typedef {{ widgets?: WidgetUsage[] }} ScreenContract
  */
 
 /**
@@ -24,44 +24,44 @@ function escapeHtml(value) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @returns {string}
  */
-function componentName(usage) {
-  return usage?.component?.name || usage?.component?.id || "Component";
+function widgetName(usage) {
+  return usage?.widget?.name || usage?.widget?.id || "Widget";
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @returns {string}
  */
-function componentId(usage) {
-  return usage?.component?.id || "component";
+function widgetId(usage) {
+  return usage?.widget?.id || "widget";
 }
 
 /**
- * @param {ComponentUsage} usage
- * @param {ComponentContractMap | undefined} componentContracts
+ * @param {WidgetUsage} usage
+ * @param {WidgetContractMap | undefined} widgetContracts
  * @returns {string[]}
  */
-function componentPatterns(usage, componentContracts) {
-  const id = usage?.component?.id;
-  const contract = id ? componentContracts?.[id] : null;
+function widgetPatterns(usage, widgetContracts) {
+  const id = usage?.widget?.id;
+  const contract = id ? widgetContracts?.[id] : null;
   return Array.isArray(contract?.patterns) ? contract.patterns : [];
 }
 
 /**
- * @param {ComponentUsage} usage
- * @param {ComponentContractMap | undefined} componentContracts
+ * @param {WidgetUsage} usage
+ * @param {WidgetContractMap | undefined} widgetContracts
  * @param {string} pattern
  * @returns {boolean}
  */
-function usagePattern(usage, componentContracts) {
-  return usage?.pattern || componentPatterns(usage, componentContracts)[0] || null;
+function usagePattern(usage, widgetContracts) {
+  return usage?.pattern || widgetPatterns(usage, widgetContracts)[0] || null;
 }
 
-export function svelteKitComponentUsageSupport(usage, componentContracts) {
-  const pattern = usagePattern(usage, componentContracts);
+export function svelteKitWidgetUsageSupport(usage, widgetContracts) {
+  const pattern = usagePattern(usage, widgetContracts);
   return {
     pattern,
     supported: UI_GENERATOR_RENDERED_COMPONENT_PATTERNS.has(pattern || "")
@@ -69,16 +69,16 @@ export function svelteKitComponentUsageSupport(usage, componentContracts) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderSummaryStats(usage, options) {
   const items = options.itemsExpression || "data.result.items";
-  return `<section class="component-card component-summary" data-topogram-component="${escapeHtml(componentId(usage))}">
+  return `<section class="widget-card widget-summary" data-topogram-widget="${escapeHtml(widgetId(usage))}">
           <div>
-            <p class="component-eyebrow">Component</p>
-            <h2>${escapeHtml(componentName(usage))}</h2>
+            <p class="widget-eyebrow">Widget</p>
+            <h2>${escapeHtml(widgetName(usage))}</h2>
           </div>
           <div class="summary-grid">
             <div>
@@ -98,21 +98,21 @@ function renderSummaryStats(usage, options) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderCollectionTable(usage, options) {
   const items = options.itemsExpression || "data.result.items";
-  return `<div class="component-card component-table" data-topogram-component="${escapeHtml(componentId(usage))}">
-          <div class="component-header">
+  return `<div class="widget-card widget-table" data-topogram-widget="${escapeHtml(widgetId(usage))}">
+          <div class="widget-header">
             <div>
-              <p class="component-eyebrow">Component</p>
-              <h2>${escapeHtml(componentName(usage))}</h2>
+              <p class="widget-eyebrow">Widget</p>
+              <h2>${escapeHtml(widgetName(usage))}</h2>
             </div>
             <span class="badge">{${items}.length} items</span>
           </div>
-          <div class="table-wrap component-table-wrap">
+          <div class="table-wrap widget-table-wrap">
             <table class="resource-table data-grid">
               <thead>
                 <tr>
@@ -136,17 +136,17 @@ function renderCollectionTable(usage, options) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderBoard(usage, options) {
   const items = options.itemsExpression || "data.result.items";
-  return `<div class="component-card component-board" data-topogram-component="${escapeHtml(componentId(usage))}">
-          <div class="component-header">
+  return `<div class="widget-card widget-board" data-topogram-widget="${escapeHtml(widgetId(usage))}">
+          <div class="widget-header">
             <div>
-              <p class="component-eyebrow">Component</p>
-              <h2>${escapeHtml(componentName(usage))}</h2>
+              <p class="widget-eyebrow">Widget</p>
+              <h2>${escapeHtml(widgetName(usage))}</h2>
             </div>
           </div>
           <div class="board-grid">
@@ -163,17 +163,17 @@ function renderBoard(usage, options) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderCalendar(usage, options) {
   const items = options.itemsExpression || "data.result.items";
-  return `<div class="component-card component-calendar" data-topogram-component="${escapeHtml(componentId(usage))}">
-          <div class="component-header">
+  return `<div class="widget-card widget-calendar" data-topogram-widget="${escapeHtml(widgetId(usage))}">
+          <div class="widget-header">
             <div>
-              <p class="component-eyebrow">Component</p>
-              <h2>${escapeHtml(componentName(usage))}</h2>
+              <p class="widget-eyebrow">Widget</p>
+              <h2>${escapeHtml(widgetName(usage))}</h2>
             </div>
           </div>
           <div class="calendar-list">
@@ -188,13 +188,13 @@ function renderCalendar(usage, options) {
 }
 
 /**
- * @param {ComponentUsage} usage
+ * @param {WidgetUsage} usage
  * @param {RenderOptions} options
  * @returns {string}
  */
 function renderUsage(usage, options) {
-  const componentContracts = options.componentContracts || {};
-  const { pattern } = svelteKitComponentUsageSupport(usage, componentContracts);
+  const widgetContracts = options.widgetContracts || {};
+  const { pattern } = svelteKitWidgetUsageSupport(usage, widgetContracts);
   if (pattern === "summary_stats") {
     return renderSummaryStats(usage, options);
   }
@@ -213,10 +213,10 @@ function renderUsage(usage, options) {
 /**
  * @param {ScreenContract} screen
  * @param {string} region
- * @returns {ComponentUsage[]}
+ * @returns {WidgetUsage[]}
  */
-export function svelteKitComponentUsagesForRegion(screen, region) {
-  return (screen?.components || []).filter((usage) => usage?.region === region);
+export function svelteKitWidgetUsagesForRegion(screen, region) {
+  return (screen?.widgets || []).filter((usage) => usage?.region === region);
 }
 
 /**
@@ -224,8 +224,8 @@ export function svelteKitComponentUsagesForRegion(screen, region) {
  * @param {string} region
  * @returns {boolean}
  */
-export function hasSvelteKitComponentRegion(screen, region) {
-  return svelteKitComponentUsagesForRegion(screen, region).length > 0;
+export function hasSvelteKitWidgetRegion(screen, region) {
+  return svelteKitWidgetUsagesForRegion(screen, region).length > 0;
 }
 
 /**
@@ -234,8 +234,8 @@ export function hasSvelteKitComponentRegion(screen, region) {
  * @param {RenderOptions} [options]
  * @returns {string}
  */
-export function renderSvelteKitComponentRegion(screen, region, options = {}) {
-  const rendered = svelteKitComponentUsagesForRegion(screen, region)
+export function renderSvelteKitWidgetRegion(screen, region, options = {}) {
+  const rendered = svelteKitWidgetUsagesForRegion(screen, region)
     .map((usage) => renderUsage(usage, options))
     .filter(Boolean);
   if (rendered.length === 0) {