@topogram/cli 0.3.51 → 0.3.52

package/src/generator/widgets.js

@@ -0,0 +1,40 @@
+function stableSortedWidgets(graph) {
+  return [...(graph?.byKind?.widget || [])].sort((a, b) => a.id.localeCompare(b.id));
+}
+
+function widgetContract(widget) {
+  return widget.widgetContract || {
+    type: "ui_widget_contract",
+    id: widget.id,
+    name: widget.name || widget.id,
+    description: widget.description || null,
+    category: widget.category || null,
+    version: widget.version || null,
+    status: widget.status || null,
+    props: widget.props || [],
+    events: widget.events || [],
+    slots: widget.slots || [],
+    behavior: widget.behavior || [],
+    behaviors: widget.behaviors || [],
+    patterns: widget.patterns || [],
+    regions: widget.regions || [],
+    approvals: widget.approvals || [],
+    lookups: widget.lookups || [],
+    dependencies: widget.dependencies || []
+  };
+}
+
+export function generateUiWidgetContract(graph, options = {}) {
+  const widgetId = options.widgetId || options.componentId;
+  if (widgetId) {
+    const widget = (graph?.byKind?.widget || graph?.byKind?.component || []).find((entry) => entry.id === widgetId);
+    if (!widget) {
+      throw new Error(`No widget found with id '${widgetId}'`);
+    }
+    return widgetContract(widget);
+  }
+
+  return Object.fromEntries(
+    stableSortedWidgets(graph).map((widget) => [widget.id, widgetContract(widget)])
+  );
+}

package/src/generator-policy.js

@@ -175,18 +175,16 @@ export function generatorPackageAllowed(policy, packageName) {
  * @returns {PackageGeneratorBinding[]}
  */
 export function packageBackedGeneratorBindings(projectConfig) {
-  const components = Array.isArray(projectConfig?.topology?.components)
-    ? projectConfig.topology.components
-    : [];
-  return components
-    .filter((component) => typeof component?.generator?.package === "string" && component.generator.package.length > 0)
-    .map((component) => ({
-      componentId: String(component.id || "unknown"),
-      componentType: String(component.type || "unknown"),
-      projection: String(component.projection || "unknown"),
-      generatorId: String(component.generator.id || "unknown"),
-      version: String(component.generator.version || "unknown"),
-      packageName: String(component.generator.package)
+  const runtimes = Array.isArray(projectConfig?.topology?.runtimes) ? projectConfig.topology.runtimes : [];
+  return runtimes
+    .filter((runtime) => typeof runtime?.generator?.package === "string" && runtime.generator.package.length > 0)
+    .map((runtime) => ({
+      componentId: String(runtime.id || "unknown"),
+      componentType: String(runtime.kind || runtime.type || "unknown"),
+      projection: String(runtime.projection || "unknown"),
+      generatorId: String(runtime.generator.id || "unknown"),
+      version: String(runtime.generator.version || "unknown"),
+      packageName: String(runtime.generator.package)
     }));
 }
 

package/src/import/core/runner.js

@@ -153,8 +153,8 @@ function deriveUiComponentCandidates(candidates) {
     const componentStem = idHintify(`${screen.id_hint}_results`);
     const loadCapability = loadCapabilityForScreen(screen);
     return makeCandidateRecord({
-      kind: "component",
-      idHint: `component_ui_${componentStem}`,
+      kind: "widget",
+      idHint: `widget_${componentStem}`,
       label: `${screen.label || screen.id_hint} results`,
       confidence: presentations.length > 0 ? "medium" : "low",
       sourceKind: "ui_projection_inference",
@@ -171,13 +171,13 @@ function deriveUiComponentCandidates(candidates) {
       inferred_pattern: pattern,
       evidence: screen.provenance || [],
       missing_decisions: [
-        "confirm component reuse boundary",
+        "confirm widget reuse boundary",
         "confirm prop names and data source",
         "confirm events and behavior",
         "confirm supported regions and patterns"
       ],
       notes: [
-        "Imported component candidates are review-only.",
+        "Imported widget candidates are review-only.",
         "Confirm props, behavior, events, and reuse before adoption."
       ]
     });
@@ -293,7 +293,7 @@ function reportMarkdown(track, candidates) {
       `- \`${component.id_hint}\` confidence ${component.confidence || "unknown"} pattern \`${component.pattern || component.inferred_pattern || "unknown"}\` region \`${component.region || component.inferred_region || "unknown"}\` evidence ${(component.evidence || component.provenance || []).length} missing decisions ${(component.missing_decisions || []).length}`
     );
     return ensureTrailingNewline(
-      `# UI Import Report\n\n- Screens: ${candidates.screens.length}\n- Routes: ${candidates.routes.length}\n- Actions: ${candidates.actions.length}\n- Components: ${candidates.components.length}\n- Stacks: ${candidates.stacks.length ? candidates.stacks.join(", ") : "none"}\n\n## Component Candidates\n\n${componentLines.length ? componentLines.join("\n") : "- none"}\n\n## Next Validation\n\n- Review candidates under \`topogram/candidates/app/ui/drafts/components/**\`.\n- Run \`topogram import plan <path>\` before adoption.\n- After adoption, run \`topogram check <path>\`, \`topogram component check <path>\`, and \`topogram component behavior <path>\`.\n`
+      `# UI Import Report\n\n- Screens: ${candidates.screens.length}\n- Routes: ${candidates.routes.length}\n- Actions: ${candidates.actions.length}\n- Widgets: ${candidates.components.length}\n- Stacks: ${candidates.stacks.length ? candidates.stacks.join(", ") : "none"}\n\n## Widget Candidates\n\n${componentLines.length ? componentLines.join("\n") : "- none"}\n\n## Next Validation\n\n- Review candidates under \`topogram/candidates/app/ui/drafts/widgets/**\`.\n- Run \`topogram import plan <path>\` before adoption.\n- After adoption, run \`topogram check <path>\`, \`topogram widget check <path>\`, and \`topogram widget behavior <path>\`.\n`
     );
   }
   if (track === "verification") {
@@ -319,7 +319,7 @@ function projectionIdStem(workspaceRoot) {
 }
 
 function componentCandidateFileName(component) {
-  return `${String(component.id_hint || "component")
+  return `${String(component.id_hint || "widget")
     .replace(/^component_/, "")
     .replace(/_/g, "-")}.tg`;
 }
@@ -327,15 +327,15 @@ function componentCandidateFileName(component) {
 function renderComponentCandidate(component) {
   const evidenceCount = (component.evidence || component.provenance || []).length;
   const missingDecisions = component.missing_decisions || [
-    "confirm component reuse boundary",
+    "confirm widget reuse boundary",
     "confirm prop names and data source",
     "confirm events and behavior"
   ];
-  return `component ${component.id_hint} {
+  return `widget ${component.id_hint} {
   # Import metadata: confidence ${component.confidence || "unknown"}; evidence ${evidenceCount}; inferred pattern ${component.pattern || component.inferred_pattern || "search_results"}; inferred region ${component.region || component.inferred_region || "results"}.
   # Missing decisions: ${missingDecisions.join("; ")}.
   name "${component.label || component.id_hint}"
-  description "Candidate reusable component inferred from imported UI evidence. Review props, behavior, events, and reuse before adoption."
+  description "Candidate reusable widget inferred from imported UI evidence. Review props, behavior, events, and reuse before adoption."
   category collection
   props {
     ${component.data_prop || "rows"} array required
@@ -355,7 +355,7 @@ function uiComponentLinesForCandidates(componentCandidates, allCandidates) {
       const dataBinding = dataSource
         ? ` data ${component.data_prop || "rows"} from ${dataSource}`
         : "";
-      return `    screen ${component.screen_id} region ${component.region} component ${component.id_hint}${dataBinding}`;
+      return `    screen ${component.screen_id} region ${component.region} widget ${component.id_hint}${dataBinding}`;
     });
 }
 
@@ -386,7 +386,7 @@ function draftUiProjectionFiles(context, candidates, allCandidates = {}) {
   const actions = ui.actions || [];
   const componentCandidates = [...(ui.components || [])].sort((a, b) => a.id_hint.localeCompare(b.id_hint));
   const shell = actions.find((entry) => entry.kind === "ui_shell")?.shell_kind || "topbar";
-  const navigationPatterns = uniqueSorted(actions.filter((entry) => entry.kind === "ui_navigation").map((entry) => entry.navigation_pattern));
+  const navigationPatterns = uniqueSorted(actions.filter((entry) => entry.kind === "navigation").map((entry) => entry.navigation_pattern));
   const presentations = uniqueSorted(actions.filter((entry) => entry.kind === "ui_presentation").map((entry) => entry.presentation));
   const capabilityHints = uniqueSorted([
     ...screens.flatMap((screen) => capabilityHintsForScreen(screen)),
@@ -488,22 +488,22 @@ function draftUiProjectionFiles(context, candidates, allCandidates = {}) {
   }
   const uiComponentLines = uiComponentLinesForCandidates(componentCandidates, allCandidates);
 
-  const uiSharedDraft = `projection proj_ui_shared_imported_${stem} {
-  name "Imported Shared UI Draft"
+  const uiSharedDraft = `projection proj_ui_contract_imported_${stem} {
+  name "Imported UI Contract Draft"
   description "Drafted from imported UI candidates. Review and adapt before adoption."
 
-  platform ui_shared
+  type ui_contract
   realizes [
 ${capabilityHints.length > 0 ? capabilityHints.map((hint) => `    ${hint}`).join(",\n") : "    // add capability ids"}
   ]
   outputs [ui_contract]
 
-  ui_app_shell {
+  app_shell {
     brand "Imported ${stem.replace(/_/g, " ")}"
     shell ${shell}
 ${presentations.includes("search") ? "    global_search true\n" : ""}${presentations.includes("multi_window") ? "    windowing multi_window\n" : ""}  }
 
-  ui_design {
+  design_tokens {
     density comfortable
     tone operational
     radius_scale medium
@@ -517,15 +517,15 @@ ${presentations.includes("search") ? "    global_search true\n" : ""}${presentat
     accessibility focus visible
   }
 
-  ui_screens {
+  screens {
 ${uiScreensBlock}
   }
 
-${uiCollectionsLines.length > 0 ? `  ui_collections {\n${uiCollectionsLines.join("\n")}\n  }\n\n` : ""}${uiActionsLines.length > 0 ? `  ui_actions {\n${uiActionsLines.join("\n")}\n  }\n\n` : ""}  ui_navigation {
+${uiCollectionsLines.length > 0 ? `  collection_views {\n${uiCollectionsLines.join("\n")}\n  }\n\n` : ""}${uiActionsLines.length > 0 ? `  screen_actions {\n${uiActionsLines.join("\n")}\n  }\n\n` : ""}  navigation {
 ${uiNavigationLines.join("\n")}
   }
 
-${uiScreenRegionLines.length > 0 ? `  ui_screen_regions {\n${uiScreenRegionLines.join("\n")}\n  }\n\n` : ""}${uiComponentLines.length > 0 ? `  ui_components {\n${uiComponentLines.join("\n")}\n  }\n\n` : ""}  status proposed
+${uiScreenRegionLines.length > 0 ? `  screen_regions {\n${uiScreenRegionLines.join("\n")}\n  }\n\n` : ""}${uiComponentLines.length > 0 ? `  widget_bindings {\n${uiComponentLines.join("\n")}\n  }\n\n` : ""}  status proposed
 }
 `;
 
@@ -565,22 +565,22 @@ ${uiScreenRegionLines.length > 0 ? `  ui_screen_regions {\n${uiScreenRegionLines
     uiWebLines.push(`    action ${entry.capability_hint} present ${actionPresent}`);
   }
 
-  const uiWebDraft = `projection proj_ui_web_imported_${stem} {
-  name "Imported Web UI Draft"
+  const uiWebDraft = `projection proj_web_surface_imported_${stem} {
+  name "Imported Web Surface Draft"
   description "Drafted from imported UI candidates. Review and adapt before adoption."
 
-  platform ui_web
+  type web_surface
   realizes [
-    proj_ui_shared_imported_${stem},
+    proj_ui_contract_imported_${stem},
     ${webCapHints}
   ]
   outputs [ui_contract, web_app]
 
-  ui_routes {
+  screen_routes {
 ${uiRouteLines.length > 0 ? uiRouteLines.join("\n") : "    // add routes"}
   }
 
-${uiWebLines.length > 0 ? `  ui_web {\n${uiWebLines.join("\n")}\n  }\n\n` : ""}  generator_defaults {
+${uiWebLines.length > 0 ? `  web_hints {\n${uiWebLines.join("\n")}\n  }\n\n` : ""}  generator_defaults {
     profile react
     language typescript
     styling css
@@ -592,9 +592,9 @@ ${uiWebLines.length > 0 ? `  ui_web {\n${uiWebLines.join("\n")}\n  }\n\n` : ""}
 
   const coverage = `# Imported UI Projection Drafts
 
-- Draft shared projection: \`candidates/app/ui/drafts/proj-ui-shared.tg\`
-- Draft web projection: \`candidates/app/ui/drafts/proj-ui-web.tg\`
-- Draft component candidates: ${componentCandidates.length}
+- Draft UI contract projection: \`candidates/app/ui/drafts/proj-ui-contract.tg\`
+- Draft web surface projection: \`candidates/app/ui/drafts/proj-web-surface.tg\`
+- Draft widget candidates: ${componentCandidates.length}
 - Imported screens: ${screens.length}
 - Imported routes: ${(ui.routes || []).length}
 - Imported UI actions/presentations: ${actions.length}
@@ -605,19 +605,19 @@ ${uiWebLines.length > 0 ? `  ui_web {\n${uiWebLines.join("\n")}\n  }\n\n` : ""}
 
 - These files are drafts, not adopted canonical projections.
 - Capability ids come from imported hints and may need renaming or pruning.
-- Component candidates are suggested reusable contracts, not canonical ownership.
-- Review component props, events, behavior, regions, and patterns before adopting.
+- Widget candidates are suggested reusable contracts, not canonical ownership.
+- Review widget props, events, behavior, regions, and patterns before adopting.
 - Search and refresh directives are inferred heuristically.
 - Navigation groups currently default to a single \`workspace\` group unless stronger grouping evidence exists.
 `;
 
   const files = {
-    "candidates/app/ui/drafts/proj-ui-shared.tg": ensureTrailingNewline(uiSharedDraft),
-    "candidates/app/ui/drafts/proj-ui-web.tg": ensureTrailingNewline(uiWebDraft),
+    "candidates/app/ui/drafts/proj-ui-contract.tg": ensureTrailingNewline(uiSharedDraft),
+    "candidates/app/ui/drafts/proj-web-surface.tg": ensureTrailingNewline(uiWebDraft),
     "candidates/app/ui/drafts/README.md": ensureTrailingNewline(coverage)
   };
   for (const component of componentCandidates) {
-    files[`candidates/app/ui/drafts/components/${componentCandidateFileName(component)}`] = ensureTrailingNewline(renderComponentCandidate(component));
+    files[`candidates/app/ui/drafts/widgets/${componentCandidateFileName(component)}`] = ensureTrailingNewline(renderComponentCandidate(component));
   }
   return files;
 }
@@ -676,7 +676,7 @@ export function runImportApp(inputPath, options = {}) {
   files["candidates/app/findings.json"] = `${JSON.stringify(findings, null, 2)}\n`;
   files["candidates/app/candidates.json"] = `${JSON.stringify(candidates, null, 2)}\n`;
   files["candidates/app/report.md"] = ensureTrailingNewline(
-    `# App Import Report\n\nTracks: ${tracks.join(", ")}\n\n## DB\n\n- Entities: ${candidates.db?.entities.length || 0}\n- Enums: ${candidates.db?.enums.length || 0}\n- Relations: ${candidates.db?.relations.length || 0}\n\n## API\n\n- Capabilities: ${candidates.api?.capabilities.length || 0}\n- Routes: ${candidates.api?.routes.length || 0}\n- Stacks: ${candidates.api?.stacks?.length ? candidates.api.stacks.join(", ") : "none"}\n\n## UI\n\n- Screens: ${candidates.ui?.screens.length || 0}\n- Routes: ${candidates.ui?.routes.length || 0}\n- Actions: ${candidates.ui?.actions.length || 0}\n- Components: ${candidates.ui?.components.length || 0}\n- Stacks: ${candidates.ui?.stacks?.length ? candidates.ui.stacks.join(", ") : "none"}\n\n## Workflows\n\n- Workflows: ${candidates.workflows?.workflows.length || 0}\n- States: ${candidates.workflows?.workflow_states.length || 0}\n- Transitions: ${candidates.workflows?.workflow_transitions.length || 0}\n\n## Verification\n\n- Verifications: ${candidates.verification?.verifications.length || 0}\n- Scenarios: ${candidates.verification?.scenarios.length || 0}\n- Frameworks: ${candidates.verification?.frameworks?.length ? candidates.verification.frameworks.join(", ") : "none"}\n- Scripts: ${candidates.verification?.scripts.length || 0}\n`
+    `# App Import Report\n\nTracks: ${tracks.join(", ")}\n\n## DB\n\n- Entities: ${candidates.db?.entities?.length || 0}\n- Enums: ${candidates.db?.enums?.length || 0}\n- Relations: ${candidates.db?.relations?.length || 0}\n\n## API\n\n- Capabilities: ${candidates.api?.capabilities?.length || 0}\n- Routes: ${candidates.api?.routes?.length || 0}\n- Stacks: ${candidates.api?.stacks?.length ? candidates.api.stacks.join(", ") : "none"}\n\n## UI\n\n- Screens: ${candidates.ui?.screens?.length || 0}\n- Routes: ${candidates.ui?.routes?.length || 0}\n- Actions: ${candidates.ui?.actions?.length || 0}\n- Widgets: ${candidates.ui?.components?.length || 0}\n- Stacks: ${candidates.ui?.stacks?.length ? candidates.ui.stacks.join(", ") : "none"}\n\n## Workflows\n\n- Workflows: ${candidates.workflows?.workflows?.length || 0}\n- States: ${candidates.workflows?.workflow_states?.length || 0}\n- Transitions: ${candidates.workflows?.workflow_transitions?.length || 0}\n\n## Verification\n\n- Verifications: ${candidates.verification?.verifications?.length || 0}\n- Scenarios: ${candidates.verification?.scenarios?.length || 0}\n- Frameworks: ${candidates.verification?.frameworks?.length ? candidates.verification.frameworks.join(", ") : "none"}\n- Scripts: ${candidates.verification?.scripts?.length || 0}\n`
   );
 
   return {

package/src/import/core/shared.js

@@ -213,7 +213,7 @@ export function makeCandidateRecord({
       ? "db"
       : kind === "capability"
         ? "api"
-        : kind === "component"
+        : kind === "widget"
           ? "ui"
           : null);
   return {

package/src/import/extractors/ui/android-compose.js

@@ -131,7 +131,7 @@ export const androidComposeUiExtractor = {
     }
     for (const pattern of aggregateSummary.patterns) {
       candidates.actions.push(makeCandidateRecord({
-        kind: "ui_navigation",
+        kind: "navigation",
         idHint: `compose_${idHintify(pattern)}`,
         label: pattern,
         confidence: "medium",

package/src/import/extractors/ui/blazor.js

@@ -138,7 +138,7 @@ export const blazorUiExtractor = {
         }
         for (const pattern of summary.patterns) {
           candidates.actions.push(makeCandidateRecord({
-            kind: "ui_navigation",
+            kind: "navigation",
             idHint: `blazor_${idHintify(pattern)}`,
             label: pattern,
             confidence: "medium",

package/src/import/extractors/ui/razor-pages.js

@@ -150,7 +150,7 @@ export const razorPagesUiExtractor = {
 
       for (const pattern of shellPatterns(text)) {
         candidates.actions.push(makeCandidateRecord({
-          kind: "ui_navigation",
+          kind: "navigation",
           idHint: `razor_${idHintify(pattern)}`,
           label: pattern,
           confidence: "low",

package/src/import/extractors/ui/react-router.js

@@ -42,9 +42,9 @@ export const reactRouterUiExtractor = {
       const features = detectUiPresentationFeatures(rootDir);
       const shellKind = shellKindFromNavigation(navigation);
       const navigationPatterns = navigationPatternsFromStructure(navigation);
-      findings.push({ kind: "react_ui_routes", file: provenance, routes });
-      findings.push({ kind: "react_ui_navigation", file: provenance, navigation });
-      findings.push({ kind: "react_ui_features", file: provenance, features });
+      findings.push({ kind: "react_screen_routes", file: provenance, routes });
+      findings.push({ kind: "react_navigation", file: provenance, navigation });
+      findings.push({ kind: "react_surface_features", file: provenance, features });
       candidates.stacks.push("react_web");
       if (shellKind) {
         candidates.actions.push(makeCandidateRecord({
@@ -62,7 +62,7 @@ export const reactRouterUiExtractor = {
       }
       for (const pattern of navigationPatterns) {
         candidates.actions.push(makeCandidateRecord({
-          kind: "ui_navigation",
+          kind: "navigation",
           idHint: `${path.basename(rootDir)}_${idHintify(pattern)}`,
           label: pattern,
           confidence: "medium",

package/src/import/extractors/ui/sveltekit.js

@@ -41,9 +41,9 @@ export const svelteKitUiExtractor = {
       const features = detectUiPresentationFeatures(rootDir);
       const shellKind = shellKindFromNavigation(navigation);
       const navigationPatterns = navigationPatternsFromStructure(navigation);
-      findings.push({ kind: "sveltekit_ui_routes", file: provenance, routes });
-      findings.push({ kind: "sveltekit_ui_navigation", file: provenance, navigation });
-      findings.push({ kind: "sveltekit_ui_features", file: provenance, features });
+      findings.push({ kind: "sveltekit_screen_routes", file: provenance, routes });
+      findings.push({ kind: "sveltekit_navigation", file: provenance, navigation });
+      findings.push({ kind: "sveltekit_surface_features", file: provenance, features });
       candidates.stacks.push("sveltekit_web");
       if (shellKind) {
         candidates.actions.push(makeCandidateRecord({
@@ -61,7 +61,7 @@ export const svelteKitUiExtractor = {
       }
       for (const pattern of navigationPatterns) {
         candidates.actions.push(makeCandidateRecord({
-          kind: "ui_navigation",
+          kind: "navigation",
           idHint: `${path.basename(rootDir)}_${pattern}`,
           label: pattern,
           confidence: "medium",

package/src/import/extractors/ui/swiftui.js

@@ -153,7 +153,7 @@ export const swiftUiExtractor = {
       }
       for (const pattern of summary.patterns) {
         candidates.actions.push(makeCandidateRecord({
-          kind: "ui_navigation",
+          kind: "navigation",
           idHint: `swiftui_${idHintify(pattern)}`,
           label: pattern,
           confidence: "medium",

package/src/import/extractors/ui/uikit.js

@@ -144,7 +144,7 @@ export const uiKitExtractor = {
 
     if (candidates.screens.length > 0) {
       candidates.actions.push(makeCandidateRecord({
-        kind: "ui_navigation",
+        kind: "navigation",
         idHint: "uikit_stack_navigation",
         label: "stack_navigation",
         confidence: "medium",

package/src/new-project.js

@@ -27,10 +27,11 @@ const GENERATOR_LABELS = new Map([
 ]);
 
 const SURFACE_ORDER = new Map([
-  ["web", 10],
-  ["api", 20],
+  ["web_surface", 10],
+  ["api_service", 20],
   ["database", 30],
-  ["native", 40]
+  ["ios_surface", 40],
+  ["android_surface", 50]
 ]);
 
 /**
@@ -427,26 +428,26 @@ function generatorLabel(generatorId) {
 function summarizeTemplateTopology(templateRoot) {
   const projectConfigPath = path.join(templateRoot, "topogram.project.json");
   const projectConfig = JSON.parse(fs.readFileSync(projectConfigPath, "utf8"));
-  const rawComponents = /** @type {any[]} */ (
-    Array.isArray(projectConfig.topology?.components) ? projectConfig.topology.components : []
+  const rawRuntimes = /** @type {any[]} */ (
+    Array.isArray(projectConfig.topology?.runtimes) ? projectConfig.topology.runtimes : []
   );
   /** @type {Array<Record<string, any>>} */
-  const components = [];
-  for (const component of rawComponents) {
-    if (component && typeof component === "object" && typeof component.type === "string") {
-      components.push(/** @type {Record<string, any>} */ (component));
+  const runtimes = [];
+  for (const runtime of rawRuntimes) {
+    if (runtime && typeof runtime === "object" && typeof runtime.kind === "string") {
+      runtimes.push(/** @type {Record<string, any>} */ (runtime));
     }
   }
-  const sortedComponents = [...components].sort((a, b) => {
-    const aOrder = SURFACE_ORDER.get(a.type) ?? 100;
-    const bOrder = SURFACE_ORDER.get(b.type) ?? 100;
+  const sortedRuntimes = [...runtimes].sort((a, b) => {
+    const aOrder = SURFACE_ORDER.get(a.kind) ?? 100;
+    const bOrder = SURFACE_ORDER.get(b.kind) ?? 100;
     return aOrder - bOrder;
   });
-  const surfaces = [...new Set(sortedComponents.map((component) => String(component.type)))];
+  const surfaces = [...new Set(sortedRuntimes.map((runtime) => String(runtime.kind)))];
   const generators = [
     ...new Set(
-      sortedComponents
-        .map((component) => component.generator?.id)
+      sortedRuntimes
+        .map((runtime) => runtime.generator?.id)
         .filter((generatorId) => typeof generatorId === "string")
         .map((generatorId) => String(generatorId))
     )
@@ -704,7 +705,7 @@ function writeProjectTemplateMetadata(projectRoot, template, templateProvenance
   const projectConfigPath = path.join(projectRoot, "topogram.project.json");
   const projectConfig = JSON.parse(fs.readFileSync(projectConfigPath, "utf8"));
   projectConfig.template = projectTemplateMetadata(template, templateProvenance);
-  fs.writeFileSync(projectConfigPath, `${JSON.stringify(projectConfig, null, 2)}\n`, "utf8");
+  fs.writeFileSync(projectConfigPath, `${stableJsonStringify(projectConfig)}\n`, "utf8");
   return projectConfig;
 }
 
@@ -1323,8 +1324,8 @@ function currentTemplateOwnedFiles(projectRoot, includeImplementation, projectCo
   if (fs.existsSync(projectConfigPath)) {
     files.set("topogram.project.json", {
       path: "topogram.project.json",
-      absolutePath: null,
-      content: `${stableJsonStringify(projectConfig)}\n`
+      absolutePath: projectConfigPath,
+      content: null
     });
   }
   return files;