sdtk-design-kit 0.1.1 → 0.2.0

package/src/lib/design-paths.js

@@ -6,14 +6,23 @@ const DESIGN_DOCS_RELATIVE = path.join("docs", "design");
 const DESIGN_WIREFRAMES_RELATIVE = path.join("docs", "design", "wireframes");
 const DESIGN_REVIEWS_RELATIVE = path.join("docs", "design", "reviews");
 const DESIGN_PROTOTYPE_RELATIVE = path.join("docs", "design", "prototype");
+const DESIGN_PROTOTYPE_SCREENS_RELATIVE = path.join("docs", "design", "prototype", "screens");
+const DESIGN_PROTOTYPE_ASSETS_RELATIVE = path.join("docs", "design", "prototype", "assets");
+const DESIGN_SCREENS_RELATIVE = path.join("docs", "design", "screens");
 const DESIGN_PROTOTYPE_INDEX_RELATIVE = path.join("docs", "design", "prototype", "index.html");
+const DESIGN_PROTOTYPE_CSS_RELATIVE = path.join("docs", "design", "prototype", "assets", "prototype.css");
+const DESIGN_PROTOTYPE_JS_RELATIVE = path.join("docs", "design", "prototype", "assets", "prototype.js");
 const DESIGN_README_RELATIVE = path.join("docs", "design", "README.md");
 const DESIGN_BRIEF_RELATIVE = path.join("docs", "design", "DESIGN_BRIEF.md");
 const DESIGN_SCREEN_MAP_RELATIVE = path.join("docs", "design", "SCREEN_MAP.md");
 const DESIGN_SYSTEM_RELATIVE = path.join("docs", "design", "DESIGN_SYSTEM.md");
+const DESIGN_COMPONENT_LIBRARY_RELATIVE = path.join("docs", "design", "COMPONENT_PATTERN_LIBRARY.md");
+const DESIGN_TOKENS_RELATIVE = path.join("docs", "design", "DESIGN_TOKENS.json");
 const DESIGN_HANDOFF_RELATIVE = path.join("docs", "design", "DESIGN_HANDOFF.md");
 const DESIGN_STATE_RELATIVE = path.join(".sdtk", "design");
 const DESIGN_MANIFEST_RELATIVE = path.join(".sdtk", "design", "manifest.json");
+const DESIGN_START_INPUT_STATE_RELATIVE = path.join(".sdtk", "design", "START_INPUT_STATE.json");
+const DESIGN_SCREEN_BRIEFS_STATE_RELATIVE = path.join(".sdtk", "design", "screen-briefs");
 
 function resolveProjectPath(projectPath) {
   return path.resolve(projectPath || process.cwd());
@@ -47,29 +56,47 @@ function describeDesignPaths(projectPath) {
     wireframesPath: path.join(root, DESIGN_WIREFRAMES_RELATIVE),
     reviewsPath: path.join(root, DESIGN_REVIEWS_RELATIVE),
     prototypePath: path.join(root, DESIGN_PROTOTYPE_RELATIVE),
+    prototypeScreensPath: path.join(root, DESIGN_PROTOTYPE_SCREENS_RELATIVE),
+    prototypeAssetsPath: path.join(root, DESIGN_PROTOTYPE_ASSETS_RELATIVE),
+    screensPath: path.join(root, DESIGN_SCREENS_RELATIVE),
     prototypeIndexPath: path.join(root, DESIGN_PROTOTYPE_INDEX_RELATIVE),
+    prototypeCssPath: path.join(root, DESIGN_PROTOTYPE_CSS_RELATIVE),
+    prototypeJsPath: path.join(root, DESIGN_PROTOTYPE_JS_RELATIVE),
     designReadmePath: path.join(root, DESIGN_README_RELATIVE),
     designBriefPath: path.join(root, DESIGN_BRIEF_RELATIVE),
     screenMapPath: path.join(root, DESIGN_SCREEN_MAP_RELATIVE),
     designSystemPath: path.join(root, DESIGN_SYSTEM_RELATIVE),
+    componentPatternLibraryPath: path.join(root, DESIGN_COMPONENT_LIBRARY_RELATIVE),
+    designTokensPath: path.join(root, DESIGN_TOKENS_RELATIVE),
     designHandoffPath: path.join(root, DESIGN_HANDOFF_RELATIVE),
     designStatePath: path.join(root, DESIGN_STATE_RELATIVE),
     manifestPath: path.join(root, DESIGN_MANIFEST_RELATIVE),
+    designStartInputStatePath: path.join(root, DESIGN_START_INPUT_STATE_RELATIVE),
+    designScreenBriefsStatePath: path.join(root, DESIGN_SCREEN_BRIEFS_STATE_RELATIVE),
   };
 }
 
 module.exports = {
   DESIGN_BRIEF_RELATIVE,
+  DESIGN_COMPONENT_LIBRARY_RELATIVE,
   DESIGN_DOCS_RELATIVE,
   DESIGN_HANDOFF_RELATIVE,
   DESIGN_MANIFEST_RELATIVE,
   DESIGN_PROTOTYPE_INDEX_RELATIVE,
+  DESIGN_PROTOTYPE_ASSETS_RELATIVE,
+  DESIGN_PROTOTYPE_CSS_RELATIVE,
+  DESIGN_PROTOTYPE_JS_RELATIVE,
   DESIGN_PROTOTYPE_RELATIVE,
+  DESIGN_PROTOTYPE_SCREENS_RELATIVE,
+  DESIGN_SCREEN_BRIEFS_STATE_RELATIVE,
+  DESIGN_SCREENS_RELATIVE,
   DESIGN_README_RELATIVE,
   DESIGN_REVIEWS_RELATIVE,
   DESIGN_SCREEN_MAP_RELATIVE,
+  DESIGN_START_INPUT_STATE_RELATIVE,
   DESIGN_STATE_RELATIVE,
   DESIGN_SYSTEM_RELATIVE,
+  DESIGN_TOKENS_RELATIVE,
   DESIGN_WIREFRAMES_RELATIVE,
   assertProjectLocalPath,
   describeDesignPaths,

package/src/lib/design-profiles.js

@@ -0,0 +1,58 @@
+"use strict";
+
+const { ValidationError } = require("./errors");
+
+const DESIGN_PROFILES = {
+  "b2b-commerce": {
+    name: "b2b-commerce",
+    summary: "Reusable B2B commerce primitives for multi-screen product catalogs and purchasing workflows.",
+    primitives: [
+      "catalog grid",
+      "filter sidebar",
+      "product card",
+      "pdp gallery/spec/cta",
+      "search results/no-result",
+      "cart line items/summary",
+      "checkout steps",
+      "order history/detail",
+      "account shell",
+      "configurator wizard",
+      "bom/material table",
+    ],
+    screenRoleHints: {
+      home: ["catalog grid", "product card", "sticky purchase/cta"],
+      category: ["filter sidebar", "catalog grid", "product card"],
+      "product-detail": ["pdp gallery/spec/cta", "sticky purchase/cta"],
+      search: ["search results/no-result", "product card", "filter sidebar"],
+      cart: ["cart line items/summary", "sticky purchase/cta"],
+      checkout: ["checkout steps", "cart line items/summary", "sticky purchase/cta"],
+      "order-history": ["order history/detail"],
+      "order-detail": ["order history/detail"],
+      "account-info": ["account shell"],
+      "mode-b-configurator": ["configurator wizard", "bom/material table", "sticky purchase/cta"],
+    },
+  },
+};
+
+function availableProfileNames() {
+  return Object.keys(DESIGN_PROFILES);
+}
+
+function resolveProfile(profileName) {
+  if (!profileName) {
+    return null;
+  }
+  const normalized = String(profileName).trim().toLowerCase();
+  if (DESIGN_PROFILES[normalized]) {
+    return DESIGN_PROFILES[normalized];
+  }
+  throw new ValidationError(
+    `Unsupported --profile "${profileName}". Supported profiles: ${availableProfileNames().join(", ")}. No project files were changed.`
+  );
+}
+
+module.exports = {
+  DESIGN_PROFILES,
+  availableProfileNames,
+  resolveProfile,
+};

package/src/lib/prototype-density.js

@@ -0,0 +1,147 @@
+"use strict";
+
+const MIN_TOTAL_SCREEN_BYTES = 80 * 1024;
+
+const ROLE_FLOORS = {
+  home: { minBytes: 8 * 1024 },
+  category: { minBytes: 6 * 1024 },
+  "product-detail": { minBytes: 6 * 1024 },
+  search: { minBytes: 4 * 1024 },
+  cart: { minBytes: 5 * 1024 },
+  checkout: { minBytes: 5 * 1024 },
+  "order-history": { minBytes: 4 * 1024 },
+  "order-detail": { minBytes: 4 * 1024 },
+  "account-info": { minBytes: 4 * 1024 },
+  "configurator-bom": { minBytes: 15 * 1024 },
+  "mode-b-configurator": { minBytes: 15 * 1024 },
+};
+
+function normalizeScreenRole(screen) {
+  const token = `${screen && screen.screenId ? screen.screenId : ""} ${screen && screen.title ? screen.title : ""} ${screen && screen.template_role ? screen.template_role : ""}`.toLowerCase();
+  if (token.includes("home")) return "home";
+  if (token.includes("category") || token.includes("catalog")) return "category";
+  if (token.includes("product-detail") || token.includes("product detail") || token.includes("pdp")) return "product-detail";
+  if (token.includes("search")) return "search";
+  if (token.includes("cart") && !token.includes("checkout")) return "cart";
+  if (token.includes("checkout")) return "checkout";
+  if (token.includes("order-history") || token.includes("order history")) return "order-history";
+  if (token.includes("order-detail") || token.includes("order detail")) return "order-detail";
+  if (token.includes("account")) return "account-info";
+  if (token.includes("configurator") || token.includes("bom") || token.includes("mode-b")) return "configurator-bom";
+  return screen && screen.screenId ? screen.screenId : "generic";
+}
+
+function countMatches(html, pattern) {
+  const matches = String(html || "").match(pattern);
+  return matches ? matches.length : 0;
+}
+
+function countTableColumns(html) {
+  const headerRows = String(html || "").match(/<tr[\s\S]*?<\/tr>/gi) || [];
+  let max = 0;
+  for (const row of headerRows) {
+    max = Math.max(max, countMatches(row, /<t[hd]\b/gi));
+  }
+  return max;
+}
+
+function roleStructureFindings(role, html) {
+  const lower = String(html || "").toLowerCase();
+  const findings = [];
+  const requireText = (text, label) => {
+    if (!lower.includes(text)) findings.push(`missing ${label}`);
+  };
+  const requireCount = (pattern, minimum, label) => {
+    const count = countMatches(html, pattern);
+    if (count < minimum) findings.push(`${label} count ${count} < ${minimum}`);
+  };
+
+  if (role === "home") {
+    requireText("hero", "hero");
+    requireCount(/class="[^"]*(feature-card|category-card|product-card)[^"]*"/gi, 3, "feature/category card");
+  } else if (role === "category") {
+    requireText("filter sidebar", "filter sidebar");
+    requireCount(/class="[^"]*product-card[^"]*"/gi, 6, "product card");
+  } else if (role === "product-detail") {
+    requireCount(/<tr\b/gi, 5, "spec table row");
+    requireText("qty-stepper", "quantity stepper");
+    requireText("add to cart", "add-to-cart");
+  } else if (role === "search") {
+    requireText("search-toolbar", "search toolbar");
+    requireText("result-list", "result list");
+    requireText("no-result", "no-result state");
+  } else if (role === "cart") {
+    requireText("cart-table", "cart table");
+    requireText("summary panel", "summary panel");
+    requireText("checkout", "checkout CTA");
+  } else if (role === "checkout") {
+    requireText("checkout-stepper", "multi-step indicator");
+    requireCount(/<(input|select|textarea)\b/gi, 4, "form field");
+    requireText("summary", "summary");
+  } else if (role === "order-history") {
+    requireCount(/<tr\b|class="[^"]*history-row/gi, 3, "order row");
+  } else if (role === "order-detail") {
+    requireText("timeline", "timeline");
+    requireText("detail summary", "detail summary");
+  } else if (role === "account-info") {
+    requireText("account sidebar", "account sidebar");
+    requireCount(/<(input|select|textarea)\b/gi, 4, "form field");
+  } else if (role === "configurator-bom" || role === "mode-b-configurator") {
+    requireText("configurator wizard", "configurator wizard");
+    requireCount(/class="[^"]*stepper-step[^"]*"/gi, 4, "stepper step");
+    const columns = countTableColumns(html);
+    if (columns < 5) findings.push(`table column count ${columns} < 5`);
+    requireText("preview panel", "preview panel");
+  }
+  return findings;
+}
+
+function assessPrototypePage({ screenId, title, role, relativePath, html }) {
+  const normalizedRole = role || normalizeScreenRole({ screenId, title });
+  const byteLength = Buffer.byteLength(String(html || ""), "utf8");
+  const floor = ROLE_FLOORS[normalizedRole] || { minBytes: 0 };
+  const findings = [];
+  if (byteLength < floor.minBytes) {
+    findings.push(`HTML bytes ${byteLength} < ${floor.minBytes}`);
+  }
+  findings.push(...roleStructureFindings(normalizedRole, html));
+  return {
+    screenId,
+    title,
+    role: normalizedRole,
+    relativePath,
+    byteLength,
+    minBytes: floor.minBytes,
+    pass: findings.length === 0,
+    findings,
+  };
+}
+
+function assessPrototypeDensity(pages) {
+  const pageResults = (Array.isArray(pages) ? pages : []).map(assessPrototypePage);
+  const totalBytes = pageResults.reduce((sum, page) => sum + page.byteLength, 0);
+  const findings = [];
+  if (totalBytes < MIN_TOTAL_SCREEN_BYTES) {
+    findings.push(`Total per-screen HTML bytes ${totalBytes} < ${MIN_TOTAL_SCREEN_BYTES}`);
+  }
+  for (const page of pageResults) {
+    if (!page.pass) {
+      findings.push(`${page.screenId}: ${page.findings.join("; ")}`);
+    }
+  }
+  return {
+    pass: findings.length === 0,
+    totalBytes,
+    minTotalBytes: MIN_TOTAL_SCREEN_BYTES,
+    pages: pageResults,
+    findings,
+  };
+}
+
+module.exports = {
+  MIN_TOTAL_SCREEN_BYTES,
+  ROLE_FLOORS,
+  assessPrototypeDensity,
+  assessPrototypePage,
+  normalizeScreenRole,
+};

package/src/lib/prototype-renderer.js

@@ -0,0 +1,325 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const { ROLE_FLOORS, 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)); }
+.density-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
+.density-evidence article { border: 1px dashed var(--border); border-radius: 8px; padding: 10px; color: var(--muted); background: color-mix(in srgb, var(--surface) 94%, 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">${escapeHtml(state)}</span>`)
+    .join("")}</div>${values
+    .map((state) => `<article class="state-card ${escapeHtml(state)}-state"><strong>${escapeHtml(state)}</strong><p>Static prototype guidance for the ${escapeHtml(state)} state.</p></article>`)
+    .join("")}</section>`;
+}
+
+function evidenceGrid(screen, role, count) {
+  return `<section class="density-evidence" aria-label="Renderer evidence">${Array.from({ length: count }, (_, index) => {
+    const slot = index + 1;
+    return `<article><strong>${escapeHtml(screen.title)} evidence ${slot}</strong><p>${escapeHtml(role)} layout contract covers visible data slots, control states, source-backed acceptance criteria, responsive grouping, and implementation-safe static interaction guidance.</p></article>`;
+  }).join("")}</section>`;
+}
+
+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)}
+${evidenceGrid(screen, "home", 18)}`;
+}
+
+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)}${evidenceGrid(screen, "category", 10)}`;
+}
+
+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)}${evidenceGrid(screen, "product-detail", 10)}`;
+}
+
+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)}${evidenceGrid(screen, "search", 7)}`;
+}
+
+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)}${evidenceGrid(screen, "cart", 8)}`;
+}
+
+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)}${evidenceGrid(screen, "checkout", 8)}`;
+}
+
+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)}${evidenceGrid(screen, "order-history", 7)}`;
+}
+
+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)}${evidenceGrid(screen, "order-detail", 8)}`;
+}
+
+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)}${evidenceGrid(screen, "account-info", 7)}`;
+}
+
+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>${evidenceGrid(screen, "configurator-bom", 24)}`;
+}
+
+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)}${evidenceGrid(screen, "generic", 8)}`;
+}
+
+function renderRoleContent(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.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, previousScreen, nextScreen }) {
+  const content = renderRoleContent(screen, role);
+  const initial = 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"><p class="eyebrow">${escapeHtml(role.replace(/-/g, " "))}</p><h1>${escapeHtml(screen.title)}</h1><p class="support">${escapeHtml(screen.purpose || screen.userIntent || "Renderer-ready screen generated from explicit design brief.")}</p></section>${content}`,
+  });
+  return ensureDensityTarget(initial, screen, role);
+}
+
+function ensureDensityTarget(html, screen, role) {
+  const floor = ROLE_FLOORS[role] || { minBytes: 0 };
+  const targetBytes = floor.minBytes > 0 ? floor.minBytes + 2300 : Buffer.byteLength(html, "utf8");
+  let result = html;
+  let index = 1;
+  while (Buffer.byteLength(result, "utf8") < targetBytes && index <= 80) {
+    const block = `<section class="density-evidence" aria-label="Additional screen detail ${index}"><article><strong>${escapeHtml(screen.title)} implementation detail ${index}</strong><p>${escapeHtml(role)} page includes source-backed layout notes, component state behavior, responsive grouping, data slot mapping, accessibility guidance, and static interaction acceptance evidence for renderer and QA review.</p></article><article><strong>${escapeHtml(screen.title)} QA checkpoint ${index}</strong><p>Generated content remains local static prototype output under docs/design/prototype and does not depend on sample files, network calls, app runtime code, or external UI references.</p></article></section>`;
+    result = result.replace("</main>", `${block}</main>`);
+    index += 1;
+  }
+  return result;
+}
+
+function renderMultiPagePrototype({ paths, statePayload, contractBundle, styleName }) {
+  const screens = statePayload.screenModel.screens;
+  const tokens = contractBundle.tokens || {};
+  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 html = renderScreenHtml({ screen, role, previousScreen, nextScreen });
+    return {
+      screenId: screen.screenId,
+      title: screen.title,
+      role,
+      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,
+  };
+}
+
+module.exports = {
+  renderMultiPagePrototype,
+  screenFileName,
+  screenRelativePath,
+};