@webpieces/nx-webpieces-rules 0.4.577 → 0.4.579

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webpieces/nx-webpieces-rules",
-  "version": "0.4.577",
+  "version": "0.4.579",
   "description": "Nx-specific webpieces validation rules and graph tooling. Bundles all @webpieces rule packages with Nx graph validators and an inference plugin.",
   "type": "commonjs",
   "main": "./src/index.js",
@@ -18,11 +18,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@webpieces/ai-hook-rules": "0.4.577",
-    "@webpieces/code-rules": "0.4.577",
-    "@webpieces/eslint-rules": "0.4.577",
-    "@webpieces/pr-gate": "0.4.577",
-    "@webpieces/rules-config": "0.4.577",
+    "@webpieces/ai-hook-rules": "0.4.579",
+    "@webpieces/code-rules": "0.4.579",
+    "@webpieces/eslint-rules": "0.4.579",
+    "@webpieces/pr-gate": "0.4.579",
+    "@webpieces/rules-config": "0.4.579",
     "madge": "8.0.0"
   },
   "peerDependencies": {

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

@@ -8,7 +8,7 @@
  *
  * Each card carries `data-node="<shortName>"` matching the graph box's title, so
  * the page script can filter the list to just the locked box's chain (see
- * graph-visualizer.client.js). The summary paragraph is the `shortDescription`
+ * graph-visualizer.client.ts). The summary paragraph is the `shortDescription`
  * already on each graph entry; the expanded body is the rendered markdown file.
  */
 import type { EnhancedGraph } from './graph-sorter';

package/src/lib/graph-responsibilities.js

@@ -9,7 +9,7 @@
  *
  * Each card carries `data-node="<shortName>"` matching the graph box's title, so
  * the page script can filter the list to just the locked box's chain (see
- * graph-visualizer.client.js). The summary paragraph is the `shortDescription`
+ * graph-visualizer.client.ts). The summary paragraph is the `shortDescription`
  * already on each graph entry; the expanded body is the rendered markdown file.
  */
 Object.defineProperty(exports, "__esModule", { value: true });

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=\"<shortName>\"` 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.js). 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        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(shortName)}\">` +\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=\"<shortName>\"` 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        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(shortName)}\">` +\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"]}

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

@@ -0,0 +1,55 @@
+/** One traversal direction: the edges to light, and the nodes to walk on to. */
+declare class Direction {
+    readonly nodes: Map<string, Set<string>>;
+    readonly edges: Map<string, Set<Element>>;
+    constructor(nodes: Map<string, Set<string>>, edges: Map<string, Set<Element>>);
+}
+/**
+ * Indexes the rendered SVG and drives the dim/highlight/lock interaction.
+ *
+ * The adjacency is DIRECTED and kept as two maps per axis: `in*` is what points AT a node (ancestors,
+ * walked upward) and `out*` is what it points to (dependencies, walked downward). Highlighting walks
+ * both, so a hovered box lights its entire chain in both directions rather than just its neighbours.
+ */
+declare class GraphHighlighter {
+    private readonly svg;
+    private readonly nodeByName;
+    private readonly inEdges;
+    private readonly outEdges;
+    private readonly inNodes;
+    private readonly outNodes;
+    /**
+     * The box the dropdown pinned, or null. Hover still works on top of a lock — leaving a box
+     * restores the LOCKED view instead of clearing, so the pinned subgraph stays visible while you
+     * scroll down to its responsibility cards.
+     */
+    private locked;
+    constructor(svg: SVGSVGElement);
+    /** Index the SVG, then wire hover and the lock dropdown. */
+    wire(): void;
+    private indexNodes;
+    private indexEdges;
+    private ensureEdges;
+    private ensureNodes;
+    private clear;
+    /**
+     * Dim everything, then transitively light ancestors and descendants of `name`: edges reached get
+     * `wp-hl`, boxes get `wp-neighbor`. The `visited` set is what makes a cyclic graph terminate.
+     */
+    private highlight;
+    private walk;
+    /** Leaving a box restores the locked view rather than clearing it outright. */
+    private relight;
+    private wireHover;
+    private wireLock;
+    /**
+     * 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
+     * the cards can never disagree with the picture.
+     */
+    private filterCards;
+}
+/** Renders the DOT and hands the SVG to the highlighter. Reports a failure into the page, not just the console. */
+declare class GraphPage {
+    render(): void;
+}

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

@@ -1,130 +1,223 @@
+"use strict";
 /*
- * Browser-side script for architecture/dependencies.html (inlined into a <script>
- * tag by graph-visualizer.ts, which replaces the __DOT__ placeholder with the
- * JSON-encoded Graphviz DOT). Kept as a plain .js asset — NOT a TypeScript
- * template literal — so the dim/highlight/lock logic can define ordinary browser
- * functions without tripping the TypeScript lint rules that scan .ts template
- * strings. Copied into dist by the build's assets glob and read via readFileSync.
+ * Browser-side script for architecture/dependencies.html.
  *
- * After Viz renders the SVG, wireHoverHighlight indexes nodes/edges and:
- *   - hovering a box dims the rest and lights its full ancestor+descendant chain;
- *   - the #wp-lock dropdown LOCKS one box's chain (dim persists on mouse-leave)
- *     and filters the responsibilities cards below the graph to just that chain.
- *     "All" (empty value) clears the lock and shows every card.
+ * graph-visualizer.ts reads this file's COMPILED output with readFileSync, substitutes the DOT
+ * placeholder (see viz-client-globals.d.ts) with the JSON-encoded Graphviz DOT, and inlines the result into a <script> tag. So it
+ * runs in a browser, never in node — but it is ordinary TypeScript, compiled in place by tsc exactly
+ * like the package's bin entry points, and linted like every other file here.
+ *
+ * IT USED TO BE A COMMITTED .js ASSET, exempted from `no-js-files`, and its own header said why: so the
+ * dim/highlight/lock logic "can define ordinary browser functions without tripping the TypeScript lint
+ * rules". That is a file existing to dodge the rules — the same anti-pattern as the bin shims this repo
+ * 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
+ * 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.
  */
-(function () {
-    var dot = __DOT__;
-    // @viz-js/viz v3: instance() resolves the WASM-backed renderer (v2 used `new Viz()`), and
-    // renderSVGElement is then SYNCHRONOUS (v2's returned a promise) — hence the element is used
-    // directly inside this then() rather than chained through another one.
-    Viz.instance()
-        .then(function (viz) {
-            var element = viz.renderSVGElement(dot);
-            document.getElementById('graph').appendChild(element);
-            wireHoverHighlight(element);
-        })
-        .catch(function (err) {
-            console.error(err);
-            document.getElementById('graph').innerHTML = '<pre>' + err + '</pre>';
+// 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
+// in a comment: the inliner is a blind split/join, so every literal occurrence gets the whole DOT.
+/** One traversal direction: the edges to light, and the nodes to walk on to. */
+class Direction {
+    nodes;
+    edges;
+    constructor(nodes, edges) {
+        this.nodes = nodes;
+        this.edges = edges;
+    }
+}
+/**
+ * Indexes the rendered SVG and drives the dim/highlight/lock interaction.
+ *
+ * The adjacency is DIRECTED and kept as two maps per axis: `in*` is what points AT a node (ancestors,
+ * walked upward) and `out*` is what it points to (dependencies, walked downward). Highlighting walks
+ * both, so a hovered box lights its entire chain in both directions rather than just its neighbours.
+ */
+class GraphHighlighter {
+    svg;
+    nodeByName = new Map();
+    inEdges = new Map();
+    outEdges = new Map();
+    inNodes = new Map();
+    outNodes = new Map();
+    /**
+     * The box the dropdown pinned, or null. Hover still works on top of a lock — leaving a box
+     * restores the LOCKED view instead of clearing, so the pinned subgraph stays visible while you
+     * scroll down to its responsibility cards.
+     */
+    locked = null;
+    constructor(svg) {
+        this.svg = svg;
+    }
+    /** Index the SVG, then wire hover and the lock dropdown. */
+    wire() {
+        this.indexNodes();
+        this.indexEdges();
+        this.wireHover();
+        this.wireLock();
+    }
+    indexNodes() {
+        this.svg.querySelectorAll('g.node').forEach((g) => {
+            const title = g.querySelector('title');
+            if (title !== null && title.textContent !== null) {
+                this.nodeByName.set(title.textContent.trim(), g);
+            }
         });
-
-    function wireHoverHighlight(svg) {
-        var nodeByName = new Map();
-        svg.querySelectorAll('g.node').forEach(function (g) {
-            var t = g.querySelector('title');
-            if (t) nodeByName.set(t.textContent.trim(), g);
+    }
+    indexEdges() {
+        this.svg.querySelectorAll('g.edge').forEach((edge) => {
+            const title = edge.querySelector('title');
+            const text = title === null ? null : title.textContent;
+            if (text === null)
+                return;
+            const idx = text.indexOf('->');
+            if (idx < 0)
+                return;
+            const from = text.slice(0, idx).trim();
+            const to = text.slice(idx + 2).trim();
+            this.ensureEdges(this.outEdges, from).add(edge);
+            this.ensureEdges(this.inEdges, to).add(edge);
+            this.ensureNodes(this.outNodes, from).add(to);
+            this.ensureNodes(this.inNodes, to).add(from);
         });
-        // Directed adjacency: in* = entering (up/ancestors), out* = leaving (down/deps).
-        var inEdges = new Map(), outEdges = new Map(), inNodes = new Map(), outNodes = new Map();
-        function ensure(map, key) {
-            var v = map.get(key);
-            if (!v) { v = new Set(); map.set(key, v); }
-            return v;
-        }
-        svg.querySelectorAll('g.edge').forEach(function (edge) {
-            var t = edge.querySelector('title');
-            if (!t) return;
-            var idx = t.textContent.indexOf('->');
-            if (idx < 0) return;
-            var from = t.textContent.slice(0, idx).trim();
-            var to = t.textContent.slice(idx + 2).trim();
-            ensure(outEdges, from).add(edge);
-            ensure(inEdges, to).add(edge);
-            ensure(outNodes, from).add(to);
-            ensure(inNodes, to).add(from);
+    }
+    ensureEdges(map, key) {
+        const existing = map.get(key);
+        if (existing !== undefined)
+            return existing;
+        const created = new Set();
+        map.set(key, created);
+        return created;
+    }
+    ensureNodes(map, key) {
+        const existing = map.get(key);
+        if (existing !== undefined)
+            return existing;
+        const created = new Set();
+        map.set(key, created);
+        return created;
+    }
+    clear() {
+        this.svg.classList.remove('wp-dim');
+        this.svg.querySelectorAll('.wp-focus, .wp-neighbor, .wp-hl').forEach((el) => {
+            el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl');
         });
-        function clear() {
-            svg.classList.remove('wp-dim');
-            svg.querySelectorAll('.wp-focus, .wp-neighbor, .wp-hl').forEach(function (el) {
-                el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl');
-            });
-        }
-        function highlight(name, focusEl) {
-            clear();
-            svg.classList.add('wp-dim');
-            focusEl.classList.add('wp-focus');
-            // Transitively light ancestors (up) then descendants (down): edges
-            // reached -> wp-hl, boxes -> wp-neighbor. visited guards cycles.
-            [[inNodes, inEdges], [outNodes, outEdges]].forEach(function (dir) {
-                var visited = new Set();
-                var stack = [name];
-                while (stack.length) {
-                    var cur = stack.pop();
-                    (dir[1].get(cur) || []).forEach(function (e) { e.classList.add('wp-hl'); });
-                    (dir[0].get(cur) || []).forEach(function (next) {
-                        if (visited.has(next)) return;
-                        visited.add(next);
-                        stack.push(next);
-                        var g = nodeByName.get(next);
-                        if (g) g.classList.add('wp-neighbor');
-                    });
-                }
+    }
+    /**
+     * Dim everything, then transitively light ancestors and descendants of `name`: edges reached get
+     * `wp-hl`, boxes get `wp-neighbor`. The `visited` set is what makes a cyclic graph terminate.
+     */
+    highlight(name, focusEl) {
+        this.clear();
+        this.svg.classList.add('wp-dim');
+        focusEl.classList.add('wp-focus');
+        const directions = [
+            new Direction(this.inNodes, this.inEdges),
+            new Direction(this.outNodes, this.outEdges),
+        ];
+        for (const dir of directions)
+            this.walk(name, dir);
+    }
+    walk(start, dir) {
+        const visited = new Set();
+        const stack = [start];
+        while (stack.length > 0) {
+            const cur = stack.pop();
+            const edges = dir.edges.get(cur);
+            if (edges !== undefined) {
+                edges.forEach((e) => { e.classList.add('wp-hl'); });
+            }
+            const next = dir.nodes.get(cur);
+            if (next === undefined)
+                continue;
+            next.forEach((name) => {
+                if (visited.has(name))
+                    return;
+                visited.add(name);
+                stack.push(name);
+                const g = this.nodeByName.get(name);
+                if (g !== undefined)
+                    g.classList.add('wp-neighbor');
             });
         }
-        // locked = the box the dropdown pinned (or null). Hover still works on top
-        // of a lock; leaving a box restores the locked view instead of clearing, so
-        // the pinned subgraph stays visible as you scroll to its responsibilities.
-        var locked = null;
-        function relight() {
-            if (locked) {
-                var lg = nodeByName.get(locked);
-                if (lg) highlight(locked, lg);
-            } else {
-                clear();
-            }
+    }
+    /** Leaving a box restores the locked view rather than clearing it outright. */
+    relight() {
+        if (this.locked === null) {
+            this.clear();
+            return;
         }
-        nodeByName.forEach(function (g, name) {
-            g.addEventListener('mouseenter', function () { highlight(name, g); });
-            g.addEventListener('mouseleave', relight);
+        const g = this.nodeByName.get(this.locked);
+        if (g !== undefined)
+            this.highlight(this.locked, g);
+    }
+    wireHover() {
+        this.nodeByName.forEach((g, name) => {
+            g.addEventListener('mouseenter', () => { this.highlight(name, g); });
+            g.addEventListener('mouseleave', () => { this.relight(); });
         });
-
-        // Filter the responsibilities cards to the locked box's chain by reading the
-        // .wp-focus/.wp-neighbor classes highlight() just set — no second graph walk.
-        var lockSelect = document.getElementById('wp-lock');
-        function filterCards() {
-            var lit = new Set();
-            if (locked) {
-                svg.querySelectorAll('.wp-focus, .wp-neighbor').forEach(function (el) {
-                    var t = el.querySelector('title');
-                    if (t) lit.add(t.textContent.trim());
-                });
+    }
+    wireLock() {
+        const lockSelect = document.getElementById('wp-lock');
+        if (lockSelect === null)
+            return;
+        lockSelect.addEventListener('change', () => {
+            this.locked = lockSelect.value === '' ? null : lockSelect.value;
+            if (this.locked === null) {
+                this.clear();
             }
-            document.querySelectorAll('.wp-resp-card').forEach(function (card) {
-                var nm = card.getAttribute('data-node');
-                card.classList.toggle('wp-hidden', !(!locked || lit.has(nm)));
-            });
-        }
-        if (lockSelect) {
-            lockSelect.addEventListener('change', function () {
-                locked = lockSelect.value || null;
-                if (locked) {
-                    var g = nodeByName.get(locked);
-                    if (g) highlight(locked, g);
-                } else {
-                    clear();
-                }
-                filterCards();
+            else {
+                const g = this.nodeByName.get(this.locked);
+                if (g !== undefined)
+                    this.highlight(this.locked, g);
+            }
+            this.filterCards();
+        });
+    }
+    /**
+     * 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
+     * the cards can never disagree with the picture.
+     */
+    filterCards() {
+        const lit = new Set();
+        if (this.locked !== null) {
+            this.svg.querySelectorAll('.wp-focus, .wp-neighbor').forEach((el) => {
+                const title = el.querySelector('title');
+                if (title !== null && title.textContent !== null)
+                    lit.add(title.textContent.trim());
             });
         }
+        document.querySelectorAll('.wp-resp-card').forEach((card) => {
+            const name = card.getAttribute('data-node');
+            const visible = this.locked === null || (name !== null && lit.has(name));
+            card.classList.toggle('wp-hidden', !visible);
+        });
+    }
+}
+/** Renders the DOT and hands the SVG to the highlighter. Reports a failure into the page, not just the console. */
+class GraphPage {
+    render() {
+        Viz.instance()
+            .then((viz) => {
+            const element = viz.renderSVGElement(__DOT__);
+            const host = document.getElementById('graph');
+            if (host === null)
+                return;
+            host.appendChild(element);
+            new GraphHighlighter(element).wire();
+        })
+            // 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
+            .catch((err) => {
+            console.error(err);
+            const host = document.getElementById('graph');
+            if (host !== null)
+                host.innerHTML = '<pre>' + String(err) + '</pre>';
+        });
     }
-})();
+}
+new GraphPage().render();
+//# sourceMappingURL=graph-visualizer.client.js.map

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

@@ -0,0 +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/** 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            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            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"]}

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

@@ -14,9 +14,31 @@ export declare class VisualizationPaths {
     htmlPath: string;
     constructor(htmlPath: string);
 }
+/**
+ * The token the client scripts carry where the DOT belongs. It must appear EXACTLY ONCE in a compiled
+ * client — the inliner is a blind split/join, so a second occurrence (in a comment, say) would be
+ * replaced by the entire DOT too, bloating every generated page.
+ */
+export declare const CLIENT_DOT_PLACEHOLDER: string;
+/**
+ * Read a compiled browser client sitting beside this file.
+ *
+ * It is generated from the matching `.client.ts` by tsc, so it exists in `dist` and in the published
+ * tarball but NOT in a source checkout. The error says that outright rather than surfacing a bare
+ * ENOENT, because "the build has not run" and "the file is missing" look identical otherwise.
+ */
+export declare function readCompiledClient(name: string): string;
 export declare class GraphVisualizer {
+    private readonly clientJs;
     private readonly names;
     private readonly responsibilities;
+    /**
+     * 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
+     * a source checkout (the source there is .client.ts). A unit test running from source supplies the
+     * text itself rather than requiring the package to have been built first.
+     */
+    constructor(clientJs?: () => string);
     /**
      * A project tagged `drawOnGraph:false` is hidden from the rendered graph —
      * its node, its rank placement, its dropdown option, its responsibilities
@@ -100,11 +122,12 @@ export declare class GraphVisualizer {
     private borderItems;
     private edgeItems;
     /**
-     * The page script. The browser code lives in graph-visualizer.client.js (a
-     * plain .js asset, NOT a TS template literal) so its dim/highlight/lock
-     * functions can be ordinary browser functions — the TS lint rules that scan
-     * .ts template strings would otherwise forbid them, and browser JS cannot
-     * carry TS return annotations. We inline it and substitute the DOT.
+     * The page script. The browser code lives in graph-visualizer.client.ts — real, linted TypeScript
+     * that tsc compiles in place, so what this inlines is its COMPILED .js sitting beside this file.
+     *
+     * The substitution is a blind split/join, which is why the placeholder token must appear EXACTLY
+     * ONCE in the client (never in one of its comments): every literal occurrence would otherwise be
+     * replaced by the whole DOT.
      */
     private script;
     /**