sdtk-design-kit 0.2.0 → 0.3.0

package/src/lib/prototype-renderer.js

@@ -1,325 +0,0 @@
-"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,
-};