@webpieces/nx-webpieces-rules 0.4.871 → 0.4.872

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

@@ -1,3 +1,29 @@
+/**
+ * The three color modes (graph-color-modes.ts), the viewer's remembered choice, and Impact's data.
+ *
+ * The mode is deep-linkable (`#runtime`, `#architecture`, `#impact`, which win over the remembered
+ * one) and remembered per viewer in localStorage. Storage can be missing or throw (a private window,
+ * blocked site data, a file:// page in some browsers), so every access is wrapped and the page works
+ * without it.
+ */
+declare class WpModeState {
+    static readonly MODES: string[];
+    static readonly NAMES: string[];
+    static readonly STORAGE_KEY = "wp-architecture-graph-mode";
+    readonly impact: ImpactJson | null;
+    mode: string;
+    constructor();
+    /** '' when Impact can be shown, else the one line the drawer and the menu say instead. */
+    impactReason(): string;
+    available(mode: string): boolean;
+    name(mode: string): string;
+    /** False (and nothing changes) for an unknown or unavailable mode. */
+    set(mode: string): boolean;
+    /** Which impact shade a box gets. */
+    status(id: string): 'touched' | 'affected' | 'buildInput' | 'untouched';
+    private initial;
+    private stored;
+}
 /** Architecture interactions bind to each new SVG; logical Lock/Filter state belongs to the page. */
 declare class GraphHighlighter {
     private readonly svg;
@@ -13,12 +39,51 @@ declare class GraphHighlighter {
     private wireHover;
     private wireMenu;
 }
+/**
+ * The drawer and its floating panels: every control outside the graph itself. Holds no graph state —
+ * each control calls back into the page, and `sync()` repaints the controls from the page's state.
+ */
+declare class GraphDrawer {
+    private readonly page;
+    constructor(page: GraphPage);
+    wire(): void;
+    /** Type-to-search lock: an exact project id (or a unique short name) locks, empty or Esc unlocks. */
+    private wireLock;
+    /**
+     * Page keys, in the CAPTURE phase so the open/closed state of the node menu is read before the
+     * menu's own Escape handler closes it: Esc with a menu open only closes the menu.
+     */
+    private onKey;
+    /** `button` shows/hides `target`; for the drawer itself it toggles the collapsed class instead. */
+    private toggles;
+    /** Repaint every control from the page's state. */
+    sync(modes: WpModeState, locked: string | null, filtering: boolean): void;
+    private syncFilterToggle;
+    private impactNote;
+    /** "Mode: <b>Runtime</b> · Locked: <b>x</b>", built with text nodes so no name is parsed as HTML. */
+    private crumb;
+    private lockInput;
+    private byId;
+}
 declare class GraphPage extends WpFilterPage {
     private highlighter;
+    private readonly modes;
+    private readonly drawer;
     protected captureBinding(_svg: SVGSVGElement | null): () => void;
     protected wireControls(): void;
+    protected nodeDot(node: RenderNodeJson): string;
+    protected usesFullDot(): boolean;
     protected wireSvg(svg: SVGSVGElement): void;
     lockSelection(): string | null;
+    hasNode(id: string): boolean;
+    /** An exact id, else the one id whose short name (after any scope) is `text`; null if none or several. */
+    resolveName(text: string): string | null;
     setLock(name: string | null): void;
+    setMode(mode: string): void;
+    /** The drawer's "Hide unconnected": filter to the locked box's chain, or turn the filter off. */
+    toggleFilter(): void;
+    /** The node menu's "Mode ▸" submenu: one radio item per mode, Impact disabled with its reason. */
+    modeItem(): WpNodeMenuItem;
+    private syncControls;
     private filterCards;
 }

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

@@ -1,4 +1,83 @@
 "use strict";
+/**
+ * The three color modes (graph-color-modes.ts), the viewer's remembered choice, and Impact's data.
+ *
+ * The mode is deep-linkable (`#runtime`, `#architecture`, `#impact`, which win over the remembered
+ * one) and remembered per viewer in localStorage. Storage can be missing or throw (a private window,
+ * blocked site data, a file:// page in some browsers), so every access is wrapped and the page works
+ * without it.
+ */
+class WpModeState {
+    static MODES = ['runtime', 'architecture', 'impact'];
+    static NAMES = ['Runtime', 'Architecture', 'Impact'];
+    static STORAGE_KEY = 'wp-architecture-graph-mode';
+    impact = window.__WP_IMPACT__ ?? null;
+    mode = 'runtime';
+    constructor() {
+        this.mode = this.initial();
+    }
+    /** '' when Impact can be shown, else the one line the drawer and the menu say instead. */
+    impactReason() {
+        if (this.impact === null)
+            return 'No impact data for this branch. Run pnpm nx run architecture:generate to compute it.';
+        return this.impact.available ? '' : `Impact unavailable: ${this.impact.reason}.`;
+    }
+    available(mode) {
+        return WpModeState.MODES.includes(mode) && (mode !== 'impact' || this.impactReason() === '');
+    }
+    name(mode) {
+        return WpModeState.NAMES[WpModeState.MODES.indexOf(mode)] ?? mode;
+    }
+    /** False (and nothing changes) for an unknown or unavailable mode. */
+    set(mode) {
+        if (!this.available(mode))
+            return false;
+        this.mode = mode;
+        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- storage is a per-viewer convenience; a blocked store must not break the page
+        try {
+            localStorage.setItem(WpModeState.STORAGE_KEY, mode);
+            if (location.hash !== `#${mode}`)
+                history.replaceState(null, '', `#${mode}`);
+            // webpieces-disable no-any-unknown -- browsers may throw any value from blocked storage
+        }
+        catch (err) {
+            //const error = toError(err);
+            void err;
+        }
+        return true;
+    }
+    /** Which impact shade a box gets. */
+    status(id) {
+        if (this.impact?.touched.includes(id))
+            return 'touched';
+        if (this.impact?.affected.includes(id))
+            return 'affected';
+        if (this.impact?.buildInputs.includes(id))
+            return 'buildInput';
+        return 'untouched';
+    }
+    initial() {
+        const hashed = location.hash.slice(1);
+        if (this.available(hashed))
+            return hashed;
+        const stored = this.stored();
+        if (stored !== null && this.available(stored))
+            return stored;
+        return 'runtime';
+    }
+    stored() {
+        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- storage is a per-viewer convenience; a blocked store reads as "nothing stored"
+        try {
+            return localStorage.getItem(WpModeState.STORAGE_KEY);
+            // webpieces-disable no-any-unknown -- browsers may throw any value from blocked storage
+        }
+        catch (err) {
+            //const error = toError(err);
+            void err;
+            return null;
+        }
+    }
+}
 /** Architecture interactions bind to each new SVG; logical Lock/Filter state belongs to the page. */
 class GraphHighlighter {
     svg;
@@ -70,7 +149,9 @@ class GraphHighlighter {
         });
     }
     wireMenu() {
-        const designs = new Map(__DESIGN_LINKS__.map((link) => [link.nodeId, link.href]));
+        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);
@@ -79,24 +160,210 @@ class GraphHighlighter {
             const locked = this.page.lockSelection() === name;
             items.push(new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', () => this.page.setLock(locked ? null : name)));
             items.push(this.page.filterItem(name));
+            items.push(this.page.modeItem());
             return items;
         });
     }
 }
+/**
+ * The drawer and its floating panels: every control outside the graph itself. Holds no graph state —
+ * each control calls back into the page, and `sync()` repaints the controls from the page's state.
+ */
+class GraphDrawer {
+    page;
+    constructor(page) {
+        this.page = page;
+    }
+    wire() {
+        document.querySelectorAll('.wp-mode[data-wp-mode]').forEach((button) => {
+            button.addEventListener('click', () => this.page.setMode(button.dataset['wpMode'] ?? 'runtime'));
+        });
+        this.wireLock();
+        this.byId('wp-filter-toggle')?.addEventListener('click', () => this.page.toggleFilter());
+        this.toggles('wp-collapse', 'wp-shell', true);
+        this.toggles('wp-help-btn', 'wp-help', false);
+        this.toggles('wp-help-close', 'wp-help', false);
+        this.toggles('wp-legend-pop', 'wp-legend-popout', false);
+        this.toggles('wp-legend-close', 'wp-legend-popout', false);
+        this.toggles('wp-resp-open', 'wp-resp-panel', false);
+        this.toggles('wp-resp-close', 'wp-resp-panel', false);
+        this.toggles('wp-snapshot-open', 'wp-snapshot', false);
+        window.addEventListener('keydown', (ev) => this.onKey(ev), true);
+        window.addEventListener('hashchange', () => this.page.setMode(location.hash.slice(1)));
+    }
+    /** Type-to-search lock: an exact project id (or a unique short name) locks, empty or Esc unlocks. */
+    wireLock() {
+        const input = this.lockInput();
+        if (input === null)
+            return;
+        input.addEventListener('input', () => {
+            const value = input.value.trim();
+            if (value === '')
+                this.page.setLock(null);
+            else if (this.page.hasNode(value))
+                this.page.setLock(value);
+        });
+        input.addEventListener('change', () => {
+            const match = this.page.resolveName(input.value.trim());
+            if (match !== null)
+                this.page.setLock(match);
+            else
+                input.value = this.page.lockSelection() ?? '';
+        });
+        input.addEventListener('keydown', (ev) => {
+            if (ev.key !== 'Escape')
+                return;
+            ev.preventDefault();
+            input.value = '';
+            this.page.setLock(null);
+            input.blur();
+        });
+    }
+    /**
+     * Page keys, in the CAPTURE phase so the open/closed state of the node menu is read before the
+     * menu's own Escape handler closes it: Esc with a menu open only closes the menu.
+     */
+    onKey(ev) {
+        if (ev.altKey || ev.ctrlKey || ev.metaKey)
+            return;
+        const target = ev.target;
+        if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)
+            return;
+        const menuOpen = document.getElementById('wp-node-menu') !== null;
+        if (ev.key === '/') {
+            ev.preventDefault();
+            this.lockInput()?.focus();
+            return;
+        }
+        const index = ['1', '2', '3'].indexOf(ev.key);
+        if (index >= 0 && !menuOpen) {
+            this.page.setMode(WpModeState.MODES[index]);
+            return;
+        }
+        if (ev.key === 'Escape' && !menuOpen && this.page.lockSelection() !== null)
+            this.page.setLock(null);
+    }
+    /** `button` shows/hides `target`; for the drawer itself it toggles the collapsed class instead. */
+    toggles(buttonId, targetId, collapse) {
+        const button = this.byId(buttonId);
+        const target = this.byId(targetId);
+        if (button === null || target === null)
+            return;
+        button.addEventListener('click', (ev) => {
+            ev.stopPropagation();
+            let expanded;
+            if (collapse) {
+                expanded = !target.classList.toggle('wp-collapsed');
+            }
+            else {
+                target.hidden = !target.hidden;
+                expanded = !target.hidden;
+            }
+            document.querySelectorAll(`[aria-controls="${targetId}"], #${buttonId}[aria-expanded]`).forEach((el) => el.setAttribute('aria-expanded', String(expanded)));
+        });
+    }
+    /** Repaint every control from the page's state. */
+    sync(modes, locked, filtering) {
+        const reason = modes.impactReason();
+        document.querySelectorAll('.wp-mode[data-wp-mode]').forEach((button) => {
+            const mode = button.dataset['wpMode'] ?? '';
+            button.setAttribute('aria-pressed', String(mode === modes.mode));
+            button.disabled = !modes.available(mode);
+            if (mode === 'impact')
+                button.title = reason === '' ? 'Key 3' : reason;
+        });
+        const reasonEl = this.byId('wp-impact-reason');
+        if (reasonEl !== null) {
+            reasonEl.textContent = reason;
+            reasonEl.hidden = reason === '';
+        }
+        document.querySelectorAll('[data-wp-legend-mode]').forEach((section) => {
+            section.hidden = section.dataset['wpLegendMode'] !== modes.mode;
+        });
+        document.querySelectorAll('[data-wp-impact-note]').forEach((note) => {
+            note.textContent = this.impactNote(modes);
+        });
+        const title = this.byId('wp-legend-pop-title');
+        if (title !== null)
+            title.textContent = `Legend · ${modes.name(modes.mode)}`;
+        const input = this.lockInput();
+        if (input !== null && document.activeElement !== input)
+            input.value = locked ?? '';
+        this.syncFilterToggle(locked, filtering);
+        this.crumb(modes.name(modes.mode), locked);
+    }
+    syncFilterToggle(locked, filtering) {
+        const toggle = this.byId('wp-filter-toggle');
+        if (toggle === null)
+            return;
+        toggle.setAttribute('aria-pressed', String(filtering));
+        toggle.disabled = !filtering && locked === null;
+        toggle.title = toggle.disabled ? 'Lock a project first' : '';
+    }
+    impactNote(modes) {
+        const impact = modes.impact;
+        if (impact === null || !impact.available)
+            return '';
+        return (`${impact.touched.length} touched · ${impact.affected.length} affected · ` +
+            `${impact.buildInputs.length} build inputs — nx affected since fork point ${impact.base}, ` +
+            `${impact.changedFiles} changed files.`);
+    }
+    /** "Mode: <b>Runtime</b> · Locked: <b>x</b>", built with text nodes so no name is parsed as HTML. */
+    crumb(mode, locked) {
+        const crumb = this.byId('wp-crumb');
+        if (crumb === null)
+            return;
+        const bold = (text) => {
+            const b = document.createElement('b');
+            b.textContent = text;
+            return b;
+        };
+        const parts = ['Mode: ', bold(mode)];
+        if (locked !== null)
+            parts.push(' · Locked: ', bold(locked));
+        crumb.replaceChildren(...parts);
+    }
+    lockInput() {
+        return document.getElementById('wp-lock');
+    }
+    byId(id) {
+        return document.getElementById(id);
+    }
+}
 class GraphPage extends WpFilterPage {
     highlighter = null;
+    modes = new WpModeState();
+    drawer = new GraphDrawer(this);
     captureBinding(_svg) {
         const previous = this.highlighter;
-        return () => { this.highlighter = previous; this.filterCards(); };
+        return () => {
+            this.highlighter = previous;
+            this.filterCards();
+            this.syncControls();
+        };
     }
     wireControls() {
-        const select = document.getElementById('wp-lock');
-        select?.addEventListener('change', () => this.setLock(select.value === '' ? null : select.value));
+        this.drawer.wire();
+        this.syncControls();
+    }
+    nodeDot(node) {
+        const modes = node.modes;
+        if (modes === null)
+            return node.dot;
+        if (this.modes.mode === 'architecture')
+            return modes.architecture;
+        if (this.modes.mode === 'impact')
+            return modes[this.modes.status(node.id)];
+        return modes.runtime;
+    }
+    usesFullDot() {
+        return this.modes.mode === 'runtime';
     }
     wireSvg(svg) {
         this.highlighter = new GraphHighlighter(svg, this.chain, this.model, this);
         this.highlighter.wire();
         this.filterCards();
+        this.syncControls();
         svg.querySelectorAll('g.node').forEach((node) => {
             if (node.querySelector('title')?.textContent === this.anchor)
                 node.classList.add('wp-filter-anchor');
@@ -105,13 +372,50 @@ class GraphPage extends WpFilterPage {
     lockSelection() {
         return this.locked;
     }
+    hasNode(id) {
+        return this.model.nodes.some((node) => node.id === id);
+    }
+    /** An exact id, else the one id whose short name (after any scope) is `text`; null if none or several. */
+    resolveName(text) {
+        if (text === '')
+            return null;
+        if (this.hasNode(text))
+            return text;
+        const matches = this.model.nodes.filter((node) => node.id.split('/').pop() === text);
+        return matches.length === 1 ? matches[0].id : null;
+    }
     setLock(name) {
         this.locked = name;
-        const select = document.getElementById('wp-lock');
-        if (select !== null)
-            select.value = name ?? '';
         this.highlighter?.relight();
         this.filterCards();
+        this.syncControls();
+    }
+    setMode(mode) {
+        if (mode === this.modes.mode || !this.modes.set(mode))
+            return;
+        this.syncControls();
+        this.redraw();
+    }
+    /** The drawer's "Hide unconnected": filter to the locked box's chain, or turn the filter off. */
+    toggleFilter() {
+        if (this.anchor !== null)
+            this.filter(null);
+        else if (this.locked !== null)
+            this.filter(this.locked);
+    }
+    /** The node menu's "Mode ▸" submenu: one radio item per mode, Impact disabled with its reason. */
+    modeItem() {
+        const children = WpModeState.MODES.map((mode) => {
+            const item = new WpNodeMenuItem(this.modes.name(mode), () => this.setMode(mode));
+            item.checked = mode === this.modes.mode;
+            if (!this.modes.available(mode))
+                item.disabledReason = this.modes.impactReason();
+            return item;
+        });
+        return new WpNodeMenuItem('Mode', () => { }, children);
+    }
+    syncControls() {
+        this.drawer.sync(this.modes, this.locked, this.anchor !== null);
     }
     filterCards() {
         const lit = this.locked === null ? this.retained : this.chain.nodes(this.locked);

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":["/** Architecture interactions bind to each new SVG; logical Lock/Filter state belongs to the page. */\nclass GraphHighlighter {\n    private readonly nodeByName = new Map<string, SVGGElement>();\n    private hovered: string | null = null;\n\n    constructor(\n        private readonly svg: SVGSVGElement,\n        private readonly chain: WpGraphChain,\n        private readonly model: RenderModelJson,\n        private readonly page: GraphPage,\n    ) {}\n\n    wire(): void {\n        this.svg.querySelectorAll<SVGGElement>('g.node').forEach((g) => {\n            if (g.classList.contains('wp-layout')) return;\n            const name = g.querySelector('title')?.textContent;\n            if (name !== null && name !== undefined) this.nodeByName.set(name, g);\n        });\n        this.wireHover();\n        this.wireMenu();\n        this.relight();\n    }\n\n    private clear(): void {\n        this.svg.classList.remove('wp-dim');\n        this.svg.querySelectorAll('.wp-focus, .wp-neighbor, .wp-hl, .wp-locked').forEach((el: Element) => {\n            el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl', 'wp-locked');\n        });\n    }\n\n    relight(): void {\n        this.clear();\n        const locked = this.page.lockSelection();\n        if (locked !== null) this.nodeByName.get(locked)?.classList.add('wp-locked');\n        // A filtered-out Lock is suspended, including its otherwise visible relatives.\n        const anchors = [locked, this.hovered].filter(\n            (name: string | null): name is string => name !== null && this.nodeByName.has(name),\n        );\n        if (anchors.length === 0) return;\n        const lit = new Set<string>();\n        for (const name of anchors) {\n            this.nodeByName.get(name)?.classList.add('wp-focus');\n            for (const id of this.chain.nodes(name)) {\n                if (this.nodeByName.has(id)) lit.add(id);\n            }\n        }\n        this.svg.classList.add('wp-dim');\n        for (const id of lit) this.nodeByName.get(id)?.classList.add('wp-neighbor');\n        for (const edge of this.model.edges) {\n            if (lit.has(edge.from) && lit.has(edge.to)) {\n                this.svg.querySelector(`[id=\"${edge.id}\"]`)?.classList.add('wp-hl');\n            }\n        }\n    }\n\n    private wireHover(): void {\n        this.nodeByName.forEach((g: SVGGElement, name: string) => {\n            g.addEventListener('mouseenter', () => {\n                this.hovered = name;\n                this.relight();\n            });\n            g.addEventListener('mouseleave', () => {\n                this.hovered = null;\n                this.relight();\n            });\n        });\n    }\n\n    private wireMenu(): void {\n        const designs = new Map(__DESIGN_LINKS__.map((link) => [link.nodeId, link.href]));\n        WpNodeMenu.wire(this.svg, (name) => {\n            const items: WpNodeMenuItem[] = [];\n            const href = designs.get(name);\n            if (href !== undefined)\n                items.push(new WpNodeMenuItem('View Design', () => window.open(href, '_blank')));\n            const locked = this.page.lockSelection() === name;\n            items.push(\n                new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', () =>\n                    this.page.setLock(locked ? null : name),\n                ),\n            );\n            items.push(this.page.filterItem(name));\n            return items;\n        });\n    }\n}\n\nclass GraphPage extends WpFilterPage {\n    private highlighter: GraphHighlighter | null = null;\n\n    protected override captureBinding(_svg: SVGSVGElement | null): () => void {\n        const previous = this.highlighter;\n        return (): void => { this.highlighter = previous; this.filterCards(); };\n    }\n\n    protected override wireControls(): void {\n        const select = document.getElementById('wp-lock') as HTMLSelectElement | null;\n        select?.addEventListener('change', () =>\n            this.setLock(select.value === '' ? null : select.value),\n        );\n    }\n\n    protected wireSvg(svg: SVGSVGElement): void {\n        this.highlighter = new GraphHighlighter(svg, this.chain, this.model, this);\n        this.highlighter.wire();\n        this.filterCards();\n        svg.querySelectorAll<SVGGElement>('g.node').forEach((node) => {\n            if (node.querySelector('title')?.textContent === this.anchor)\n                node.classList.add('wp-filter-anchor');\n        });\n    }\n\n    lockSelection(): string | null {\n        return this.locked;\n    }\n\n    setLock(name: string | null): void {\n        this.locked = name;\n        const select = document.getElementById('wp-lock') as HTMLSelectElement | null;\n        if (select !== null) select.value = name ?? '';\n        this.highlighter?.relight();\n        this.filterCards();\n    }\n\n    private filterCards(): void {\n        const lit = this.locked === null ? this.retained : this.chain.nodes(this.locked);\n        document.querySelectorAll('.wp-resp-card').forEach((card) => {\n            const name = card.getAttribute('data-node');\n            card.classList.toggle(\n                'wp-hidden',\n                name === null || !this.retained.has(name) || !lit.has(name),\n            );\n        });\n    }\n}\n\nnew GraphPage(__RENDER_MODEL__).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 * The three color modes (graph-color-modes.ts), the viewer's remembered choice, and Impact's data.\n *\n * The mode is deep-linkable (`#runtime`, `#architecture`, `#impact`, which win over the remembered\n * one) and remembered per viewer in localStorage. Storage can be missing or throw (a private window,\n * blocked site data, a file:// page in some browsers), so every access is wrapped and the page works\n * without it.\n */\nclass WpModeState {\n    static readonly MODES = ['runtime', 'architecture', 'impact'];\n    static readonly NAMES = ['Runtime', 'Architecture', 'Impact'];\n    static readonly STORAGE_KEY = 'wp-architecture-graph-mode';\n    readonly impact: ImpactJson | null = window.__WP_IMPACT__ ?? null;\n    mode = 'runtime';\n\n    constructor() {\n        this.mode = this.initial();\n    }\n\n    /** '' when Impact can be shown, else the one line the drawer and the menu say instead. */\n    impactReason(): string {\n        if (this.impact === null)\n            return 'No impact data for this branch. Run pnpm nx run architecture:generate to compute it.';\n        return this.impact.available ? '' : `Impact unavailable: ${this.impact.reason}.`;\n    }\n\n    available(mode: string): boolean {\n        return WpModeState.MODES.includes(mode) && (mode !== 'impact' || this.impactReason() === '');\n    }\n\n    name(mode: string): string {\n        return WpModeState.NAMES[WpModeState.MODES.indexOf(mode)] ?? mode;\n    }\n\n    /** False (and nothing changes) for an unknown or unavailable mode. */\n    set(mode: string): boolean {\n        if (!this.available(mode)) return false;\n        this.mode = mode;\n        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- storage is a per-viewer convenience; a blocked store must not break the page\n        try {\n            localStorage.setItem(WpModeState.STORAGE_KEY, mode);\n            if (location.hash !== `#${mode}`) history.replaceState(null, '', `#${mode}`);\n            // webpieces-disable no-any-unknown -- browsers may throw any value from blocked storage\n        } catch (err: unknown) {\n            //const error = toError(err);\n            void err;\n        }\n        return true;\n    }\n\n    /** Which impact shade a box gets. */\n    status(id: string): 'touched' | 'affected' | 'buildInput' | 'untouched' {\n        if (this.impact?.touched.includes(id)) return 'touched';\n        if (this.impact?.affected.includes(id)) return 'affected';\n        if (this.impact?.buildInputs.includes(id)) return 'buildInput';\n        return 'untouched';\n    }\n\n    private initial(): string {\n        const hashed = location.hash.slice(1);\n        if (this.available(hashed)) return hashed;\n        const stored = this.stored();\n        if (stored !== null && this.available(stored)) return stored;\n        return 'runtime';\n    }\n\n    private stored(): string | null {\n        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- storage is a per-viewer convenience; a blocked store reads as \"nothing stored\"\n        try {\n            return localStorage.getItem(WpModeState.STORAGE_KEY);\n            // webpieces-disable no-any-unknown -- browsers may throw any value from blocked storage\n        } catch (err: unknown) {\n            //const error = toError(err);\n            void err;\n            return null;\n        }\n    }\n}\n\n/** Architecture interactions bind to each new SVG; logical Lock/Filter state belongs to the page. */\nclass GraphHighlighter {\n    private readonly nodeByName = new Map<string, SVGGElement>();\n    private hovered: string | null = null;\n\n    constructor(\n        private readonly svg: SVGSVGElement,\n        private readonly chain: WpGraphChain,\n        private readonly model: RenderModelJson,\n        private readonly page: GraphPage,\n    ) {}\n\n    wire(): void {\n        this.svg.querySelectorAll<SVGGElement>('g.node').forEach((g: SVGGElement) => {\n            if (g.classList.contains('wp-layout')) return;\n            const name = g.querySelector('title')?.textContent;\n            if (name !== null && name !== undefined) this.nodeByName.set(name, g);\n        });\n        this.wireHover();\n        this.wireMenu();\n        this.relight();\n    }\n\n    private clear(): void {\n        this.svg.classList.remove('wp-dim');\n        this.svg.querySelectorAll('.wp-focus, .wp-neighbor, .wp-hl, .wp-locked').forEach((el: Element) => {\n            el.classList.remove('wp-focus', 'wp-neighbor', 'wp-hl', 'wp-locked');\n        });\n    }\n\n    relight(): void {\n        this.clear();\n        const locked = this.page.lockSelection();\n        if (locked !== null) this.nodeByName.get(locked)?.classList.add('wp-locked');\n        // A filtered-out Lock is suspended, including its otherwise visible relatives.\n        const anchors = [locked, this.hovered].filter(\n            (name: string | null): name is string => name !== null && this.nodeByName.has(name),\n        );\n        if (anchors.length === 0) return;\n        const lit = new Set<string>();\n        for (const name of anchors) {\n            this.nodeByName.get(name)?.classList.add('wp-focus');\n            for (const id of this.chain.nodes(name)) {\n                if (this.nodeByName.has(id)) lit.add(id);\n            }\n        }\n        this.svg.classList.add('wp-dim');\n        for (const id of lit) this.nodeByName.get(id)?.classList.add('wp-neighbor');\n        for (const edge of this.model.edges) {\n            if (lit.has(edge.from) && lit.has(edge.to)) {\n                this.svg.querySelector(`[id=\"${edge.id}\"]`)?.classList.add('wp-hl');\n            }\n        }\n    }\n\n    private wireHover(): void {\n        this.nodeByName.forEach((g: SVGGElement, name: string) => {\n            g.addEventListener('mouseenter', () => {\n                this.hovered = name;\n                this.relight();\n            });\n            g.addEventListener('mouseleave', () => {\n                this.hovered = null;\n                this.relight();\n            });\n        });\n    }\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', () => window.open(href, '_blank')));\n            const locked = this.page.lockSelection() === name;\n            items.push(\n                new WpNodeMenuItem(locked ? 'Unlock' : 'Lock', () =>\n                    this.page.setLock(locked ? null : name),\n                ),\n            );\n            items.push(this.page.filterItem(name));\n            items.push(this.page.modeItem());\n            return items;\n        });\n    }\n}\n\n/**\n * The drawer and its floating panels: every control outside the graph itself. Holds no graph state —\n * each control calls back into the page, and `sync()` repaints the controls from the page's state.\n */\nclass GraphDrawer {\n    constructor(private readonly page: GraphPage) {}\n\n    wire(): void {\n        document.querySelectorAll<HTMLButtonElement>('.wp-mode[data-wp-mode]').forEach((button: HTMLButtonElement) => {\n            button.addEventListener('click', () => this.page.setMode(button.dataset['wpMode'] ?? 'runtime'));\n        });\n        this.wireLock();\n        this.byId('wp-filter-toggle')?.addEventListener('click', () => this.page.toggleFilter());\n        this.toggles('wp-collapse', 'wp-shell', true);\n        this.toggles('wp-help-btn', 'wp-help', false);\n        this.toggles('wp-help-close', 'wp-help', false);\n        this.toggles('wp-legend-pop', 'wp-legend-popout', false);\n        this.toggles('wp-legend-close', 'wp-legend-popout', false);\n        this.toggles('wp-resp-open', 'wp-resp-panel', false);\n        this.toggles('wp-resp-close', 'wp-resp-panel', false);\n        this.toggles('wp-snapshot-open', 'wp-snapshot', false);\n        window.addEventListener('keydown', (ev: KeyboardEvent) => this.onKey(ev), true);\n        window.addEventListener('hashchange', () => this.page.setMode(location.hash.slice(1)));\n    }\n\n    /** Type-to-search lock: an exact project id (or a unique short name) locks, empty or Esc unlocks. */\n    private wireLock(): void {\n        const input = this.lockInput();\n        if (input === null) return;\n        input.addEventListener('input', () => {\n            const value = input.value.trim();\n            if (value === '') this.page.setLock(null);\n            else if (this.page.hasNode(value)) this.page.setLock(value);\n        });\n        input.addEventListener('change', () => {\n            const match = this.page.resolveName(input.value.trim());\n            if (match !== null) this.page.setLock(match);\n            else input.value = this.page.lockSelection() ?? '';\n        });\n        input.addEventListener('keydown', (ev: KeyboardEvent) => {\n            if (ev.key !== 'Escape') return;\n            ev.preventDefault();\n            input.value = '';\n            this.page.setLock(null);\n            input.blur();\n        });\n    }\n\n    /**\n     * Page keys, in the CAPTURE phase so the open/closed state of the node menu is read before the\n     * menu's own Escape handler closes it: Esc with a menu open only closes the menu.\n     */\n    private onKey(ev: KeyboardEvent): void {\n        if (ev.altKey || ev.ctrlKey || ev.metaKey) return;\n        const target = ev.target;\n        if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) return;\n        const menuOpen = document.getElementById('wp-node-menu') !== null;\n        if (ev.key === '/') {\n            ev.preventDefault();\n            this.lockInput()?.focus();\n            return;\n        }\n        const index = ['1', '2', '3'].indexOf(ev.key);\n        if (index >= 0 && !menuOpen) {\n            this.page.setMode(WpModeState.MODES[index]);\n            return;\n        }\n        if (ev.key === 'Escape' && !menuOpen && this.page.lockSelection() !== null) this.page.setLock(null);\n    }\n\n    /** `button` shows/hides `target`; for the drawer itself it toggles the collapsed class instead. */\n    private toggles(buttonId: string, targetId: string, collapse: boolean): void {\n        const button = this.byId(buttonId);\n        const target = this.byId(targetId);\n        if (button === null || target === null) return;\n        button.addEventListener('click', (ev: MouseEvent) => {\n            ev.stopPropagation();\n            let expanded: boolean;\n            if (collapse) {\n                expanded = !target.classList.toggle('wp-collapsed');\n            } else {\n                target.hidden = !target.hidden;\n                expanded = !target.hidden;\n            }\n            document.querySelectorAll(`[aria-controls=\"${targetId}\"], #${buttonId}[aria-expanded]`).forEach(\n                (el: Element) => el.setAttribute('aria-expanded', String(expanded)),\n            );\n        });\n    }\n\n    /** Repaint every control from the page's state. */\n    sync(modes: WpModeState, locked: string | null, filtering: boolean): void {\n        const reason = modes.impactReason();\n        document.querySelectorAll<HTMLButtonElement>('.wp-mode[data-wp-mode]').forEach((button: HTMLButtonElement) => {\n            const mode = button.dataset['wpMode'] ?? '';\n            button.setAttribute('aria-pressed', String(mode === modes.mode));\n            button.disabled = !modes.available(mode);\n            if (mode === 'impact') button.title = reason === '' ? 'Key 3' : reason;\n        });\n        const reasonEl = this.byId('wp-impact-reason');\n        if (reasonEl !== null) {\n            reasonEl.textContent = reason;\n            reasonEl.hidden = reason === '';\n        }\n        document.querySelectorAll<HTMLElement>('[data-wp-legend-mode]').forEach((section: HTMLElement) => {\n            section.hidden = section.dataset['wpLegendMode'] !== modes.mode;\n        });\n        document.querySelectorAll<HTMLElement>('[data-wp-impact-note]').forEach((note: HTMLElement) => {\n            note.textContent = this.impactNote(modes);\n        });\n        const title = this.byId('wp-legend-pop-title');\n        if (title !== null) title.textContent = `Legend · ${modes.name(modes.mode)}`;\n        const input = this.lockInput();\n        if (input !== null && document.activeElement !== input) input.value = locked ?? '';\n        this.syncFilterToggle(locked, filtering);\n        this.crumb(modes.name(modes.mode), locked);\n    }\n\n    private syncFilterToggle(locked: string | null, filtering: boolean): void {\n        const toggle = this.byId('wp-filter-toggle') as HTMLButtonElement | null;\n        if (toggle === null) return;\n        toggle.setAttribute('aria-pressed', String(filtering));\n        toggle.disabled = !filtering && locked === null;\n        toggle.title = toggle.disabled ? 'Lock a project first' : '';\n    }\n\n    private impactNote(modes: WpModeState): string {\n        const impact = modes.impact;\n        if (impact === null || !impact.available) return '';\n        return (\n            `${impact.touched.length} touched · ${impact.affected.length} affected · ` +\n            `${impact.buildInputs.length} build inputs — nx affected since fork point ${impact.base}, ` +\n            `${impact.changedFiles} changed files.`\n        );\n    }\n\n    /** \"Mode: <b>Runtime</b> · Locked: <b>x</b>\", built with text nodes so no name is parsed as HTML. */\n    private crumb(mode: string, locked: string | null): void {\n        const crumb = this.byId('wp-crumb');\n        if (crumb === null) return;\n        const bold = (text: string): HTMLElement => {\n            const b = document.createElement('b');\n            b.textContent = text;\n            return b;\n        };\n        const parts: (string | Node)[] = ['Mode: ', bold(mode)];\n        if (locked !== null) parts.push(' · Locked: ', bold(locked));\n        crumb.replaceChildren(...parts);\n    }\n\n    private lockInput(): HTMLInputElement | null {\n        return document.getElementById('wp-lock') as HTMLInputElement | null;\n    }\n\n    private byId(id: string): HTMLElement | null {\n        return document.getElementById(id);\n    }\n}\n\nclass GraphPage extends WpFilterPage {\n    private highlighter: GraphHighlighter | null = null;\n    private readonly modes = new WpModeState();\n    private readonly drawer = new GraphDrawer(this);\n\n    protected override captureBinding(_svg: SVGSVGElement | null): () => void {\n        const previous = this.highlighter;\n        return (): void => {\n            this.highlighter = previous;\n            this.filterCards();\n            this.syncControls();\n        };\n    }\n\n    protected override wireControls(): void {\n        this.drawer.wire();\n        this.syncControls();\n    }\n\n    protected override nodeDot(node: RenderNodeJson): string {\n        const modes = node.modes;\n        if (modes === null) return node.dot;\n        if (this.modes.mode === 'architecture') return modes.architecture;\n        if (this.modes.mode === 'impact') return modes[this.modes.status(node.id)];\n        return modes.runtime;\n    }\n\n    protected override usesFullDot(): boolean {\n        return this.modes.mode === 'runtime';\n    }\n\n    protected wireSvg(svg: SVGSVGElement): void {\n        this.highlighter = new GraphHighlighter(svg, this.chain, this.model, this);\n        this.highlighter.wire();\n        this.filterCards();\n        this.syncControls();\n        svg.querySelectorAll<SVGGElement>('g.node').forEach((node: SVGGElement) => {\n            if (node.querySelector('title')?.textContent === this.anchor)\n                node.classList.add('wp-filter-anchor');\n        });\n    }\n\n    lockSelection(): string | null {\n        return this.locked;\n    }\n\n    hasNode(id: string): boolean {\n        return this.model.nodes.some((node: RenderNodeJson): boolean => node.id === id);\n    }\n\n    /** An exact id, else the one id whose short name (after any scope) is `text`; null if none or several. */\n    resolveName(text: string): string | null {\n        if (text === '') return null;\n        if (this.hasNode(text)) return text;\n        const matches = this.model.nodes.filter(\n            (node: RenderNodeJson): boolean => node.id.split('/').pop() === text,\n        );\n        return matches.length === 1 ? matches[0].id : null;\n    }\n\n    setLock(name: string | null): void {\n        this.locked = name;\n        this.highlighter?.relight();\n        this.filterCards();\n        this.syncControls();\n    }\n\n    setMode(mode: string): void {\n        if (mode === this.modes.mode || !this.modes.set(mode)) return;\n        this.syncControls();\n        this.redraw();\n    }\n\n    /** The drawer's \"Hide unconnected\": filter to the locked box's chain, or turn the filter off. */\n    toggleFilter(): void {\n        if (this.anchor !== null) this.filter(null);\n        else if (this.locked !== null) this.filter(this.locked);\n    }\n\n    /** The node menu's \"Mode ▸\" submenu: one radio item per mode, Impact disabled with its reason. */\n    modeItem(): WpNodeMenuItem {\n        const children = WpModeState.MODES.map((mode: string): WpNodeMenuItem => {\n            const item = new WpNodeMenuItem(this.modes.name(mode), (): void => this.setMode(mode));\n            item.checked = mode === this.modes.mode;\n            if (!this.modes.available(mode)) item.disabledReason = this.modes.impactReason();\n            return item;\n        });\n        return new WpNodeMenuItem('Mode', (): void => {}, children);\n    }\n\n    private syncControls(): void {\n        this.drawer.sync(this.modes, this.locked, this.anchor !== null);\n    }\n\n    private filterCards(): void {\n        const lit = this.locked === null ? this.retained : this.chain.nodes(this.locked);\n        document.querySelectorAll('.wp-resp-card').forEach((card: Element) => {\n            const name = card.getAttribute('data-node');\n            card.classList.toggle(\n                'wp-hidden',\n                name === null || !this.retained.has(name) || !lit.has(name),\n            );\n        });\n    }\n}\n\nnew GraphPage(__RENDER_MODEL__).render();\n"]}

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

@@ -43,6 +43,11 @@ export declare class GraphVisualizer {
     private readonly cycles;
     /** The ONE floating-node-menu implementation, shared with the per-project design pages. */
     private readonly nodeMenu;
+    private readonly styler;
+    private readonly legend;
+    private readonly shell;
+    private readonly pageStyles;
+    private readonly navigation;
     /**
      * 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
@@ -52,27 +57,10 @@ export declare class GraphVisualizer {
     constructor(clientJs?: () => string, filterJs?: () => string);
     /**
      * A project tagged `drawOnGraph:false` is hidden from the rendered graph —
-     * its node, its rank placement, its dropdown option, its responsibilities
+     * its node, its rank placement, its lock-search option, its responsibilities
      * card, and every edge touching it are all omitted. It stays in the JSON.
      */
     private isHidden;
-    /**
-     * Fill color for an env set — the color of the first env in the set that has
-     * a known color, else the default.
-     */
-    private frameworkColor;
-    /**
-     * Role border styling — fill stays keyed on framework; the border shows a
-     * project's ROLE at a glance. Server and client are the top-level runnable
-     * nodes, so they get bold, colored borders to stand out:
-     *   server       → thick GREEN border  (a runnable server app)
-     *   app          → thick BLUE border   (a runnable non-HTTP app, e.g. a tooling app)
-     *   bundle       → thick PURPLE border (an aggregator that bundles several apps)
-     *   client       → thick RED border    (a client app, e.g. angular)
-     *   designed-lib → bold border         (a library with a generated @DocumentDesign design)
-     *   lib / other  → plain thin border
-     */
-    private roleBorderAttrs;
     /**
      * Edge styling by API-relation kind (why the edge exists):
      *   implements       → BLACK dashed (a controller serves this api-lib's contract)
@@ -135,26 +123,26 @@ export declare class GraphVisualizer {
     private dotNodes;
     private dotEdges;
     /**
-     * Generate interactive HTML with embedded SVG using viz.js
+     * Generate the interactive page: the drawer shell around a viz.js-rendered graph.
+     *
+     * The Impact sidecar is a plain `<script src>` loaded BEFORE the page scripts, so the page knows
+     * the branch's impact when it first draws. It is per-branch and gitignored (graph-impact.ts):
+     * when it is absent the browser skips it and Impact is disabled with its reason.
      */
     generateHTML(model: GraphRenderModel, links: DesignLink[], title?: string, lockControl?: string, responsibilitiesHtml?: string): string;
+    /** Shared menu/dim/filter/zoom rules first, then the page's own, so its `#graph` rules win. */
+    private styles;
     /**
-     * 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
-     * ancestor + descendant chain stays lit while everything else stays dimmed —
-     * and narrows the responsibilities list below the graph to just that chain.
-     * The first option, "All", is the default and clears the lock. Hover still
-     * works on top of a lock; leaving a box returns to the locked view.
+     * The drawer's type-to-search lock field, replacing a `<select>` that listed every project and
+     * was unusable at hundreds of options. Picking a project LOCKS the graph into that box's hover
+     * view — its full ancestor + descendant chain stays lit while everything else dims — and narrows
+     * the responsibilities panel to that chain. Clearing the field, or Esc, unlocks.
      *
+     * Each option's VALUE is the node id the SVG is keyed on; its label is the level and short name.
      * Options are ordered by level DESCENDING to match the responsibilities cards.
      */
     lockControl(graph: EnhancedGraph): string;
-    private styles;
-    private componentStyles;
-    private legend;
-    private fillItems;
-    private borderItems;
-    private edgeItems;
+    private escapeHtml;
     /**
      * 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.