@webpieces/nx-webpieces-rules 0.4.871 → 0.4.872

package/src/lib/graph-page-shell.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The architecture page's shell (#1155): a collapsible dark drawer on the left holding every control,
+ * and the graph filling the rest of the viewport.
+ *
+ * Before this, two hint paragraphs, a ~650px three-column legend, a lock dropdown and a zoom bar all
+ * sat ABOVE the graph, so a laptop's first screen showed no graph at all. Now the hints are a "?"
+ * popover, the legend lives in the drawer (and can pop out over the graph), zoom floats bottom-right
+ * (graph-navigation.ts) and the responsibilities open in a right-hand panel.
+ *
+ * Markup only. Behaviour is graph-visualizer.client.ts; styling is graph-page-styles.ts. No element
+ * carries a `style=` attribute — every look is a class.
+ */
+/** Everything the shell frames, already rendered by its owner. */
+export declare class ShellParts {
+    readonly title: string;
+    readonly lockControl: string;
+    readonly legend: string;
+    readonly edgeKey: string;
+    readonly filterStatus: string;
+    readonly snapshot: string;
+    readonly responsibilities: string;
+    constructor(title: string, lockControl: string, legend: string, edgeKey: string, filterStatus: string, snapshot: string, responsibilities: string);
+}
+export declare class GraphPageShell {
+    body(parts: ShellParts): string;
+    private drawer;
+    /** A stacked two-line item: the mode's name, then its grey subtitle. Keys 1/2/3 select them. */
+    private modeItem;
+    private topbar;
+    private overlays;
+    /** The two hint paragraphs that used to sit above the graph, plus the keyboard shortcuts. */
+    private help;
+    private brandIcon;
+}

package/src/lib/graph-page-shell.js

@@ -0,0 +1,121 @@
+"use strict";
+/**
+ * The architecture page's shell (#1155): a collapsible dark drawer on the left holding every control,
+ * and the graph filling the rest of the viewport.
+ *
+ * Before this, two hint paragraphs, a ~650px three-column legend, a lock dropdown and a zoom bar all
+ * sat ABOVE the graph, so a laptop's first screen showed no graph at all. Now the hints are a "?"
+ * popover, the legend lives in the drawer (and can pop out over the graph), zoom floats bottom-right
+ * (graph-navigation.ts) and the responsibilities open in a right-hand panel.
+ *
+ * Markup only. Behaviour is graph-visualizer.client.ts; styling is graph-page-styles.ts. No element
+ * carries a `style=` attribute — every look is a class.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphPageShell = exports.ShellParts = void 0;
+const graph_color_modes_1 = require("./graph-color-modes");
+/** Everything the shell frames, already rendered by its owner. */
+class ShellParts {
+    title;
+    lockControl;
+    legend;
+    edgeKey;
+    filterStatus;
+    snapshot;
+    responsibilities;
+    constructor(title, lockControl, legend, edgeKey, filterStatus, snapshot, responsibilities) {
+        this.title = title;
+        this.lockControl = lockControl;
+        this.legend = legend;
+        this.edgeKey = edgeKey;
+        this.filterStatus = filterStatus;
+        this.snapshot = snapshot;
+        this.responsibilities = responsibilities;
+    }
+}
+exports.ShellParts = ShellParts;
+class GraphPageShell {
+    body(parts) {
+        return `<div class="wp-shell" id="wp-shell">
+    ${this.drawer(parts)}
+    <main class="wp-main">
+        ${this.topbar(parts)}
+        <div id="graph"></div>
+        ${this.overlays(parts)}
+    </main>
+</div>`;
+    }
+    drawer(parts) {
+        return `<aside class="wp-side" id="wp-side" aria-label="Graph controls">
+        <div class="wp-brand">${this.brandIcon()}<span>${parts.title}</span></div>
+        <div class="wp-group" role="group" aria-label="Color mode">
+            <div class="wp-label">Color by</div>
+            <div class="wp-modes">${graph_color_modes_1.GRAPH_MODES.map((info, index) => this.modeItem(info, index)).join('')}</div>
+            <p class="wp-mode-reason" id="wp-impact-reason" hidden></p>
+        </div>
+        <div class="wp-group">
+            <label class="wp-label" for="wp-lock">Focus</label>
+            ${parts.lockControl}
+            <button type="button" class="wp-toggle" id="wp-filter-toggle" aria-pressed="false">Hide unconnected <span class="wp-sw" aria-hidden="true"></span></button>
+        </div>
+        <div class="wp-group">
+            <div class="wp-label wp-label-row">Legend <button type="button" class="wp-icon wp-icon-mini wp-icon-dark" id="wp-legend-pop" title="Pop the legend out over the graph" aria-label="Pop the legend out over the graph">⇱</button></div>
+            ${parts.legend}
+        </div>
+        <div class="wp-group">
+            <div class="wp-label">Edges</div>
+            ${parts.edgeKey}
+        </div>
+        <div class="wp-foot">
+            <button type="button" class="wp-link" id="wp-resp-open" aria-expanded="false">Responsibilities</button>
+            <button type="button" class="wp-link" id="wp-snapshot-open" aria-expanded="false">Saved snapshot</button>
+        </div>
+    </aside>`;
+    }
+    /** A stacked two-line item: the mode's name, then its grey subtitle. Keys 1/2/3 select them. */
+    modeItem(info, index) {
+        const pressed = info.mode === graph_color_modes_1.GraphMode.RUNTIME ? 'true' : 'false';
+        return (`<button type="button" class="wp-mode" data-wp-mode="${info.mode}" aria-pressed="${pressed}" title="Key ${index + 1}">` +
+            `<span class="wp-mode-name">${info.name}</span><span class="wp-mode-sub">${info.subtitle}</span></button>`);
+    }
+    topbar(parts) {
+        return `<div class="wp-topbar">
+            <button type="button" class="wp-icon" id="wp-collapse" aria-label="Toggle the controls drawer" aria-controls="wp-side" aria-expanded="true">☰</button>
+            <div class="wp-crumb" id="wp-crumb">Mode: <b>Runtime</b></div>
+            ${parts.filterStatus}
+            <button type="button" class="wp-icon" id="wp-help-btn" aria-label="How to read this graph" aria-controls="wp-help" aria-expanded="false">?</button>
+        </div>`;
+    }
+    overlays(parts) {
+        return `<div class="wp-pop wp-legend-popout" id="wp-legend-popout" hidden>
+            <header><span id="wp-legend-pop-title">Legend · Runtime</span><button type="button" class="wp-icon wp-icon-mini" id="wp-legend-close" aria-label="Close the legend">✕</button></header>
+            ${parts.legend}
+        </div>
+        ${this.help()}
+        <div class="wp-pop wp-snapshot" id="wp-snapshot" hidden>${parts.snapshot}</div>
+        <aside class="wp-panel" id="wp-resp-panel" aria-label="Responsibilities" hidden>
+            <header><span>Responsibilities</span><button type="button" class="wp-icon wp-icon-mini" id="wp-resp-close" aria-label="Close responsibilities">✕</button></header>
+            ${parts.responsibilities}
+        </aside>`;
+    }
+    /** The two hint paragraphs that used to sit above the graph, plus the keyboard shortcuts. */
+    help() {
+        return `<div class="wp-pop wp-help" id="wp-help" role="dialog" aria-label="How to read this graph" hidden>
+            <header><span>Reading the graph</span><button type="button" class="wp-icon wp-icon-mini" id="wp-help-close" aria-label="Close help">✕</button></header>
+            <p>Every row is one dependency level: the HIGHEST level is the top row and L0, the foundation libraries, is always the bottom row. Transitive dependencies are allowed but not drawn.</p>
+            <p>💡 <strong>Click any box</strong> for its menu: <strong>View Design</strong> (only where the project has a generated <strong>design.html</strong>, i.e. what the AI sees inside it), <strong>Lock/Unlock</strong> (the same lock as the Focus field), <strong>Filter Unconnected</strong> (removes unrelated boxes, keeping each L-number row) and <strong>Mode ▸</strong>.</p>
+            <p>🔦 <strong>Hover any box</strong> to trace its <em>entire</em> dependency chain — every ancestor above it and every dependency below it, with the lines between — while the rest of the graph dims.</p>
+            <p><strong>Runtime</strong>: a box may depend on a box carrying every color it has. <strong>Architecture</strong>: what each box is in the system. <strong>Impact</strong>: what this branch changed (amber) and what depends on it (amber outline).</p>
+            <p><kbd>/</kbd> focus the lock search · <kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> switch mode · <kbd>Esc</kbd> unlock</p>
+        </div>`;
+    }
+    brandIcon() {
+        return ('<svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true">' +
+            '<rect x="1" y="1" width="8" height="6" rx="1.5" fill="none" stroke="#e9eaf0" stroke-width="1.6"/>' +
+            '<rect x="13" y="1" width="8" height="6" rx="1.5" fill="none" stroke="#e9eaf0" stroke-width="1.6"/>' +
+            '<rect x="7" y="15" width="8" height="6" rx="1.5" fill="none" stroke="#e9eaf0" stroke-width="1.6"/>' +
+            '<path d="M5 7v4h12V7M11 11v4" fill="none" stroke="#e9eaf0" stroke-width="1.6"/></svg>');
+    }
+}
+exports.GraphPageShell = GraphPageShell;
+//# sourceMappingURL=graph-page-shell.js.map

package/src/lib/graph-page-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-page-shell.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-page-shell.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;;;AAEH,2DAAuE;AAEvE,kEAAkE;AAClE,MAAa,UAAU;IAEC;IACA;IACA;IACA;IACA;IACA;IACA;IAPpB,YACoB,KAAa,EACb,WAAmB,EACnB,MAAc,EACd,OAAe,EACf,YAAoB,EACpB,QAAgB,EAChB,gBAAwB;QANxB,UAAK,GAAL,KAAK,CAAQ;QACb,gBAAW,GAAX,WAAW,CAAQ;QACnB,WAAM,GAAN,MAAM,CAAQ;QACd,YAAO,GAAP,OAAO,CAAQ;QACf,iBAAY,GAAZ,YAAY,CAAQ;QACpB,aAAQ,GAAR,QAAQ,CAAQ;QAChB,qBAAgB,GAAhB,gBAAgB,CAAQ;IACzC,CAAC;CACP;AAVD,gCAUC;AAED,MAAa,cAAc;IACvB,IAAI,CAAC,KAAiB;QAClB,OAAO;MACT,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;;UAEd,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;;UAElB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;OAEvB,CAAC;IACJ,CAAC;IAEO,MAAM,CAAC,KAAiB;QAC5B,OAAO;gCACiB,IAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,KAAK;;;oCAGhC,+BAAW,CAAC,GAAG,CAAC,CAAC,IAAc,EAAE,KAAa,EAAU,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;cAKrH,KAAK,CAAC,WAAW;;;;;cAKjB,KAAK,CAAC,MAAM;;;;cAIZ,KAAK,CAAC,OAAO;;;;;;aAMd,CAAC;IACV,CAAC;IAED,gGAAgG;IACxF,QAAQ,CAAC,IAAc,EAAE,KAAa;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,6BAAS,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnE,OAAO,CACH,uDAAuD,IAAI,CAAC,IAAI,mBAAmB,OAAO,gBAAgB,KAAK,GAAG,CAAC,IAAI;YACvH,8BAA8B,IAAI,CAAC,IAAI,oCAAoC,IAAI,CAAC,QAAQ,kBAAkB,CAC7G,CAAC;IACN,CAAC;IAEO,MAAM,CAAC,KAAiB;QAC5B,OAAO;;;cAGD,KAAK,CAAC,YAAY;;eAEjB,CAAC;IACZ,CAAC;IAEO,QAAQ,CAAC,KAAiB;QAC9B,OAAO;;cAED,KAAK,CAAC,MAAM;;UAEhB,IAAI,CAAC,IAAI,EAAE;kEAC6C,KAAK,CAAC,QAAQ;;;cAGlE,KAAK,CAAC,gBAAgB;iBACnB,CAAC;IACd,CAAC;IAED,6FAA6F;IACrF,IAAI;QACR,OAAO;;;;;;;eAOA,CAAC;IACZ,CAAC;IAEO,SAAS;QACb,OAAO,CACH,qEAAqE;YACrE,mGAAmG;YACnG,oGAAoG;YACpG,oGAAoG;YACpG,uFAAuF,CAC1F,CAAC;IACN,CAAC;CACJ;AA5FD,wCA4FC","sourcesContent":["/**\n * The architecture page's shell (#1155): a collapsible dark drawer on the left holding every control,\n * and the graph filling the rest of the viewport.\n *\n * Before this, two hint paragraphs, a ~650px three-column legend, a lock dropdown and a zoom bar all\n * sat ABOVE the graph, so a laptop's first screen showed no graph at all. Now the hints are a \"?\"\n * popover, the legend lives in the drawer (and can pop out over the graph), zoom floats bottom-right\n * (graph-navigation.ts) and the responsibilities open in a right-hand panel.\n *\n * Markup only. Behaviour is graph-visualizer.client.ts; styling is graph-page-styles.ts. No element\n * carries a `style=` attribute — every look is a class.\n */\n\nimport { GRAPH_MODES, GraphMode, ModeInfo } from './graph-color-modes';\n\n/** Everything the shell frames, already rendered by its owner. */\nexport class ShellParts {\n    constructor(\n        public readonly title: string,\n        public readonly lockControl: string,\n        public readonly legend: string,\n        public readonly edgeKey: string,\n        public readonly filterStatus: string,\n        public readonly snapshot: string,\n        public readonly responsibilities: string,\n    ) {}\n}\n\nexport class GraphPageShell {\n    body(parts: ShellParts): string {\n        return `<div class=\"wp-shell\" id=\"wp-shell\">\n    ${this.drawer(parts)}\n    <main class=\"wp-main\">\n        ${this.topbar(parts)}\n        <div id=\"graph\"></div>\n        ${this.overlays(parts)}\n    </main>\n</div>`;\n    }\n\n    private drawer(parts: ShellParts): string {\n        return `<aside class=\"wp-side\" id=\"wp-side\" aria-label=\"Graph controls\">\n        <div class=\"wp-brand\">${this.brandIcon()}<span>${parts.title}</span></div>\n        <div class=\"wp-group\" role=\"group\" aria-label=\"Color mode\">\n            <div class=\"wp-label\">Color by</div>\n            <div class=\"wp-modes\">${GRAPH_MODES.map((info: ModeInfo, index: number): string => this.modeItem(info, index)).join('')}</div>\n            <p class=\"wp-mode-reason\" id=\"wp-impact-reason\" hidden></p>\n        </div>\n        <div class=\"wp-group\">\n            <label class=\"wp-label\" for=\"wp-lock\">Focus</label>\n            ${parts.lockControl}\n            <button type=\"button\" class=\"wp-toggle\" id=\"wp-filter-toggle\" aria-pressed=\"false\">Hide unconnected <span class=\"wp-sw\" aria-hidden=\"true\"></span></button>\n        </div>\n        <div class=\"wp-group\">\n            <div class=\"wp-label wp-label-row\">Legend <button type=\"button\" class=\"wp-icon wp-icon-mini wp-icon-dark\" id=\"wp-legend-pop\" title=\"Pop the legend out over the graph\" aria-label=\"Pop the legend out over the graph\">⇱</button></div>\n            ${parts.legend}\n        </div>\n        <div class=\"wp-group\">\n            <div class=\"wp-label\">Edges</div>\n            ${parts.edgeKey}\n        </div>\n        <div class=\"wp-foot\">\n            <button type=\"button\" class=\"wp-link\" id=\"wp-resp-open\" aria-expanded=\"false\">Responsibilities</button>\n            <button type=\"button\" class=\"wp-link\" id=\"wp-snapshot-open\" aria-expanded=\"false\">Saved snapshot</button>\n        </div>\n    </aside>`;\n    }\n\n    /** A stacked two-line item: the mode's name, then its grey subtitle. Keys 1/2/3 select them. */\n    private modeItem(info: ModeInfo, index: number): string {\n        const pressed = info.mode === GraphMode.RUNTIME ? 'true' : 'false';\n        return (\n            `<button type=\"button\" class=\"wp-mode\" data-wp-mode=\"${info.mode}\" aria-pressed=\"${pressed}\" title=\"Key ${index + 1}\">` +\n            `<span class=\"wp-mode-name\">${info.name}</span><span class=\"wp-mode-sub\">${info.subtitle}</span></button>`\n        );\n    }\n\n    private topbar(parts: ShellParts): string {\n        return `<div class=\"wp-topbar\">\n            <button type=\"button\" class=\"wp-icon\" id=\"wp-collapse\" aria-label=\"Toggle the controls drawer\" aria-controls=\"wp-side\" aria-expanded=\"true\">☰</button>\n            <div class=\"wp-crumb\" id=\"wp-crumb\">Mode: <b>Runtime</b></div>\n            ${parts.filterStatus}\n            <button type=\"button\" class=\"wp-icon\" id=\"wp-help-btn\" aria-label=\"How to read this graph\" aria-controls=\"wp-help\" aria-expanded=\"false\">?</button>\n        </div>`;\n    }\n\n    private overlays(parts: ShellParts): string {\n        return `<div class=\"wp-pop wp-legend-popout\" id=\"wp-legend-popout\" hidden>\n            <header><span id=\"wp-legend-pop-title\">Legend · Runtime</span><button type=\"button\" class=\"wp-icon wp-icon-mini\" id=\"wp-legend-close\" aria-label=\"Close the legend\">✕</button></header>\n            ${parts.legend}\n        </div>\n        ${this.help()}\n        <div class=\"wp-pop wp-snapshot\" id=\"wp-snapshot\" hidden>${parts.snapshot}</div>\n        <aside class=\"wp-panel\" id=\"wp-resp-panel\" aria-label=\"Responsibilities\" hidden>\n            <header><span>Responsibilities</span><button type=\"button\" class=\"wp-icon wp-icon-mini\" id=\"wp-resp-close\" aria-label=\"Close responsibilities\">✕</button></header>\n            ${parts.responsibilities}\n        </aside>`;\n    }\n\n    /** The two hint paragraphs that used to sit above the graph, plus the keyboard shortcuts. */\n    private help(): string {\n        return `<div class=\"wp-pop wp-help\" id=\"wp-help\" role=\"dialog\" aria-label=\"How to read this graph\" hidden>\n            <header><span>Reading the graph</span><button type=\"button\" class=\"wp-icon wp-icon-mini\" id=\"wp-help-close\" aria-label=\"Close help\">✕</button></header>\n            <p>Every row is one dependency level: the HIGHEST level is the top row and L0, the foundation libraries, is always the bottom row. Transitive dependencies are allowed but not drawn.</p>\n            <p>💡 <strong>Click any box</strong> for its menu: <strong>View Design</strong> (only where the project has a generated <strong>design.html</strong>, i.e. what the AI sees inside it), <strong>Lock/Unlock</strong> (the same lock as the Focus field), <strong>Filter Unconnected</strong> (removes unrelated boxes, keeping each L-number row) and <strong>Mode ▸</strong>.</p>\n            <p>🔦 <strong>Hover any box</strong> to trace its <em>entire</em> dependency chain — every ancestor above it and every dependency below it, with the lines between — while the rest of the graph dims.</p>\n            <p><strong>Runtime</strong>: a box may depend on a box carrying every color it has. <strong>Architecture</strong>: what each box is in the system. <strong>Impact</strong>: what this branch changed (amber) and what depends on it (amber outline).</p>\n            <p><kbd>/</kbd> focus the lock search · <kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> switch mode · <kbd>Esc</kbd> unlock</p>\n        </div>`;\n    }\n\n    private brandIcon(): string {\n        return (\n            '<svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\">' +\n            '<rect x=\"1\" y=\"1\" width=\"8\" height=\"6\" rx=\"1.5\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/>' +\n            '<rect x=\"13\" y=\"1\" width=\"8\" height=\"6\" rx=\"1.5\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/>' +\n            '<rect x=\"7\" y=\"15\" width=\"8\" height=\"6\" rx=\"1.5\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/>' +\n            '<path d=\"M5 7v4h12V7M11 11v4\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/></svg>'\n        );\n    }\n}\n"]}

package/src/lib/graph-page-styles.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The architecture page's stylesheet: the dark drawer, the graph filling the viewport, the floating
+ * popovers and the responsibilities panel. Emitted AFTER the shared menu/filter/navigation styles so
+ * its `#graph` rules (fill the viewport, no 75vh cap) win.
+ */
+export declare class GraphPageStyles {
+    css(): string;
+    private base;
+    private drawer;
+    private controls;
+    private main;
+    private overlays;
+    /**
+     * The graph fills what the topbar leaves. A Runtime box with a specialization is an HTML-like
+     * table, so its cells are extra polygons inside the node: the hover glow and the lock outline are
+     * kept on the box's own outline (the FIRST polygon) instead of stroking every cell.
+     */
+    private graph;
+    private cards;
+}

package/src/lib/graph-page-styles.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphPageStyles = void 0;
+/**
+ * The architecture page's stylesheet: the dark drawer, the graph filling the viewport, the floating
+ * popovers and the responsibilities panel. Emitted AFTER the shared menu/filter/navigation styles so
+ * its `#graph` rules (fill the viewport, no 75vh cap) win.
+ */
+class GraphPageStyles {
+    css() {
+        return this.base() + this.drawer() + this.controls() + this.main() + this.overlays() + this.graph() + this.cards();
+    }
+    base() {
+        return `
+        :root {
+            --wp-side-bg: #0c0d12; --wp-side-fg: #e9eaf0; --wp-side-muted: #8b8fa0;
+            --wp-side-hover: #1f2129; --wp-side-line: #2a2c36; --wp-accent: #3559d6; --wp-accent-dark: #8aa4ff;
+            --wp-fg: #1b1e27; --wp-muted: #5d6475; --wp-line: #d9dce5; --wp-surface: #ffffff; --wp-canvas: #fbfbfd;
+        }
+        html, body { height: 100%; }
+        /* A class that sets display (the legend lists are grids) must not un-hide a [hidden] element. */
+        [hidden] { display: none !important; }
+        body { margin: 0; padding: 0; overflow: hidden; background: var(--wp-canvas); color: var(--wp-fg);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 14px; }
+        kbd { font-family: ui-monospace, Menlo, monospace; font-size: 12px; border: 1px solid var(--wp-line);
+            border-radius: 4px; padding: 0 5px; background: #f3f4f7; }
+        .wp-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100vh; }
+        .wp-shell.wp-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
+        .wp-shell.wp-collapsed .wp-side { visibility: hidden; }
+        @media (max-width: 760px) {
+            .wp-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, auto) minmax(0, 1fr); }
+            .wp-side { max-height: 42vh; }
+            .wp-shell.wp-collapsed { grid-template-columns: minmax(0, 1fr); }
+            .wp-shell.wp-collapsed .wp-side { display: none; }
+            .wp-main { height: auto; min-height: 0; }
+        }
+        @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }`;
+    }
+    drawer() {
+        return `
+        .wp-side { background: var(--wp-side-bg); color: var(--wp-side-fg); overflow-y: auto; overflow-x: hidden;
+            display: flex; flex-direction: column; padding: 12px 0 10px; min-width: 0; font-size: 13px; }
+        .wp-brand { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; font-weight: 600; font-size: 14px; }
+        .wp-brand svg { flex: none; }
+        .wp-group { padding: 8px 14px; border-top: 1px solid var(--wp-side-line); display: grid; gap: 6px; }
+        .wp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--wp-side-muted);
+            font-weight: 600; padding-left: 4px; }
+        .wp-label-row { display: flex; justify-content: space-between; align-items: center; }
+        .wp-modes { display: grid; gap: 1px; }
+        .wp-mode { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 5px 10px; border-radius: 8px; }
+        .wp-mode:hover { background: var(--wp-side-hover); }
+        .wp-mode[aria-pressed="true"] { background: #262833; box-shadow: inset 3px 0 0 var(--wp-accent-dark); }
+        .wp-mode:disabled { cursor: not-allowed; opacity: 0.45; }
+        .wp-mode-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
+        .wp-mode-sub { display: block; font-size: 12px; color: var(--wp-side-muted); line-height: 1.3; }
+        .wp-mode-reason { margin: 2px 4px 0; font-size: 11.5px; line-height: 1.35; color: var(--wp-side-muted); }
+        .wp-legend-list { display: grid; gap: 5px; padding-left: 4px; }
+        .wp-legend-row { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
+        .wp-legend-row svg { flex: none; }
+        .wp-legend-row small { display: block; color: var(--wp-side-muted); font-size: 11.5px; }
+        .wp-impact-note { margin: 2px 0 0; font-size: 11.5px; color: var(--wp-side-muted); }
+        .wp-impact-note:empty { display: none; }
+        .wp-foot { margin-top: auto; padding: 10px 18px 0; border-top: 1px solid var(--wp-side-line); display: flex; gap: 14px; flex-wrap: wrap; }`;
+    }
+    controls() {
+        return `
+        .wp-side input[type="search"] { width: 100%; box-sizing: border-box; background: #17181f; color: var(--wp-side-fg);
+            border: 1px solid var(--wp-side-line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }
+        .wp-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between;
+            align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
+        .wp-toggle:hover { background: var(--wp-side-hover); }
+        .wp-toggle:disabled { cursor: not-allowed; opacity: 0.45; }
+        .wp-sw { width: 30px; height: 18px; border-radius: 9px; background: #3a3d4a; position: relative; transition: background 0.15s; }
+        .wp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
+            background: #fff; transition: transform 0.15s; }
+        .wp-toggle[aria-pressed="true"] .wp-sw { background: var(--wp-accent); }
+        .wp-toggle[aria-pressed="true"] .wp-sw::after { transform: translateX(12px); }
+        .wp-link { all: unset; cursor: pointer; color: var(--wp-side-muted); font-size: 12px; text-decoration: underline; }
+        .wp-link:hover { color: var(--wp-side-fg); }
+        .wp-icon { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; flex: none;
+            width: 34px; height: 34px; border-radius: 8px; background: var(--wp-surface); border: 1px solid var(--wp-line);
+            color: var(--wp-fg); font-size: 15px; }
+        .wp-icon:hover { border-color: var(--wp-accent); }
+        .wp-icon-mini { width: 24px; height: 24px; font-size: 12px; }
+        .wp-icon-dark { background: transparent; border-color: var(--wp-side-line); color: var(--wp-side-fg); }
+        .wp-mode:focus-visible, .wp-toggle:focus-visible, .wp-side input:focus-visible, .wp-icon:focus-visible,
+        .wp-link:focus-visible { outline: 2px solid var(--wp-accent-dark); outline-offset: 2px; }`;
+    }
+    main() {
+        return `
+        .wp-main { position: relative; min-width: 0; height: 100vh; display: flex; flex-direction: column; }
+        .wp-topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px;
+            border-bottom: 1px solid var(--wp-line); background: var(--wp-surface); }
+        .wp-crumb { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--wp-muted); overflow: hidden;
+            text-overflow: ellipsis; white-space: nowrap; }
+        .wp-crumb b { color: var(--wp-fg); }
+        .wp-topbar #wp-filter-status, .wp-topbar #wp-graph-error { margin: 0; font-size: 13px; }`;
+    }
+    overlays() {
+        return `
+        .wp-pop { position: absolute; z-index: 30; background: var(--wp-surface); border: 1px solid var(--wp-line);
+            border-radius: 10px; box-shadow: 0 8px 24px #0002; padding: 12px 14px; font-size: 13px; box-sizing: border-box; }
+        .wp-pop header { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
+        .wp-legend-popout { left: 12px; bottom: 12px; width: 270px; max-height: 60vh; overflow: auto; }
+        .wp-legend-popout .wp-legend-row small, .wp-legend-popout .wp-impact-note { color: var(--wp-muted); }
+        .wp-help { right: 12px; top: 56px; width: min(380px, calc(100% - 24px)); line-height: 1.5; }
+        .wp-help p { margin: 0 0 8px; }
+        .wp-snapshot { left: 12px; bottom: 12px; width: min(440px, calc(100% - 24px)); }
+        .wp-snapshot .hint { margin: 0; }
+        .wp-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 40; width: min(540px, 100%); box-sizing: border-box;
+            overflow-y: auto; padding: 0 16px 16px; background: #f5f6f9; border-left: 1px solid var(--wp-line); box-shadow: -8px 0 24px #0002; }
+        .wp-panel > header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
+            padding: 12px 0; background: #f5f6f9; font-weight: 600; font-size: 15px; }`;
+    }
+    /**
+     * The graph fills what the topbar leaves. A Runtime box with a specialization is an HTML-like
+     * table, so its cells are extra polygons inside the node: the hover glow and the lock outline are
+     * kept on the box's own outline (the FIRST polygon) instead of stroking every cell.
+     */
+    graph() {
+        return `
+        #graph { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; padding: 16px 16px 64px;
+            box-sizing: border-box; background: var(--wp-canvas); }
+        #graph g.wp-node-clickable:hover polygon:not(:first-of-type) { stroke: transparent; stroke-width: 0; filter: none; }
+        #graph g.node.wp-locked > polygon:first-of-type,
+        #graph g.node.wp-locked > ellipse,
+        #graph g.node.wp-locked > path { stroke: #b26a00; stroke-width: 3; }`;
+    }
+    cards() {
+        return `
+        #wp-responsibilities { margin: 0; }
+        #wp-responsibilities > h2 { display: none; }
+        #wp-responsibilities > .hint { color: var(--wp-muted); margin: 0 0 8px; }
+        .wp-resp-card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 0; padding: 10px 15px; }
+        .wp-resp-card > summary { cursor: pointer; color: #333; }
+        .wp-resp-level { display: inline-block; min-width: 26px; padding: 1px 6px; margin-right: 6px; border-radius: 4px;
+            background: #eef; font-size: 12px; font-weight: bold; text-align: center; }
+        .wp-resp-body { margin-top: 8px; color: #444; }
+        .wp-resp-body code { background: #f2f2f2; padding: 1px 4px; border-radius: 3px; font-family: monospace; }
+        .wp-hidden { display: none; }`;
+    }
+}
+exports.GraphPageStyles = GraphPageStyles;
+//# sourceMappingURL=graph-page-styles.js.map

package/src/lib/graph-page-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-page-styles.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-page-styles.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACH,MAAa,eAAe;IACxB,GAAG;QACC,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IACvH,CAAC;IAEO,IAAI;QACR,OAAO;;;;;;;;;;;;;;;;;;;;;;;uFAuBwE,CAAC;IACpF,CAAC;IAEO,MAAM;QACV,OAAO;;;;;;;;;;;;;;;;;;;;;;;mJAuBoI,CAAC;IAChJ,CAAC;IAEO,QAAQ;QACZ,OAAO;;;;;;;;;;;;;;;;;;;;;kGAqBmF,CAAC;IAC/F,CAAC;IAEO,IAAI;QACR,OAAO;;;;;;;iGAOkF,CAAC;IAC9F,CAAC;IAEO,QAAQ;QACZ,OAAO;;;;;;;;;;;;;uFAawE,CAAC;IACpF,CAAC;IAED;;;;OAIG;IACK,KAAK;QACT,OAAO;;;;;;6EAM8D,CAAC;IAC1E,CAAC;IAEO,KAAK;QACT,OAAO;;;;;;;;;;sCAUuB,CAAC;IACnC,CAAC;CACJ;AA5ID,0CA4IC","sourcesContent":["/**\n * The architecture page's stylesheet: the dark drawer, the graph filling the viewport, the floating\n * popovers and the responsibilities panel. Emitted AFTER the shared menu/filter/navigation styles so\n * its `#graph` rules (fill the viewport, no 75vh cap) win.\n */\nexport class GraphPageStyles {\n    css(): string {\n        return this.base() + this.drawer() + this.controls() + this.main() + this.overlays() + this.graph() + this.cards();\n    }\n\n    private base(): string {\n        return `\n        :root {\n            --wp-side-bg: #0c0d12; --wp-side-fg: #e9eaf0; --wp-side-muted: #8b8fa0;\n            --wp-side-hover: #1f2129; --wp-side-line: #2a2c36; --wp-accent: #3559d6; --wp-accent-dark: #8aa4ff;\n            --wp-fg: #1b1e27; --wp-muted: #5d6475; --wp-line: #d9dce5; --wp-surface: #ffffff; --wp-canvas: #fbfbfd;\n        }\n        html, body { height: 100%; }\n        /* A class that sets display (the legend lists are grids) must not un-hide a [hidden] element. */\n        [hidden] { display: none !important; }\n        body { margin: 0; padding: 0; overflow: hidden; background: var(--wp-canvas); color: var(--wp-fg);\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif; font-size: 14px; }\n        kbd { font-family: ui-monospace, Menlo, monospace; font-size: 12px; border: 1px solid var(--wp-line);\n            border-radius: 4px; padding: 0 5px; background: #f3f4f7; }\n        .wp-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100vh; }\n        .wp-shell.wp-collapsed { grid-template-columns: 0 minmax(0, 1fr); }\n        .wp-shell.wp-collapsed .wp-side { visibility: hidden; }\n        @media (max-width: 760px) {\n            .wp-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, auto) minmax(0, 1fr); }\n            .wp-side { max-height: 42vh; }\n            .wp-shell.wp-collapsed { grid-template-columns: minmax(0, 1fr); }\n            .wp-shell.wp-collapsed .wp-side { display: none; }\n            .wp-main { height: auto; min-height: 0; }\n        }\n        @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }`;\n    }\n\n    private drawer(): string {\n        return `\n        .wp-side { background: var(--wp-side-bg); color: var(--wp-side-fg); overflow-y: auto; overflow-x: hidden;\n            display: flex; flex-direction: column; padding: 12px 0 10px; min-width: 0; font-size: 13px; }\n        .wp-brand { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; font-weight: 600; font-size: 14px; }\n        .wp-brand svg { flex: none; }\n        .wp-group { padding: 8px 14px; border-top: 1px solid var(--wp-side-line); display: grid; gap: 6px; }\n        .wp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--wp-side-muted);\n            font-weight: 600; padding-left: 4px; }\n        .wp-label-row { display: flex; justify-content: space-between; align-items: center; }\n        .wp-modes { display: grid; gap: 1px; }\n        .wp-mode { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 5px 10px; border-radius: 8px; }\n        .wp-mode:hover { background: var(--wp-side-hover); }\n        .wp-mode[aria-pressed=\"true\"] { background: #262833; box-shadow: inset 3px 0 0 var(--wp-accent-dark); }\n        .wp-mode:disabled { cursor: not-allowed; opacity: 0.45; }\n        .wp-mode-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }\n        .wp-mode-sub { display: block; font-size: 12px; color: var(--wp-side-muted); line-height: 1.3; }\n        .wp-mode-reason { margin: 2px 4px 0; font-size: 11.5px; line-height: 1.35; color: var(--wp-side-muted); }\n        .wp-legend-list { display: grid; gap: 5px; padding-left: 4px; }\n        .wp-legend-row { display: flex; align-items: center; gap: 10px; line-height: 1.25; }\n        .wp-legend-row svg { flex: none; }\n        .wp-legend-row small { display: block; color: var(--wp-side-muted); font-size: 11.5px; }\n        .wp-impact-note { margin: 2px 0 0; font-size: 11.5px; color: var(--wp-side-muted); }\n        .wp-impact-note:empty { display: none; }\n        .wp-foot { margin-top: auto; padding: 10px 18px 0; border-top: 1px solid var(--wp-side-line); display: flex; gap: 14px; flex-wrap: wrap; }`;\n    }\n\n    private controls(): string {\n        return `\n        .wp-side input[type=\"search\"] { width: 100%; box-sizing: border-box; background: #17181f; color: var(--wp-side-fg);\n            border: 1px solid var(--wp-side-line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }\n        .wp-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between;\n            align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 13px; }\n        .wp-toggle:hover { background: var(--wp-side-hover); }\n        .wp-toggle:disabled { cursor: not-allowed; opacity: 0.45; }\n        .wp-sw { width: 30px; height: 18px; border-radius: 9px; background: #3a3d4a; position: relative; transition: background 0.15s; }\n        .wp-sw::after { content: \"\"; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;\n            background: #fff; transition: transform 0.15s; }\n        .wp-toggle[aria-pressed=\"true\"] .wp-sw { background: var(--wp-accent); }\n        .wp-toggle[aria-pressed=\"true\"] .wp-sw::after { transform: translateX(12px); }\n        .wp-link { all: unset; cursor: pointer; color: var(--wp-side-muted); font-size: 12px; text-decoration: underline; }\n        .wp-link:hover { color: var(--wp-side-fg); }\n        .wp-icon { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; flex: none;\n            width: 34px; height: 34px; border-radius: 8px; background: var(--wp-surface); border: 1px solid var(--wp-line);\n            color: var(--wp-fg); font-size: 15px; }\n        .wp-icon:hover { border-color: var(--wp-accent); }\n        .wp-icon-mini { width: 24px; height: 24px; font-size: 12px; }\n        .wp-icon-dark { background: transparent; border-color: var(--wp-side-line); color: var(--wp-side-fg); }\n        .wp-mode:focus-visible, .wp-toggle:focus-visible, .wp-side input:focus-visible, .wp-icon:focus-visible,\n        .wp-link:focus-visible { outline: 2px solid var(--wp-accent-dark); outline-offset: 2px; }`;\n    }\n\n    private main(): string {\n        return `\n        .wp-main { position: relative; min-width: 0; height: 100vh; display: flex; flex-direction: column; }\n        .wp-topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px;\n            border-bottom: 1px solid var(--wp-line); background: var(--wp-surface); }\n        .wp-crumb { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--wp-muted); overflow: hidden;\n            text-overflow: ellipsis; white-space: nowrap; }\n        .wp-crumb b { color: var(--wp-fg); }\n        .wp-topbar #wp-filter-status, .wp-topbar #wp-graph-error { margin: 0; font-size: 13px; }`;\n    }\n\n    private overlays(): string {\n        return `\n        .wp-pop { position: absolute; z-index: 30; background: var(--wp-surface); border: 1px solid var(--wp-line);\n            border-radius: 10px; box-shadow: 0 8px 24px #0002; padding: 12px 14px; font-size: 13px; box-sizing: border-box; }\n        .wp-pop header { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }\n        .wp-legend-popout { left: 12px; bottom: 12px; width: 270px; max-height: 60vh; overflow: auto; }\n        .wp-legend-popout .wp-legend-row small, .wp-legend-popout .wp-impact-note { color: var(--wp-muted); }\n        .wp-help { right: 12px; top: 56px; width: min(380px, calc(100% - 24px)); line-height: 1.5; }\n        .wp-help p { margin: 0 0 8px; }\n        .wp-snapshot { left: 12px; bottom: 12px; width: min(440px, calc(100% - 24px)); }\n        .wp-snapshot .hint { margin: 0; }\n        .wp-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 40; width: min(540px, 100%); box-sizing: border-box;\n            overflow-y: auto; padding: 0 16px 16px; background: #f5f6f9; border-left: 1px solid var(--wp-line); box-shadow: -8px 0 24px #0002; }\n        .wp-panel > header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;\n            padding: 12px 0; background: #f5f6f9; font-weight: 600; font-size: 15px; }`;\n    }\n\n    /**\n     * The graph fills what the topbar leaves. A Runtime box with a specialization is an HTML-like\n     * table, so its cells are extra polygons inside the node: the hover glow and the lock outline are\n     * kept on the box's own outline (the FIRST polygon) instead of stroking every cell.\n     */\n    private graph(): string {\n        return `\n        #graph { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; padding: 16px 16px 64px;\n            box-sizing: border-box; background: var(--wp-canvas); }\n        #graph g.wp-node-clickable:hover polygon:not(:first-of-type) { stroke: transparent; stroke-width: 0; filter: none; }\n        #graph g.node.wp-locked > polygon:first-of-type,\n        #graph g.node.wp-locked > ellipse,\n        #graph g.node.wp-locked > path { stroke: #b26a00; stroke-width: 3; }`;\n    }\n\n    private cards(): string {\n        return `\n        #wp-responsibilities { margin: 0; }\n        #wp-responsibilities > h2 { display: none; }\n        #wp-responsibilities > .hint { color: var(--wp-muted); margin: 0 0 8px; }\n        .wp-resp-card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 0; padding: 10px 15px; }\n        .wp-resp-card > summary { cursor: pointer; color: #333; }\n        .wp-resp-level { display: inline-block; min-width: 26px; padding: 1px 6px; margin-right: 6px; border-radius: 4px;\n            background: #eef; font-size: 12px; font-weight: bold; text-align: center; }\n        .wp-resp-body { margin-top: 8px; color: #444; }\n        .wp-resp-body code { background: #f2f2f2; padding: 1px 4px; border-radius: 3px; font-family: monospace; }\n        .wp-hidden { display: none; }`;\n    }\n}\n"]}

package/src/lib/graph-render-model.d.ts

@@ -1,9 +1,17 @@
 import { LevelBand } from './graph-level-bands';
-/** Renderer-owned records, captured while emitting DOT, never recovered by parsing labels. */
+import { LegendFacts, NodeModeDots } from './graph-color-modes';
+/**
+ * Renderer-owned records, captured while emitting DOT, never recovered by parsing labels.
+ *
+ * `dot` is the statement `fullDot` carries. `modes` is set only by the architecture graph, whose page
+ * switches color modes by re-rendering each box from its per-mode statement; the runtime graph has
+ * one look and leaves it null.
+ */
 export declare class RenderNode {
     readonly id: string;
     readonly dot: string;
-    constructor(id: string, dot: string);
+    readonly modes: NodeModeDots | null;
+    constructor(id: string, dot: string, modes: NodeModeDots | null);
 }
 export declare class RenderEdge {
     readonly from: string;
@@ -20,7 +28,11 @@ export declare class GraphRenderModel {
     fullDot: string;
     header: string;
     footer: string;
+    /** The colors and roles in use, so the page's legend lists exactly those (architecture graph). */
+    legend: LegendFacts;
     node(id: string, dot: string): string;
+    /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */
+    styledNode(id: string, modes: NodeModeDots): string;
     completeEndpoints(): void;
     edge(from: string, to: string, dot: string): string;
 }

package/src/lib/graph-render-model.js

@@ -2,13 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GraphFilterAssets = exports.GraphRenderModel = exports.RenderEdge = exports.RenderNode = void 0;
 const dot_syntax_1 = require("./dot-syntax");
-/** Renderer-owned records, captured while emitting DOT, never recovered by parsing labels. */
+const graph_color_modes_1 = require("./graph-color-modes");
+/**
+ * Renderer-owned records, captured while emitting DOT, never recovered by parsing labels.
+ *
+ * `dot` is the statement `fullDot` carries. `modes` is set only by the architecture graph, whose page
+ * switches color modes by re-rendering each box from its per-mode statement; the runtime graph has
+ * one look and leaves it null.
+ */
 class RenderNode {
     id;
     dot;
-    constructor(id, dot) {
+    modes;
+    constructor(id, dot, modes) {
         this.id = id;
         this.dot = dot;
+        this.modes = modes;
     }
 }
 exports.RenderNode = RenderNode;
@@ -33,10 +42,17 @@ class GraphRenderModel {
     fullDot = '';
     header = '';
     footer = '';
+    /** The colors and roles in use, so the page's legend lists exactly those (architecture graph). */
+    legend = new graph_color_modes_1.LegendFacts();
     node(id, dot) {
-        this.nodes.push(new RenderNode(id, dot));
+        this.nodes.push(new RenderNode(id, dot, null));
         return dot;
     }
+    /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */
+    styledNode(id, modes) {
+        this.nodes.push(new RenderNode(id, modes.runtime, modes));
+        return modes.runtime;
+    }
     completeEndpoints() {
         const ids = new Set(this.nodes.map((node) => node.id));
         for (const edge of this.edges) {

package/src/lib/graph-render-model.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-render-model.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-render-model.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAGxC,8FAA8F;AAC9F,MAAa,UAAU;IAEC;IACA;IAFpB,YACoB,EAAU,EACV,GAAW;QADX,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;IAC5B,CAAC;CACP;AALD,gCAKC;AAED,MAAa,UAAU;IAEC;IACA;IACA;IACA;IAJpB,YACoB,IAAY,EACZ,EAAU,EACV,GAAW,EACX,EAAU;QAHV,SAAI,GAAJ,IAAI,CAAQ;QACZ,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,OAAE,GAAF,EAAE,CAAQ;IAC3B,CAAC;CACP;AAPD,gCAOC;AAED,mEAAmE;AACnE,MAAa,gBAAgB;IAChB,KAAK,GAAiB,EAAE,CAAC;IACzB,KAAK,GAAiB,EAAE,CAAC;IAClC,KAAK,GAAgB,EAAE,CAAC;IACxB,OAAO,GAAG,EAAE,CAAC;IACb,MAAM,GAAG,EAAE,CAAC;IACZ,MAAM,GAAG,EAAE,CAAC;IAEZ,IAAI,CAAC,EAAU,EAAE,GAAW;QACxB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;QACzC,OAAO,GAAG,CAAC;IACf,CAAC;IAED,iBAAiB;QACb,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC5B,KAAK,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACpC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBAAE,SAAS;gBAC1B,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBACZ,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAA,qBAAQ,EAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YAC5C,CAAC;QACL,CAAC;IACL,CAAC;IAED,IAAI,CAAC,IAAY,EAAE,EAAU,EAAE,GAAW;QACtC,MAAM,EAAE,GAAG,gBAAgB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/C,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC;QACxD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;QACzD,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ;AA9BD,4CA8BC;AAED,qFAAqF;AACrF,MAAa,iBAAiB;IAC1B,IAAI,CAAI,KAAQ;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI;QACA,OAAO,CACH,qFAAqF;YACrF,uEAAuE;YACvE,iDAAiD,CACpD,CAAC;IACN,CAAC;IAED,MAAM;QACF,OAAO,CACH,8EAA8E;YAC9E,mEAAmE;YACnE,sEAAsE,CACzE,CAAC;IACN,CAAC;CACJ;AApBD,8CAoBC","sourcesContent":["import { dotValue } from './dot-syntax';\nimport { LevelBand } from './graph-level-bands';\n\n/** Renderer-owned records, captured while emitting DOT, never recovered by parsing labels. */\nexport class RenderNode {\n    constructor(\n        public readonly id: string,\n        public readonly dot: string,\n    ) {}\n}\n\nexport class RenderEdge {\n    constructor(\n        public readonly from: string,\n        public readonly to: string,\n        public readonly dot: string,\n        public readonly id: string,\n    ) {}\n}\n\n/** The immutable drawable snapshot carried by a generated page. */\nexport class GraphRenderModel {\n    readonly nodes: RenderNode[] = [];\n    readonly edges: RenderEdge[] = [];\n    bands: LevelBand[] = [];\n    fullDot = '';\n    header = '';\n    footer = '';\n\n    node(id: string, dot: string): string {\n        this.nodes.push(new RenderNode(id, dot));\n        return dot;\n    }\n\n    completeEndpoints(): void {\n        const ids = new Set(this.nodes.map((node) => node.id));\n        for (const edge of this.edges) {\n            for (const id of [edge.from, edge.to]) {\n                if (ids.has(id)) continue;\n                ids.add(id);\n                this.node(id, `  \"${dotValue(id)}\";\\n`);\n            }\n        }\n    }\n\n    edge(from: string, to: string, dot: string): string {\n        const id = `wp-real-edge-${this.edges.length}`;\n        const statement = `${dot.slice(0, -2)} [id=\"${id}\"];\\n`;\n        this.edges.push(new RenderEdge(from, to, statement, id));\n        return statement;\n    }\n}\n\n/** Shared filter chrome and script-safe JSON for pages opened directly from disk. */\nexport class GraphFilterAssets {\n    json<T>(value: T): string {\n        return JSON.stringify(value).replace(/</g, '\\\\u003c');\n    }\n\n    html(): string {\n        return (\n            '<p id=\"wp-filter-status\" hidden>Filtering: <strong id=\"wp-filter-anchor\"></strong> ' +\n            '<button id=\"wp-filter-off\" type=\"button\">Turn off Filter</button></p>' +\n            '<p id=\"wp-graph-error\" role=\"alert\" hidden></p>'\n        );\n    }\n\n    styles(): string {\n        return (\n            '#wp-filter-status { text-align:center; } #wp-graph-error { color:#b71c1c; } ' +\n            '#graph .wp-filter-anchor polygon, #graph .wp-filter-anchor path, ' +\n            '#graph .wp-filter-anchor ellipse { stroke:#1565c0; stroke-width:3; }'\n        );\n    }\n}\n"]}
+{"version":3,"file":"graph-render-model.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-render-model.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAExC,2DAAgE;AAEhE;;;;;;GAMG;AACH,MAAa,UAAU;IAEC;IACA;IACA;IAHpB,YACoB,EAAU,EACV,GAAW,EACX,KAA0B;QAF1B,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,UAAK,GAAL,KAAK,CAAqB;IAC3C,CAAC;CACP;AAND,gCAMC;AAED,MAAa,UAAU;IAEC;IACA;IACA;IACA;IAJpB,YACoB,IAAY,EACZ,EAAU,EACV,GAAW,EACX,EAAU;QAHV,SAAI,GAAJ,IAAI,CAAQ;QACZ,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,OAAE,GAAF,EAAE,CAAQ;IAC3B,CAAC;CACP;AAPD,gCAOC;AAED,mEAAmE;AACnE,MAAa,gBAAgB;IAChB,KAAK,GAAiB,EAAE,CAAC;IACzB,KAAK,GAAiB,EAAE,CAAC;IAClC,KAAK,GAAgB,EAAE,CAAC;IACxB,OAAO,GAAG,EAAE,CAAC;IACb,MAAM,GAAG,EAAE,CAAC;IACZ,MAAM,GAAG,EAAE,CAAC;IACZ,kGAAkG;IAClG,MAAM,GAAG,IAAI,+BAAW,EAAE,CAAC;IAE3B,IAAI,CAAC,EAAU,EAAE,GAAW;QACxB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;QAC/C,OAAO,GAAG,CAAC;IACf,CAAC;IAED,uFAAuF;IACvF,UAAU,CAAC,EAAU,EAAE,KAAmB;QACtC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;QAC1D,OAAO,KAAK,CAAC,OAAO,CAAC;IACzB,CAAC;IAED,iBAAiB;QACb,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC5B,KAAK,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACpC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBAAE,SAAS;gBAC1B,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBACZ,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAA,qBAAQ,EAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YAC5C,CAAC;QACL,CAAC;IACL,CAAC;IAED,IAAI,CAAC,IAAY,EAAE,EAAU,EAAE,GAAW;QACtC,MAAM,EAAE,GAAG,gBAAgB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/C,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC;QACxD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;QACzD,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ;AAtCD,4CAsCC;AAED,qFAAqF;AACrF,MAAa,iBAAiB;IAC1B,IAAI,CAAI,KAAQ;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI;QACA,OAAO,CACH,qFAAqF;YACrF,uEAAuE;YACvE,iDAAiD,CACpD,CAAC;IACN,CAAC;IAED,MAAM;QACF,OAAO,CACH,8EAA8E;YAC9E,mEAAmE;YACnE,sEAAsE,CACzE,CAAC;IACN,CAAC;CACJ;AApBD,8CAoBC","sourcesContent":["import { dotValue } from './dot-syntax';\nimport { LevelBand } from './graph-level-bands';\nimport { LegendFacts, NodeModeDots } from './graph-color-modes';\n\n/**\n * Renderer-owned records, captured while emitting DOT, never recovered by parsing labels.\n *\n * `dot` is the statement `fullDot` carries. `modes` is set only by the architecture graph, whose page\n * switches color modes by re-rendering each box from its per-mode statement; the runtime graph has\n * one look and leaves it null.\n */\nexport class RenderNode {\n    constructor(\n        public readonly id: string,\n        public readonly dot: string,\n        public readonly modes: NodeModeDots | null,\n    ) {}\n}\n\nexport class RenderEdge {\n    constructor(\n        public readonly from: string,\n        public readonly to: string,\n        public readonly dot: string,\n        public readonly id: string,\n    ) {}\n}\n\n/** The immutable drawable snapshot carried by a generated page. */\nexport class GraphRenderModel {\n    readonly nodes: RenderNode[] = [];\n    readonly edges: RenderEdge[] = [];\n    bands: LevelBand[] = [];\n    fullDot = '';\n    header = '';\n    footer = '';\n    /** The colors and roles in use, so the page's legend lists exactly those (architecture graph). */\n    legend = new LegendFacts();\n\n    node(id: string, dot: string): string {\n        this.nodes.push(new RenderNode(id, dot, null));\n        return dot;\n    }\n\n    /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */\n    styledNode(id: string, modes: NodeModeDots): string {\n        this.nodes.push(new RenderNode(id, modes.runtime, modes));\n        return modes.runtime;\n    }\n\n    completeEndpoints(): void {\n        const ids = new Set(this.nodes.map((node) => node.id));\n        for (const edge of this.edges) {\n            for (const id of [edge.from, edge.to]) {\n                if (ids.has(id)) continue;\n                ids.add(id);\n                this.node(id, `  \"${dotValue(id)}\";\\n`);\n            }\n        }\n    }\n\n    edge(from: string, to: string, dot: string): string {\n        const id = `wp-real-edge-${this.edges.length}`;\n        const statement = `${dot.slice(0, -2)} [id=\"${id}\"];\\n`;\n        this.edges.push(new RenderEdge(from, to, statement, id));\n        return statement;\n    }\n}\n\n/** Shared filter chrome and script-safe JSON for pages opened directly from disk. */\nexport class GraphFilterAssets {\n    json<T>(value: T): string {\n        return JSON.stringify(value).replace(/</g, '\\\\u003c');\n    }\n\n    html(): string {\n        return (\n            '<p id=\"wp-filter-status\" hidden>Filtering: <strong id=\"wp-filter-anchor\"></strong> ' +\n            '<button id=\"wp-filter-off\" type=\"button\">Turn off Filter</button></p>' +\n            '<p id=\"wp-graph-error\" role=\"alert\" hidden></p>'\n        );\n    }\n\n    styles(): string {\n        return (\n            '#wp-filter-status { text-align:center; } #wp-graph-error { color:#b71c1c; } ' +\n            '#graph .wp-filter-anchor polygon, #graph .wp-filter-anchor path, ' +\n            '#graph .wp-filter-anchor ellipse { stroke:#1565c0; stroke-width:3; }'\n        );\n    }\n}\n"]}

package/src/lib/graph-responsibilities.js

@@ -51,7 +51,7 @@ class ResponsibilitiesRenderer {
         }
         return (`<section id="wp-responsibilities">` +
             `<h2>Responsibilities (level high → low)</h2>` +
-            `<p class="hint">Lock a box above to narrow this list to just that box's dependency chain.</p>` +
+            `<p class="hint">Lock a box (the Focus field, or a box's menu) to narrow this list to just that box's dependency chain.</p>` +
             cards.join('\n') +
             `</section>`);
     }

package/src/lib/graph-responsibilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-responsibilities.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-responsibilities.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Responsibilities Section\n *\n * Renders every module's full `responsibilities.md` as a collapsible card below\n * the dependency graph in architecture/dependencies.html. Cards are ordered by\n * dependency level HIGH → LOW (top-level apps first, deepest libs last) so a\n * reader scrolls from the runnable servers/clients down into the libraries.\n *\n * Each card carries `data-node=\"<projectKey>\"` matching the graph box's title, so\n * the page script can filter the list to just the locked box's chain (see\n * graph-visualizer.client.ts). The summary paragraph is the `shortDescription`\n * already on each graph entry; the expanded body is the rendered markdown file.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport type { EnhancedGraph, GraphEntry } from './graph-sorter';\nimport { GraphNames } from './graph-names';\n\n/**\n * Mutable cursor state threaded through the markdown line renderer: whether we\n * are currently inside an open `<ul>` (so the next blank line / heading / non-\n * bullet closes it).\n */\nclass MarkdownListState {\n    inList = false;\n}\n\nexport class ResponsibilitiesRenderer {\n    private readonly names = new GraphNames();\n\n    /**\n     * Build the responsibilities section HTML: one collapsible card per module,\n     * sorted by level descending (tie-break by name ascending). Returned as a\n     * <section> that GraphVisualizer injects below the graph.\n     */\n    generateSection(graph: EnhancedGraph, workspaceRoot: string): string {\n        const projects = Object.keys(graph);\n        projects.sort((a: string, b: string): number => {\n            const levelDiff = graph[b].level - graph[a].level;\n            if (levelDiff !== 0) return levelDiff;\n            return a.localeCompare(b);\n        });\n\n        const cards: string[] = [];\n        for (const project of projects) {\n            // Hidden projects (drawOnGraph:false) are omitted from the graph, so\n            // they get no responsibilities card either.\n            if (graph[project].drawOnGraph === false) continue;\n            cards.push(this.renderCard(project, graph[project], workspaceRoot));\n        }\n\n        return (\n            `<section id=\"wp-responsibilities\">` +\n            `<h2>Responsibilities (level high → low)</h2>` +\n            `<p class=\"hint\">Lock a box above to narrow this list to just that box's dependency chain.</p>` +\n            cards.join('\\n') +\n            `</section>`\n        );\n    }\n\n    private renderCard(project: string, entry: GraphEntry, workspaceRoot: string): string {\n        // data-node is the graph box's IDENTITY (the project key, matching the SVG <title>); the\n        // heading stays the pretty short name. Keying the attribute on the short name is what let\n        // two same-named projects share one card's visibility — see graph-names.ts.\n        const nodeId = this.names.getNodeId(project);\n        const shortName = this.names.getShortName(project);\n        const summary = entry.shortDescription ?? '';\n        const summaryHtml = summary ? ` — ${this.escapeHtml(summary)}` : '';\n        const body = this.readBody(entry, workspaceRoot);\n        return (\n            `<details class=\"wp-resp-card\" data-node=\"${this.escapeHtml(nodeId)}\">` +\n            `<summary><span class=\"wp-resp-level\">L${entry.level}</span> ` +\n            `<strong>${this.escapeHtml(shortName)}</strong>${summaryHtml}</summary>` +\n            `<div class=\"wp-resp-body\">${body}</div>` +\n            `</details>`\n        );\n    }\n\n    /**\n     * Read a module's responsibilities.md body. Generation already guarantees the\n     * file exists (metadata validation throws otherwise); a fallback line guards\n     * the edge case where the graph JSON is stale relative to disk.\n     */\n    private readBody(entry: GraphEntry, workspaceRoot: string): string {\n        const file = entry.responsibilitiesFile;\n        if (!file) return '<p><em>No responsibilities.md recorded for this module.</em></p>';\n        const absolutePath = path.join(workspaceRoot, file);\n        if (!fs.existsSync(absolutePath)) {\n            return `<p><em>Missing ${this.escapeHtml(file)}.</em></p>`;\n        }\n        return this.renderMarkdown(fs.readFileSync(absolutePath, 'utf-8'));\n    }\n\n    /**\n     * Minimal markdown → HTML for a responsibilities.md body. Handles ATX headings\n     * (`#`..`######`), `-`/`*` bullet lists, and blank-line-separated paragraphs.\n     * Everything is HTML-escaped first; only a small inline set is re-marked. This\n     * is deliberately tiny — responsibilities.md files are short and structured,\n     * and the repo has no markdown dependency.\n     */\n    private renderMarkdown(markdown: string): string {\n        const out: string[] = [];\n        const state = new MarkdownListState();\n        for (const rawLine of markdown.split('\\n')) {\n            this.renderLine(rawLine.trim(), out, state);\n        }\n        if (state.inList) out.push('</ul>');\n        return out.join('\\n');\n    }\n\n    private renderLine(line: string, out: string[], state: MarkdownListState): void {\n        const heading = /^(#{1,6})\\s+(.*)$/.exec(line);\n        const bullet = /^[-*]\\s+(.*)$/.exec(line);\n        if (line.length === 0) {\n            if (state.inList) { out.push('</ul>'); state.inList = false; }\n            return;\n        }\n        if (heading) {\n            if (state.inList) { out.push('</ul>'); state.inList = false; }\n            const level = Math.min(heading[1].length + 3, 6); // # → h4, ## → h5, deeper → h6\n            out.push(`<h${level}>${this.renderInline(this.escapeHtml(heading[2]))}</h${level}>`);\n            return;\n        }\n        if (bullet) {\n            if (!state.inList) { out.push('<ul>'); state.inList = true; }\n            out.push(`<li>${this.renderInline(this.escapeHtml(bullet[1]))}</li>`);\n            return;\n        }\n        if (state.inList) { out.push('</ul>'); state.inList = false; }\n        out.push(`<p>${this.renderInline(this.escapeHtml(line))}</p>`);\n    }\n\n    /**\n     * Render inline markdown spans within an already HTML-escaped line: `code` →\n     * <code>, **bold** → <strong>, *italic* → <em>.\n     */\n    private renderInline(escaped: string): string {\n        return escaped\n            .replace(/`([^`]+)`/g, '<code>$1</code>')\n            .replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>')\n            .replace(/(^|[^*])\\*([^*]+)\\*/g, '$1<em>$2</em>');\n    }\n\n    /**\n     * Escape a string for safe embedding in HTML text/attributes.\n     */\n    private escapeHtml(text: string): string {\n        return text\n            .replace(/&/g, '&amp;')\n            .replace(/</g, '&lt;')\n            .replace(/>/g, '&gt;')\n            .replace(/\"/g, '&quot;');\n    }\n}\n"]}
+{"version":3,"file":"graph-responsibilities.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-responsibilities.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Responsibilities Section\n *\n * Renders every module's full `responsibilities.md` as a collapsible card below\n * the dependency graph in architecture/dependencies.html. Cards are ordered by\n * dependency level HIGH → LOW (top-level apps first, deepest libs last) so a\n * reader scrolls from the runnable servers/clients down into the libraries.\n *\n * Each card carries `data-node=\"<projectKey>\"` matching the graph box's title, so\n * the page script can filter the list to just the locked box's chain (see\n * graph-visualizer.client.ts). The summary paragraph is the `shortDescription`\n * already on each graph entry; the expanded body is the rendered markdown file.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport type { EnhancedGraph, GraphEntry } from './graph-sorter';\nimport { GraphNames } from './graph-names';\n\n/**\n * Mutable cursor state threaded through the markdown line renderer: whether we\n * are currently inside an open `<ul>` (so the next blank line / heading / non-\n * bullet closes it).\n */\nclass MarkdownListState {\n    inList = false;\n}\n\nexport class ResponsibilitiesRenderer {\n    private readonly names = new GraphNames();\n\n    /**\n     * Build the responsibilities section HTML: one collapsible card per module,\n     * sorted by level descending (tie-break by name ascending). Returned as a\n     * <section> that GraphVisualizer injects below the graph.\n     */\n    generateSection(graph: EnhancedGraph, workspaceRoot: string): string {\n        const projects = Object.keys(graph);\n        projects.sort((a: string, b: string): number => {\n            const levelDiff = graph[b].level - graph[a].level;\n            if (levelDiff !== 0) return levelDiff;\n            return a.localeCompare(b);\n        });\n\n        const cards: string[] = [];\n        for (const project of projects) {\n            // Hidden projects (drawOnGraph:false) are omitted from the graph, so\n            // they get no responsibilities card either.\n            if (graph[project].drawOnGraph === false) continue;\n            cards.push(this.renderCard(project, graph[project], workspaceRoot));\n        }\n\n        return (\n            `<section id=\"wp-responsibilities\">` +\n            `<h2>Responsibilities (level high → low)</h2>` +\n            `<p class=\"hint\">Lock a box (the Focus field, or a box's menu) to narrow this list to just that box's dependency chain.</p>` +\n            cards.join('\\n') +\n            `</section>`\n        );\n    }\n\n    private renderCard(project: string, entry: GraphEntry, workspaceRoot: string): string {\n        // data-node is the graph box's IDENTITY (the project key, matching the SVG <title>); the\n        // heading stays the pretty short name. Keying the attribute on the short name is what let\n        // two same-named projects share one card's visibility — see graph-names.ts.\n        const nodeId = this.names.getNodeId(project);\n        const shortName = this.names.getShortName(project);\n        const summary = entry.shortDescription ?? '';\n        const summaryHtml = summary ? ` — ${this.escapeHtml(summary)}` : '';\n        const body = this.readBody(entry, workspaceRoot);\n        return (\n            `<details class=\"wp-resp-card\" data-node=\"${this.escapeHtml(nodeId)}\">` +\n            `<summary><span class=\"wp-resp-level\">L${entry.level}</span> ` +\n            `<strong>${this.escapeHtml(shortName)}</strong>${summaryHtml}</summary>` +\n            `<div class=\"wp-resp-body\">${body}</div>` +\n            `</details>`\n        );\n    }\n\n    /**\n     * Read a module's responsibilities.md body. Generation already guarantees the\n     * file exists (metadata validation throws otherwise); a fallback line guards\n     * the edge case where the graph JSON is stale relative to disk.\n     */\n    private readBody(entry: GraphEntry, workspaceRoot: string): string {\n        const file = entry.responsibilitiesFile;\n        if (!file) return '<p><em>No responsibilities.md recorded for this module.</em></p>';\n        const absolutePath = path.join(workspaceRoot, file);\n        if (!fs.existsSync(absolutePath)) {\n            return `<p><em>Missing ${this.escapeHtml(file)}.</em></p>`;\n        }\n        return this.renderMarkdown(fs.readFileSync(absolutePath, 'utf-8'));\n    }\n\n    /**\n     * Minimal markdown → HTML for a responsibilities.md body. Handles ATX headings\n     * (`#`..`######`), `-`/`*` bullet lists, and blank-line-separated paragraphs.\n     * Everything is HTML-escaped first; only a small inline set is re-marked. This\n     * is deliberately tiny — responsibilities.md files are short and structured,\n     * and the repo has no markdown dependency.\n     */\n    private renderMarkdown(markdown: string): string {\n        const out: string[] = [];\n        const state = new MarkdownListState();\n        for (const rawLine of markdown.split('\\n')) {\n            this.renderLine(rawLine.trim(), out, state);\n        }\n        if (state.inList) out.push('</ul>');\n        return out.join('\\n');\n    }\n\n    private renderLine(line: string, out: string[], state: MarkdownListState): void {\n        const heading = /^(#{1,6})\\s+(.*)$/.exec(line);\n        const bullet = /^[-*]\\s+(.*)$/.exec(line);\n        if (line.length === 0) {\n            if (state.inList) { out.push('</ul>'); state.inList = false; }\n            return;\n        }\n        if (heading) {\n            if (state.inList) { out.push('</ul>'); state.inList = false; }\n            const level = Math.min(heading[1].length + 3, 6); // # → h4, ## → h5, deeper → h6\n            out.push(`<h${level}>${this.renderInline(this.escapeHtml(heading[2]))}</h${level}>`);\n            return;\n        }\n        if (bullet) {\n            if (!state.inList) { out.push('<ul>'); state.inList = true; }\n            out.push(`<li>${this.renderInline(this.escapeHtml(bullet[1]))}</li>`);\n            return;\n        }\n        if (state.inList) { out.push('</ul>'); state.inList = false; }\n        out.push(`<p>${this.renderInline(this.escapeHtml(line))}</p>`);\n    }\n\n    /**\n     * Render inline markdown spans within an already HTML-escaped line: `code` →\n     * <code>, **bold** → <strong>, *italic* → <em>.\n     */\n    private renderInline(escaped: string): string {\n        return escaped\n            .replace(/`([^`]+)`/g, '<code>$1</code>')\n            .replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>')\n            .replace(/(^|[^*])\\*([^*]+)\\*/g, '$1<em>$2</em>');\n    }\n\n    /**\n     * Escape a string for safe embedding in HTML text/attributes.\n     */\n    private escapeHtml(text: string): string {\n        return text\n            .replace(/&/g, '&amp;')\n            .replace(/</g, '&lt;')\n            .replace(/>/g, '&gt;')\n            .replace(/\"/g, '&quot;');\n    }\n}\n"]}