@webpieces/nx-webpieces-rules 0.4.655 → 0.4.657

package/src/lib/graph-node-menu.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphNodeMenu = void 0;
+/**
+ * The floating per-node menu, shared by BOTH generated graphs.
+ *
+ * There is exactly ONE implementation of the menu — its CSS, its positioning, its dismissal and the
+ * click wiring that opens it — and both `architecture/dependencies.html` (graph-visualizer.ts) and
+ * every project's `design.html` (di-graph/design-visualizer.ts) inline these same bytes. Duplicating
+ * it into the two emitters is what this module exists to prevent.
+ *
+ * Why the browser code is emitted as a STRING here rather than living in a compiled `*.client.ts`
+ * beside its emitter: `generateDesignHTML` is called straight from a source checkout (by the
+ * di-graph-generate executor's unit tests) and has no injection seam for the client text, so a
+ * `readCompiledClient` sibling would make the design page unbuildable from source. A string keeps one
+ * copy reachable by both emitters with no build-order coupling.
+ *
+ * What the menu does NOT own is the LOCK BEHAVIOUR, because the two pages genuinely differ:
+ *  - the architecture page already has a `#wp-lock` dropdown backed by GraphHighlighter (chain
+ *    highlight + responsibilities filter), and its menu item drives that, so the two stay in sync;
+ *  - a design page has neither dropdown nor responsibilities, so it uses `WpNodeLock` below —
+ *    dim every other box in that graph, light the locked one.
+ * Both spell the dim with the SAME class names and the SAME CSS from `dimStyles()`.
+ */
+class GraphNodeMenu {
+    /**
+     * Menu chrome + the "this box is clickable" affordance. Every node is clickable now (the menu
+     * replaced direct navigation), so the cursor/glow is on every box rather than only the ones with
+     * a design page.
+     */
+    styles() {
+        return `
+        .wp-node-menu {
+            position: absolute;
+            z-index: 1000;
+            min-width: 150px;
+            padding: 4px 0;
+            background: white;
+            border: 1px solid #cfcfcf;
+            border-radius: 6px;
+            box-shadow: 0 4px 14px rgba(0,0,0,0.22);
+            font-family: Arial, sans-serif;
+            font-size: 14px;
+        }
+        .wp-node-menu-title {
+            padding: 4px 14px 6px;
+            color: #777;
+            font-size: 12px;
+            font-family: monospace;
+            border-bottom: 1px solid #eee;
+            margin-bottom: 4px;
+        }
+        .wp-node-menu-item {
+            display: block;
+            width: 100%;
+            padding: 7px 14px;
+            border: 0;
+            background: none;
+            color: #1565C0;
+            font: inherit;
+            text-align: left;
+            cursor: pointer;
+        }
+        .wp-node-menu-item:hover { background: #E3F2FD; }
+        g.wp-node-clickable { cursor: pointer; }
+        g.wp-node-clickable polygon,
+        g.wp-node-clickable ellipse { transition: stroke-width 0.12s ease, filter 0.12s ease; }
+        g.wp-node-clickable:hover polygon,
+        g.wp-node-clickable:hover ellipse {
+            stroke: #1976d2;
+            stroke-width: 5;
+            filter: drop-shadow(0 0 6px rgba(25, 118, 210, 0.85));
+        }`;
+    }
+    /**
+     * The dim/undim rules a lock (or a hover) toggles, scoped to whatever element holds the rendered
+     * SVG on this page (`#graph` on the architecture page, `.graph` on a design page).
+     *
+     * We ONLY dim: the lit subgraph keeps its exact normal look. The un-dim rules repeat
+     * `svg.wp-dim` so they out-specify the dim rule, which carries an extra type selector.
+     */
+    dimStyles(scope) {
+        return `
+        ${scope} .node, ${scope} .edge { transition: opacity 0.12s ease; }
+        ${scope} svg.wp-dim .node,
+        ${scope} svg.wp-dim .edge { opacity: 0.15; }
+        ${scope} svg.wp-dim .node.wp-focus,
+        ${scope} svg.wp-dim .node.wp-neighbor,
+        ${scope} svg.wp-dim .edge.wp-hl { opacity: 1; }`;
+    }
+    /** The whole browser side: the menu, the design-page lock, and the global dismiss handlers. */
+    script() {
+        return `${this.menuScript()}\n${this.lockScript()}\n${this.dismissScript()}`;
+    }
+    /**
+     * `WpNodeMenuItem` + `WpNodeMenu`. Anchored at the node's own bounding box (bottom-left corner,
+     * 4px below it) and clamped so a box at the right edge of a very wide graph still shows its whole
+     * menu. Opening a menu closes any other, so at most one is ever on screen.
+     */
+    menuScript() {
+        return `
+        class WpNodeMenuItem {
+            constructor(label, onSelect) { this.label = label; this.onSelect = onSelect; }
+        }
+        class WpNodeMenu {
+            static close() {
+                const open = document.getElementById('wp-node-menu');
+                if (open !== null) open.remove();
+            }
+            static open(nodeEl, name, items) {
+                WpNodeMenu.close();
+                const menu = document.createElement('div');
+                menu.id = 'wp-node-menu';
+                menu.className = 'wp-node-menu';
+                menu.addEventListener('click', function (ev) { ev.stopPropagation(); });
+                const heading = document.createElement('div');
+                heading.className = 'wp-node-menu-title';
+                heading.textContent = name;
+                menu.appendChild(heading);
+                for (const item of items) menu.appendChild(WpNodeMenu.button(item));
+                document.body.appendChild(menu);
+                WpNodeMenu.place(menu, nodeEl);
+            }
+            static button(item) {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'wp-node-menu-item';
+                button.textContent = item.label;
+                button.addEventListener('click', function (ev) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    WpNodeMenu.close();
+                    item.onSelect();
+                });
+                return button;
+            }
+            static place(menu, nodeEl) {
+                const box = nodeEl.getBoundingClientRect();
+                const own = menu.getBoundingClientRect();
+                const maxLeft = window.scrollX + document.documentElement.clientWidth - own.width - 8;
+                let left = box.left + window.scrollX;
+                if (left > maxLeft) left = Math.max(window.scrollX + 8, maxLeft);
+                menu.style.left = left + 'px';
+                menu.style.top = (box.bottom + window.scrollY + 4) + 'px';
+            }
+            static wire(svg, itemsFor) {
+                svg.querySelectorAll('g.node').forEach(function (node) {
+                    const title = node.querySelector('title');
+                    const name = title === null || title.textContent === null
+                        ? '' : title.textContent.trim();
+                    if (name === '') return;
+                    node.classList.add('wp-node-clickable');
+                    node.addEventListener('click', function (ev) {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        WpNodeMenu.open(node, name, itemsFor(name, node));
+                    });
+                });
+            }
+        }`;
+    }
+    /**
+     * The lock a DESIGN page uses: no dropdown and no responsibilities exist there, so locking a class
+     * box dims every other box in that design's graph and lights the locked one.
+     */
+    lockScript() {
+        return `
+        class WpNodeLock {
+            constructor(svg) { this.svg = svg; this.locked = null; }
+            isLocked(name) { return this.locked === name; }
+            toggle(name, nodeEl) {
+                if (this.locked === name) this.clear();
+                else this.lock(name, nodeEl);
+            }
+            lock(name, nodeEl) {
+                this.clear();
+                this.locked = name;
+                this.svg.classList.add('wp-dim');
+                nodeEl.classList.add('wp-focus');
+            }
+            clear() {
+                this.locked = null;
+                this.svg.classList.remove('wp-dim');
+                this.svg.querySelectorAll('.wp-focus').forEach(function (el) {
+                    el.classList.remove('wp-focus');
+                });
+            }
+        }`;
+    }
+    /** Outside click and Escape both dismiss — wired once, on the document. */
+    dismissScript() {
+        return `
+        document.addEventListener('click', function () { WpNodeMenu.close(); });
+        document.addEventListener('keydown', function (ev) {
+            if (ev.key === 'Escape') WpNodeMenu.close();
+        });`;
+    }
+}
+exports.GraphNodeMenu = GraphNodeMenu;
+//# sourceMappingURL=graph-node-menu.js.map

package/src/lib/graph-node-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-node-menu.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-node-menu.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAa,aAAa;IACtB;;;;OAIG;IACH,MAAM;QACF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyCL,CAAC;IACP,CAAC;IAED;;;;;;OAMG;IACH,SAAS,CAAC,KAAa;QACnB,OAAO;UACL,KAAK,WAAW,KAAK;UACrB,KAAK;UACL,KAAK;UACL,KAAK;UACL,KAAK;UACL,KAAK,yCAAyC,CAAC;IACrD,CAAC;IAED,+FAA+F;IAC/F,MAAM;QACF,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;IACjF,CAAC;IAED;;;;OAIG;IACK,UAAU;QACd,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2DL,CAAC;IACP,CAAC;IAED;;;OAGG;IACK,UAAU;QACd,OAAO;;;;;;;;;;;;;;;;;;;;;UAqBL,CAAC;IACP,CAAC;IAED,2EAA2E;IACnE,aAAa;QACjB,OAAO;;;;YAIH,CAAC;IACT,CAAC;CACJ;AAlLD,sCAkLC","sourcesContent":["/**\n * The floating per-node menu, shared by BOTH generated graphs.\n *\n * There is exactly ONE implementation of the menu — its CSS, its positioning, its dismissal and the\n * click wiring that opens it — and both `architecture/dependencies.html` (graph-visualizer.ts) and\n * every project's `design.html` (di-graph/design-visualizer.ts) inline these same bytes. Duplicating\n * it into the two emitters is what this module exists to prevent.\n *\n * Why the browser code is emitted as a STRING here rather than living in a compiled `*.client.ts`\n * beside its emitter: `generateDesignHTML` is called straight from a source checkout (by the\n * di-graph-generate executor's unit tests) and has no injection seam for the client text, so a\n * `readCompiledClient` sibling would make the design page unbuildable from source. A string keeps one\n * copy reachable by both emitters with no build-order coupling.\n *\n * What the menu does NOT own is the LOCK BEHAVIOUR, because the two pages genuinely differ:\n *  - the architecture page already has a `#wp-lock` dropdown backed by GraphHighlighter (chain\n *    highlight + responsibilities filter), and its menu item drives that, so the two stay in sync;\n *  - a design page has neither dropdown nor responsibilities, so it uses `WpNodeLock` below —\n *    dim every other box in that graph, light the locked one.\n * Both spell the dim with the SAME class names and the SAME CSS from `dimStyles()`.\n */\nexport class GraphNodeMenu {\n    /**\n     * Menu chrome + the \"this box is clickable\" affordance. Every node is clickable now (the menu\n     * replaced direct navigation), so the cursor/glow is on every box rather than only the ones with\n     * a design page.\n     */\n    styles(): string {\n        return `\n        .wp-node-menu {\n            position: absolute;\n            z-index: 1000;\n            min-width: 150px;\n            padding: 4px 0;\n            background: white;\n            border: 1px solid #cfcfcf;\n            border-radius: 6px;\n            box-shadow: 0 4px 14px rgba(0,0,0,0.22);\n            font-family: Arial, sans-serif;\n            font-size: 14px;\n        }\n        .wp-node-menu-title {\n            padding: 4px 14px 6px;\n            color: #777;\n            font-size: 12px;\n            font-family: monospace;\n            border-bottom: 1px solid #eee;\n            margin-bottom: 4px;\n        }\n        .wp-node-menu-item {\n            display: block;\n            width: 100%;\n            padding: 7px 14px;\n            border: 0;\n            background: none;\n            color: #1565C0;\n            font: inherit;\n            text-align: left;\n            cursor: pointer;\n        }\n        .wp-node-menu-item:hover { background: #E3F2FD; }\n        g.wp-node-clickable { cursor: pointer; }\n        g.wp-node-clickable polygon,\n        g.wp-node-clickable ellipse { transition: stroke-width 0.12s ease, filter 0.12s ease; }\n        g.wp-node-clickable:hover polygon,\n        g.wp-node-clickable:hover ellipse {\n            stroke: #1976d2;\n            stroke-width: 5;\n            filter: drop-shadow(0 0 6px rgba(25, 118, 210, 0.85));\n        }`;\n    }\n\n    /**\n     * The dim/undim rules a lock (or a hover) toggles, scoped to whatever element holds the rendered\n     * SVG on this page (`#graph` on the architecture page, `.graph` on a design page).\n     *\n     * We ONLY dim: the lit subgraph keeps its exact normal look. The un-dim rules repeat\n     * `svg.wp-dim` so they out-specify the dim rule, which carries an extra type selector.\n     */\n    dimStyles(scope: string): string {\n        return `\n        ${scope} .node, ${scope} .edge { transition: opacity 0.12s ease; }\n        ${scope} svg.wp-dim .node,\n        ${scope} svg.wp-dim .edge { opacity: 0.15; }\n        ${scope} svg.wp-dim .node.wp-focus,\n        ${scope} svg.wp-dim .node.wp-neighbor,\n        ${scope} svg.wp-dim .edge.wp-hl { opacity: 1; }`;\n    }\n\n    /** The whole browser side: the menu, the design-page lock, and the global dismiss handlers. */\n    script(): string {\n        return `${this.menuScript()}\\n${this.lockScript()}\\n${this.dismissScript()}`;\n    }\n\n    /**\n     * `WpNodeMenuItem` + `WpNodeMenu`. Anchored at the node's own bounding box (bottom-left corner,\n     * 4px below it) and clamped so a box at the right edge of a very wide graph still shows its whole\n     * menu. Opening a menu closes any other, so at most one is ever on screen.\n     */\n    private menuScript(): string {\n        return `\n        class WpNodeMenuItem {\n            constructor(label, onSelect) { this.label = label; this.onSelect = onSelect; }\n        }\n        class WpNodeMenu {\n            static close() {\n                const open = document.getElementById('wp-node-menu');\n                if (open !== null) open.remove();\n            }\n            static open(nodeEl, name, items) {\n                WpNodeMenu.close();\n                const menu = document.createElement('div');\n                menu.id = 'wp-node-menu';\n                menu.className = 'wp-node-menu';\n                menu.addEventListener('click', function (ev) { ev.stopPropagation(); });\n                const heading = document.createElement('div');\n                heading.className = 'wp-node-menu-title';\n                heading.textContent = name;\n                menu.appendChild(heading);\n                for (const item of items) menu.appendChild(WpNodeMenu.button(item));\n                document.body.appendChild(menu);\n                WpNodeMenu.place(menu, nodeEl);\n            }\n            static button(item) {\n                const button = document.createElement('button');\n                button.type = 'button';\n                button.className = 'wp-node-menu-item';\n                button.textContent = item.label;\n                button.addEventListener('click', function (ev) {\n                    ev.preventDefault();\n                    ev.stopPropagation();\n                    WpNodeMenu.close();\n                    item.onSelect();\n                });\n                return button;\n            }\n            static place(menu, nodeEl) {\n                const box = nodeEl.getBoundingClientRect();\n                const own = menu.getBoundingClientRect();\n                const maxLeft = window.scrollX + document.documentElement.clientWidth - own.width - 8;\n                let left = box.left + window.scrollX;\n                if (left > maxLeft) left = Math.max(window.scrollX + 8, maxLeft);\n                menu.style.left = left + 'px';\n                menu.style.top = (box.bottom + window.scrollY + 4) + 'px';\n            }\n            static wire(svg, itemsFor) {\n                svg.querySelectorAll('g.node').forEach(function (node) {\n                    const title = node.querySelector('title');\n                    const name = title === null || title.textContent === null\n                        ? '' : title.textContent.trim();\n                    if (name === '') return;\n                    node.classList.add('wp-node-clickable');\n                    node.addEventListener('click', function (ev) {\n                        ev.preventDefault();\n                        ev.stopPropagation();\n                        WpNodeMenu.open(node, name, itemsFor(name, node));\n                    });\n                });\n            }\n        }`;\n    }\n\n    /**\n     * The lock a DESIGN page uses: no dropdown and no responsibilities exist there, so locking a class\n     * box dims every other box in that design's graph and lights the locked one.\n     */\n    private lockScript(): string {\n        return `\n        class WpNodeLock {\n            constructor(svg) { this.svg = svg; this.locked = null; }\n            isLocked(name) { return this.locked === name; }\n            toggle(name, nodeEl) {\n                if (this.locked === name) this.clear();\n                else this.lock(name, nodeEl);\n            }\n            lock(name, nodeEl) {\n                this.clear();\n                this.locked = name;\n                this.svg.classList.add('wp-dim');\n                nodeEl.classList.add('wp-focus');\n            }\n            clear() {\n                this.locked = null;\n                this.svg.classList.remove('wp-dim');\n                this.svg.querySelectorAll('.wp-focus').forEach(function (el) {\n                    el.classList.remove('wp-focus');\n                });\n            }\n        }`;\n    }\n\n    /** Outside click and Escape both dismiss — wired once, on the document. */\n    private dismissScript(): string {\n        return `\n        document.addEventListener('click', function () { WpNodeMenu.close(); });\n        document.addEventListener('keydown', function (ev) {\n            if (ev.key === 'Escape') WpNodeMenu.close();\n        });`;\n    }\n}\n"]}

package/src/lib/graph-visualizer.client.d.ts

@@ -37,7 +37,7 @@ declare class GraphHighlighter {
      */
     private locked;
     constructor(svg: SVGSVGElement);
-    /** Index the SVG, then wire hover and the lock dropdown. */
+    /** Index the SVG, then wire hover, the lock dropdown, and the per-node floating menu. */
     wire(): void;
     private indexNodes;
     private indexEdges;
@@ -54,6 +54,22 @@ declare class GraphHighlighter {
     private relight;
     private wireHover;
     private wireLock;
+    private lockSelect;
+    /** True when `name` is the box the page is currently locked on — what the menu labels itself by. */
+    isLocked(name: string): boolean;
+    /**
+     * THE one lock entry point, so the dropdown and the node menu can never disagree: it sets the
+     * dropdown's selection, re-highlights, and re-filters the cards whichever of the two asked.
+     * `null` is "All (no lock)".
+     */
+    setLock(name: string | null): void;
+    private applyLock;
+    /**
+     * Every box opens the floating menu (the shared one both generated graphs use). "View Design" is
+     * only built when that project actually HAS a committed design.html; the bottom item is always
+     * Lock or Unlock, whichever applies to this box right now.
+     */
+    private wireMenu;
     /**
      * Filter the responsibility cards to the locked box's chain by READING BACK the
      * `.wp-focus`/`.wp-neighbor` classes highlight() just set — so there is no second graph walk and

package/src/lib/graph-visualizer.client.js

@@ -13,9 +13,13 @@
  * deleted, and the same cure applies. The logic is a CLASS now, which is what `no-function-outside-class`
  * was asking for all along; nothing needed a disable.
  *
- * Behaviour, unchanged: after Viz renders the SVG, hovering a box dims the rest and lights its full
+ * Behaviour: after Viz renders the SVG, hovering a box dims the rest and lights its full
  * ancestor+descendant chain; the #wp-lock dropdown PINS one box's chain (the dim survives mouse-leave)
  * and filters the responsibilities cards below the graph to just that chain. "All" clears the lock.
+ *
+ * CLICKING a box opens the shared floating node menu (graph-node-menu.ts, the same menu every
+ * project's design.html uses) — "View Design" only for a project that HAS a design.html, then
+ * Lock/Unlock. Menu and dropdown are one lock: both go through setLock(), so each reflects the other.
  */
 // The DOT placeholder and the `Viz` global are declared once in viz-client-globals.d.ts — both
 // scripts share a global scope, so they cannot each declare them. Do NOT spell the placeholder token
@@ -64,12 +68,13 @@ class GraphHighlighter {
     constructor(svg) {
         this.svg = svg;
     }
-    /** Index the SVG, then wire hover and the lock dropdown. */
+    /** Index the SVG, then wire hover, the lock dropdown, and the per-node floating menu. */
     wire() {
         this.indexNodes();
         this.indexEdges();
         this.wireHover();
         this.wireLock();
+        this.wireMenu();
     }
     indexNodes() {
         this.svg.querySelectorAll('g.node').forEach((g) => {
@@ -177,20 +182,63 @@ class GraphHighlighter {
         });
     }
     wireLock() {
-        const lockSelect = document.getElementById('wp-lock');
+        const lockSelect = this.lockSelect();
         if (lockSelect === null)
             return;
         lockSelect.addEventListener('change', () => {
-            this.locked = lockSelect.value === '' ? null : lockSelect.value;
-            if (this.locked === null) {
-                this.clear();
-            }
-            else {
-                const g = this.nodeByName.get(this.locked);
-                if (g !== undefined)
-                    this.highlight(this.locked, g);
+            this.applyLock(lockSelect.value === '' ? null : lockSelect.value);
+        });
+    }
+    lockSelect() {
+        return document.getElementById('wp-lock');
+    }
+    /** True when `name` is the box the page is currently locked on — what the menu labels itself by. */
+    isLocked(name) {
+        return this.locked === name;
+    }
+    /**
+     * THE one lock entry point, so the dropdown and the node menu can never disagree: it sets the
+     * dropdown's selection, re-highlights, and re-filters the cards whichever of the two asked.
+     * `null` is "All (no lock)".
+     */
+    setLock(name) {
+        const lockSelect = this.lockSelect();
+        if (lockSelect !== null)
+            lockSelect.value = name === null ? '' : name;
+        this.applyLock(name);
+    }
+    applyLock(name) {
+        this.locked = name;
+        if (name === null) {
+            this.clear();
+        }
+        else {
+            const g = this.nodeByName.get(name);
+            if (g !== undefined)
+                this.highlight(name, g);
+        }
+        this.filterCards();
+    }
+    /**
+     * Every box opens the floating menu (the shared one both generated graphs use). "View Design" is
+     * only built when that project actually HAS a committed design.html; the bottom item is always
+     * Lock or Unlock, whichever applies to this box right now.
+     */
+    wireMenu() {
+        const designs = new Map();
+        for (const link of __DESIGN_LINKS__)
+            designs.set(link.nodeId, link.href);
+        WpNodeMenu.wire(this.svg, (name) => {
+            const items = [];
+            const href = designs.get(name);
+            if (href !== undefined) {
+                items.push(new WpNodeMenuItem('View Design', () => { window.open(href, '_blank'); }));
             }
-            this.filterCards();
+            const locked = this.isLocked(name);
+            items.push(new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', () => {
+                this.setLock(locked ? null : name);
+            }));
+            return items;
         });
     }
     /**

package/src/lib/graph-visualizer.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-visualizer.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-visualizer.client.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Browser-side script for architecture/dependencies.html.\n *\n * graph-visualizer.ts reads this file's COMPILED output with readFileSync, substitutes the DOT\n * placeholder (see viz-client-globals.d.ts) with the JSON-encoded Graphviz DOT, and inlines the result into a <script> tag. So it\n * runs in a browser, never in node — but it is ordinary TypeScript, compiled in place by tsc exactly\n * like the package's bin entry points, and linted like every other file here.\n *\n * IT USED TO BE A COMMITTED .js ASSET, exempted from `no-js-files`, and its own header said why: so the\n * dim/highlight/lock logic \"can define ordinary browser functions without tripping the TypeScript lint\n * rules\". That is a file existing to dodge the rules — the same anti-pattern as the bin shims this repo\n * deleted, and the same cure applies. The logic is a CLASS now, which is what `no-function-outside-class`\n * was asking for all along; nothing needed a disable.\n *\n * Behaviour, unchanged: after Viz renders the SVG, hovering a box dims the rest and lights its full\n * ancestor+descendant chain; the #wp-lock dropdown PINS one box's chain (the dim survives mouse-leave)\n * and filters the responsibilities cards below the graph to just that chain. \"All\" clears the lock.\n */\n\n// The DOT placeholder and the `Viz` global are declared once in viz-client-globals.d.ts — both\n// scripts share a global scope, so they cannot each declare them. Do NOT spell the placeholder token\n// in a comment: the inliner is a blind split/join, so every literal occurrence gets the whole DOT.\n\n/**\n * The class graph-visualizer.ts stamps on the invisible rank anchors, spacer bands and ordering\n * edges that pin each level to its own row. They are layout scaffolding, not architecture, so the\n * indexes below skip them: an anchor must never be walkable as a dependency, or hovering one box\n * would light boxes it has nothing to do with.\n *\n * Graphviz drops `style=invis` elements from its SVG entirely (verified against the emitted SVG),\n * so today nothing carrying this class reaches the DOM at all. The skip is the guarantee that the\n * scaffolding stays inert if that ever stops being true — the DOT is the only place that decides\n * what is scaffolding, and it says so with this class.\n */\nconst LAYOUT_CLASS = 'wp-layout';\n\n/** One traversal direction: the edges to light, and the nodes to walk on to. */\nclass Direction {\n    constructor(\n        readonly nodes: Map<string, Set<string>>,\n        readonly edges: Map<string, Set<Element>>,\n    ) {}\n}\n\n/**\n * Indexes the rendered SVG and drives the dim/highlight/lock interaction.\n *\n * The adjacency is DIRECTED and kept as two maps per axis: `in*` is what points AT a node (ancestors,\n * walked upward) and `out*` is what it points to (dependencies, walked downward). Highlighting walks\n * both, so a hovered box lights its entire chain in both directions rather than just its neighbours.\n */\nclass GraphHighlighter {\n    private readonly nodeByName = new Map<string, SVGGElement>();\n    private readonly inEdges = new Map<string, Set<Element>>();\n    private readonly outEdges = new Map<string, Set<Element>>();\n    private readonly inNodes = new Map<string, Set<string>>();\n    private readonly outNodes = new Map<string, Set<string>>();\n\n    /**\n     * The box the dropdown pinned, or null. Hover still works on top of a lock — leaving a box\n     * restores the LOCKED view instead of clearing, so the pinned subgraph stays visible while you\n     * scroll down to its responsibility cards.\n     */\n    private locked: string | null = null;\n\n    constructor(private readonly svg: SVGSVGElement) {}\n\n    /** Index the SVG, then wire hover and the lock dropdown. */\n    wire(): void {\n        this.indexNodes();\n        this.indexEdges();\n        this.wireHover();\n        this.wireLock();\n    }\n\n    private indexNodes(): void {\n        this.svg.querySelectorAll('g.node').forEach((g: Element): void => {\n            if (g.classList.contains(LAYOUT_CLASS)) return;\n            const title = g.querySelector('title');\n            if (title !== null && title.textContent !== null) {\n                this.nodeByName.set(title.textContent.trim(), g as SVGGElement);\n            }\n        });\n    }\n\n    private indexEdges(): void {\n        this.svg.querySelectorAll('g.edge').forEach((edge: Element): void => {\n            if (edge.classList.contains(LAYOUT_CLASS)) return;\n            const title = edge.querySelector('title');\n            const text = title === null ? null : title.textContent;\n            if (text === null) return;\n            const idx = text.indexOf('->');\n            if (idx < 0) return;\n            const from = text.slice(0, idx).trim();\n            const to = text.slice(idx + 2).trim();\n            this.ensureEdges(this.outEdges, from).add(edge);\n            this.ensureEdges(this.inEdges, to).add(edge);\n            this.ensureNodes(this.outNodes, from).add(to);\n            this.ensureNodes(this.inNodes, to).add(from);\n        });\n    }\n\n    private ensureEdges(map: Map<string, Set<Element>>, key: string): Set<Element> {\n        const existing = map.get(key);\n        if (existing !== undefined) return existing;\n        const created = new Set<Element>();\n        map.set(key, created);\n        return created;\n    }\n\n    private ensureNodes(map: Map<string, Set<string>>, key: string): Set<string> {\n        const existing = map.get(key);\n        if (existing !== undefined) return existing;\n        const created = new Set<string>();\n        map.set(key, created);\n        return created;\n    }\n\n    private clear(): void {\n        this.svg.classList.remove('wp-dim');\n        this.svg.querySelectorAll('.wp-focus, .wp-neighbor, .wp-hl').forEach((el: Element): void => {\n            el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl');\n        });\n    }\n\n    /**\n     * Dim everything, then transitively light ancestors and descendants of `name`: edges reached get\n     * `wp-hl`, boxes get `wp-neighbor`. The `visited` set is what makes a cyclic graph terminate.\n     */\n    private highlight(name: string, focusEl: SVGGElement): void {\n        this.clear();\n        this.svg.classList.add('wp-dim');\n        focusEl.classList.add('wp-focus');\n        const directions = [\n            new Direction(this.inNodes, this.inEdges),\n            new Direction(this.outNodes, this.outEdges),\n        ];\n        for (const dir of directions) this.walk(name, dir);\n    }\n\n    private walk(start: string, dir: Direction): void {\n        const visited = new Set<string>();\n        const stack = [start];\n        while (stack.length > 0) {\n            const cur = stack.pop() as string;\n            const edges = dir.edges.get(cur);\n            if (edges !== undefined) {\n                edges.forEach((e: Element): void => { e.classList.add('wp-hl'); });\n            }\n            const next = dir.nodes.get(cur);\n            if (next === undefined) continue;\n            next.forEach((name: string): void => {\n                if (visited.has(name)) return;\n                visited.add(name);\n                stack.push(name);\n                const g = this.nodeByName.get(name);\n                if (g !== undefined) g.classList.add('wp-neighbor');\n            });\n        }\n    }\n\n    /** Leaving a box restores the locked view rather than clearing it outright. */\n    private relight(): void {\n        if (this.locked === null) {\n            this.clear();\n            return;\n        }\n        const g = this.nodeByName.get(this.locked);\n        if (g !== undefined) this.highlight(this.locked, g);\n    }\n\n    private wireHover(): void {\n        this.nodeByName.forEach((g: SVGGElement, name: string): void => {\n            g.addEventListener('mouseenter', (): void => { this.highlight(name, g); });\n            g.addEventListener('mouseleave', (): void => { this.relight(); });\n        });\n    }\n\n    private wireLock(): void {\n        const lockSelect = document.getElementById('wp-lock') as HTMLSelectElement | null;\n        if (lockSelect === null) return;\n        lockSelect.addEventListener('change', (): void => {\n            this.locked = lockSelect.value === '' ? null : lockSelect.value;\n            if (this.locked === null) {\n                this.clear();\n            } else {\n                const g = this.nodeByName.get(this.locked);\n                if (g !== undefined) this.highlight(this.locked, g);\n            }\n            this.filterCards();\n        });\n    }\n\n    /**\n     * Filter the responsibility cards to the locked box's chain by READING BACK the\n     * `.wp-focus`/`.wp-neighbor` classes highlight() just set — so there is no second graph walk and\n     * the cards can never disagree with the picture.\n     */\n    private filterCards(): void {\n        const lit = new Set<string>();\n        if (this.locked !== null) {\n            this.svg.querySelectorAll('.wp-focus, .wp-neighbor').forEach((el: Element): void => {\n                const title = el.querySelector('title');\n                if (title !== null && title.textContent !== null) lit.add(title.textContent.trim());\n            });\n        }\n        document.querySelectorAll('.wp-resp-card').forEach((card: Element): void => {\n            const name = card.getAttribute('data-node');\n            const visible = this.locked === null || (name !== null && lit.has(name));\n            card.classList.toggle('wp-hidden', !visible);\n        });\n    }\n}\n\n/** Renders the DOT and hands the SVG to the highlighter. Reports a failure into the page, not just the console. */\nclass GraphPage {\n    render(): void {\n        Viz.instance()\n            .then((viz: VizInstance): void => {\n                const element = viz.renderSVGElement(__DOT__);\n                const host = document.getElementById('graph');\n                if (host === null) return;\n                host.appendChild(element);\n                new GraphHighlighter(element).wire();\n            })\n            // webpieces-disable no-any-unknown -- a promise rejection reason is untyped BY THE LANGUAGE (any value can be thrown), and this browser script cannot import the repo's toError helper; it is stringified, never dereferenced\n            .catch((err: unknown): void => {\n                console.error(err);\n                const host = document.getElementById('graph');\n                if (host !== null) host.innerHTML = '<pre>' + String(err) + '</pre>';\n            });\n    }\n}\n\nnew GraphPage().render();\n"]}
+{"version":3,"file":"graph-visualizer.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-visualizer.client.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Browser-side script for architecture/dependencies.html.\n *\n * graph-visualizer.ts reads this file's COMPILED output with readFileSync, substitutes the DOT\n * placeholder (see viz-client-globals.d.ts) with the JSON-encoded Graphviz DOT, and inlines the result into a <script> tag. So it\n * runs in a browser, never in node — but it is ordinary TypeScript, compiled in place by tsc exactly\n * like the package's bin entry points, and linted like every other file here.\n *\n * IT USED TO BE A COMMITTED .js ASSET, exempted from `no-js-files`, and its own header said why: so the\n * dim/highlight/lock logic \"can define ordinary browser functions without tripping the TypeScript lint\n * rules\". That is a file existing to dodge the rules — the same anti-pattern as the bin shims this repo\n * deleted, and the same cure applies. The logic is a CLASS now, which is what `no-function-outside-class`\n * was asking for all along; nothing needed a disable.\n *\n * Behaviour: after Viz renders the SVG, hovering a box dims the rest and lights its full\n * ancestor+descendant chain; the #wp-lock dropdown PINS one box's chain (the dim survives mouse-leave)\n * and filters the responsibilities cards below the graph to just that chain. \"All\" clears the lock.\n *\n * CLICKING a box opens the shared floating node menu (graph-node-menu.ts, the same menu every\n * project's design.html uses) — \"View Design\" only for a project that HAS a design.html, then\n * Lock/Unlock. Menu and dropdown are one lock: both go through setLock(), so each reflects the other.\n */\n\n// The DOT placeholder and the `Viz` global are declared once in viz-client-globals.d.ts — both\n// scripts share a global scope, so they cannot each declare them. Do NOT spell the placeholder token\n// in a comment: the inliner is a blind split/join, so every literal occurrence gets the whole DOT.\n\n/**\n * The class graph-visualizer.ts stamps on the invisible rank anchors, spacer bands and ordering\n * edges that pin each level to its own row. They are layout scaffolding, not architecture, so the\n * indexes below skip them: an anchor must never be walkable as a dependency, or hovering one box\n * would light boxes it has nothing to do with.\n *\n * Graphviz drops `style=invis` elements from its SVG entirely (verified against the emitted SVG),\n * so today nothing carrying this class reaches the DOM at all. The skip is the guarantee that the\n * scaffolding stays inert if that ever stops being true — the DOT is the only place that decides\n * what is scaffolding, and it says so with this class.\n */\nconst LAYOUT_CLASS = 'wp-layout';\n\n/** One traversal direction: the edges to light, and the nodes to walk on to. */\nclass Direction {\n    constructor(\n        readonly nodes: Map<string, Set<string>>,\n        readonly edges: Map<string, Set<Element>>,\n    ) {}\n}\n\n/**\n * Indexes the rendered SVG and drives the dim/highlight/lock interaction.\n *\n * The adjacency is DIRECTED and kept as two maps per axis: `in*` is what points AT a node (ancestors,\n * walked upward) and `out*` is what it points to (dependencies, walked downward). Highlighting walks\n * both, so a hovered box lights its entire chain in both directions rather than just its neighbours.\n */\nclass GraphHighlighter {\n    private readonly nodeByName = new Map<string, SVGGElement>();\n    private readonly inEdges = new Map<string, Set<Element>>();\n    private readonly outEdges = new Map<string, Set<Element>>();\n    private readonly inNodes = new Map<string, Set<string>>();\n    private readonly outNodes = new Map<string, Set<string>>();\n\n    /**\n     * The box the dropdown pinned, or null. Hover still works on top of a lock — leaving a box\n     * restores the LOCKED view instead of clearing, so the pinned subgraph stays visible while you\n     * scroll down to its responsibility cards.\n     */\n    private locked: string | null = null;\n\n    constructor(private readonly svg: SVGSVGElement) {}\n\n    /** Index the SVG, then wire hover, the lock dropdown, and the per-node floating menu. */\n    wire(): void {\n        this.indexNodes();\n        this.indexEdges();\n        this.wireHover();\n        this.wireLock();\n        this.wireMenu();\n    }\n\n    private indexNodes(): void {\n        this.svg.querySelectorAll('g.node').forEach((g: Element): void => {\n            if (g.classList.contains(LAYOUT_CLASS)) return;\n            const title = g.querySelector('title');\n            if (title !== null && title.textContent !== null) {\n                this.nodeByName.set(title.textContent.trim(), g as SVGGElement);\n            }\n        });\n    }\n\n    private indexEdges(): void {\n        this.svg.querySelectorAll('g.edge').forEach((edge: Element): void => {\n            if (edge.classList.contains(LAYOUT_CLASS)) return;\n            const title = edge.querySelector('title');\n            const text = title === null ? null : title.textContent;\n            if (text === null) return;\n            const idx = text.indexOf('->');\n            if (idx < 0) return;\n            const from = text.slice(0, idx).trim();\n            const to = text.slice(idx + 2).trim();\n            this.ensureEdges(this.outEdges, from).add(edge);\n            this.ensureEdges(this.inEdges, to).add(edge);\n            this.ensureNodes(this.outNodes, from).add(to);\n            this.ensureNodes(this.inNodes, to).add(from);\n        });\n    }\n\n    private ensureEdges(map: Map<string, Set<Element>>, key: string): Set<Element> {\n        const existing = map.get(key);\n        if (existing !== undefined) return existing;\n        const created = new Set<Element>();\n        map.set(key, created);\n        return created;\n    }\n\n    private ensureNodes(map: Map<string, Set<string>>, key: string): Set<string> {\n        const existing = map.get(key);\n        if (existing !== undefined) return existing;\n        const created = new Set<string>();\n        map.set(key, created);\n        return created;\n    }\n\n    private clear(): void {\n        this.svg.classList.remove('wp-dim');\n        this.svg.querySelectorAll('.wp-focus, .wp-neighbor, .wp-hl').forEach((el: Element): void => {\n            el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl');\n        });\n    }\n\n    /**\n     * Dim everything, then transitively light ancestors and descendants of `name`: edges reached get\n     * `wp-hl`, boxes get `wp-neighbor`. The `visited` set is what makes a cyclic graph terminate.\n     */\n    private highlight(name: string, focusEl: SVGGElement): void {\n        this.clear();\n        this.svg.classList.add('wp-dim');\n        focusEl.classList.add('wp-focus');\n        const directions = [\n            new Direction(this.inNodes, this.inEdges),\n            new Direction(this.outNodes, this.outEdges),\n        ];\n        for (const dir of directions) this.walk(name, dir);\n    }\n\n    private walk(start: string, dir: Direction): void {\n        const visited = new Set<string>();\n        const stack = [start];\n        while (stack.length > 0) {\n            const cur = stack.pop() as string;\n            const edges = dir.edges.get(cur);\n            if (edges !== undefined) {\n                edges.forEach((e: Element): void => { e.classList.add('wp-hl'); });\n            }\n            const next = dir.nodes.get(cur);\n            if (next === undefined) continue;\n            next.forEach((name: string): void => {\n                if (visited.has(name)) return;\n                visited.add(name);\n                stack.push(name);\n                const g = this.nodeByName.get(name);\n                if (g !== undefined) g.classList.add('wp-neighbor');\n            });\n        }\n    }\n\n    /** Leaving a box restores the locked view rather than clearing it outright. */\n    private relight(): void {\n        if (this.locked === null) {\n            this.clear();\n            return;\n        }\n        const g = this.nodeByName.get(this.locked);\n        if (g !== undefined) this.highlight(this.locked, g);\n    }\n\n    private wireHover(): void {\n        this.nodeByName.forEach((g: SVGGElement, name: string): void => {\n            g.addEventListener('mouseenter', (): void => { this.highlight(name, g); });\n            g.addEventListener('mouseleave', (): void => { this.relight(); });\n        });\n    }\n\n    private wireLock(): void {\n        const lockSelect = this.lockSelect();\n        if (lockSelect === null) return;\n        lockSelect.addEventListener('change', (): void => {\n            this.applyLock(lockSelect.value === '' ? null : lockSelect.value);\n        });\n    }\n\n    private lockSelect(): HTMLSelectElement | null {\n        return document.getElementById('wp-lock') as HTMLSelectElement | null;\n    }\n\n    /** True when `name` is the box the page is currently locked on — what the menu labels itself by. */\n    isLocked(name: string): boolean {\n        return this.locked === name;\n    }\n\n    /**\n     * THE one lock entry point, so the dropdown and the node menu can never disagree: it sets the\n     * dropdown's selection, re-highlights, and re-filters the cards whichever of the two asked.\n     * `null` is \"All (no lock)\".\n     */\n    setLock(name: string | null): void {\n        const lockSelect = this.lockSelect();\n        if (lockSelect !== null) lockSelect.value = name === null ? '' : name;\n        this.applyLock(name);\n    }\n\n    private applyLock(name: string | null): void {\n        this.locked = name;\n        if (name === null) {\n            this.clear();\n        } else {\n            const g = this.nodeByName.get(name);\n            if (g !== undefined) this.highlight(name, g);\n        }\n        this.filterCards();\n    }\n\n    /**\n     * Every box opens the floating menu (the shared one both generated graphs use). \"View Design\" is\n     * only built when that project actually HAS a committed design.html; the bottom item is always\n     * Lock or Unlock, whichever applies to this box right now.\n     */\n    private wireMenu(): void {\n        const designs = new Map<string, string>();\n        for (const link of __DESIGN_LINKS__) designs.set(link.nodeId, link.href);\n        WpNodeMenu.wire(this.svg, (name: string): WpNodeMenuItem[] => {\n            const items: WpNodeMenuItem[] = [];\n            const href = designs.get(name);\n            if (href !== undefined) {\n                items.push(new WpNodeMenuItem('View Design', (): void => { window.open(href, '_blank'); }));\n            }\n            const locked = this.isLocked(name);\n            items.push(new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', (): void => {\n                this.setLock(locked ? null : name);\n            }));\n            return items;\n        });\n    }\n\n    /**\n     * Filter the responsibility cards to the locked box's chain by READING BACK the\n     * `.wp-focus`/`.wp-neighbor` classes highlight() just set — so there is no second graph walk and\n     * the cards can never disagree with the picture.\n     */\n    private filterCards(): void {\n        const lit = new Set<string>();\n        if (this.locked !== null) {\n            this.svg.querySelectorAll('.wp-focus, .wp-neighbor').forEach((el: Element): void => {\n                const title = el.querySelector('title');\n                if (title !== null && title.textContent !== null) lit.add(title.textContent.trim());\n            });\n        }\n        document.querySelectorAll('.wp-resp-card').forEach((card: Element): void => {\n            const name = card.getAttribute('data-node');\n            const visible = this.locked === null || (name !== null && lit.has(name));\n            card.classList.toggle('wp-hidden', !visible);\n        });\n    }\n}\n\n/** Renders the DOT and hands the SVG to the highlighter. Reports a failure into the page, not just the console. */\nclass GraphPage {\n    render(): void {\n        Viz.instance()\n            .then((viz: VizInstance): void => {\n                const element = viz.renderSVGElement(__DOT__);\n                const host = document.getElementById('graph');\n                if (host === null) return;\n                host.appendChild(element);\n                new GraphHighlighter(element).wire();\n            })\n            // webpieces-disable no-any-unknown -- a promise rejection reason is untyped BY THE LANGUAGE (any value can be thrown), and this browser script cannot import the repo's toError helper; it is stringified, never dereferenced\n            .catch((err: unknown): void => {\n                console.error(err);\n                const host = document.getElementById('graph');\n                if (host !== null) host.innerHTML = '<pre>' + String(err) + '</pre>';\n            });\n    }\n}\n\nnew GraphPage().render();\n"]}

package/src/lib/graph-visualizer.d.ts

@@ -10,6 +10,18 @@
  * graph can't reach.
  */
 import type { EnhancedGraph } from './graph-sorter';
+/**
+ * One node's design page, handed to the browser so the node menu can offer "View Design" for the
+ * boxes that HAVE one and omit the item entirely for the boxes that do not.
+ *
+ * The link is data on the PAGE now, not a `URL=` attribute in the DOT: a URL made viz.js wrap the
+ * box in an `<a>` and clicking navigated straight out, which the menu replaces.
+ */
+export declare class DesignLink {
+    readonly nodeId: string;
+    readonly href: string;
+    constructor(nodeId: string, href: string);
+}
 export declare class VisualizationPaths {
     htmlPath: string;
     constructor(htmlPath: string);
@@ -20,6 +32,8 @@ export declare class VisualizationPaths {
  * replaced by the entire DOT too, bloating every generated page.
  */
 export declare const CLIENT_DOT_PLACEHOLDER: string;
+/** Same contract as CLIENT_DOT_PLACEHOLDER, for the node → design.html links the menu offers. */
+export declare const CLIENT_DESIGN_LINKS_PLACEHOLDER: string;
 /**
  * Read a compiled browser client sitting beside this file.
  *
@@ -34,6 +48,8 @@ export declare class GraphVisualizer {
     private readonly responsibilities;
     private readonly bandLayout;
     private readonly cycles;
+    /** The ONE floating-node-menu implementation, shared with the per-project design pages. */
+    private readonly nodeMenu;
     /**
      * How to obtain the browser client's text. Injected so HTML generation does not depend on BUILD
      * ORDER: the default reads the compiled sibling, which exists in the tarball and in dist but NOT in
@@ -91,11 +107,16 @@ export declare class GraphVisualizer {
      */
     private labelledApis;
     /**
-     * Click-through href for a node: the project's committed design.html, made
+     * Href for a node's design page: the project's committed design.html, made
      * relative to architecture/dependencies.html. Returns null when the project
-     * has no generated DI design (no design.json → no clickable design page).
+     * has no generated DI design (no design.json → no design page exists).
      */
     private designHtmlHref;
+    /**
+     * The design pages that EXIST, one entry per visible node that has one. A node absent from this
+     * list gets no "View Design" item at all — the item is never rendered dead or greyed out.
+     */
+    designLinks(graph: EnhancedGraph): DesignLink[];
     /**
      * Generate Graphviz DOT format from the graph
      */
@@ -122,7 +143,7 @@ export declare class GraphVisualizer {
     /**
      * Generate interactive HTML with embedded SVG using viz.js
      */
-    generateHTML(dot: string, title?: string, lockControl?: string, responsibilitiesHtml?: string): string;
+    generateHTML(dot: string, links: DesignLink[], title?: string, lockControl?: string, responsibilitiesHtml?: string): string;
     /**
      * The lock control (a single-select dropdown, rendered below the legend).
      * Picking a module LOCKS the graph into that box's hover view — its full
@@ -154,8 +175,9 @@ export declare class GraphVisualizer {
      * architecture/dependencies.html, next to dependencies.json.
      *
      * This is a checked-in artifact, regenerated deterministically by
-     * architecture:generate so the boxes stay clickable into each project's
-     * design.html. The DOT is embedded in the HTML (rendered client-side by
+     * architecture:generate so every box keeps its menu, and the "View Design"
+     * item keeps pointing at each project's committed design.html as designs
+     * come and go. The DOT is embedded in the HTML (rendered client-side by
      * viz.js). Output is deterministic (sorted graph in → same bytes out) so git
      * only shows a diff when the architecture actually changed.
      */