@webpieces/nx-webpieces-rules 0.4.884 → 0.4.886

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

@@ -61,7 +61,9 @@ class Bounds {
 class QueueCylinders {
     static SVG_NS = 'http://www.w3.org/2000/svg';
     applyTo(svg) {
-        svg.querySelectorAll('g.wp_queue').forEach((node) => { this.reshape(node); });
+        svg.querySelectorAll('g.wp_queue').forEach((node) => {
+            this.reshape(node);
+        });
     }
     /**
      * Replace one node's shape elements with a horizontal cylinder sized to its own bounding box.
@@ -82,18 +84,26 @@ class QueueCylinders {
         const stroke = first.getAttribute('stroke') ?? 'black';
         // Measured BEFORE the shapes go: the record separator is where the label text starts.
         const separator = this.separatorX(shapes);
-        shapes.forEach((shape) => { shape.remove(); });
+        shapes.forEach((shape) => {
+            shape.remove();
+        });
         const ry = box.halfHeight();
         const rx = this.capRadius(box, ry, separator);
-        const body = 'M' + (box.x0 + rx) + ',' + box.y0 +
-            ' L' + (box.x1 - rx) + ',' + box.y0 +
-            ' A' + rx + ',' + ry + ' 0 0 1 ' + (box.x1 - rx) + ',' + box.y1 +
-            ' L' + (box.x0 + rx) + ',' + box.y1 +
-            ' A' + rx + ',' + ry + ' 0 0 1 ' + (box.x0 + rx) + ',' + box.y0 + ' Z';
+        const body = this.bodyPath(box, rx, ry);
         // Only the NEAR end cap is drawn: that single arc is what reads as "tube" rather than
         // "stadium", and a real cylinder hides the far one behind the body.
-        const cap = 'M' + (box.x0 + rx) + ',' + box.y0 +
-            ' A' + rx + ',' + ry + ' 0 0 1 ' + (box.x0 + rx) + ',' + box.y1;
+        const cap = 'M' +
+            (box.x0 + rx) +
+            ',' +
+            box.y0 +
+            ' A' +
+            rx +
+            ',' +
+            ry +
+            ' 0 0 1 ' +
+            (box.x0 + rx) +
+            ',' +
+            box.y1;
         const anchor = node.firstChild;
         if (anchor === null || anchor.nextSibling === null)
             return;
@@ -104,6 +114,37 @@ class QueueCylinders {
         // cap lands. Shifting it again double-counts that offset and pushes the longest line out
         // through the far end of the cylinder.
     }
+    bodyPath(box, rx, ry) {
+        return ('M' +
+            (box.x0 + rx) +
+            ',' +
+            box.y0 +
+            ' L' +
+            (box.x1 - rx) +
+            ',' +
+            box.y0 +
+            ' A' +
+            rx +
+            ',' +
+            ry +
+            ' 0 0 1 ' +
+            (box.x1 - rx) +
+            ',' +
+            box.y1 +
+            ' L' +
+            (box.x0 + rx) +
+            ',' +
+            box.y1 +
+            ' A' +
+            rx +
+            ',' +
+            ry +
+            ' 0 0 1 ' +
+            (box.x0 + rx) +
+            ',' +
+            box.y0 +
+            ' Z');
+    }
     /**
      * A box listing several queues is TALL, and a cap scaled off half-height alone would then reach
      * past the empty leading field and sit on top of the first characters of the label. Graphviz sizes
@@ -160,77 +201,36 @@ class QueueCylinders {
         return el;
     }
 }
-/** Runtime keeps the single-box Lock while Filter follows the full directed chain. */
-class RuntimeNodeMenu {
-    svg;
-    lock;
-    page;
-    constructor(svg, lock, page) {
-        this.svg = svg;
-        this.lock = lock;
-        this.page = page;
-    }
-    wire() {
-        WpNodeMenu.wire(this.svg, (name, node) => {
-            const label = this.lock.isLocked(name) ? 'Unlock' : 'Lock';
-            return [new WpNodeMenuItem(label, () => { this.lock.toggle(name, node); }), this.page.filterItem(name)];
-        });
+/** Shape adapter for the shared viewer controller; no separate runtime control state. */
+class RuntimeImplementsPayload {
+    name;
+    node;
+    constructor(name, node) {
+        this.name = name;
+        this.node = node;
     }
 }
-class RuntimePage extends WpFilterPage {
-    lock = null;
-    /** The pressed product chips (#1179); empty keeps every box. */
-    products = new Set();
-    /** Each product chip toggles itself and redraws; the narrowing happens in narrow(). */
-    wireControls() {
-        document.querySelectorAll('[data-wp-product]').forEach((chip) => {
-            chip.addEventListener('click', () => {
-                const product = chip.dataset['wpProduct'] ?? '';
-                if (this.products.has(product))
-                    this.products.delete(product);
-                else
-                    this.products.add(product);
-                chip.setAttribute('aria-pressed', String(this.products.has(product)));
-                this.redraw();
-            });
+class RuntimeViewerBindingImpl {
+    prepare(svg) {
+        new QueueCylinders().applyTo(svg);
+        // Keep identity titles readable by shared controllers without native SVG tooltips.
+        svg.querySelectorAll('g.node > title, g.edge > title').forEach((title) => {
+            title.parentElement?.setAttribute('aria-label', title.textContent ?? '');
+            const identity = document.createElement('title');
+            identity.textContent = title.textContent;
+            title.replaceWith(identity);
         });
     }
-    /** Pressed chips keep the UNION of their products' boxes, intersected with Filter Unconnected. */
-    narrow(retained) {
-        if (this.products.size === 0)
-            return retained;
-        const kept = new Set();
-        for (const node of this.model.nodes) {
-            if (!retained.has(node.id))
-                continue;
-            if (node.products.some((product) => this.products.has(product)))
-                kept.add(node.id);
-        }
-        return kept;
-    }
-    usesFullDot() {
-        return this.products.size === 0;
-    }
-    captureBinding(svg) {
-        const previous = this.lock;
-        return () => {
-            this.lock = previous;
-            if (svg !== null)
-                this.lock?.rebind(svg);
-        };
-    }
-    prepareSvg(svg) { new QueueCylinders().applyTo(svg); }
-    wireSvg(svg) {
-        if (this.lock === null)
-            this.lock = new WpNodeLock(svg);
-        else
-            this.lock.rebind(svg);
-        new RuntimeNodeMenu(svg, this.lock, this).wire();
-        svg.querySelectorAll('g.node').forEach(node => {
-            if (node.querySelector('title')?.textContent === this.anchor)
-                node.classList.add('wp-filter-anchor');
+    implementsItem(name, node) {
+        if (!node.querySelector('text') ||
+            !Array.from(node.querySelectorAll('text')).some((text) => text.textContent?.startsWith('Implements (')))
+            return null;
+        return new WpNodeMenuItem('Implements', () => {
+            document.dispatchEvent(new CustomEvent('wp-runtime-implements', {
+                detail: new RuntimeImplementsPayload(name, node),
+            }));
         });
     }
 }
-new RuntimePage(__RENDER_MODEL__).render();
+window.__WP_RUNTIME__ = new RuntimeViewerBindingImpl();
 //# sourceMappingURL=runtime-visualizer.client.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"runtime-visualizer.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/runtime-visualizer.client.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Browser-side script for tmp/webpieces/runtime-architecture.html.\n *\n * runtime-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 DOT, and inlines the result into a <script> tag. It runs in a\n * browser, never in node — but it is ordinary TypeScript, compiled in place by tsc like the package's\n * bin entry points, and linted like every other file here. (It used to be a committed .js asset\n * exempted from `no-js-files`; see graph-visualizer.client.ts for why that exemption is gone.)\n *\n * Three jobs:\n *   1. render the DOT with @viz-js/viz v3 (instance() resolves the WASM renderer, and\n *      renderSVGElement is then SYNCHRONOUS — v2's returned a promise);\n *   2. upgrade every queue node into a TRUE horizontal cylinder;\n *   3. make every node clickable, opening the SHARED floating menu (graph-node-menu.ts — the same one\n *      architecture/dependencies.html and every design.html use) with independent Lock/Unlock and chain filtering.\n *\n * Why (2) is post-processing rather than a shape:\n *\n * Graphviz has exactly one `cylinder` and it is upright-only. `orientation=` is documented as rotating\n * POLYGON shapes, and `cylinder` is drawn with beziers, so it silently ignores the attribute — graphviz\n * issue #2244, open since 2022 and still reproducible on Graphviz 15, the version this page's renderer\n * carries. All 54 native shapes were compared at the real label size; none is a horizontal cylinder. So\n * the DOT emits `Mrecord` (which renders sensibly on its own for anyone running `dot` over the\n * committed .dot file) and this script redraws it in the browser, where the geometry is computed from\n * each node's actual bounding box and therefore fits any label width — which a fixed image asset never\n * can.\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/** Cap width as a fraction of the node's half-height. Below ~0.6 it reads as a rounded box. */\nconst CAP_RATIO = 0.75;\n/** A node narrower than this is not a queue box worth reshaping. */\nconst MIN_WIDTH = 40;\n\n/** The union bounding box of a node's shape elements, in user space. Data-only → a class. */\nclass Bounds {\n    constructor(\n        readonly x0: number,\n        readonly x1: number,\n        readonly y0: number,\n        readonly y1: number,\n    ) {}\n\n    width(): number {\n        return this.x1 - this.x0;\n    }\n\n    halfHeight(): number {\n        return (this.y1 - this.y0) / 2;\n    }\n}\n\n/**\n * Redraws the nodes the DOT marked `wp_queue` as cylinders lying on their side.\n *\n * Selected by CLASS, not by id prefix: a queue-kind external system shares the `system__` id space with\n * databases, and a database is an UPRIGHT cylinder that must be left alone.\n */\nclass QueueCylinders {\n    private static readonly SVG_NS = 'http://www.w3.org/2000/svg';\n\n    applyTo(svg: SVGSVGElement): void {\n        svg.querySelectorAll('g.wp_queue').forEach((node: Element): void => { this.reshape(node); });\n    }\n\n    /**\n     * Replace one node's shape elements with a horizontal cylinder sized to its own bounding box.\n     *\n     * The bbox is measured from the shape elements BEFORE they are removed, never from getBBox() on the\n     * whole group — the group includes the text, which is inset, so using it would shrink the cylinder\n     * inside the very label it is meant to contain.\n     */\n    private reshape(node: Element): void {\n        const shapes = node.querySelectorAll('polygon, path, polyline');\n        if (shapes.length === 0) return;\n        const box = this.boundsOf(shapes);\n        if (box === null || box.width() < MIN_WIDTH) return;\n\n        const first = shapes[0];\n        const fill = first.getAttribute('fill') ?? 'none';\n        const stroke = first.getAttribute('stroke') ?? 'black';\n        // Measured BEFORE the shapes go: the record separator is where the label text starts.\n        const separator = this.separatorX(shapes);\n        shapes.forEach((shape: Element): void => { shape.remove(); });\n\n        const ry = box.halfHeight();\n        const rx = this.capRadius(box, ry, separator);\n        const body =\n            'M' + (box.x0 + rx) + ',' + box.y0 +\n            ' L' + (box.x1 - rx) + ',' + box.y0 +\n            ' A' + rx + ',' + ry + ' 0 0 1 ' + (box.x1 - rx) + ',' + box.y1 +\n            ' L' + (box.x0 + rx) + ',' + box.y1 +\n            ' A' + rx + ',' + ry + ' 0 0 1 ' + (box.x0 + rx) + ',' + box.y0 + ' Z';\n        // Only the NEAR end cap is drawn: that single arc is what reads as \"tube\" rather than\n        // \"stadium\", and a real cylinder hides the far one behind the body.\n        const cap =\n            'M' + (box.x0 + rx) + ',' + box.y0 +\n            ' A' + rx + ',' + ry + ' 0 0 1 ' + (box.x0 + rx) + ',' + box.y1;\n\n        const anchor = node.firstChild;\n        if (anchor === null || anchor.nextSibling === null) return;\n        node.insertBefore(this.pathEl(fill, stroke, body), anchor.nextSibling);\n        node.insertBefore(this.pathEl('none', stroke, cap), anchor.nextSibling.nextSibling);\n\n        // The label is deliberately NOT nudged. QUEUE_LABEL_PREFIX already gives the node an empty\n        // leading record field, so Graphviz has centred the text in the space to the RIGHT of where the\n        // cap lands. Shifting it again double-counts that offset and pushes the longest line out\n        // through the far end of the cylinder.\n    }\n\n    /**\n     * A box listing several queues is TALL, and a cap scaled off half-height alone would then reach\n     * past the empty leading field and sit on top of the first characters of the label. Graphviz sizes\n     * that field from the font, not from the label's height, so the separator is the only honest bound\n     * on how far right the cap may go.\n     */\n    private capRadius(box: Bounds, ry: number, separator: number | null): number {\n        const fromHeight = Math.max(6, ry * CAP_RATIO);\n        if (separator === null) return fromHeight;\n        return Math.max(6, Math.min(fromHeight, separator - box.x0));\n    }\n\n    /**\n     * The x of the record's field separator — the VERTICAL polyline Graphviz draws between the empty\n     * leading field and the label — or null if this node has none.\n     */\n    private separatorX(shapes: NodeListOf<Element>): number | null {\n        for (const shape of Array.from(shapes)) {\n            if (shape.tagName !== 'polyline') continue;\n            const nums = (shape.getAttribute('points') ?? '').match(/-?[\\d.]+/g);\n            if (nums === null || nums.length < 4) continue;\n            const x = parseFloat(nums[0]);\n            if (Math.abs(x - parseFloat(nums[2])) < 0.5) return x;\n        }\n        return null;\n    }\n\n    /** The union bounding box of some SVG shape elements, from their raw geometry attributes. */\n    private boundsOf(shapes: NodeListOf<Element>): Bounds | null {\n        const xs: number[] = [];\n        const ys: number[] = [];\n        for (const shape of Array.from(shapes)) {\n            const pts = shape.getAttribute('points');\n            const source = pts ?? shape.getAttribute('d') ?? '';\n            const nums = source.match(/-?[\\d.]+/g);\n            if (nums === null) continue;\n            for (let n = 0; n + 1 < nums.length; n += 2) {\n                xs.push(parseFloat(nums[n]));\n                ys.push(parseFloat(nums[n + 1]));\n            }\n        }\n        if (xs.length === 0) return null;\n        return new Bounds(Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys));\n    }\n\n    private pathEl(fill: string, stroke: string, d: string): SVGPathElement {\n        const el = document.createElementNS(QueueCylinders.SVG_NS, 'path');\n        el.setAttribute('fill', fill);\n        el.setAttribute('stroke', stroke);\n        el.setAttribute('d', d);\n        return el;\n    }\n}\n\n/** Runtime keeps the single-box Lock while Filter follows the full directed chain. */\nclass RuntimeNodeMenu {\n    constructor(private readonly svg: SVGSVGElement, private readonly lock: WpNodeLock, private readonly page: RuntimePage) {}\n\n    wire(): void {\n        WpNodeMenu.wire(this.svg, (name: string, node: SVGGElement): WpNodeMenuItem[] => {\n            const label = this.lock.isLocked(name) ? 'Unlock' : 'Lock';\n            return [new WpNodeMenuItem(label, (): void => { this.lock.toggle(name, node); }), this.page.filterItem(name)];\n        });\n    }\n}\n\nclass RuntimePage extends WpFilterPage {\n    private lock: WpNodeLock | null = null;\n    /** The pressed product chips (#1179); empty keeps every box. */\n    private readonly products = new Set<string>();\n\n    /** Each product chip toggles itself and redraws; the narrowing happens in narrow(). */\n    protected override wireControls(): void {\n        document.querySelectorAll<HTMLButtonElement>('[data-wp-product]').forEach((chip: HTMLButtonElement): void => {\n            chip.addEventListener('click', (): void => {\n                const product = chip.dataset['wpProduct'] ?? '';\n                if (this.products.has(product)) this.products.delete(product);\n                else this.products.add(product);\n                chip.setAttribute('aria-pressed', String(this.products.has(product)));\n                this.redraw();\n            });\n        });\n    }\n\n    /** Pressed chips keep the UNION of their products' boxes, intersected with Filter Unconnected. */\n    protected override narrow(retained: Set<string>): Set<string> {\n        if (this.products.size === 0) return retained;\n        const kept = new Set<string>();\n        for (const node of this.model.nodes) {\n            if (!retained.has(node.id)) continue;\n            if (node.products.some((product: string): boolean => this.products.has(product))) kept.add(node.id);\n        }\n        return kept;\n    }\n\n    protected override usesFullDot(): boolean {\n        return this.products.size === 0;\n    }\n\n    protected override captureBinding(svg: SVGSVGElement | null): () => void {\n        const previous = this.lock;\n        return (): void => {\n            this.lock = previous;\n            if (svg !== null) this.lock?.rebind(svg);\n        };\n    }\n\n    protected override prepareSvg(svg: SVGSVGElement): void { new QueueCylinders().applyTo(svg); }\n\n    protected wireSvg(svg: SVGSVGElement): void {\n        if (this.lock === null) this.lock = new WpNodeLock(svg);\n        else this.lock.rebind(svg);\n        new RuntimeNodeMenu(svg, this.lock, this).wire();\n        svg.querySelectorAll<SVGGElement>('g.node').forEach(node => {\n            if (node.querySelector('title')?.textContent === this.anchor) node.classList.add('wp-filter-anchor');\n        });\n    }\n}\n\nnew RuntimePage(__RENDER_MODEL__).render();\n"]}
+{"version":3,"file":"runtime-visualizer.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/runtime-visualizer.client.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Browser-side script for tmp/webpieces/runtime-architecture.html.\n *\n * runtime-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 DOT, and inlines the result into a <script> tag. It runs in a\n * browser, never in node — but it is ordinary TypeScript, compiled in place by tsc like the package's\n * bin entry points, and linted like every other file here. (It used to be a committed .js asset\n * exempted from `no-js-files`; see graph-visualizer.client.ts for why that exemption is gone.)\n *\n * Three jobs:\n *   1. render the DOT with @viz-js/viz v3 (instance() resolves the WASM renderer, and\n *      renderSVGElement is then SYNCHRONOUS — v2's returned a promise);\n *   2. upgrade every queue node into a TRUE horizontal cylinder;\n *   3. make every node clickable, opening the SHARED floating menu (graph-node-menu.ts — the same one\n *      architecture/dependencies.html and every design.html use) with independent Lock/Unlock and chain filtering.\n *\n * Why (2) is post-processing rather than a shape:\n *\n * Graphviz has exactly one `cylinder` and it is upright-only. `orientation=` is documented as rotating\n * POLYGON shapes, and `cylinder` is drawn with beziers, so it silently ignores the attribute — graphviz\n * issue #2244, open since 2022 and still reproducible on Graphviz 15, the version this page's renderer\n * carries. All 54 native shapes were compared at the real label size; none is a horizontal cylinder. So\n * the DOT emits `Mrecord` (which renders sensibly on its own for anyone running `dot` over the\n * committed .dot file) and this script redraws it in the browser, where the geometry is computed from\n * each node's actual bounding box and therefore fits any label width — which a fixed image asset never\n * can.\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/** Cap width as a fraction of the node's half-height. Below ~0.6 it reads as a rounded box. */\nconst CAP_RATIO = 0.75;\n/** A node narrower than this is not a queue box worth reshaping. */\nconst MIN_WIDTH = 40;\n\n/** The union bounding box of a node's shape elements, in user space. Data-only → a class. */\nclass Bounds {\n    constructor(\n        readonly x0: number,\n        readonly x1: number,\n        readonly y0: number,\n        readonly y1: number,\n    ) {}\n\n    width(): number {\n        return this.x1 - this.x0;\n    }\n\n    halfHeight(): number {\n        return (this.y1 - this.y0) / 2;\n    }\n}\n\n/**\n * Redraws the nodes the DOT marked `wp_queue` as cylinders lying on their side.\n *\n * Selected by CLASS, not by id prefix: a queue-kind external system shares the `system__` id space with\n * databases, and a database is an UPRIGHT cylinder that must be left alone.\n */\nclass QueueCylinders {\n    private static readonly SVG_NS = 'http://www.w3.org/2000/svg';\n\n    applyTo(svg: SVGSVGElement): void {\n        svg.querySelectorAll('g.wp_queue').forEach((node: Element): void => {\n            this.reshape(node);\n        });\n    }\n\n    /**\n     * Replace one node's shape elements with a horizontal cylinder sized to its own bounding box.\n     *\n     * The bbox is measured from the shape elements BEFORE they are removed, never from getBBox() on the\n     * whole group — the group includes the text, which is inset, so using it would shrink the cylinder\n     * inside the very label it is meant to contain.\n     */\n    private reshape(node: Element): void {\n        const shapes = node.querySelectorAll('polygon, path, polyline');\n        if (shapes.length === 0) return;\n        const box = this.boundsOf(shapes);\n        if (box === null || box.width() < MIN_WIDTH) return;\n\n        const first = shapes[0];\n        const fill = first.getAttribute('fill') ?? 'none';\n        const stroke = first.getAttribute('stroke') ?? 'black';\n        // Measured BEFORE the shapes go: the record separator is where the label text starts.\n        const separator = this.separatorX(shapes);\n        shapes.forEach((shape: Element): void => {\n            shape.remove();\n        });\n\n        const ry = box.halfHeight();\n        const rx = this.capRadius(box, ry, separator);\n        const body = this.bodyPath(box, rx, ry);\n        // Only the NEAR end cap is drawn: that single arc is what reads as \"tube\" rather than\n        // \"stadium\", and a real cylinder hides the far one behind the body.\n        const cap =\n            'M' +\n            (box.x0 + rx) +\n            ',' +\n            box.y0 +\n            ' A' +\n            rx +\n            ',' +\n            ry +\n            ' 0 0 1 ' +\n            (box.x0 + rx) +\n            ',' +\n            box.y1;\n\n        const anchor = node.firstChild;\n        if (anchor === null || anchor.nextSibling === null) return;\n        node.insertBefore(this.pathEl(fill, stroke, body), anchor.nextSibling);\n        node.insertBefore(this.pathEl('none', stroke, cap), anchor.nextSibling.nextSibling);\n\n        // The label is deliberately NOT nudged. QUEUE_LABEL_PREFIX already gives the node an empty\n        // leading record field, so Graphviz has centred the text in the space to the RIGHT of where the\n        // cap lands. Shifting it again double-counts that offset and pushes the longest line out\n        // through the far end of the cylinder.\n    }\n\n    private bodyPath(box: Bounds, rx: number, ry: number): string {\n        return (\n            'M' +\n            (box.x0 + rx) +\n            ',' +\n            box.y0 +\n            ' L' +\n            (box.x1 - rx) +\n            ',' +\n            box.y0 +\n            ' A' +\n            rx +\n            ',' +\n            ry +\n            ' 0 0 1 ' +\n            (box.x1 - rx) +\n            ',' +\n            box.y1 +\n            ' L' +\n            (box.x0 + rx) +\n            ',' +\n            box.y1 +\n            ' A' +\n            rx +\n            ',' +\n            ry +\n            ' 0 0 1 ' +\n            (box.x0 + rx) +\n            ',' +\n            box.y0 +\n            ' Z'\n        );\n    }\n\n    /**\n     * A box listing several queues is TALL, and a cap scaled off half-height alone would then reach\n     * past the empty leading field and sit on top of the first characters of the label. Graphviz sizes\n     * that field from the font, not from the label's height, so the separator is the only honest bound\n     * on how far right the cap may go.\n     */\n    private capRadius(box: Bounds, ry: number, separator: number | null): number {\n        const fromHeight = Math.max(6, ry * CAP_RATIO);\n        if (separator === null) return fromHeight;\n        return Math.max(6, Math.min(fromHeight, separator - box.x0));\n    }\n\n    /**\n     * The x of the record's field separator — the VERTICAL polyline Graphviz draws between the empty\n     * leading field and the label — or null if this node has none.\n     */\n    private separatorX(shapes: NodeListOf<Element>): number | null {\n        for (const shape of Array.from(shapes)) {\n            if (shape.tagName !== 'polyline') continue;\n            const nums = (shape.getAttribute('points') ?? '').match(/-?[\\d.]+/g);\n            if (nums === null || nums.length < 4) continue;\n            const x = parseFloat(nums[0]);\n            if (Math.abs(x - parseFloat(nums[2])) < 0.5) return x;\n        }\n        return null;\n    }\n\n    /** The union bounding box of some SVG shape elements, from their raw geometry attributes. */\n    private boundsOf(shapes: NodeListOf<Element>): Bounds | null {\n        const xs: number[] = [];\n        const ys: number[] = [];\n        for (const shape of Array.from(shapes)) {\n            const pts = shape.getAttribute('points');\n            const source = pts ?? shape.getAttribute('d') ?? '';\n            const nums = source.match(/-?[\\d.]+/g);\n            if (nums === null) continue;\n            for (let n = 0; n + 1 < nums.length; n += 2) {\n                xs.push(parseFloat(nums[n]));\n                ys.push(parseFloat(nums[n + 1]));\n            }\n        }\n        if (xs.length === 0) return null;\n        return new Bounds(Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys));\n    }\n\n    private pathEl(fill: string, stroke: string, d: string): SVGPathElement {\n        const el = document.createElementNS(QueueCylinders.SVG_NS, 'path');\n        el.setAttribute('fill', fill);\n        el.setAttribute('stroke', stroke);\n        el.setAttribute('d', d);\n        return el;\n    }\n}\n\n/** Shape adapter for the shared viewer controller; no separate runtime control state. */\nclass RuntimeImplementsPayload {\n    constructor(\n        readonly name: string,\n        readonly node: SVGGElement,\n    ) {}\n}\n\nclass RuntimeViewerBindingImpl implements RuntimeViewerBinding {\n    prepare(svg: SVGSVGElement): void {\n        new QueueCylinders().applyTo(svg);\n        // Keep identity titles readable by shared controllers without native SVG tooltips.\n        svg.querySelectorAll('g.node > title, g.edge > title').forEach((title) => {\n            title.parentElement?.setAttribute('aria-label', title.textContent ?? '');\n            const identity = document.createElement('title');\n            identity.textContent = title.textContent;\n            title.replaceWith(identity);\n        });\n    }\n    implementsItem(name: string, node: SVGGElement): WpNodeMenuItem | null {\n        if (\n            !node.querySelector('text') ||\n            !Array.from(node.querySelectorAll('text')).some((text) =>\n                text.textContent?.startsWith('Implements ('),\n            )\n        )\n            return null;\n        return new WpNodeMenuItem('Implements', (): void => {\n            document.dispatchEvent(\n                new CustomEvent('wp-runtime-implements', {\n                    detail: new RuntimeImplementsPayload(name, node),\n                }),\n            );\n        });\n    }\n}\nwindow.__WP_RUNTIME__ = new RuntimeViewerBindingImpl();\n"]}

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

@@ -1,21 +1,7 @@
 import type { RuntimeGraph } from './runtime-graph';
 import { GraphRenderModel } from './graph-render-model';
-/** Render options for the runtime graph. */
-export declare class RuntimeVizOptions {
-    /**
-     * Draw the dashed terminal nodes for contracts nothing in-repo implements. On by default;
-     * a repo whose external surface is noisy can turn them off in the declared Nx owner file's
-     * direct policy-ID map (runtime-architecture.showExternalNodes).
-     */
-    readonly showExternalNodes: boolean;
-    constructor(
-    /**
-     * Draw the dashed terminal nodes for contracts nothing in-repo implements. On by default;
-     * a repo whose external surface is noisy can turn them off in the declared Nx owner file's
-     * direct policy-ID map (runtime-architecture.showExternalNodes).
-     */
-    showExternalNodes?: boolean);
-}
+import { RuntimeVizOptions } from './runtime-viz-options';
+export { RuntimeVizOptions } from './runtime-viz-options';
 /** Build the Graphviz DOT for the runtime service graph. */
 export declare function generateRuntimeDot(graph: RuntimeGraph, title?: string, options?: RuntimeVizOptions): string;
 /** Capture synthetic drawable nodes and edges at their original emission sites. */

package/src/lib/runtime-visualizer.js

@@ -5,7 +5,7 @@ exports.generateRuntimeDot = generateRuntimeDot;
 exports.generateRuntimeRenderModel = generateRuntimeRenderModel;
 exports.writeRuntimeVisualization = writeRuntimeVisualization;
 const tslib_1 = require("tslib");
-const runtime_details_1 = require("./runtime-details");
+const graph_level_bands_1 = require("./graph-level-bands");
 /**
  * Runtime Visualizer
  *
@@ -45,8 +45,7 @@ const runtime_details_1 = require("./runtime-details");
  *
  * EVERY node on the rendered page is clickable and opens the SHARED floating menu
  * (graph-node-menu.ts — one implementation, also used by architecture/dependencies.html
- * and every project's design.html). Lock/Unlock dims every
- * other node and every edge and lights the locked box alone. There is no "View Design"
+ * and every project's design.html). Lock/Unlock pins separate complete incoming/outgoing chains, with hover adding a temporary chain. There is no "View Design"
  * item here — a node is a running service, queue, datastore or third-party system, not
  * an nx project, so no design.html exists to point at and the item is absent rather than
  * dead. Filter Unconnected follows separate incoming/outgoing chains and compacts the rendered
@@ -56,26 +55,16 @@ const fs = tslib_1.__importStar(require("fs"));
 const path = tslib_1.__importStar(require("path"));
 const dot_syntax_1 = require("./dot-syntax");
 const graph_render_model_1 = require("./graph-render-model");
+const runtime_viewer_adapter_1 = require("./runtime-viewer-adapter");
 const runtime_html_page_1 = require("./runtime-html-page");
 const runtime_viz_theme_1 = require("./runtime-viz-theme");
 /** Apis per line inside a node label — beyond this the box grows wider than it is readable. */
 const APIS_PER_LABEL_LINE = 3;
 /** Separator for the (service, external-library) grouping key; illegal in both project names. */
 const PAIR_SEP = '|';
-/** Render options for the runtime graph. */
-class RuntimeVizOptions {
-    showExternalNodes;
-    constructor(
-    /**
-     * Draw the dashed terminal nodes for contracts nothing in-repo implements. On by default;
-     * a repo whose external surface is noisy can turn them off in the declared Nx owner file's
-     * direct policy-ID map (runtime-architecture.showExternalNodes).
-     */
-    showExternalNodes = true) {
-        this.showExternalNodes = showExternalNodes;
-    }
-}
-exports.RuntimeVizOptions = RuntimeVizOptions;
+const runtime_viz_options_1 = require("./runtime-viz-options");
+var runtime_viz_options_2 = require("./runtime-viz-options");
+Object.defineProperty(exports, "RuntimeVizOptions", { enumerable: true, get: function () { return runtime_viz_options_2.RuntimeVizOptions; } });
 /**
  * The DISPLAY name of a project/service: scope stripped. LABELS ONLY.
  *
@@ -101,20 +90,6 @@ function labelList(entries) {
     }
     return lines.join('\\n');
 }
-/** Compact affordances carry full details in the HTML, including hidden external uses. */
-// webpieces-disable no-function-outside-class -- DOT label builder, matching getShortName in this file
-function nodeLabel(name, svc, usesCount) {
-    // The DECLARED role when the graph carries one; the old inference only as a fallback for a
-    // runtime-dependencies.json committed before `role` existed. Inferring it labelled every server
-    // with no implements as a "client", which is exactly wrong for a queue-driven service.
-    const role = svc.role ?? (svc.implements.length > 0 ? 'server' : 'client');
-    // The declared name is quoted for the reader — those quotes MUST be DOT-escaped, or they end
-    // the label string and the whole graph stops parsing.
-    const declared = svc.serviceName === undefined ? '' : `, \\"${(0, dot_syntax_1.dotValue)(svc.serviceName)}\\"`;
-    let label = `${(0, dot_syntax_1.dotValue)(getShortName(name))}\\n(${role}, L${svc.level}${declared})`;
-    label += `\\nImplements (${svc.implements.length})\\nUses (${usesCount})`;
-    return label;
-}
 /**
  * DOT for ONE NON-QUEUED runtime edge: a direct labeled SOLID arrow (producer calls consumer, the
  * response comes back). Queued (pubsub) hops are drawn by {@link queuesDot} instead, because they
@@ -176,16 +151,16 @@ function queueLine(key, queue) {
 }
 /** The node statement + enqueue/deliver arrows for one queue box. Service identities remain raw; only emitted DOT is escaped. */
 // webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file
-function queueBoxDot(id, body, producers, consumers, model) {
+function queueBoxDot(id, body, producers, consumers, model, contractCount, queueKeys) {
     // Record-mode label: the text must clear recordValue(), and QUEUE_LABEL_PREFIX supplies the
     // empty leading field that draws the cylinder's end cap. Drop it and the node silently
     // degrades to a plain box.
     let dot = model.node(id, `  "${id}" [shape=${runtime_viz_theme_1.QUEUE_SHAPE}, style="filled", fillcolor="${runtime_viz_theme_1.QUEUE_FILL}", ` +
-        `class="${runtime_viz_theme_1.QUEUE_CLASS}", label="${runtime_viz_theme_1.QUEUE_LABEL_PREFIX}${body}"];\n`);
+        `class="${runtime_viz_theme_1.QUEUE_CLASS}", label="${runtime_viz_theme_1.QUEUE_LABEL_PREFIX}${body}"];\n`, [], queueKeys);
     for (const producer of producers)
-        dot += model.edge(producer, id, `  "${serviceNodeId(producer)}" -> "${id}" [label="enqueue", style=dashed];\n`);
+        dot += model.edge(producer, id, `  "${serviceNodeId(producer)}" -> "${id}" [label="Uses (${contractCount}) ▾\\nenqueue", style=dashed];\n`);
     for (const consumer of consumers)
-        dot += model.edge(id, consumer, `  "${id}" -> "${serviceNodeId(consumer)}" [label="deliver", style=dashed];\n`);
+        dot += model.edge(id, consumer, `  "${id}" -> "${serviceNodeId(consumer)}" [label="Uses (${contractCount}) ▾\\ndeliver", style=dashed];\n`);
     return dot;
 }
 /**
@@ -244,7 +219,7 @@ function queuesDot(graph, hidden, model) {
             const viaRaw = edge.via.length > 2
                 ? `Uses (${edge.via.length}) ▾`
                 : edge.via.map((v) => getShortName(v)).join(', ');
-            dot += queueBoxDot(`queue__${dotId(edge.from)}__${dotId(edge.to)}`, `${(0, dot_syntax_1.recordValue)(viaRaw)}\\nqueue`, [from], [to], model);
+            dot += queueBoxDot(`queue__${dotId(edge.from)}__${dotId(edge.to)}`, `${(0, dot_syntax_1.recordValue)(viaRaw)}\\nqueue`, [from], [to], model, edge.via.length, [`${from}->${to}`]);
             continue;
         }
         if (!byQueue.has(edge.queue))
@@ -256,7 +231,7 @@ function queuesDot(graph, hidden, model) {
         const body = group.members
             .map((key) => queueLine(key, graph.queues[key]))
             .join('\\n');
-        dot += queueBoxDot(`queue__${dotId(group.members[0])}`, body, group.producers, group.consumers, model);
+        dot += queueBoxDot(`queue__${dotId(group.members[0])}`, body, group.producers, group.consumers, model, 1, group.members);
     }
     return dot;
 }
@@ -438,14 +413,15 @@ function externalDot(graph, hidden, model) {
 }
 /** Build the Graphviz DOT for the runtime service graph. */
 // webpieces-disable no-function-outside-class -- module entry point, matching the sibling builders here
-function generateRuntimeDot(graph, title = 'WebPieces Runtime Architecture', options = new RuntimeVizOptions()) {
+function generateRuntimeDot(graph, title = 'WebPieces Runtime Architecture', options = new runtime_viz_options_1.RuntimeVizOptions()) {
     return generateRuntimeRenderModel(graph, title, options).fullDot;
 }
 /** Capture synthetic drawable nodes and edges at their original emission sites. */
 // webpieces-disable no-function-outside-class -- renderer entry point matching generateRuntimeDot
-function generateRuntimeRenderModel(graph, title = 'WebPieces Runtime Architecture', options = new RuntimeVizOptions()) {
+function generateRuntimeRenderModel(graph, title = 'WebPieces Runtime Architecture', options = new runtime_viz_options_1.RuntimeVizOptions()) {
     const model = new graph_render_model_1.GraphRenderModel();
-    const details = new runtime_details_1.RuntimeDetails(graph, options.showExternalNodes);
+    model.viewer = 'runtime';
+    const adapter = new runtime_viewer_adapter_1.RuntimeViewerAdapter(graph, options.projects);
     let dot = 'digraph RuntimeArchitecture {\n';
     dot += '  rankdir=TB;\n';
     dot += '  node [shape=box, style="filled,rounded", fontname="Arial"];\n';
@@ -458,9 +434,10 @@ function generateRuntimeRenderModel(graph, title = 'WebPieces Runtime Architectu
         if (hidden.has(name))
             continue;
         const svc = graph.services[name];
-        const color = runtime_viz_theme_1.LEVEL_COLORS[svc.level] || '#F5F5F5';
-        dot += model.node(name, `  "${serviceNodeId(name)}" [fillcolor="${color}", label="${nodeLabel(name, svc, details.nodes[name].used.length)}"];\n`, svc.products ?? []);
+        dot += adapter.service(model, name, svc);
     }
+    model.bands = adapter.levelBands(model);
+    dot += new graph_level_bands_1.LevelBandLayout().dot(model.bands);
     dot += '\n';
     for (const edge of graph.runtimeEdges) {
         if (hidden.has(edge.from) || hidden.has(edge.to))
@@ -488,11 +465,12 @@ function generateRuntimeRenderModel(graph, title = 'WebPieces Runtime Architectu
     model.completeEndpoints();
     // #1179: a queue, trigger or external system belongs to the products of the services it touches.
     model.attachProducts((id) => graph.services[id] !== undefined);
+    adapter.contextModes(model);
     model.fullDot = dot;
     return model;
 }
 /** Write the DOT + HTML renderings to tmp/webpieces/. */
-function writeRuntimeVisualization(graph, workspaceRoot, title = 'WebPieces Runtime Architecture', options = new RuntimeVizOptions()) {
+function writeRuntimeVisualization(graph, workspaceRoot, title = 'WebPieces Runtime Architecture', options = new runtime_viz_options_1.RuntimeVizOptions()) {
     const outputDir = path.join(workspaceRoot, 'tmp', 'webpieces');
     if (!fs.existsSync(outputDir))
         fs.mkdirSync(outputDir, { recursive: true });
@@ -501,7 +479,7 @@ function writeRuntimeVisualization(graph, workspaceRoot, title = 'WebPieces Runt
     const dotPath = path.join(outputDir, 'runtime-architecture.dot');
     fs.writeFileSync(dotPath, dot, 'utf-8');
     const htmlPath = path.join(outputDir, 'runtime-architecture.html');
-    fs.writeFileSync(htmlPath, new runtime_html_page_1.RuntimeHtmlPage().render(model, title, graph, options.showExternalNodes), 'utf-8');
+    fs.writeFileSync(htmlPath, new runtime_html_page_1.RuntimeHtmlPage().render(model, title, graph, options), 'utf-8');
     return { dotPath, htmlPath };
 }
 //# sourceMappingURL=runtime-visualizer.js.map