sdtk-design-kit 0.1.2 → 0.2.1

package/src/lib/prototype-renderer.js

@@ -0,0 +1,382 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const { briefForScreen, loadPrototypeBriefIndex } = require("./prototype-briefs");
+const { componentClassFor, renderBriefComponent, renderDataSlotPlaceholder } = require("./prototype-component-map");
+const { assessPrototypeDensity, normalizeScreenRole } = require("./prototype-density");
+
+function escapeHtml(value) {
+  return String(value == null ? "" : value)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function tokenOrDefault(tokens, keyPath, fallback) {
+  const value = keyPath.reduce((obj, key) => (obj && Object.prototype.hasOwnProperty.call(obj, key) ? obj[key] : undefined), tokens);
+  return value == null ? fallback : value;
+}
+
+function screenFileName(screen) {
+  return `${String(screen.screenId || "screen").replace(/[^a-zA-Z0-9_-]+/g, "-")}.html`;
+}
+
+function screenRelativePath(screen) {
+  return `docs/design/prototype/screens/${screenFileName(screen)}`;
+}
+
+function sharedCss(tokens) {
+  return `:root {
+  --bg: ${tokenOrDefault(tokens, ["color", "surfaceAlt"], "#F5F7FB")};
+  --surface: ${tokenOrDefault(tokens, ["color", "surface"], "#FFFFFF")};
+  --text: ${tokenOrDefault(tokens, ["color", "textPrimary"], "#111827")};
+  --muted: ${tokenOrDefault(tokens, ["color", "textMuted"], "#64748B")};
+  --primary: ${tokenOrDefault(tokens, ["color", "accentPrimary"], "#0F766E")};
+  --accent: ${tokenOrDefault(tokens, ["color", "accentSecondary"], "#2563EB")};
+  --border: ${tokenOrDefault(tokens, ["color", "border"], "#D8E0EA")};
+  --shadow: 0 18px 40px rgba(15,23,42,0.10);
+}
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 ${tokenOrDefault(tokens, ["typography", "fontFamily"], "Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif")}; }
+a { color: inherit; }
+.prototype-shell { width: min(1240px, calc(100vw - 24px)); margin: 0 auto; padding: 24px 0 48px; }
+.topbar, .panel, .hero, .launcher-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
+.topbar { position: sticky; top: 0; z-index: 4; padding: 14px; margin-bottom: 18px; }
+.topline, .screen-nav, .button-row, .chip-row, .page-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.topline { justify-content: space-between; }
+.screen-nav { margin-top: 10px; overflow: auto; }
+.screen-nav a, .page-links a, .chip { text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; background: color-mix(in srgb, var(--surface) 94%, var(--bg)); font-size: 12px; font-weight: 750; }
+.meta, .support { color: var(--muted); }
+.eyebrow { margin: 0 0 6px; color: var(--primary); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: 0; }
+h1, h2, h3, h4, p { margin-top: 0; }
+h1 { font-size: clamp(34px, 6vw, 64px); line-height: 1.04; margin-bottom: 16px; }
+h2 { font-size: clamp(26px, 4vw, 40px); line-height: 1.12; margin-bottom: 12px; }
+h3 { font-size: 18px; margin-bottom: 8px; }
+.launcher-grid, .feature-grid, .product-grid, .metric-grid { display: grid; gap: 14px; }
+.launcher-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+.feature-grid, .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.screen-layout, .split-layout { display: grid; grid-template-columns: minmax(240px, 0.36fr) minmax(0, 1fr); gap: 14px; align-items: start; }
+.panel, .hero, .launcher-card { padding: 16px; }
+.btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border-radius: 8px; padding: 0 16px; text-decoration: none; font-weight: 850; border: 1px solid transparent; }
+.btn-primary { background: var(--primary); color: #fff; }
+.btn-secondary { background: transparent; border-color: var(--border); color: var(--text); }
+.table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.table th, .table td { border-bottom: 1px solid var(--border); text-align: left; padding: 8px 6px; }
+.form-grid { display: grid; gap: 12px; }
+label { display: grid; gap: 6px; font-weight: 750; }
+input, select, textarea { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; background: #fff; color: var(--text); }
+textarea { padding-top: 10px; min-height: 80px; }
+.qty-stepper { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }
+.checkout-stepper { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
+.checkout-stepper li, .stepper-step { border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
+.timeline { margin: 0; padding-left: 18px; }
+.state-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
+.state-card, .product-card, .feature-card, .category-card, .history-row, .result-row { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--surface) 96%, var(--bg)); }
+@media (max-width: 920px) {
+  .screen-layout, .split-layout, .feature-grid, .product-grid, .metric-grid { grid-template-columns: 1fr; }
+  h1 { font-size: 36px; }
+}
+`;
+}
+
+function staticJs() {
+  return `"use strict";
+document.addEventListener("click", (event) => {
+  const target = event.target.closest("[data-static-action]");
+  if (!target) return;
+  event.preventDefault();
+  target.setAttribute("data-triggered", "true");
+});
+`;
+}
+
+function stateStrip(states) {
+  const values = Array.isArray(states) && states.length > 0 ? states : ["loading", "empty", "success", "error"];
+  return `<section class="state-strip" aria-label="State coverage"><div class="chip-row">${values
+    .map((state) => `<span class="chip" data-chip-type="state" data-state-id="${escapeHtml(state)}">${escapeHtml(state)}</span>`)
+    .join("")}</div>${values
+    .map((state) => `<article class="state-card ${escapeHtml(state)}-state" data-state-id="${escapeHtml(state)}"><strong>${escapeHtml(state)}</strong><p>Static prototype guidance for the ${escapeHtml(state)} state.</p></article>`)
+    .join("")}</section>`;
+}
+
+function slotLookupForBrief(brief) {
+  const lookup = new Map();
+  for (const slot of Array.isArray(brief && brief.data_slots) ? brief.data_slots : []) {
+    lookup.set(slot.id, slot);
+  }
+  return lookup;
+}
+
+function renderNeedsBrief(screen, role) {
+  const slots = [
+    { id: "brief-status", label: "Brief status" },
+    { id: "screen-contract", label: "Screen contract" },
+    { id: "source-evidence", label: "Source evidence" },
+    { id: "primary-record", label: "Primary record" },
+    { id: "next-action", label: "Next action" },
+  ];
+  const section = {
+    id: "needs-brief-actions",
+    title: "Brief recovery actions",
+    purpose: "Prototype generation continues with visible review evidence instead of silently falling back to role-default filler.",
+    data_slots: slots,
+    interactions: ["Review brief", "Regenerate brief", "Continue prototype review"],
+  };
+  const brief = { screen_title: screen.title, primary_action: "Review brief" };
+  return `<section class="panel needs-brief" data-section-id="needs-brief-summary" data-section-role="${escapeHtml(role)}"><p class="eyebrow">NEEDS_BRIEF</p><h2>NEEDS_BRIEF</h2><p class="support">${escapeHtml(screen.title)} requires .sdtk/design/screen-briefs/${escapeHtml(screen.screenId)}.json before high-fidelity composition.</p><div class="chip-row">${slots.map((slot) => renderDataSlotPlaceholder({ slot, section, escapeHtml })).join("")}</div></section><section class="panel" data-section-id="needs-brief-actions" data-section-role="${escapeHtml(role)}"><h2>Brief recovery actions</h2>${renderBriefComponent({ componentId: { id: "primary-panel", label: "Primary panel" }, section, brief, role, slotLookup: new Map(slots.map((slot) => [slot.id, slot])), escapeHtml })}${stateStrip(screen.requiredStates)}</section>`;
+}
+
+function renderBriefSlotSummary(brief) {
+  const slots = Array.isArray(brief.data_slots) ? brief.data_slots : [];
+  if (slots.length === 0) return "";
+  return `<div class="panel" data-component-id="screen-data-slots"><h3>Data slots</h3><div class="chip-row">${slots
+    .map((slot) => renderDataSlotPlaceholder({ slot, section: { id: "screen-data-slots" }, escapeHtml }))
+    .join("")}</div></div>`;
+}
+
+function sectionHasHeroComponent(section) {
+  const components = Array.isArray(section && section.components) ? section.components : [];
+  return components.some((component) => componentClassFor(component && component.id ? component.id : String(component || "component")) === "hero-section");
+}
+
+function briefHasHeroComponent(brief) {
+  return Array.isArray(brief && brief.sections) && brief.sections.some((section) => sectionHasHeroComponent(section));
+}
+
+function renderBriefSection({ section, brief, role, slotLookup, headingTag = "h2" }) {
+  const components = Array.isArray(section.components) && section.components.length > 0 ? section.components : [{ id: "component-placeholder", label: section.title }];
+  return `<section class="panel brief-section" data-section-id="${escapeHtml(section.id)}" data-section-role="${escapeHtml(role)}"><p class="eyebrow">${escapeHtml(role.replace(/-/g, " "))}</p><${headingTag}>${escapeHtml(section.title)}</${headingTag}><p class="support">${escapeHtml(section.purpose)}</p><div class="brief-component-stack">${components
+    .map((component) => renderBriefComponent({ componentId: component, section, brief, role, slotLookup, escapeHtml }))
+    .join("")}</div></section>`;
+}
+
+function renderBriefContent({ screen, role, brief }) {
+  if (!brief || !Array.isArray(brief.sections) || brief.sections.length === 0) {
+    return renderNeedsBrief(screen, role);
+  }
+  const slotLookup = slotLookupForBrief(brief);
+  const hasHeroComponent = briefHasHeroComponent(brief);
+  const sections = brief.sections
+    .map((section, index) => renderBriefSection({ section, brief, role, slotLookup, headingTag: !hasHeroComponent && index === 0 ? "h1" : "h2" }))
+    .join("");
+  return `${sections}${renderBriefSlotSummary(brief)}${stateStrip(brief.states.length > 0 ? brief.states : screen.requiredStates)}`;
+}
+
+function renderHome(screen) {
+  return `<section class="hero"><p class="eyebrow">Hero</p><h1>${escapeHtml(screen.title)} hero</h1><p class="support">Category-first commerce landing with featured products, clear entry points, and guided configurator access.</p><div class="button-row"><a class="btn btn-primary" href="#" data-static-action>Start purchase</a><a class="btn btn-secondary" href="#" data-static-action>Open configurator</a></div></section>
+<section class="panel" aria-label="Featured products"><h2>Featured products</h2><div class="feature-grid">${["Category range", "Featured products", "Configurator quick start", "Order support"].map((label) => `<article class="feature-card category-card"><h3>${label}</h3><p>Structured entry point with summary, state, and action guidance.</p></article>`).join("")}</div></section>
+${stateStrip(screen.requiredStates)}`;
+}
+
+function productCards(count) {
+  return Array.from({ length: count }, (_, index) => `<article class="product-card"><h3>Product card ${index + 1}</h3><p>SKU, availability, comparison attribute, price tier, and primary selection control.</p><div class="button-row"><a class="btn btn-secondary" href="#" data-static-action>Compare</a><a class="btn btn-primary" href="#" data-static-action>Select</a></div></article>`).join("");
+}
+
+function renderCategory(screen) {
+  return `<section class="screen-layout"><aside class="panel"><h3>Filter sidebar</h3>${["Category", "Availability", "Material", "Size", "Price", "Delivery"].map((label) => `<label>${label}<select><option>${label} option</option></select></label>`).join("")}</aside><div class="panel"><h3>Product grid</h3><div class="product-grid">${productCards(8)}</div></div></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderProductDetail(screen) {
+  return `<section class="split-layout"><div class="panel"><h3>Gallery and spec area</h3><table class="table spec-table"><tbody>${["Voltage", "Length", "Material", "Finish", "Certification"].map((label, index) => `<tr><th>${label}</th><td>Source-backed specification value ${index + 1}</td></tr>`).join("")}</tbody></table></div><aside class="panel"><h3>Price and quantity</h3><div class="qty-stepper"><button>-</button><span>1</span><button>+</button></div><div class="button-row"><a class="btn btn-primary" href="#" data-static-action>Add to cart</a></div></aside></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderSearch(screen) {
+  return `<section class="panel"><h3>Search toolbar</h3><div class="search-toolbar"><input aria-label="Search query" placeholder="Search product"><select><option>Sort by relevance</option></select><button class="btn btn-primary">Search</button></div><div class="result-list">${Array.from({ length: 5 }, (_, index) => `<article class="result-row"><h4>Result item ${index + 1}</h4><p>Matched term, category, availability, and action.</p></article>`).join("")}<article class="result-row no-result"><h4>No-result state</h4><p>Suggest alternate query, category reset, and support route.</p></article></div></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderCart(screen) {
+  return `<section class="split-layout"><div class="panel"><h3>Cart table</h3><table class="table cart-table"><thead><tr><th>Item</th><th>Qty</th><th>Unit</th><th>Total</th><th>Action</th></tr></thead><tbody>${Array.from({ length: 4 }, (_, index) => `<tr><td>Line item ${index + 1}</td><td><div class="qty-stepper"><button>-</button><span>${index + 1}</span><button>+</button></div></td><td>1000</td><td>${(index + 1) * 1000}</td><td><button>Remove</button></td></tr>`).join("")}</tbody></table></div><aside class="panel summary-panel"><h3>Summary panel</h3><p>Subtotal, tax, freight, and checkout CTA.</p><a class="btn btn-primary" href="#" data-static-action>Checkout</a></aside></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderCheckout(screen) {
+  return `<section class="split-layout"><div class="panel"><h3>Checkout stepper</h3><ol class="checkout-stepper">${["Information", "Delivery", "Payment", "Review"].map((step) => `<li class="stepper-step">${step}</li>`).join("")}</ol><form class="form-grid">${["Recipient", "Address", "Phone", "Purchase order"].map((label) => `<label>${label}<input type="text" value="${label} value"></label>`).join("")}</form></div><aside class="panel summary-panel"><h3>Summary card</h3><p>Order totals, delivery window, and final confirmation.</p><button class="btn btn-primary">Place order</button></aside></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderOrderHistory(screen) {
+  return `<section class="panel"><h3>Order history list</h3><table class="table"><thead><tr><th>Order</th><th>Status</th><th>Total</th><th>Action</th></tr></thead><tbody>${Array.from({ length: 5 }, (_, index) => `<tr class="history-row"><td>#10${index}</td><td>Processing</td><td>${(index + 2) * 1200}</td><td><a href="#" data-static-action>Open detail</a></td></tr>`).join("")}</tbody></table></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderOrderDetail(screen) {
+  return `<section class="split-layout"><div class="panel"><h3>Timeline</h3><ol class="timeline">${["Placed", "Approved", "Packed", "Shipping", "Delivered"].map((item) => `<li>${item}</li>`).join("")}</ol></div><aside class="panel detail-summary"><h3>Detail summary</h3><p>Delivery, payment, line item, and support snapshot.</p></aside></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderAccountInfo(screen) {
+  return `<section class="screen-layout"><aside class="panel"><h3>Account sidebar</h3><nav class="screen-nav"><a href="#">Company</a><a href="#">Users</a><a href="#">Billing</a><a href="#">Security</a></nav></aside><div class="panel"><h3>View or edit form</h3><form class="form-grid">${["Company", "Contact", "Email", "Phone", "Address"].map((label) => `<label>${label}<input type="text" value="${label}"></label>`).join("")}</form></div></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderConfigurator(screen) {
+  return `<section class="panel"><h3>Configurator wizard</h3><ol class="checkout-stepper">${["Project", "Assembly", "Construction", "Review", "Complete"].map((step) => `<li class="stepper-step">${step}</li>`).join("")}</ol><div class="split-layout"><div class="panel preview-panel"><h4>Preview panel</h4><p>Derived material preview with recalculation state and validation summary.</p>${stateStrip(screen.requiredStates)}</div><div class="panel"><h4>BOM table</h4><table class="table cart-table"><thead><tr><th>Material</th><th>Spec</th><th>Qty</th><th>Unit</th><th>Action</th></tr></thead><tbody>${Array.from({ length: 8 }, (_, index) => `<tr><td>Material ${index + 1}</td><td>Generated spec ${index + 1}</td><td>${index + 2}</td><td>pcs</td><td><button>Exclude</button></td></tr>`).join("")}</tbody></table><div class="button-row"><a class="btn btn-secondary" href="#" data-static-action>Recalculate</a><a class="btn btn-primary" href="#" data-static-action>Add BOM to cart</a></div></div></div></section>`;
+}
+
+function renderGeneric(screen) {
+  return `<section class="panel"><h3>${escapeHtml(screen.title)} workspace</h3><p>Renderer-ready generic screen with explicit sections, components, states, interactions, and source evidence from the screen brief.</p></section>${stateStrip(screen.requiredStates)}`;
+}
+
+function renderRoleContent({ screen, role, brief }) {
+  if (brief) return renderBriefContent({ screen, role, brief });
+  return renderNeedsBrief(screen, role);
+}
+
+function renderLegacyRoleContent(screen, role) {
+  if (role === "home") return renderHome(screen);
+  if (role === "category") return renderCategory(screen);
+  if (role === "product-detail") return renderProductDetail(screen);
+  if (role === "search") return renderSearch(screen);
+  if (role === "cart") return renderCart(screen);
+  if (role === "checkout") return renderCheckout(screen);
+  if (role === "order-history") return renderOrderHistory(screen);
+  if (role === "order-detail") return renderOrderDetail(screen);
+  if (role === "account-info") return renderAccountInfo(screen);
+  if (role === "configurator-bom" || role === "mode-b-configurator") return renderConfigurator(screen);
+  return renderGeneric(screen);
+}
+
+function pageChrome({ title, cssHref, bodyContent, backHref, prev, next, screenId, role }) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(title)} Prototype</title>
+  <link rel="stylesheet" href="${cssHref}">
+  <script src="../assets/prototype.js" defer></script>
+</head>
+<body data-screen-role="${escapeHtml(role)}">
+  <main class="prototype-shell" id="screen-${escapeHtml(screenId)}">
+    <header class="topbar">
+      <div class="topline">
+        <a class="btn btn-secondary" href="${backHref}">Back to index</a>
+        <strong>${escapeHtml(title)}</strong>
+      </div>
+      <nav class="page-links" aria-label="Screen page navigation">
+        <a href="${prev.href}" rel="prev">Previous: ${escapeHtml(prev.title)}</a>
+        <a href="${next.href}" rel="next">Next: ${escapeHtml(next.title)}</a>
+      </nav>
+    </header>
+    ${bodyContent}
+  </main>
+</body>
+</html>
+`;
+}
+
+function indexHtml({ screens, profile, densityReport, styleName }) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>SDTK-DESIGN Prototype Launcher</title>
+  <link rel="stylesheet" href="assets/prototype.css">
+</head>
+<body>
+  <main class="prototype-shell" data-style-preset="${escapeHtml(styleName || "default")}">
+    <header class="topbar">
+      <div class="topline">
+        <strong>SDTK-DESIGN multi-page prototype</strong>
+        <span class="meta">screens=${screens.length} | profile=${escapeHtml(profile || "none")} | density=${densityReport.mode === "semantic" ? `${densityReport.aggregate.sectionCount} sections / ${densityReport.aggregate.componentCount} components` : `${densityReport.totalBytes}/${densityReport.minTotalBytes} bytes`}</span>
+      </div>
+      <nav class="screen-nav" aria-label="Screen navigation">
+        ${screens.map((screen) => `<a href="screens/${screenFileName(screen)}">${escapeHtml(screen.title)}</a>`).join("")}
+      </nav>
+    </header>
+    <section class="launcher-grid" aria-label="Prototype pages">
+      ${screens.map((screen) => `<article class="launcher-card"><p class="eyebrow">${escapeHtml(normalizeScreenRole(screen).replace(/-/g, " "))}</p><h2>${escapeHtml(screen.title)}</h2><p class="support">Route: ${escapeHtml(screen.route || "NEEDS_ROUTE")}</p><a class="btn btn-primary" href="screens/${screenFileName(screen)}">Open screen</a></article>`).join("")}
+    </section>
+  </main>
+</body>
+</html>
+`;
+}
+
+function renderScreenHtml({ screen, role, brief, previousScreen, nextScreen }) {
+  const content = renderRoleContent({ screen, role, brief });
+  const hasBriefSections = Boolean(brief && Array.isArray(brief.sections) && brief.sections.length > 0);
+  const heroHeadingTag = hasBriefSections ? "h2" : "h1";
+  return pageChrome({
+    title: screen.title,
+    cssHref: "../assets/prototype.css",
+    backHref: "../index.html",
+    prev: { title: previousScreen.title, href: screenFileName(previousScreen) },
+    next: { title: nextScreen.title, href: screenFileName(nextScreen) },
+    screenId: screen.screenId,
+    role,
+    bodyContent: `<section class="hero" data-component-id="hero"><p class="eyebrow">${escapeHtml(role.replace(/-/g, " "))}</p><${heroHeadingTag}>${escapeHtml(screen.title)}</${heroHeadingTag}><p class="support">${escapeHtml(screen.purpose || screen.userIntent || "Renderer-ready screen generated from explicit design brief.")}</p></section>${content}`,
+  });
+}
+
+function renderMultiPagePrototype({ paths, statePayload, contractBundle, styleName, briefIndex }) {
+  const screens = statePayload.screenModel.screens;
+  const tokens = contractBundle.tokens || {};
+  const resolvedBriefIndex = briefIndex || loadPrototypeBriefIndex({ paths });
+  fs.mkdirSync(paths.prototypePath, { recursive: true });
+  fs.mkdirSync(paths.prototypeScreensPath, { recursive: true });
+  fs.mkdirSync(paths.prototypeAssetsPath, { recursive: true });
+
+  fs.writeFileSync(paths.prototypeCssPath, sharedCss(tokens), "utf-8");
+  fs.writeFileSync(paths.prototypeJsPath, staticJs(), "utf-8");
+
+  const pageRecords = screens.map((screen, index) => {
+    const previousScreen = screens[(index - 1 + screens.length) % screens.length];
+    const nextScreen = screens[(index + 1) % screens.length];
+    const role = normalizeScreenRole({
+      ...screen,
+      template_role:
+        contractBundle.screenContracts &&
+        contractBundle.screenContracts.get(screen.screenId) &&
+        contractBundle.screenContracts.get(screen.screenId).sidecar
+          ? contractBundle.screenContracts.get(screen.screenId).sidecar.template_role
+          : null,
+    });
+    const screenContract =
+      contractBundle.screenContracts && contractBundle.screenContracts.get(screen.screenId)
+        ? contractBundle.screenContracts.get(screen.screenId)
+        : null;
+    const brief = briefForScreen({ screen, briefIndex: resolvedBriefIndex }) || (screenContract && screenContract.sidecar ? screenContract.sidecar : null);
+    const html = renderScreenHtml({ screen, role, brief, previousScreen, nextScreen });
+    return {
+      screenId: screen.screenId,
+      title: screen.title,
+      role,
+      brief,
+      relativePath: screenRelativePath(screen),
+      filePath: path.join(paths.prototypeScreensPath, screenFileName(screen)),
+      html,
+    };
+  });
+
+  const densityReport = assessPrototypeDensity(pageRecords);
+  for (const page of pageRecords) {
+    fs.writeFileSync(page.filePath, page.html, "utf-8");
+  }
+  fs.writeFileSync(
+    paths.prototypeIndexPath,
+    indexHtml({ screens, profile: statePayload.profileSelection || "generic", densityReport, styleName }),
+    "utf-8"
+  );
+
+  return {
+    mode: "high-fidelity-multi-page",
+    indexRelativePath: "docs/design/prototype/index.html",
+    assetRelativePaths: ["docs/design/prototype/assets/prototype.css", "docs/design/prototype/assets/prototype.js"],
+    screenPages: pageRecords.map((page) => ({
+      screenId: page.screenId,
+      title: page.title,
+      role: page.role,
+      relativePath: page.relativePath,
+      byteLength: Buffer.byteLength(page.html, "utf8"),
+    })),
+    densityReport,
+    briefFindings: resolvedBriefIndex.findings || [],
+  };
+}
+
+module.exports = {
+  renderMultiPagePrototype,
+  renderLegacyRoleContent,
+  screenFileName,
+  screenRelativePath,
+};