@anselmdk/feature-spec-md 0.8.2 → 0.9.0-rc.1

package/dist/reportTemplate.js

@@ -26,10 +26,19 @@ export function renderHtmlReport(specs, options = {}) {
 }
 function featureReportBody({ specs, options, evidence, sourceLinks, title, }) {
     const documents = allReportDocuments(specs, options);
+    if (options.layers?.length) {
+        return `
+<h1>${renderReportTitle(title, options.repositoryUrl)}</h1>
+<p>Generated ${html(formatGeneratedAt(options.generatedAt))}.</p>
+${renderIssues(options.validationIssues ?? [])}
+${renderLayeredDocuments(documents, options, evidence, sourceLinks)}
+`;
+    }
     return `
 <h1>${renderReportTitle(title, options.repositoryUrl)}</h1>
 <p>Generated ${html(formatGeneratedAt(options.generatedAt))}.</p>
 ${renderOpenQuestionsAndAssumptions(documents, sourceLinks)}
+${renderJourneyOverview(specs, options.coverage, sourceLinks)}
 ${renderIssues(options.validationIssues ?? [])}
 ${renderModels(options.models ?? [], options.coverage, sourceLinks)}
 ${renderStacks(options.stacks ?? [], options.coverage, sourceLinks)}
@@ -37,52 +46,76 @@ ${renderDesigns(options.designs ?? [], options.coverage, sourceLinks)}
 ${specs.map((spec) => renderSpec(spec, options.coverage, evidence, sourceLinks)).join("\n")}
 `;
 }
+function renderJourneyOverview(specs, coverage, sourceLinks) {
+    const journeys = specs.flatMap((spec) => spec.scenarios
+        .filter((scenario) => scenario.journey)
+        .map((scenario) => ({ spec, scenario })));
+    if (!journeys.length)
+        return "";
+    return `<details class="panel report-section" open>
+  <summary class="report-section-summary"><h2>End-to-end journeys</h2><span class="badge">${journeys.length}</span></summary>
+  <div class="report-section-body"><ul>${journeys
+        .map(({ scenario }) => {
+        const item = coverage?.scenarioCoverage.find((candidate) => candidate.id === scenario.id);
+        const metadata = scenario.journey;
+        const systems = metadata.systems.length
+            ? ` <span class="muted">${html(metadata.systems.join(" → "))}</span>`
+            : "";
+        return `<li><a href="#${html(scenario.id.toLowerCase())}"><code>${html(scenario.id)}</code>: ${html(scenario.title)}</a> <span class="badge">${html(metadata.path)}</span>${metadata.critical ? ' <span class="badge">critical</span>' : ""}${systems} ${coverageBadge(item?.covered, [], item, sourceLinks)}</li>`;
+    })
+        .join("")}</ul></div>
+</details>`;
+}
 function featureReportStyles() {
-    return `.panel{border:1px solid #d0d7de;border-radius:8px;margin:18px 0;overflow:hidden}
+    return `.panel{border:1px solid var(--border);border-radius:8px;margin:18px 0;overflow:hidden;background:var(--surface)}
+.report-layers{margin-top:18px}.report-layers>.details-section-header{margin-bottom:8px}.layer-section{border:1px solid var(--border);border-radius:10px;margin:12px 0;background:var(--surface);overflow:hidden}
+.layer-summary{cursor:pointer;display:flex;gap:12px;align-items:center;padding:18px 20px;list-style:none}.layer-summary::-webkit-details-marker{display:none}.layer-summary::before{content:"▶";color:var(--muted);font-size:12px;transition:transform .15s ease}.layer-section[open]>.layer-summary::before{transform:rotate(90deg)}
+.layer-summary-copy{flex:1}.layer-summary h2{font-size:1.35em;margin:0}.layer-summary p{color:var(--muted);margin:3px 0 0}.layer-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.layer-body{padding:0 18px 18px}.layer-body>.details-section-header{margin:0 0 10px}.document-section{margin:12px 0}.document-kind{color:var(--muted)}
 .report-section-summary{cursor:pointer;display:flex;gap:12px;align-items:center;padding:20px;list-style:none}.report-section-summary::-webkit-details-marker{display:none}
-.report-section-summary::before{content:"▶";color:#57606a;font-size:12px;transition:transform .15s ease}.report-section[open]>.report-section-summary::before{transform:rotate(90deg)}
+.report-section-summary::before{content:"▶";color:var(--muted);font-size:12px;transition:transform .15s ease}.report-section[open]>.report-section-summary::before{transform:rotate(90deg)}
 .report-section-summary h2{font-size:1.5em;margin:0;flex:1}.report-section-body{padding:0 20px 20px}
-.ok{color:#1a7f37}.missing,.error{color:#cf222e}.warning{color:#9a6700}.muted{color:#57606a}
-.badge{border:1px solid #d0d7de;border-radius:999px;padding:2px 8px;font-size:12px;white-space:nowrap}
+.ok{color:var(--success)}.missing,.error{color:var(--danger)}.warning{color:var(--warning)}.muted{color:var(--muted)}
+.badge{border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:12px;white-space:nowrap}
 .feature-header{display:flex;gap:12px;align-items:center;justify-content:space-between}
 .details-section-header{display:flex;gap:12px;align-items:center;justify-content:space-between}
 .details-section-header h2,.details-section-header h3{margin-bottom:0}
-.details-toggle-button{appearance:none;border:1px solid #d0d7de;border-radius:6px;background:#f6f8fa;color:#24292f;cursor:pointer;font:inherit;font-size:13px;font-weight:600;padding:5px 12px;white-space:nowrap}
-.details-toggle-button:hover{background:#eef1f4}.details-toggle-button:focus-visible{outline:2px solid #0969da;outline-offset:2px}
+.details-toggle-button{appearance:none;border:1px solid var(--border);border-radius:6px;background:var(--surface-muted);color:var(--fg);cursor:pointer;font:inherit;font-size:13px;font-weight:600;padding:5px 12px;white-space:nowrap}
+.details-toggle-button:hover{background:var(--surface-hover)}.details-toggle-button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
 .feature-policy{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 12px}.feature-policy .badge{display:inline-flex;gap:5px;align-items:center}
-.scenario{border:1px solid #d0d7de;border-radius:8px;margin:12px 0;background:#fff}
+.scenario{border:1px solid var(--border);border-radius:8px;margin:12px 0;background:var(--surface)}
 .scenario summary{cursor:pointer;padding:14px 16px;font-weight:600}
 .scenario-body{padding:0 16px 16px}
 .scenario-body.compact-steps .step{margin:4px 0}.scenario-body.compact-steps .step p{margin:2px 0}
-.model-item{border:1px solid #d0d7de;border-radius:8px;margin:12px 0;background:#fff}
+.model-item{border:1px solid var(--border);border-radius:8px;margin:12px 0;background:var(--surface)}
 .model-item summary{cursor:pointer;padding:14px 16px;font-weight:600}
 .model-item-body{padding:0 16px 16px}.model-item-body p{margin:8px 0}
 .model-entry{padding:0 0 12px}.model-entry h4{font-size:14px;margin:14px 0 8px}
 .table-wrap{overflow-x:auto;margin:12px 0}table{border-collapse:collapse;width:100%;font-size:14px}
-th,td{border:1px solid #d0d7de;padding:6px 8px;text-align:left;vertical-align:top}th{background:#f6f8fa}
-h1 a{color:#0969da;text-decoration:underline;text-underline-offset:3px}h1 a:hover{text-decoration-thickness:2px}
-.step{border-left:3px solid #d0d7de;margin:12px 0;padding:2px 0 2px 12px}.step p{margin:8px 0}
+th,td{border:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top}th{background:var(--surface-muted)}
+h1 a{color:var(--link);text-decoration:underline;text-underline-offset:3px}h1 a:hover{text-decoration-thickness:2px}
+.step{border-left:3px solid var(--border);margin:12px 0;padding:2px 0 2px 12px}.step p{margin:8px 0}
 .screenshots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:10px 0 14px}
-.screenshot{border:1px solid #d0d7de;border-radius:8px;overflow:hidden;background:#f6f8fa}
-.screenshot img{display:block;width:100%;height:auto}.screenshot figcaption{font-size:12px;padding:8px;color:#57606a}
+.screenshot{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-muted)}
+.screenshot img{display:block;width:100%;height:auto}.screenshot figcaption{font-size:12px;padding:8px;color:var(--muted)}
 .coverage-refs{display:inline-flex;gap:2px;margin-left:4px}.coverage-ref{color:inherit;text-decoration:underline;text-underline-offset:2px}
 .line-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
 .flag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
-.flag-card{border:1px solid #d0d7de;border-left:4px solid #d0d7de;border-radius:8px;padding:14px;background:#fff}
+.flag-card{border:1px solid var(--border);border-left:4px solid var(--border);border-radius:8px;padding:14px;background:var(--surface)}
 .flag-card h3{font-size:16px;margin:0 0 8px}.flag-card p{margin:8px 0}
-.flag-item-link{color:inherit;text-decoration:underline;text-decoration-color:#8c959f;text-underline-offset:2px}
-.flag-card.openQuestions{border-left-color:#9a6700}.flag-card.assumptions{border-left-color:#57606a}
-.extension-section{border:1px solid #d0d7de;border-radius:8px;padding:14px;margin:12px 0;background:#fff}
+.flag-item-link{color:inherit;text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:2px}
+.flag-card.openQuestions{border-left-color:var(--warning)}.flag-card.assumptions{border-left-color:var(--muted)}
+.extension-section{border:1px solid var(--border);border-radius:8px;padding:14px;margin:12px 0;background:var(--surface)}
 .extension-section h4{margin:0 0 8px}.extension-section p{margin:8px 0}
-.mermaid-wrap{overflow-x:auto;margin:12px 0;padding:12px;border:1px solid #d0d7de;border-radius:8px;background:#fff}
+.mermaid-wrap{overflow-x:auto;margin:12px 0;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
 .mermaid{min-width:max-content;text-align:center}.mermaid svg{display:block;max-width:none;height:auto;margin:0 auto}
-.mermaid-error{color:#cf222e;text-align:left;white-space:pre-wrap}
-@media(max-width:720px){.flag-grid{grid-template-columns:1fr}}`;
+.mermaid-error{color:var(--danger);text-align:left;white-space:pre-wrap}
+@media(max-width:720px){.flag-grid{grid-template-columns:1fr}.layer-summary{align-items:flex-start;flex-wrap:wrap}.layer-badges{justify-content:flex-start;width:100%}}`;
 }
 function featureReportScripts() {
     const openTag = "<" + "script>";
     const closeTag = "<" + "/script>";
-    const mermaidOpenTag = "<" + "script src=\"https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js\" crossorigin=\"anonymous\">";
+    const mermaidOpenTag = "<" +
+        'script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js" crossorigin="anonymous">';
     return `${openTag}
 const bulkToggledDetails = new WeakSet();
 
@@ -133,10 +166,24 @@ document.addEventListener("toggle", (event) => {
     window.scrollBy(0, topAfter - topBefore);
   });
 }, true);
+
+function revealHashTarget() {
+  const id = decodeURIComponent(window.location.hash.slice(1));
+  if (!id) return;
+  const target = document.getElementById(id);
+  if (!target) return;
+  let ancestor = target instanceof HTMLDetailsElement ? target : target.closest("details");
+  while (ancestor) {
+    ancestor.open = true;
+    ancestor = ancestor.parentElement?.closest("details");
+  }
+}
+window.addEventListener("hashchange", revealHashTarget);
+document.addEventListener("DOMContentLoaded", revealHashTarget);
 ${closeTag}
 ${mermaidOpenTag}${closeTag}
 ${openTag}
-document.addEventListener("DOMContentLoaded", async () => {
+async function renderMermaidDiagrams() {
   const diagrams = document.querySelectorAll(".mermaid");
   if (!diagrams.length) return;
   if (!window.mermaid) {
@@ -144,13 +191,20 @@ document.addEventListener("DOMContentLoaded", async () => {
     return;
   }
   try {
-    window.mermaid.initialize({ startOnLoad: false, securityLevel: "strict", theme: "default" });
+    diagrams.forEach((diagram) => {
+      diagram.dataset.mermaidSource ||= diagram.textContent || "";
+      diagram.textContent = diagram.dataset.mermaidSource;
+      diagram.removeAttribute("data-processed");
+    });
+    window.mermaid.initialize({ startOnLoad: false, securityLevel: "strict", theme: document.documentElement.dataset.theme === "dark" ? "dark" : "default" });
     await window.mermaid.run({ nodes: diagrams });
   } catch (error) {
     diagrams.forEach((diagram) => diagram.classList.add("mermaid-error"));
     console.error("Unable to render Mermaid diagram", error);
   }
-});
+}
+document.addEventListener("DOMContentLoaded", renderMermaidDiagrams);
+document.addEventListener("feature-spec-theme-change", renderMermaidDiagrams);
 ${closeTag}`;
 }
 function renderReportTitle(title, repositoryUrl) {
@@ -168,7 +222,20 @@ function formatGeneratedAt(value) {
     if (Number.isNaN(date.getTime()))
         return value ?? "";
     const day = date.getDate();
-    const month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][date.getMonth()];
+    const month = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+    ][date.getMonth()];
     const hours = String(date.getHours()).padStart(2, "0");
     const minutes = String(date.getMinutes()).padStart(2, "0");
     return `${day}${ordinalSuffix(day)} ${month} ${date.getFullYear()} at ${hours}:${minutes}`;
@@ -184,8 +251,117 @@ function ordinalSuffix(day) {
         return "rd";
     return "th";
 }
+function renderLayeredDocuments(documents, options, evidence, sourceLinks) {
+    const configured = options.layers ?? [];
+    const configuredIds = new Set(configured.map((layer) => layer.id));
+    const layers = configured.map((layer) => ({
+        ...layer,
+        documents: documents.filter((document) => document.frontmatter.layer === layer.id),
+    }));
+    const otherDocuments = documents.filter((document) => !document.frontmatter.layer ||
+        !configuredIds.has(document.frontmatter.layer));
+    if (otherDocuments.length) {
+        layers.push({
+            id: "other",
+            title: "Other",
+            description: "Documents without a configured report layer",
+            documents: otherDocuments,
+        });
+    }
+    return `<section class="report-layers" data-details-section>
+  <div class="details-section-header"><h2>Specification layers</h2>${renderDetailsToggleButton("details.layer-section", "layers")}</div>
+  ${layers
+        .map((layer) => renderLayer(layer, options, evidence, sourceLinks, options.layersDefaultOpen ?? false, options.documentsDefaultOpen ?? false))
+        .join("\n")}
+</section>`;
+}
+function renderLayer(layer, options, evidence, sourceLinks, open, documentsOpen) {
+    const metrics = layerMetrics(layer.documents, options);
+    const description = layer.description
+        ? `<p>${html(layer.description)}</p>`
+        : "";
+    return `<details id="layer-${html(layer.id)}" class="layer-section" data-details-section${openAttribute(open)}>
+  <summary class="layer-summary">
+    <div class="layer-summary-copy"><h2>${html(layer.title)}</h2>${description}</div>
+    <span class="layer-badges"><span class="badge">${layer.documents.length} document${layer.documents.length === 1 ? "" : "s"}</span>${metrics.coverageTotal ? `<span class="badge ${metrics.coverageMissing ? "warning" : "ok"}">${metrics.coverageTotal - metrics.coverageMissing}/${metrics.coverageTotal} covered</span>` : ""}${metrics.issues ? `<span class="badge ${metrics.errors ? "error" : "warning"}">${metrics.issues} issue${metrics.issues === 1 ? "" : "s"}</span>` : ""}${metrics.flags ? `<span class="badge muted">${metrics.flags} open item${metrics.flags === 1 ? "" : "s"}</span>` : ""}</span>
+  </summary>
+  <div class="layer-body">
+    <div class="details-section-header">${renderDetailsToggleButton(".layer-body > details.document-section", "documents")}</div>
+    ${layer.documents.map((document) => renderLayerDocument(document, options, evidence, sourceLinks, documentsOpen)).join("\n")}
+  </div>
+</details>`;
+}
+function renderLayerDocument(document, options, evidence, sourceLinks, open) {
+    if (document.kind === "model")
+        return renderModelDocument(document, options.coverage, sourceLinks, open);
+    if (document.kind === "stack")
+        return renderContextDocument(document, "Stack", [
+            ["Stack", document.stack],
+            ["Context", document.context],
+            ["Rationale", document.rationale],
+            ["Consequences", document.consequences],
+        ], options.coverage, sourceLinks, open, true);
+    if (document.kind === "design")
+        return renderContextDocument(document, "Design", [
+            ["Design", document.design],
+            ["Principles", document.principles],
+            ["Layout", document.layout],
+            ["Interaction", document.interaction],
+            ["Visual style", document.visualStyle],
+        ], options.coverage, sourceLinks, open, true);
+    return renderSpec(document, options.coverage, evidence, sourceLinks, open, true);
+}
+function renderModelDocument(model, coverage, sourceLinks, open) {
+    const ruleCoverage = coverage?.ruleCoverage ?? [];
+    const scenarioCoverage = coverage?.scenarioCoverage ?? [];
+    return `<details id="${html(model.frontmatter.id.toLowerCase())}" class="panel report-section document-section" data-details-section${openAttribute(open)}>
+  <summary class="report-section-summary"><h2>${html(model.title)}</h2><span class="badge document-kind">Model</span><span class="badge">${html(model.frontmatter.status ?? "draft")}</span></summary>
+  <div class="report-section-body">
+    <div class="details-section-header">${renderDetailsToggleButton("details.model-item", "model items")}</div>
+    ${renderModel(model, coverage?.modelCoverage ?? [], ruleCoverage, buildRuleScenarioLinks(ruleCoverage, scenarioCoverage), sourceLinks)}
+  </div>
+</details>`;
+}
+function layerMetrics(documents, options) {
+    const filePaths = new Set(documents.map((document) => document.filePath));
+    const ids = new Set(documents.flatMap((document) => [
+        ...(document.kind === "model"
+            ? document.modelItems.map((item) => item.id)
+            : []),
+        ...document.rules.map((rule) => rule.id),
+        ...(document.kind === "feature" || document.kind === undefined
+            ? document.scenarios.map((scenario) => scenario.id)
+            : []),
+    ]));
+    const coverageItems = [
+        ...(options.coverage?.modelCoverage ?? []),
+        ...(options.coverage?.ruleCoverage ?? []),
+        ...(options.coverage?.scenarioCoverage ?? []),
+    ].filter((item) => ids.has(item.id));
+    const issues = (options.validationIssues ?? []).filter((issue) => !issue.filePath || filePaths.has(issue.filePath));
+    const flags = documents.reduce((sum, document) => sum +
+        (document.source.match(/^## (?:Open Questions|Assumptions)$/gim)
+            ?.length ?? 0), 0);
+    return {
+        coverageTotal: coverageItems.length,
+        coverageMissing: coverageItems.filter((item) => !item.covered).length,
+        issues: issues.length,
+        errors: issues.filter((issue) => issue.severity === "error").length,
+        flags,
+    };
+}
+function openAttribute(open) {
+    return open ? " open" : "";
+}
+function documentDetailsAttributes(id, open, nested) {
+    return nested
+        ? ` id="${html(id.toLowerCase())}" class="panel report-section document-section"${openAttribute(open)}`
+        : ` class="panel report-section"${openAttribute(open)}`;
+}
 function renderOpenQuestionsAndAssumptions(documents, sourceLinks) {
-    const sections = documents.flatMap((document) => extensionSections(document)).filter((section) => section.kind === "openQuestions" || section.kind === "assumptions");
+    const sections = documents
+        .flatMap((document) => extensionSections(document))
+        .filter((section) => section.kind === "openQuestions" || section.kind === "assumptions");
     if (!sections.length)
         return "";
     const openQuestionCount = sections.filter((section) => section.kind === "openQuestions").length;
@@ -232,7 +408,8 @@ function flaggedSectionItems(section) {
 }
 function flaggedItemAnchor(section, item) {
     const stableId = item.text.match(/^([A-Z][A-Z0-9-]*-(?:Q|A)\d{3}):/)?.[1];
-    return (stableId ?? `${section.document.frontmatter.id}-${section.kind}-${item.line}`).toLowerCase();
+    return (stableId ??
+        `${section.document.frontmatter.id}-${section.kind}-${item.line}`).toLowerCase();
 }
 function renderIssues(issues) {
     if (!issues.length)
@@ -290,26 +467,30 @@ function renderModelRules(model, ruleCoverage, ruleScenarioLinks, sourceLinks) {
         .join("")}</ul>`;
 }
 function renderStacks(stacks, coverage, sourceLinks = {}) {
-    return stacks.map((stack) => renderContextDocument(stack, "Stack", [
+    return stacks
+        .map((stack) => renderContextDocument(stack, "Stack", [
         ["Stack", stack.stack],
         ["Context", stack.context],
         ["Rationale", stack.rationale],
         ["Consequences", stack.consequences],
-    ], coverage, sourceLinks)).join("\n");
+    ], coverage, sourceLinks))
+        .join("\n");
 }
 function renderDesigns(designs, coverage, sourceLinks = {}) {
-    return designs.map((design) => renderContextDocument(design, "Design", [
+    return designs
+        .map((design) => renderContextDocument(design, "Design", [
         ["Design", design.design],
         ["Principles", design.principles],
         ["Layout", design.layout],
         ["Interaction", design.interaction],
         ["Visual style", design.visualStyle],
-    ], coverage, sourceLinks)).join("\n");
+    ], coverage, sourceLinks))
+        .join("\n");
 }
-function renderContextDocument(document, kindLabel, sections, coverage, sourceLinks) {
+function renderContextDocument(document, kindLabel, sections, coverage, sourceLinks, open = true, nested = false) {
     const ruleCoverage = coverage?.ruleCoverage ?? [];
     const ruleScenarioLinks = buildRuleScenarioLinks(ruleCoverage, coverage?.scenarioCoverage ?? []);
-    return `<details class="panel report-section" open>
+    return `<details${documentDetailsAttributes(document.frontmatter.id, open, nested)}>
   <summary class="report-section-summary">
     <h2>${html(document.title)}</h2>
     <span class="badge">${html(kindLabel)}</span>
@@ -317,7 +498,10 @@ function renderContextDocument(document, kindLabel, sections, coverage, sourceLi
   </summary>
   <div class="report-section-body">
     <p>${html(document.purpose)}</p>
-    ${sections.filter(([, body]) => body).map(([title, body]) => `<section><h3>${html(title)}</h3>${renderMarkdownBlock(body, 1)}</section>`).join("")}
+    ${sections
+        .filter(([, body]) => body)
+        .map(([title, body]) => `<section><h3>${html(title)}</h3>${renderMarkdownBlock(body, 1)}</section>`)
+        .join("")}
     ${renderContextRules(document.rules, ruleCoverage, ruleScenarioLinks, sourceLinks)}
     ${renderDocumentExtensionSections(document, sourceLinks)}
   </div>
@@ -326,17 +510,19 @@ function renderContextDocument(document, kindLabel, sections, coverage, sourceLi
 function renderContextRules(rules, ruleCoverage, ruleScenarioLinks, sourceLinks) {
     if (!rules.length)
         return "";
-    return `<h3>Rules</h3><ul>${rules.map((rule) => {
+    return `<h3>Rules</h3><ul>${rules
+        .map((rule) => {
         const item = ruleCoverage.find((coverageItem) => coverageItem.id === rule.id);
         return `<li><code>${html(rule.id)}</code>: ${html(rule.text)} ${ruleCoverageBadge(item, ruleScenarioIds(rule.id, ruleScenarioLinks), sourceLinks)}</li>`;
-    }).join("")}</ul>`;
+    })
+        .join("")}</ul>`;
 }
-function renderSpec(spec, coverage, evidence = [], sourceLinks = {}) {
+function renderSpec(spec, coverage, evidence = [], sourceLinks = {}, open = true, nested = false) {
     const evidenceByLine = groupEvidenceByLine(evidence);
     const ruleCoverage = coverage?.ruleCoverage ?? [];
     const scenarioCoverage = coverage?.scenarioCoverage ?? [];
     const ruleScenarioLinks = buildRuleScenarioLinks(ruleCoverage, scenarioCoverage);
-    return `<details class="panel report-section" open>
+    return `<details${documentDetailsAttributes(spec.frontmatter.id, open, nested)}>
   <summary class="report-section-summary">
     <h2>${html(spec.title)}</h2>
     <span class="badge">${html(spec.frontmatter.status ?? "draft")}</span>
@@ -360,7 +546,16 @@ function renderSpec(spec, coverage, evidence = [], sourceLinks = {}) {
 function renderFeaturePolicy(spec) {
     const items = [
         spec.frontmatter.test ? ["test", spec.frontmatter.test] : undefined,
-        spec.frontmatter.screenshots ? ["screenshots", spec.frontmatter.screenshots] : undefined,
+        spec.frontmatter.screenshots
+            ? ["screenshots", spec.frontmatter.screenshots]
+            : undefined,
+        spec.frontmatter.journey
+            ? ["journey", spec.frontmatter.journey]
+            : undefined,
+        spec.frontmatter.path ? ["path", spec.frontmatter.path] : undefined,
+        spec.frontmatter.critical !== undefined
+            ? ["critical", String(spec.frontmatter.critical)]
+            : undefined,
     ].filter((item) => Boolean(item));
     if (!items.length)
         return "";
@@ -377,11 +572,24 @@ function renderScenario(spec, scenario, scenarioCoverage, ruleScenarioLinks, evi
     const changedCount = scenarioEvidence.filter((entry) => entry.changed && entry.path).length;
     const scenarioRuleIds = ruleIdsForScenario(scenario.id, spec.rules.map((rule) => rule.id), ruleScenarioLinks);
     const scenarioCoverageItem = scenarioCoverage.find((item) => item.id === scenario.id);
-    return `<details class="scenario" data-has-images="${changedCount > 0 ? "true" : "false"}">
+    return `<details id="${html(scenario.id.toLowerCase())}" class="scenario" data-has-images="${changedCount > 0 ? "true" : "false"}">
   <summary><code>${html(scenario.id)}</code>: ${html(scenario.title)} ${coverageBadge(scenarioCoverageItem?.covered, [], scenarioCoverageItem, sourceLinks)}</summary>
-  <div class="scenario-body${changedCount === 0 ? " compact-steps" : ""}">${renderScenarioRuleCoverage(scenarioRuleIds)}${scenario.steps.map((step) => renderStep(spec, step, evidenceByLine, sourceLinks, scenario.evidence.screenshots)).join("")}</div>
+  <div class="scenario-body${changedCount === 0 ? " compact-steps" : ""}">${renderJourneyMetadata(scenario)}${renderScenarioRuleCoverage(scenarioRuleIds)}${scenario.steps.map((step) => renderStep(spec, step, evidenceByLine, sourceLinks, scenario.evidence.screenshots)).join("")}</div>
 </details>`;
 }
+function renderJourneyMetadata(scenario) {
+    if (!scenario.journey)
+        return "";
+    const items = [
+        ["journey", scenario.journey.scope],
+        ["path", scenario.journey.path],
+        scenario.journey.critical ? ["critical", "true"] : undefined,
+        scenario.journey.systems.length
+            ? ["systems", scenario.journey.systems.join(", ")]
+            : undefined,
+    ].filter((item) => Boolean(item));
+    return `<div class="feature-policy">${items.map(([label, value]) => `<span class="badge"><span class="muted">${html(label)}</span> <code>${html(value)}</code></span>`).join("")}</div>`;
+}
 function renderScenarioRuleCoverage(ruleIds) {
     if (!ruleIds.length)
         return `<p><strong>Rules covered by this scenario:</strong> <span class="muted">none referenced</span></p>`;
@@ -496,20 +704,30 @@ function renderCodeBlock(language, source) {
 function renderInlineMarkdown(source) {
     return source
         .split(/(`[^`]+`)/g)
-        .map((part) => part.startsWith("`") && part.endsWith("`") ? `<code>${html(part.slice(1, -1))}</code>` : html(part))
+        .map((part) => part.startsWith("`") && part.endsWith("`")
+        ? `<code>${html(part.slice(1, -1))}</code>`
+        : html(part))
         .join("");
 }
 function isTableStart(lines, index) {
-    return isPipeTableRow(lines[index]) && index + 1 < lines.length && isTableSeparator(lines[index + 1]);
+    return (isPipeTableRow(lines[index]) &&
+        index + 1 < lines.length &&
+        isTableSeparator(lines[index + 1]));
 }
 function isPipeTableRow(line) {
     return line.trim().startsWith("|") && line.trim().endsWith("|");
 }
 function isTableSeparator(line) {
-    return isPipeTableRow(line) && splitTableRow(line).every((cell) => /^:?-{3,}:?$/.test(cell));
+    return (isPipeTableRow(line) &&
+        splitTableRow(line).every((cell) => /^:?-{3,}:?$/.test(cell)));
 }
 function splitTableRow(line) {
-    return line.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((cell) => cell.trim());
+    return line
+        .trim()
+        .replace(/^\|/, "")
+        .replace(/\|$/, "")
+        .split("|")
+        .map((cell) => cell.trim());
 }
 function renderTable(lines) {
     const headers = splitTableRow(lines[0]);
@@ -530,7 +748,9 @@ function renderStep(spec, step, evidenceByLine, sourceLinks, screenshotPolicy) {
     return `<div class="step"><p><strong>${html(step.keyword)}</strong> ${html(step.text)} ${renderLineBadge(spec.filePath, step.line, sourceLinks)} ${evidenceBadge}</p>${renderScreenshots(screenshots)}</div>`;
 }
 function renderComparedWith(entry) {
-    return entry.comparedWithLine ? ` as line ${html(String(entry.comparedWithLine))}` : " as previous screen";
+    return entry.comparedWithLine
+        ? ` as line ${html(String(entry.comparedWithLine))}`
+        : " as previous screen";
 }
 function renderLineBadge(filePath, line, sourceLinks) {
     const label = `line ${line}`;
@@ -542,10 +762,14 @@ function renderLineBadge(filePath, line, sourceLinks) {
 function renderScreenshots(screenshots) {
     if (!screenshots.length)
         return "";
-    return `<div class="screenshots">${screenshots.map((screenshot) => `<figure class="screenshot"><img src="${html(screenshot.path ?? "")}" alt="${html(screenshot.title ?? `Screenshot for ${screenshot.specPath}:${screenshot.line}`)}"><figcaption>${html(screenshot.title ?? `${screenshot.specPath}:${screenshot.line}`)}</figcaption></figure>`).join("")}</div>`;
+    return `<div class="screenshots">${screenshots.map((screenshot) => `<figure class="screenshot"><img src="${html(screenshot.path ?? "")}" alt="${html(screenshot.title ?? `Screenshot for ${screenshot.specPath}:${screenshot.line}`)}" data-lightbox tabindex="0"><figcaption>${html(screenshot.title ?? `${screenshot.specPath}:${screenshot.line}`)}</figcaption></figure>`).join("")}</div>`;
 }
 function coverageBadge(covered, suffixes = [], item, sourceLinks = {}) {
-    return covered === undefined ? "" : covered ? `<span class="badge ok">covered${suffixes.length ? ` by ${suffixes.map(html).join(" ")}` : ""}${renderCoverageReferenceMarkers(item, sourceLinks)}</span>` : `<span class="badge missing">missing coverage</span>`;
+    return covered === undefined
+        ? ""
+        : covered
+            ? `<span class="badge ok">covered${suffixes.length ? ` by ${suffixes.map(html).join(" ")}` : ""}${renderCoverageReferenceMarkers(item, sourceLinks)}</span>`
+            : `<span class="badge missing">missing coverage</span>`;
 }
 function ruleCoverageBadge(ruleCoverage, scenarioIds, sourceLinks) {
     if (ruleCoverage?.covered && !scenarioIds.length)
@@ -591,7 +815,10 @@ function sourceLineUrl(filePath, line, sourceLinks) {
         return undefined;
     const baseUrl = sourceLinks.githubBaseUrl.replace(/\/$/, "");
     const ref = encodeURIComponent(sourceLinks.githubRef);
-    const encodedFilePath = filePath.split("/").map((segment) => encodeURIComponent(segment)).join("/");
+    const encodedFilePath = filePath
+        .split("/")
+        .map((segment) => encodeURIComponent(segment))
+        .join("/");
     return `${baseUrl}/blob/${ref}/${encodedFilePath}#L${line}`;
 }
 function allReportDocuments(specs, options) {
@@ -639,14 +866,22 @@ function trimSectionLines(lines) {
     return lines.slice(start, end);
 }
 function ruleScenarioIds(ruleId, ruleScenarioLinks) {
-    return Array.from(new Set(ruleScenarioLinks.filter((link) => link.ruleId === ruleId).map((link) => link.scenarioId))).sort();
+    return Array.from(new Set(ruleScenarioLinks
+        .filter((link) => link.ruleId === ruleId)
+        .map((link) => link.scenarioId))).sort();
 }
 function ruleIdsForScenario(scenarioId, specRuleIds, ruleScenarioLinks) {
-    const ruleIds = new Set(ruleScenarioLinks.filter((link) => link.scenarioId === scenarioId).map((link) => link.ruleId));
+    const ruleIds = new Set(ruleScenarioLinks
+        .filter((link) => link.scenarioId === scenarioId)
+        .map((link) => link.ruleId));
     return specRuleIds.filter((ruleId) => ruleIds.has(ruleId));
 }
 function buildRuleScenarioLinks(ruleCoverage, scenarioCoverage) {
-    const scenarioReferences = scenarioCoverage.flatMap((scenario) => scenario.references.map((reference) => ({ scenarioId: scenario.id, filePath: reference.filePath, line: reference.line })));
+    const scenarioReferences = scenarioCoverage.flatMap((scenario) => scenario.references.map((reference) => ({
+        scenarioId: scenario.id,
+        filePath: reference.filePath,
+        line: reference.line,
+    })));
     const links = [];
     const seen = new Set();
     for (const rule of ruleCoverage) {
@@ -666,7 +901,9 @@ function buildRuleScenarioLinks(ruleCoverage, scenarioCoverage) {
 function nearestScenarioReference(filePath, line, scenarioReferences) {
     const maxLineDistance = 8;
     return scenarioReferences
-        .filter((reference) => reference.filePath === filePath && reference.line <= line && line - reference.line <= maxLineDistance)
+        .filter((reference) => reference.filePath === filePath &&
+        reference.line <= line &&
+        line - reference.line <= maxLineDistance)
         .sort((left, right) => right.line - left.line)[0];
 }
 function groupEvidenceByLine(evidence) {