@webpieces/nx-webpieces-rules 0.4.977 → 0.4.979

package/src/lib/graph-multi-select.client.js

@@ -0,0 +1,222 @@
+"use strict";
+/*
+ * The multi-select pulldown with search behind the drawer's "Keep connected to" and "Focus" (#1385).
+ *
+ * Prepended to graph-visualizer.client.js like graph-mode-state.client.ts, so both viewers (the
+ * architecture page and the runtime page) run the ONE implementation. It knows nothing about graphs:
+ * each instance reads and changes its picks through a WpMultiSource the page supplies.
+ */
+/**
+ * One multi-select pulldown with search (#1385) — ONE implementation, two instances: "Keep connected
+ * to" and "Focus". Its markup is graph-page-shell.ts `multiSelect()`; this owns the behaviour:
+ *  - one checkbox row per option, alphabetical (the shell's order);
+ *  - the search matches ANYWHERE in the name, case-insensitively, and highlights the match;
+ *  - ↑/↓ move, Enter toggles (Space too while the query is empty), and the query stays after a toggle
+ *    so several matches can be picked in a row;
+ *  - the closed field shows the picks as removable chips, or "None (off)";
+ *  - the footer says "N selected", and Clear all turns the pulldown off.
+ * It holds no picks of its own: every change goes to the page, and `sync()` repaints from it.
+ */
+class WpMultiSelect {
+    key;
+    source;
+    activeId = null;
+    constructor(key, source) {
+        this.key = key;
+        this.source = source;
+    }
+    wire() {
+        // No stopPropagation: the page's outside-click handler closes every OTHER open pulldown.
+        this.byId('field')?.addEventListener('click', () => {
+            if (this.isOpen())
+                this.close(false);
+            else
+                this.open();
+        });
+        this.byId('clear')?.addEventListener('click', () => {
+            this.source.clear();
+            this.search()?.focus({ preventScroll: true });
+        });
+        const search = this.search();
+        search?.addEventListener('input', () => {
+            this.activeId = null;
+            this.paint();
+        });
+        search?.addEventListener('keydown', (ev) => this.onKey(ev));
+        for (const row of this.rows()) {
+            // Keep keyboard focus in the search box, so a click pick works like an Enter pick.
+            row.addEventListener('mousedown', (ev) => ev.preventDefault());
+            row.addEventListener('click', () => {
+                this.activeId = this.idOf(row);
+                this.source.toggle(this.activeId);
+            });
+        }
+    }
+    isOpen() {
+        return this.pop()?.hidden === false;
+    }
+    /** Open with the cursor in an EMPTY search box: the query lasts while it is open, not across opens. */
+    open() {
+        const pop = this.pop();
+        if (pop === null)
+            return;
+        const search = this.search();
+        if (search !== null)
+            search.value = '';
+        this.activeId = null;
+        pop.hidden = false;
+        this.byId('trigger')?.setAttribute('aria-expanded', 'true');
+        this.paint();
+        this.search()?.focus({ preventScroll: true });
+    }
+    /** Close; `returnFocus` puts the keyboard back on the pulldown's own button. */
+    close(returnFocus) {
+        const pop = this.pop();
+        if (pop === null || pop.hidden)
+            return;
+        pop.hidden = true;
+        const trigger = this.byId('trigger');
+        trigger?.setAttribute('aria-expanded', 'false');
+        if (returnFocus)
+            trigger?.focus({ preventScroll: true });
+    }
+    /**
+     * Whether a click happened inside this pulldown: an outside click closes it. Read from the event's
+     * PATH, not from the target's ancestors — a pick repaints the row it was clicked on, so by the time
+     * the click reaches the document its target (the old `<mark>`) is no longer in the page.
+     */
+    clicked(ev) {
+        const root = document.getElementById(`wp-${this.key}`);
+        return root !== null && ev.composedPath().includes(root);
+    }
+    /** Repaint the chips, the footer and (while open) the rows from the page's picks. */
+    sync() {
+        this.chips();
+        const count = this.byId('count');
+        if (count !== null)
+            count.textContent = `${this.source.selected().size} selected`;
+        if (this.isOpen())
+            this.paint();
+    }
+    onKey(ev) {
+        const query = this.search()?.value ?? '';
+        if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+            ev.preventDefault();
+            this.move(ev.key === 'ArrowDown' ? 1 : -1);
+            return;
+        }
+        const toggles = ev.key === 'Enter' || (ev.key === ' ' && query === '');
+        if (!toggles)
+            return;
+        ev.preventDefault();
+        const shown = this.shownRows();
+        const active = shown.find((row) => this.idOf(row) === this.activeId) ?? shown[0];
+        if (active === undefined)
+            return;
+        this.activeId = this.idOf(active);
+        this.source.toggle(this.activeId);
+    }
+    move(step) {
+        const shown = this.shownRows();
+        if (shown.length === 0)
+            return;
+        const index = shown.findIndex((row) => this.idOf(row) === this.activeId);
+        const next = index < 0 ? (step > 0 ? 0 : shown.length - 1) : Math.min(shown.length - 1, Math.max(0, index + step));
+        this.activeId = this.idOf(shown[next]);
+        this.paint();
+        shown[next].scrollIntoView({ block: 'nearest' });
+    }
+    /** Show the rows the query and the page allow, highlight the match, and tick the picks. */
+    paint() {
+        const query = (this.search()?.value ?? '').trim().toLowerCase();
+        const selected = this.source.selected();
+        let shown = 0;
+        for (const row of this.rows()) {
+            const id = this.idOf(row);
+            const at = id.toLowerCase().indexOf(query);
+            row.hidden = at < 0 || !this.source.available(id);
+            const picked = selected.has(id);
+            row.setAttribute('aria-selected', String(picked));
+            const box = row.querySelector('input');
+            if (box !== null)
+                box.checked = picked;
+            row.classList.toggle('wp-multi-active', !row.hidden && id === this.activeId);
+            if (row.hidden)
+                continue;
+            shown++;
+            this.highlight(row, id, at, query.length);
+        }
+        const empty = this.byId('empty');
+        if (empty !== null)
+            empty.hidden = shown > 0;
+    }
+    /** The name with its matched part in a `<mark>`, built from text nodes so no name is parsed as HTML. */
+    highlight(row, id, at, length) {
+        const name = row.querySelector('.wp-multi-name');
+        if (name === null)
+            return;
+        if (length === 0) {
+            name.replaceChildren(id);
+            return;
+        }
+        const mark = document.createElement('mark');
+        mark.textContent = id.slice(at, at + length);
+        name.replaceChildren(id.slice(0, at), mark, id.slice(at + length));
+    }
+    /** One removable chip per pick, alphabetical; a pick that is not drawn right now says "hidden". */
+    chips() {
+        const host = this.byId('chips');
+        if (host === null)
+            return;
+        const picks = [...this.source.selected()].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+        if (picks.length === 0) {
+            const none = document.createElement('span');
+            none.className = 'wp-multi-none';
+            none.textContent = 'None (off)';
+            host.replaceChildren(none);
+            return;
+        }
+        host.replaceChildren(...picks.map((id) => this.chip(id)));
+    }
+    chip(id) {
+        const chip = document.createElement('span');
+        chip.className = 'wp-multi-chip';
+        chip.dataset['wpPick'] = id;
+        chip.append(id);
+        if (!this.source.available(id)) {
+            chip.classList.add('wp-multi-chip-hidden');
+            const note = document.createElement('small');
+            note.textContent = 'hidden';
+            chip.append(' ', note);
+        }
+        const remove = document.createElement('button');
+        remove.type = 'button';
+        remove.textContent = '✕';
+        remove.setAttribute('aria-label', `Remove ${id}`);
+        remove.addEventListener('click', (ev) => {
+            ev.stopPropagation();
+            this.source.toggle(id);
+        });
+        chip.append(remove);
+        return chip;
+    }
+    shownRows() {
+        return this.rows().filter((row) => !row.hidden);
+    }
+    rows() {
+        return Array.from(document.querySelectorAll(`#wp-${this.key}-list .wp-multi-option`));
+    }
+    idOf(row) {
+        return row.dataset['wpOption'] ?? '';
+    }
+    search() {
+        return this.byId('search');
+    }
+    pop() {
+        return this.byId('pop');
+    }
+    byId(part) {
+        return document.getElementById(`wp-${this.key}-${part}`);
+    }
+}
+//# sourceMappingURL=graph-multi-select.client.js.map

package/src/lib/graph-multi-select.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-multi-select.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-multi-select.client.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * The multi-select pulldown with search behind the drawer's \"Keep connected to\" and \"Focus\" (#1385).\n *\n * Prepended to graph-visualizer.client.js like graph-mode-state.client.ts, so both viewers (the\n * architecture page and the runtime page) run the ONE implementation. It knows nothing about graphs:\n * each instance reads and changes its picks through a WpMultiSource the page supplies.\n */\n\n/**\n * What one multi-select pulldown reads and changes on the page: its picks, which options it may offer\n * right now, and how a toggle or Clear all lands. Behaviour, so an interface.\n */\ninterface WpMultiSource {\n    selected(): ReadonlySet<string>;\n    /** Whether `id` is drawn right now: an unavailable option is not offered, and its chip says \"hidden\". */\n    available(id: string): boolean;\n    toggle(id: string): void;\n    clear(): void;\n}\n\n/**\n * One multi-select pulldown with search (#1385) — ONE implementation, two instances: \"Keep connected\n * to\" and \"Focus\". Its markup is graph-page-shell.ts `multiSelect()`; this owns the behaviour:\n *  - one checkbox row per option, alphabetical (the shell's order);\n *  - the search matches ANYWHERE in the name, case-insensitively, and highlights the match;\n *  - ↑/↓ move, Enter toggles (Space too while the query is empty), and the query stays after a toggle\n *    so several matches can be picked in a row;\n *  - the closed field shows the picks as removable chips, or \"None (off)\";\n *  - the footer says \"N selected\", and Clear all turns the pulldown off.\n * It holds no picks of its own: every change goes to the page, and `sync()` repaints from it.\n */\nclass WpMultiSelect {\n    private activeId: string | null = null;\n\n    constructor(\n        private readonly key: string,\n        private readonly source: WpMultiSource,\n    ) {}\n\n    wire(): void {\n        // No stopPropagation: the page's outside-click handler closes every OTHER open pulldown.\n        this.byId('field')?.addEventListener('click', () => {\n            if (this.isOpen()) this.close(false);\n            else this.open();\n        });\n        this.byId('clear')?.addEventListener('click', () => {\n            this.source.clear();\n            this.search()?.focus({ preventScroll: true });\n        });\n        const search = this.search();\n        search?.addEventListener('input', () => {\n            this.activeId = null;\n            this.paint();\n        });\n        search?.addEventListener('keydown', (ev: KeyboardEvent) => this.onKey(ev));\n        for (const row of this.rows()) {\n            // Keep keyboard focus in the search box, so a click pick works like an Enter pick.\n            row.addEventListener('mousedown', (ev: MouseEvent) => ev.preventDefault());\n            row.addEventListener('click', () => {\n                this.activeId = this.idOf(row);\n                this.source.toggle(this.activeId);\n            });\n        }\n    }\n\n    isOpen(): boolean {\n        return this.pop()?.hidden === false;\n    }\n\n    /** Open with the cursor in an EMPTY search box: the query lasts while it is open, not across opens. */\n    open(): void {\n        const pop = this.pop();\n        if (pop === null) return;\n        const search = this.search();\n        if (search !== null) search.value = '';\n        this.activeId = null;\n        pop.hidden = false;\n        this.byId('trigger')?.setAttribute('aria-expanded', 'true');\n        this.paint();\n        this.search()?.focus({ preventScroll: true });\n    }\n\n    /** Close; `returnFocus` puts the keyboard back on the pulldown's own button. */\n    close(returnFocus: boolean): void {\n        const pop = this.pop();\n        if (pop === null || pop.hidden) return;\n        pop.hidden = true;\n        const trigger = this.byId('trigger');\n        trigger?.setAttribute('aria-expanded', 'false');\n        if (returnFocus) trigger?.focus({ preventScroll: true });\n    }\n\n    /**\n     * Whether a click happened inside this pulldown: an outside click closes it. Read from the event's\n     * PATH, not from the target's ancestors — a pick repaints the row it was clicked on, so by the time\n     * the click reaches the document its target (the old `<mark>`) is no longer in the page.\n     */\n    clicked(ev: Event): boolean {\n        const root = document.getElementById(`wp-${this.key}`);\n        return root !== null && ev.composedPath().includes(root);\n    }\n\n    /** Repaint the chips, the footer and (while open) the rows from the page's picks. */\n    sync(): void {\n        this.chips();\n        const count = this.byId('count');\n        if (count !== null) count.textContent = `${this.source.selected().size} selected`;\n        if (this.isOpen()) this.paint();\n    }\n\n    private onKey(ev: KeyboardEvent): void {\n        const query = this.search()?.value ?? '';\n        if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {\n            ev.preventDefault();\n            this.move(ev.key === 'ArrowDown' ? 1 : -1);\n            return;\n        }\n        const toggles = ev.key === 'Enter' || (ev.key === ' ' && query === '');\n        if (!toggles) return;\n        ev.preventDefault();\n        const shown = this.shownRows();\n        const active = shown.find((row: HTMLElement): boolean => this.idOf(row) === this.activeId) ?? shown[0];\n        if (active === undefined) return;\n        this.activeId = this.idOf(active);\n        this.source.toggle(this.activeId);\n    }\n\n    private move(step: number): void {\n        const shown = this.shownRows();\n        if (shown.length === 0) return;\n        const index = shown.findIndex((row: HTMLElement): boolean => this.idOf(row) === this.activeId);\n        const next = index < 0 ? (step > 0 ? 0 : shown.length - 1) : Math.min(shown.length - 1, Math.max(0, index + step));\n        this.activeId = this.idOf(shown[next]);\n        this.paint();\n        shown[next].scrollIntoView({ block: 'nearest' });\n    }\n\n    /** Show the rows the query and the page allow, highlight the match, and tick the picks. */\n    private paint(): void {\n        const query = (this.search()?.value ?? '').trim().toLowerCase();\n        const selected = this.source.selected();\n        let shown = 0;\n        for (const row of this.rows()) {\n            const id = this.idOf(row);\n            const at = id.toLowerCase().indexOf(query);\n            row.hidden = at < 0 || !this.source.available(id);\n            const picked = selected.has(id);\n            row.setAttribute('aria-selected', String(picked));\n            const box = row.querySelector('input');\n            if (box !== null) box.checked = picked;\n            row.classList.toggle('wp-multi-active', !row.hidden && id === this.activeId);\n            if (row.hidden) continue;\n            shown++;\n            this.highlight(row, id, at, query.length);\n        }\n        const empty = this.byId('empty');\n        if (empty !== null) empty.hidden = shown > 0;\n    }\n\n    /** The name with its matched part in a `<mark>`, built from text nodes so no name is parsed as HTML. */\n    private highlight(row: HTMLElement, id: string, at: number, length: number): void {\n        const name = row.querySelector('.wp-multi-name');\n        if (name === null) return;\n        if (length === 0) {\n            name.replaceChildren(id);\n            return;\n        }\n        const mark = document.createElement('mark');\n        mark.textContent = id.slice(at, at + length);\n        name.replaceChildren(id.slice(0, at), mark, id.slice(at + length));\n    }\n\n    /** One removable chip per pick, alphabetical; a pick that is not drawn right now says \"hidden\". */\n    private chips(): void {\n        const host = this.byId('chips');\n        if (host === null) return;\n        const picks = [...this.source.selected()].sort((a: string, b: string): number => a.toLowerCase().localeCompare(b.toLowerCase()));\n        if (picks.length === 0) {\n            const none = document.createElement('span');\n            none.className = 'wp-multi-none';\n            none.textContent = 'None (off)';\n            host.replaceChildren(none);\n            return;\n        }\n        host.replaceChildren(...picks.map((id: string): HTMLElement => this.chip(id)));\n    }\n\n    private chip(id: string): HTMLElement {\n        const chip = document.createElement('span');\n        chip.className = 'wp-multi-chip';\n        chip.dataset['wpPick'] = id;\n        chip.append(id);\n        if (!this.source.available(id)) {\n            chip.classList.add('wp-multi-chip-hidden');\n            const note = document.createElement('small');\n            note.textContent = 'hidden';\n            chip.append(' ', note);\n        }\n        const remove = document.createElement('button');\n        remove.type = 'button';\n        remove.textContent = '✕';\n        remove.setAttribute('aria-label', `Remove ${id}`);\n        remove.addEventListener('click', (ev: MouseEvent) => {\n            ev.stopPropagation();\n            this.source.toggle(id);\n        });\n        chip.append(remove);\n        return chip;\n    }\n\n    private shownRows(): HTMLElement[] {\n        return this.rows().filter((row: HTMLElement): boolean => !row.hidden);\n    }\n\n    private rows(): HTMLElement[] {\n        return Array.from(document.querySelectorAll<HTMLElement>(`#wp-${this.key}-list .wp-multi-option`));\n    }\n\n    private idOf(row: HTMLElement): string {\n        return row.dataset['wpOption'] ?? '';\n    }\n\n    private search(): HTMLInputElement | null {\n        return this.byId('search') as HTMLInputElement | null;\n    }\n\n    private pop(): HTMLElement | null {\n        return this.byId('pop');\n    }\n\n    private byId(part: string): HTMLElement | null {\n        return document.getElementById(`wp-${this.key}-${part}`);\n    }\n}\n"]}

package/src/lib/graph-node-menu.d.ts

@@ -16,7 +16,7 @@
  * ambient globals — see viz-client-globals.d.ts.
  *
  * What the menu does NOT own is the LOCK BEHAVIOUR, because the pages genuinely differ:
- *  - the architecture page already has a `#wp-lock` search field backed by GraphHighlighter (chain
+ *  - the architecture page already has a multi-select Focus pulldown backed by GraphHighlighter (chain
  *    highlight + responsibilities filter), and its menu item drives that, so the two stay in sync;
  *  - a design page and the runtime page have neither lock field nor responsibilities, so they use
  *    `WpNodeLock` below — dim every other box in that graph, light the locked one.

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

@@ -19,7 +19,7 @@ exports.GraphNodeMenu = void 0;
  * ambient globals — see viz-client-globals.d.ts.
  *
  * What the menu does NOT own is the LOCK BEHAVIOUR, because the pages genuinely differ:
- *  - the architecture page already has a `#wp-lock` search field backed by GraphHighlighter (chain
+ *  - the architecture page already has a multi-select Focus pulldown backed by GraphHighlighter (chain
  *    highlight + responsibilities filter), and its menu item drives that, so the two stay in sync;
  *  - a design page and the runtime page have neither lock field nor responsibilities, so they use
  *    `WpNodeLock` below — dim every other box in that graph, light the locked one.

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

@@ -1 +1 @@
-{"version":3,"file":"graph-node-menu.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-node-menu.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAa,aAAa;IACtB;;;;OAIG;IACH,MAAM;QACF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAmDL,CAAC;IACP,CAAC;IAED;;;;;;OAMG;IACH,SAAS,CAAC,KAAa;QACnB,OAAO;UACL,KAAK,WAAW,KAAK;UACrB,KAAK;UACL,KAAK;UACL,KAAK;UACL,KAAK;UACL,KAAK,yCAAyC,CAAC;IACrD,CAAC;IAED,+FAA+F;IAC/F,MAAM;QACF,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;IACjF,CAAC;IAED;;;;OAIG;IACK,UAAU;QACd,OAAO;;;;;;UAML,CAAC;IACP,CAAC;IAEO,UAAU;QACd,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE;UACzB,YAAY,CAAC,QAAQ,EAAE;;cAEnB,IAAI,CAAC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;cAmBlB,IAAI,CAAC,cAAc,EAAE;cACrB,IAAI,CAAC,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2BzB,CAAC;IACP,CAAC;IAEO,cAAc;QAClB,OAAO;;;;;;;;;CASd,CAAC;IACE,CAAC;IAED,yFAAyF;IACjF,WAAW;QACf,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bd,CAAC;IACE,CAAC;IAEO,cAAc;QAClB,OAAO;;;;;;;;UAQL,CAAC;IACP,CAAC;IAED;;;OAGG;IACK,UAAU;QACd,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkCL,CAAC;IACP,CAAC;IAED,2EAA2E;IACnE,aAAa;QACjB,OAAO;;;;;;;;;;;;;;kBAcG,CAAC;IACf,CAAC;CACJ;AAjRD,sCAiRC;AAED;;;;;;;;GAQG;AACH,MAAM,YAAY;IACd,KAAK,CAAC,IAAoB,EAAE,KAAqC;QAC7D,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;QACvB,MAAM,CAAC,SAAS,GAAG,mBAAmB,CAAC;QACvC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,EAAc,EAAQ,EAAE;YACtD,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,KAAK,CAAC,IAAI,CAAC,CAAC;YACZ,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAClB,CAAC;CACJ","sourcesContent":["/**\n * The floating per-node menu, shared by ALL THREE generated graphs.\n *\n * There is exactly ONE implementation of the menu — its CSS, its positioning, its dismissal and the\n * click wiring that opens it — and `architecture/dependencies.html` (graph-visualizer.ts), every\n * project's `design.html` (di-graph/design-visualizer.ts) and `tmp/webpieces/runtime-architecture.html`\n * (runtime-visualizer.ts) all inline these same bytes. Duplicating it into the three emitters is what\n * this module exists to prevent.\n *\n * Why the browser code is emitted as a STRING here rather than living in a compiled `*.client.ts`\n * beside its emitter: `generateDesignHTML` is called straight from a source checkout (by the\n * di-graph-generate executor's unit tests) and has no injection seam for the client text, so a\n * `readCompiledClient` sibling would make the design page unbuildable from source. A string keeps one\n * copy reachable by every emitter with no build-order coupling. The two pages that DO have a compiled\n * client (`graph-visualizer.client.ts`, `runtime-visualizer.client.ts`) call into these classes as\n * ambient globals — see viz-client-globals.d.ts.\n *\n * What the menu does NOT own is the LOCK BEHAVIOUR, because the pages genuinely differ:\n *  - the architecture page already has a `#wp-lock` search field backed by GraphHighlighter (chain\n *    highlight + responsibilities filter), and its menu item drives that, so the two stay in sync;\n *  - a design page and the runtime page have neither lock field nor responsibilities, so they use\n *    `WpNodeLock` below — dim every other box in that graph, light the locked one.\n * All three spell the dim with the SAME class names and the SAME CSS from `dimStyles()`.\n */\nexport class GraphNodeMenu {\n    /**\n     * Menu chrome + the \"this box is clickable\" affordance. Every node is clickable now (the menu\n     * replaced direct navigation), so the cursor/glow is on every box rather than only the ones with\n     * a design page.\n     */\n    styles(): string {\n        return `\n        .wp-node-menu {\n            position: absolute;\n            z-index: 1000;\n            min-width: 150px;\n            padding: 4px 0;\n            background: white;\n            border: 1px solid #cfcfcf;\n            border-radius: 6px;\n            box-shadow: 0 4px 14px rgba(0,0,0,0.22);\n            font-family: Arial, sans-serif;\n            font-size: 14px;\n        }\n        .wp-node-menu-title {\n            padding: 4px 14px 6px;\n            color: #777;\n            font-size: 12px;\n            font-family: monospace;\n            border-bottom: 1px solid #eee;\n            margin-bottom: 4px;\n        }\n        .wp-node-menu-item {\n            display: block;\n            width: 100%;\n            padding: 7px 14px;\n            border: 0;\n            background: none;\n            color: #1565C0;\n            font: inherit;\n            text-align: left;\n            cursor: pointer;\n        }\n        .wp-node-menu-item:hover { background: #E3F2FD; }\n        g.wp-node-clickable { cursor: pointer; outline: none; }\n        /* DOM keyboard focus is independent of graph highlight/Lock and stays dim with its node. */\n        g.wp-node-clickable.wp-keyboard-focus {\n            outline: 2px dashed #7b1fa2;\n            outline-offset: 2px;\n        }\n        /* Every shape Graphviz (or the runtime page's own queue-cylinder redraw) can emit for a node\n         * body: box/record -> polygon, circle -> ellipse, cylinder and the redrawn queue -> path. A\n         * shape left out of this list would be a box that is clickable but never looks it. */\n        g.wp-node-clickable polygon,\n        g.wp-node-clickable ellipse,\n        g.wp-node-clickable path { transition: stroke-width 0.12s ease, filter 0.12s ease; }\n        g.wp-node-clickable:hover polygon,\n        g.wp-node-clickable:hover ellipse,\n        g.wp-node-clickable:hover path {\n            stroke: #8b3cf0;\n            stroke-width: 5;\n            filter: drop-shadow(0 0 6px rgba(139, 60, 240, 0.85));\n        }`;\n    }\n\n    /**\n     * The dim/undim rules a lock (or a hover) toggles, scoped to whatever element holds the rendered\n     * SVG on this page (`#graph` on the architecture page, `.graph` on a design page).\n     *\n     * We ONLY dim: the lit subgraph keeps its exact normal look. The un-dim rules repeat\n     * `svg.wp-dim` so they out-specify the dim rule, which carries an extra type selector.\n     */\n    dimStyles(scope: string): string {\n        return `\n        ${scope} .node, ${scope} .edge { transition: opacity 0.12s ease; }\n        ${scope} svg.wp-dim .node,\n        ${scope} svg.wp-dim .edge { opacity: 0.15; }\n        ${scope} svg.wp-dim .node.wp-focus,\n        ${scope} svg.wp-dim .node.wp-neighbor,\n        ${scope} svg.wp-dim .edge.wp-hl { opacity: 1; }`;\n    }\n\n    /** The whole browser side: the menu, the design-page lock, and the global dismiss handlers. */\n    script(): string {\n        return `${this.menuScript()}\\n${this.lockScript()}\\n${this.dismissScript()}`;\n    }\n\n    /**\n     * `WpNodeMenuItem` + `WpNodeMenu`. Anchored at the node's own bounding box (bottom-left corner,\n     * 4px below it) and clamped so a box at the right edge of a very wide graph still shows its whole\n     * menu. Opening a menu closes any other, so at most one is ever on screen.\n     */\n    private itemScript(): string {\n        return `\n        class WpNodeMenuItem {\n            constructor(label, onSelect) {\n                this.label = label;\n                this.onSelect = onSelect;\n            }\n        }`;\n    }\n\n    private menuScript(): string {\n        return `${this.itemScript()}\n        ${WpMenuButton.toString()}\n        class WpNodeMenu {\n            ${this.focusScript()}\n            static open(nodeEl, name, items) {\n                WpNodeMenu.close();\n                WpNodeMenu.owner = nodeEl;\n                WpNodeMenu.ownerKeyboard = WpNodeMenu.keyboard;\n                const menu = document.createElement('div');\n                menu.id = 'wp-node-menu';\n                menu.className = 'wp-node-menu';\n                menu.addEventListener('click', function (ev) { ev.stopPropagation(); });\n                const heading = document.createElement('div');\n                heading.className = 'wp-node-menu-title';\n                heading.textContent = name;\n                menu.appendChild(heading);\n                for (const item of items) menu.appendChild(WpNodeMenu.button(item));\n                document.body.appendChild(menu);\n                WpNodeMenu.place(menu, nodeEl);\n                menu.querySelector('button')?.focus({ preventScroll: true });\n            }\n            static button(item) { return new WpMenuButton().build(item, WpNodeMenu.close.bind(WpNodeMenu)); }\n            ${this.positionScript()}\n            ${this.keyboardScript()}\n            static wire(svg, itemsFor) {\n                svg.querySelectorAll('g.node').forEach(function (node) {\n                    const title = node.querySelector('title');\n                    const name = title === null || title.textContent === null\n                        ? '' : title.textContent.trim();\n                    if (name === '') return;\n                    if (node.classList.contains('wp-layout')) return;\n                    if (WpNodeMenu.wired.has(node)) return;\n                    WpNodeMenu.wired.add(node);\n                    node.addEventListener('focus', function () {\n                        node.classList.toggle('wp-keyboard-focus', WpNodeMenu.keyboard);\n                    });\n                    node.addEventListener('blur', function () {\n                        node.classList.remove('wp-keyboard-focus');\n                    });\n                    node.classList.add('wp-node-clickable');\n                    node.setAttribute('tabindex', '0');\n                    node.setAttribute('role', 'button');\n                    WpNodeMenu.wireKeyboard(node, name, itemsFor);\n                    node.addEventListener('click', function (ev) {\n                        ev.preventDefault();\n                        ev.stopPropagation();\n                        WpNodeMenu.open(node, name, itemsFor(name, node));\n                    });\n                });\n            }\n        }`;\n    }\n\n    private positionScript(): string {\n        return `            static place(menu, nodeEl) {\n                const box = nodeEl.getBoundingClientRect();\n                const own = menu.getBoundingClientRect();\n                const maxLeft = window.scrollX + document.documentElement.clientWidth - own.width - 8;\n                let left = box.left + window.scrollX;\n                if (left > maxLeft) left = Math.max(window.scrollX + 8, maxLeft);\n                menu.style.left = left + 'px';\n                menu.style.top = (box.bottom + window.scrollY + 4) + 'px';\n            }\n`;\n    }\n\n    /** Explicit input modality avoids Chromium's pointer-focus :focus-visible heuristics. */\n    private focusScript(): string {\n        return `            static keyboard = false;\n            static owner = null;\n            static ownerKeyboard = false;\n            static wired = new WeakSet();\n            static close(returnFocus = false) {\n                const open = document.getElementById('wp-node-menu');\n                const owner = WpNodeMenu.owner;\n                const keyboard = WpNodeMenu.ownerKeyboard;\n                WpNodeMenu.owner = null;\n                if (open === null) return;\n                open.remove();\n                if (returnFocus && keyboard && owner?.isConnected) {\n                    WpNodeMenu.keyboard = true;\n                    owner.focus({ preventScroll: true });\n                }\n            }\n            static focusedName(svg) {\n                const active = document.activeElement;\n                const menu = document.getElementById('wp-node-menu');\n                const node = menu?.contains(active) && WpNodeMenu.ownerKeyboard\n                    ? WpNodeMenu.owner : active;\n                return svg?.contains(node) && (node === WpNodeMenu.owner || node?.classList.contains('wp-keyboard-focus'))\n                    ? node.querySelector('title')?.textContent.trim() : null;\n            }\n            static restoreFocus(svg, name) {\n                if (name == null) return;\n                const nodes = Array.from(svg.querySelectorAll('g.wp-node-clickable'));\n                const node = nodes.find(node => node.querySelector('title')?.textContent.trim() === name);\n                WpNodeMenu.keyboard = true;\n                (node || nodes[0])?.focus({ preventScroll: true });\n            }\n`;\n    }\n\n    private keyboardScript(): string {\n        return `static wireKeyboard(node, name, itemsFor) {\n            node.addEventListener('keydown', function (ev) {\n                if (ev.key !== 'Enter' && ev.key !== ' ') return;\n                ev.preventDefault();\n                ev.stopPropagation();\n                WpNodeMenu.keyboard = true;\n                WpNodeMenu.open(node, name, itemsFor(name, node));\n            });\n        }`;\n    }\n\n    /**\n     * The lock the DESIGN pages and the RUNTIME page use: neither has a lock field or a responsibilities\n     * list, so locking a box dims every other box in that graph and lights the locked one.\n     */\n    private lockScript(): string {\n        return `\n        class WpNodeLock {\n            constructor(svg) { this.svg = svg; this.locked = null; }\n            rebind(svg) {\n                const name = this.locked;\n                this.svg = svg;\n                this.clear();\n                this.locked = name;\n                if (name === null) return;\n                for (const node of svg.querySelectorAll('g.node')) {\n                    if (node.querySelector('title')?.textContent === name) {\n                        this.lock(name, node);\n                        break;\n                    }\n                }\n            }\n            isLocked(name) { return this.locked === name; }\n            toggle(name, nodeEl) {\n                if (this.locked === name) this.clear();\n                else this.lock(name, nodeEl);\n            }\n            lock(name, nodeEl) {\n                this.clear();\n                this.locked = name;\n                this.svg.classList.add('wp-dim');\n                nodeEl.classList.add('wp-focus');\n            }\n            clear() {\n                this.locked = null;\n                this.svg.classList.remove('wp-dim');\n                this.svg.querySelectorAll('.wp-focus').forEach(function (el) {\n                    el.classList.remove('wp-focus');\n                });\n            }\n        }`;\n    }\n\n    /** Outside click and Escape both dismiss — wired once, on the document. */\n    private dismissScript(): string {\n        return `\n        document.addEventListener('pointerdown', function () {\n            WpNodeMenu.keyboard = false;\n            document.querySelectorAll('.wp-keyboard-focus').forEach(function (node) {\n                node.classList.remove('wp-keyboard-focus');\n            });\n        }, true);\n        document.addEventListener('click', function () { WpNodeMenu.close(); });\n        document.addEventListener('keydown', function (ev) {\n            if (ev.altKey || ev.ctrlKey || ev.metaKey) return;\n            WpNodeMenu.keyboard = true;\n            const active = document.activeElement;\n            if (active?.classList.contains('wp-node-clickable')) active.classList.add('wp-keyboard-focus');\n            if (ev.key === 'Escape') WpNodeMenu.close(true);\n        }, true);`;\n    }\n}\n\n/**\n * One menu item. Selecting it closes the menu (returning keyboard focus to the box it was opened\n * from) and then runs the item.\n *\n * Real TypeScript serialized into every page's menu script with `toString()` (the technique\n * GraphNavigation uses), so it is type-checked here and still needs no compiled sibling file: the\n * design pages render straight from a source checkout. `close` is handed in because WpNodeMenu,\n * which owns it, is declared after this class in the emitted script.\n */\nclass WpMenuButton {\n    build(item: WpNodeMenuItem, close: (returnFocus: boolean) => void): HTMLButtonElement {\n        const button = document.createElement('button');\n        button.type = 'button';\n        button.className = 'wp-node-menu-item';\n        button.textContent = item.label;\n        button.addEventListener('click', (ev: MouseEvent): void => {\n            ev.preventDefault();\n            ev.stopPropagation();\n            close(true);\n            item.onSelect();\n        });\n        return button;\n    }\n}\n"]}
+{"version":3,"file":"graph-node-menu.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-node-menu.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAa,aAAa;IACtB;;;;OAIG;IACH,MAAM;QACF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAmDL,CAAC;IACP,CAAC;IAED;;;;;;OAMG;IACH,SAAS,CAAC,KAAa;QACnB,OAAO;UACL,KAAK,WAAW,KAAK;UACrB,KAAK;UACL,KAAK;UACL,KAAK;UACL,KAAK;UACL,KAAK,yCAAyC,CAAC;IACrD,CAAC;IAED,+FAA+F;IAC/F,MAAM;QACF,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;IACjF,CAAC;IAED;;;;OAIG;IACK,UAAU;QACd,OAAO;;;;;;UAML,CAAC;IACP,CAAC;IAEO,UAAU;QACd,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE;UACzB,YAAY,CAAC,QAAQ,EAAE;;cAEnB,IAAI,CAAC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;cAmBlB,IAAI,CAAC,cAAc,EAAE;cACrB,IAAI,CAAC,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2BzB,CAAC;IACP,CAAC;IAEO,cAAc;QAClB,OAAO;;;;;;;;;CASd,CAAC;IACE,CAAC;IAED,yFAAyF;IACjF,WAAW;QACf,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bd,CAAC;IACE,CAAC;IAEO,cAAc;QAClB,OAAO;;;;;;;;UAQL,CAAC;IACP,CAAC;IAED;;;OAGG;IACK,UAAU;QACd,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkCL,CAAC;IACP,CAAC;IAED,2EAA2E;IACnE,aAAa;QACjB,OAAO;;;;;;;;;;;;;;kBAcG,CAAC;IACf,CAAC;CACJ;AAjRD,sCAiRC;AAED;;;;;;;;GAQG;AACH,MAAM,YAAY;IACd,KAAK,CAAC,IAAoB,EAAE,KAAqC;QAC7D,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;QACvB,MAAM,CAAC,SAAS,GAAG,mBAAmB,CAAC;QACvC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,EAAc,EAAQ,EAAE;YACtD,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,KAAK,CAAC,IAAI,CAAC,CAAC;YACZ,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAClB,CAAC;CACJ","sourcesContent":["/**\n * The floating per-node menu, shared by ALL THREE generated graphs.\n *\n * There is exactly ONE implementation of the menu — its CSS, its positioning, its dismissal and the\n * click wiring that opens it — and `architecture/dependencies.html` (graph-visualizer.ts), every\n * project's `design.html` (di-graph/design-visualizer.ts) and `tmp/webpieces/runtime-architecture.html`\n * (runtime-visualizer.ts) all inline these same bytes. Duplicating it into the three emitters is what\n * this module exists to prevent.\n *\n * Why the browser code is emitted as a STRING here rather than living in a compiled `*.client.ts`\n * beside its emitter: `generateDesignHTML` is called straight from a source checkout (by the\n * di-graph-generate executor's unit tests) and has no injection seam for the client text, so a\n * `readCompiledClient` sibling would make the design page unbuildable from source. A string keeps one\n * copy reachable by every emitter with no build-order coupling. The two pages that DO have a compiled\n * client (`graph-visualizer.client.ts`, `runtime-visualizer.client.ts`) call into these classes as\n * ambient globals — see viz-client-globals.d.ts.\n *\n * What the menu does NOT own is the LOCK BEHAVIOUR, because the pages genuinely differ:\n *  - the architecture page already has a multi-select Focus pulldown backed by GraphHighlighter (chain\n *    highlight + responsibilities filter), and its menu item drives that, so the two stay in sync;\n *  - a design page and the runtime page have neither lock field nor responsibilities, so they use\n *    `WpNodeLock` below — dim every other box in that graph, light the locked one.\n * All three spell the dim with the SAME class names and the SAME CSS from `dimStyles()`.\n */\nexport class GraphNodeMenu {\n    /**\n     * Menu chrome + the \"this box is clickable\" affordance. Every node is clickable now (the menu\n     * replaced direct navigation), so the cursor/glow is on every box rather than only the ones with\n     * a design page.\n     */\n    styles(): string {\n        return `\n        .wp-node-menu {\n            position: absolute;\n            z-index: 1000;\n            min-width: 150px;\n            padding: 4px 0;\n            background: white;\n            border: 1px solid #cfcfcf;\n            border-radius: 6px;\n            box-shadow: 0 4px 14px rgba(0,0,0,0.22);\n            font-family: Arial, sans-serif;\n            font-size: 14px;\n        }\n        .wp-node-menu-title {\n            padding: 4px 14px 6px;\n            color: #777;\n            font-size: 12px;\n            font-family: monospace;\n            border-bottom: 1px solid #eee;\n            margin-bottom: 4px;\n        }\n        .wp-node-menu-item {\n            display: block;\n            width: 100%;\n            padding: 7px 14px;\n            border: 0;\n            background: none;\n            color: #1565C0;\n            font: inherit;\n            text-align: left;\n            cursor: pointer;\n        }\n        .wp-node-menu-item:hover { background: #E3F2FD; }\n        g.wp-node-clickable { cursor: pointer; outline: none; }\n        /* DOM keyboard focus is independent of graph highlight/Lock and stays dim with its node. */\n        g.wp-node-clickable.wp-keyboard-focus {\n            outline: 2px dashed #7b1fa2;\n            outline-offset: 2px;\n        }\n        /* Every shape Graphviz (or the runtime page's own queue-cylinder redraw) can emit for a node\n         * body: box/record -> polygon, circle -> ellipse, cylinder and the redrawn queue -> path. A\n         * shape left out of this list would be a box that is clickable but never looks it. */\n        g.wp-node-clickable polygon,\n        g.wp-node-clickable ellipse,\n        g.wp-node-clickable path { transition: stroke-width 0.12s ease, filter 0.12s ease; }\n        g.wp-node-clickable:hover polygon,\n        g.wp-node-clickable:hover ellipse,\n        g.wp-node-clickable:hover path {\n            stroke: #8b3cf0;\n            stroke-width: 5;\n            filter: drop-shadow(0 0 6px rgba(139, 60, 240, 0.85));\n        }`;\n    }\n\n    /**\n     * The dim/undim rules a lock (or a hover) toggles, scoped to whatever element holds the rendered\n     * SVG on this page (`#graph` on the architecture page, `.graph` on a design page).\n     *\n     * We ONLY dim: the lit subgraph keeps its exact normal look. The un-dim rules repeat\n     * `svg.wp-dim` so they out-specify the dim rule, which carries an extra type selector.\n     */\n    dimStyles(scope: string): string {\n        return `\n        ${scope} .node, ${scope} .edge { transition: opacity 0.12s ease; }\n        ${scope} svg.wp-dim .node,\n        ${scope} svg.wp-dim .edge { opacity: 0.15; }\n        ${scope} svg.wp-dim .node.wp-focus,\n        ${scope} svg.wp-dim .node.wp-neighbor,\n        ${scope} svg.wp-dim .edge.wp-hl { opacity: 1; }`;\n    }\n\n    /** The whole browser side: the menu, the design-page lock, and the global dismiss handlers. */\n    script(): string {\n        return `${this.menuScript()}\\n${this.lockScript()}\\n${this.dismissScript()}`;\n    }\n\n    /**\n     * `WpNodeMenuItem` + `WpNodeMenu`. Anchored at the node's own bounding box (bottom-left corner,\n     * 4px below it) and clamped so a box at the right edge of a very wide graph still shows its whole\n     * menu. Opening a menu closes any other, so at most one is ever on screen.\n     */\n    private itemScript(): string {\n        return `\n        class WpNodeMenuItem {\n            constructor(label, onSelect) {\n                this.label = label;\n                this.onSelect = onSelect;\n            }\n        }`;\n    }\n\n    private menuScript(): string {\n        return `${this.itemScript()}\n        ${WpMenuButton.toString()}\n        class WpNodeMenu {\n            ${this.focusScript()}\n            static open(nodeEl, name, items) {\n                WpNodeMenu.close();\n                WpNodeMenu.owner = nodeEl;\n                WpNodeMenu.ownerKeyboard = WpNodeMenu.keyboard;\n                const menu = document.createElement('div');\n                menu.id = 'wp-node-menu';\n                menu.className = 'wp-node-menu';\n                menu.addEventListener('click', function (ev) { ev.stopPropagation(); });\n                const heading = document.createElement('div');\n                heading.className = 'wp-node-menu-title';\n                heading.textContent = name;\n                menu.appendChild(heading);\n                for (const item of items) menu.appendChild(WpNodeMenu.button(item));\n                document.body.appendChild(menu);\n                WpNodeMenu.place(menu, nodeEl);\n                menu.querySelector('button')?.focus({ preventScroll: true });\n            }\n            static button(item) { return new WpMenuButton().build(item, WpNodeMenu.close.bind(WpNodeMenu)); }\n            ${this.positionScript()}\n            ${this.keyboardScript()}\n            static wire(svg, itemsFor) {\n                svg.querySelectorAll('g.node').forEach(function (node) {\n                    const title = node.querySelector('title');\n                    const name = title === null || title.textContent === null\n                        ? '' : title.textContent.trim();\n                    if (name === '') return;\n                    if (node.classList.contains('wp-layout')) return;\n                    if (WpNodeMenu.wired.has(node)) return;\n                    WpNodeMenu.wired.add(node);\n                    node.addEventListener('focus', function () {\n                        node.classList.toggle('wp-keyboard-focus', WpNodeMenu.keyboard);\n                    });\n                    node.addEventListener('blur', function () {\n                        node.classList.remove('wp-keyboard-focus');\n                    });\n                    node.classList.add('wp-node-clickable');\n                    node.setAttribute('tabindex', '0');\n                    node.setAttribute('role', 'button');\n                    WpNodeMenu.wireKeyboard(node, name, itemsFor);\n                    node.addEventListener('click', function (ev) {\n                        ev.preventDefault();\n                        ev.stopPropagation();\n                        WpNodeMenu.open(node, name, itemsFor(name, node));\n                    });\n                });\n            }\n        }`;\n    }\n\n    private positionScript(): string {\n        return `            static place(menu, nodeEl) {\n                const box = nodeEl.getBoundingClientRect();\n                const own = menu.getBoundingClientRect();\n                const maxLeft = window.scrollX + document.documentElement.clientWidth - own.width - 8;\n                let left = box.left + window.scrollX;\n                if (left > maxLeft) left = Math.max(window.scrollX + 8, maxLeft);\n                menu.style.left = left + 'px';\n                menu.style.top = (box.bottom + window.scrollY + 4) + 'px';\n            }\n`;\n    }\n\n    /** Explicit input modality avoids Chromium's pointer-focus :focus-visible heuristics. */\n    private focusScript(): string {\n        return `            static keyboard = false;\n            static owner = null;\n            static ownerKeyboard = false;\n            static wired = new WeakSet();\n            static close(returnFocus = false) {\n                const open = document.getElementById('wp-node-menu');\n                const owner = WpNodeMenu.owner;\n                const keyboard = WpNodeMenu.ownerKeyboard;\n                WpNodeMenu.owner = null;\n                if (open === null) return;\n                open.remove();\n                if (returnFocus && keyboard && owner?.isConnected) {\n                    WpNodeMenu.keyboard = true;\n                    owner.focus({ preventScroll: true });\n                }\n            }\n            static focusedName(svg) {\n                const active = document.activeElement;\n                const menu = document.getElementById('wp-node-menu');\n                const node = menu?.contains(active) && WpNodeMenu.ownerKeyboard\n                    ? WpNodeMenu.owner : active;\n                return svg?.contains(node) && (node === WpNodeMenu.owner || node?.classList.contains('wp-keyboard-focus'))\n                    ? node.querySelector('title')?.textContent.trim() : null;\n            }\n            static restoreFocus(svg, name) {\n                if (name == null) return;\n                const nodes = Array.from(svg.querySelectorAll('g.wp-node-clickable'));\n                const node = nodes.find(node => node.querySelector('title')?.textContent.trim() === name);\n                WpNodeMenu.keyboard = true;\n                (node || nodes[0])?.focus({ preventScroll: true });\n            }\n`;\n    }\n\n    private keyboardScript(): string {\n        return `static wireKeyboard(node, name, itemsFor) {\n            node.addEventListener('keydown', function (ev) {\n                if (ev.key !== 'Enter' && ev.key !== ' ') return;\n                ev.preventDefault();\n                ev.stopPropagation();\n                WpNodeMenu.keyboard = true;\n                WpNodeMenu.open(node, name, itemsFor(name, node));\n            });\n        }`;\n    }\n\n    /**\n     * The lock the DESIGN pages and the RUNTIME page use: neither has a lock field or a responsibilities\n     * list, so locking a box dims every other box in that graph and lights the locked one.\n     */\n    private lockScript(): string {\n        return `\n        class WpNodeLock {\n            constructor(svg) { this.svg = svg; this.locked = null; }\n            rebind(svg) {\n                const name = this.locked;\n                this.svg = svg;\n                this.clear();\n                this.locked = name;\n                if (name === null) return;\n                for (const node of svg.querySelectorAll('g.node')) {\n                    if (node.querySelector('title')?.textContent === name) {\n                        this.lock(name, node);\n                        break;\n                    }\n                }\n            }\n            isLocked(name) { return this.locked === name; }\n            toggle(name, nodeEl) {\n                if (this.locked === name) this.clear();\n                else this.lock(name, nodeEl);\n            }\n            lock(name, nodeEl) {\n                this.clear();\n                this.locked = name;\n                this.svg.classList.add('wp-dim');\n                nodeEl.classList.add('wp-focus');\n            }\n            clear() {\n                this.locked = null;\n                this.svg.classList.remove('wp-dim');\n                this.svg.querySelectorAll('.wp-focus').forEach(function (el) {\n                    el.classList.remove('wp-focus');\n                });\n            }\n        }`;\n    }\n\n    /** Outside click and Escape both dismiss — wired once, on the document. */\n    private dismissScript(): string {\n        return `\n        document.addEventListener('pointerdown', function () {\n            WpNodeMenu.keyboard = false;\n            document.querySelectorAll('.wp-keyboard-focus').forEach(function (node) {\n                node.classList.remove('wp-keyboard-focus');\n            });\n        }, true);\n        document.addEventListener('click', function () { WpNodeMenu.close(); });\n        document.addEventListener('keydown', function (ev) {\n            if (ev.altKey || ev.ctrlKey || ev.metaKey) return;\n            WpNodeMenu.keyboard = true;\n            const active = document.activeElement;\n            if (active?.classList.contains('wp-node-clickable')) active.classList.add('wp-keyboard-focus');\n            if (ev.key === 'Escape') WpNodeMenu.close(true);\n        }, true);`;\n    }\n}\n\n/**\n * One menu item. Selecting it closes the menu (returning keyboard focus to the box it was opened\n * from) and then runs the item.\n *\n * Real TypeScript serialized into every page's menu script with `toString()` (the technique\n * GraphNavigation uses), so it is type-checked here and still needs no compiled sibling file: the\n * design pages render straight from a source checkout. `close` is handed in because WpNodeMenu,\n * which owns it, is declared after this class in the emitted script.\n */\nclass WpMenuButton {\n    build(item: WpNodeMenuItem, close: (returnFocus: boolean) => void): HTMLButtonElement {\n        const button = document.createElement('button');\n        button.type = 'button';\n        button.className = 'wp-node-menu-item';\n        button.textContent = item.label;\n        button.addEventListener('click', (ev: MouseEvent): void => {\n            ev.preventDefault();\n            ev.stopPropagation();\n            close(true);\n            item.onSelect();\n        });\n        return button;\n    }\n}\n"]}

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

@@ -43,10 +43,21 @@ export declare class ScopeOption {
     constructor(scope: ChangeScope, label: string, subtitle: string);
 }
 export declare const SCOPE_OPTIONS: readonly ScopeOption[];
+/**
+ * One box the "Keep connected to" and "Focus" pulldowns offer (#1385): the node id the SVG is keyed on
+ * (what the search matches and what a pick stores), and a short grey label beside it — the level on the
+ * architecture page, the role on the runtime page.
+ */
+export declare class GraphPickOption {
+    readonly id: string;
+    readonly label: string;
+    constructor(id: string, label: string);
+}
 /** Everything the shell frames, already rendered by its owner. */
 export declare class ShellParts {
     readonly title: string;
-    readonly lockControl: string;
+    /** Every box either pulldown may offer; the shell sorts them alphabetically. */
+    readonly pickOptions: readonly GraphPickOption[];
     readonly legend: string;
     readonly edgeKey: string;
     readonly filterStatus: string;
@@ -63,7 +74,9 @@ export declare class ShellParts {
     readonly emptyState: string;
     /** Modes rendered dimmed and unselectable from the first paint, each saying why (#1373). */
     readonly unavailable: readonly ModeUnavailable[];
-    constructor(title: string, lockControl: string, legend: string, edgeKey: string, filterStatus: string, snapshot: string, responsibilities: string, 
+    constructor(title: string, 
+    /** Every box either pulldown may offer; the shell sorts them alphabetically. */
+    pickOptions: readonly GraphPickOption[], legend: string, edgeKey: string, filterStatus: string, snapshot: string, responsibilities: string, 
     /**
      * One chip per product (#1179), sorted, each colored from the page's ONE palette (#1244);
      * empty hides the Filter's Product group.
@@ -75,6 +88,14 @@ export declare class ShellParts {
 export declare class GraphPageShell {
     body(parts: ShellParts): string;
     private drawer;
+    /**
+     * One multi-select pulldown (#1385), the same markup for "Keep connected to" and "Focus": a closed
+     * field showing the picks as removable chips (or "None (off)"), and a popover holding a search box,
+     * one checkbox row per box in ALPHABETICAL order, and a footer with "N selected" and Clear all.
+     * Behaviour is WpMultiSelect in graph-visualizer.client.ts; the rows here are the only copy of the
+     * options, and the page hides the ones a search or (for Focus) the current graph excludes.
+     */
+    private multiSelect;
     /**
      * "Color by": ONE pill-shaped trigger showing the current mode (name + subtitle) that opens a
      * menu of the four. Keys 1/2/3/4 and the #runtime / #architecture / #impact / #product links still

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

@@ -12,7 +12,7 @@
  * carries a `style=` attribute — every look is a class.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphPageShell = exports.ShellParts = exports.SCOPE_OPTIONS = exports.ScopeOption = exports.ChangeScope = void 0;
+exports.GraphPageShell = exports.ShellParts = exports.GraphPickOption = exports.SCOPE_OPTIONS = exports.ScopeOption = exports.ChangeScope = void 0;
 const graph_color_modes_1 = require("./graph-color-modes");
 const dot_syntax_1 = require("./dot-syntax");
 /**
@@ -59,10 +59,24 @@ exports.SCOPE_OPTIONS = [
     new ScopeOption(ChangeScope.BUILD, 'Changed + dependents + dependencies', 'everything CI builds for this branch'),
     new ScopeOption(ChangeScope.EDGES, 'Edge changes only', 'projects that gained or lost a dependency or call since the fork point'),
 ];
+/**
+ * One box the "Keep connected to" and "Focus" pulldowns offer (#1385): the node id the SVG is keyed on
+ * (what the search matches and what a pick stores), and a short grey label beside it — the level on the
+ * architecture page, the role on the runtime page.
+ */
+class GraphPickOption {
+    id;
+    label;
+    constructor(id, label) {
+        this.id = id;
+        this.label = label;
+    }
+}
+exports.GraphPickOption = GraphPickOption;
 /** Everything the shell frames, already rendered by its owner. */
 class ShellParts {
     title;
-    lockControl;
+    pickOptions;
     legend;
     edgeKey;
     filterStatus;
@@ -74,7 +88,9 @@ class ShellParts {
     roles;
     emptyState;
     unavailable;
-    constructor(title, lockControl, legend, edgeKey, filterStatus, snapshot, responsibilities, 
+    constructor(title, 
+    /** Every box either pulldown may offer; the shell sorts them alphabetically. */
+    pickOptions, legend, edgeKey, filterStatus, snapshot, responsibilities, 
     /**
      * One chip per product (#1179), sorted, each colored from the page's ONE palette (#1244);
      * empty hides the Filter's Product group.
@@ -83,7 +99,7 @@ class ShellParts {
     /** Modes rendered dimmed and unselectable from the first paint, each saying why (#1373). */
     unavailable = []) {
         this.title = title;
-        this.lockControl = lockControl;
+        this.pickOptions = pickOptions;
         this.legend = legend;
         this.edgeKey = edgeKey;
         this.filterStatus = filterStatus;
@@ -122,10 +138,10 @@ class GraphPageShell {
             <button type="button" class="wp-filter-btn" id="wp-filter-open" aria-controls="wp-filter-pop" aria-expanded="false"><span>Filter</span><span class="wp-badge" id="wp-filter-badge" hidden>0</span></button>
         </div>
         <div class="wp-group">
-            <label class="wp-label" for="wp-lock">Focus</label>
-            ${parts.lockControl}
-            <button type="button" class="wp-toggle" id="wp-lock-toggle" aria-pressed="false">Lock <span class="wp-sw" aria-hidden="true"></span></button>
-            <button type="button" class="wp-toggle" id="wp-filter-toggle" aria-pressed="false">Hide unconnected <span class="wp-sw" aria-hidden="true"></span></button>
+            <div class="wp-label" id="wp-keep-label">Keep connected to</div>
+            ${this.multiSelect('keep', 'Keep connected to', parts.pickOptions)}
+            <div class="wp-label" id="wp-focus-label">Focus</div>
+            ${this.multiSelect('focus', 'Focus', parts.pickOptions)}
         </div>
         <div class="wp-group">
             <div class="wp-label wp-label-row">Legend <button type="button" class="wp-icon wp-icon-mini wp-icon-dark" id="wp-legend-pop" title="Pop the legend out over the graph" aria-label="Pop the legend out over the graph">⇱</button></div>
@@ -141,6 +157,39 @@ class GraphPageShell {
         </div>
     </aside>`;
     }
+    /**
+     * One multi-select pulldown (#1385), the same markup for "Keep connected to" and "Focus": a closed
+     * field showing the picks as removable chips (or "None (off)"), and a popover holding a search box,
+     * one checkbox row per box in ALPHABETICAL order, and a footer with "N selected" and Clear all.
+     * Behaviour is WpMultiSelect in graph-visualizer.client.ts; the rows here are the only copy of the
+     * options, and the page hides the ones a search or (for Focus) the current graph excludes.
+     */
+    multiSelect(key, name, options) {
+        const sorted = [...options].sort((a, b) => {
+            const folded = a.id.toLowerCase().localeCompare(b.id.toLowerCase());
+            return folded !== 0 ? folded : a.id.localeCompare(b.id);
+        });
+        const rows = sorted
+            .map((option) => {
+            const id = (0, dot_syntax_1.htmlLabelText)(option.id);
+            return (`<div class="wp-multi-option" role="option" aria-selected="false" data-wp-option="${id}">` +
+                '<input type="checkbox" tabindex="-1" aria-hidden="true">' +
+                `<span class="wp-multi-name">${id}</span><span class="wp-multi-sub">${(0, dot_syntax_1.htmlLabelText)(option.label)}</span></div>`);
+        })
+            .join('');
+        return `<div class="wp-multi" id="wp-${key}" data-wp-multi="${key}">
+                <div class="wp-multi-field" id="wp-${key}-field">
+                    <span class="wp-multi-chips" id="wp-${key}-chips"><span class="wp-multi-none">None (off)</span></span>
+                    <button type="button" class="wp-multi-trigger" id="wp-${key}-trigger" aria-haspopup="listbox" aria-controls="wp-${key}-pop" aria-expanded="false" aria-label="Choose ${name}"><span class="wp-caret" aria-hidden="true">▾</span></button>
+                </div>
+                <div class="wp-multi-pop" id="wp-${key}-pop" hidden>
+                    <input type="search" class="wp-multi-search" id="wp-${key}-search" placeholder="Search…" autocomplete="off" spellcheck="false" aria-label="Search ${name}" aria-controls="wp-${key}-list">
+                    <div class="wp-multi-list" id="wp-${key}-list" role="listbox" aria-multiselectable="true" aria-label="${name}">${rows}</div>
+                    <p class="wp-multi-empty" id="wp-${key}-empty" hidden>No match</p>
+                    <footer><span id="wp-${key}-count">0 selected</span><button type="button" class="wp-text-btn" id="wp-${key}-clear">Clear all</button></footer>
+                </div>
+            </div>`;
+    }
     /**
      * "Color by": ONE pill-shaped trigger showing the current mode (name + subtitle) that opens a
      * menu of the four. Keys 1/2/3/4 and the #runtime / #architecture / #impact / #product links still
@@ -244,21 +293,22 @@ class GraphPageShell {
             return `<div class="wp-pop wp-help" id="wp-help" role="dialog" aria-label="How to read this graph" hidden>
             <header><span>Reading the runtime graph</span><button type="button" class="wp-icon wp-icon-mini" id="wp-help-close" aria-label="Close help">✕</button></header>
             <p>Rows preserve saved runtime call-depth levels. Boxes are services; horizontal cylinders are queues, upright cylinders datastores, and clocks scheduled triggers. Solid arrows are RPC calls, dashed arrows queued events; red arrows admit legacy cycles.</p>
-            <p>Click a box for Lock, Filter Unconnected, or Implements. Implements in the box is a plain summary. Click Uses on a relationship line for its complete details. Hover traces chains without opening details.</p>
-            <p>Lock pins separate incoming and outgoing chains; hover adds another chain temporarily. Hide unconnected removes unrelated boxes independently. Clear all clears facets, leaving Lock and chain filtering intact.</p>
+            <p>Click a box for Add to Focus, Keep connected, or Implements. Implements in the box is a plain summary. Click Uses on a relationship line for its complete details. Hover traces chains without opening details.</p>
+            <p><strong>Keep connected to</strong> keeps only the picked boxes and every box on their complete incoming and outgoing chains (several picks are the union) and redraws. <strong>Focus</strong> pins the picked boxes' chains in the foreground and dims the rest without moving anything; hover adds another chain temporarily. Clear all in Filter leaves both alone.</p>
             <p>Filters intersect declared runtime, role, product closure and Nx build scope. Counts describe services; attached contextual nodes are counted separately. Impact uses compile-project sets, never runtime reachability. Queues and vendors are context, never source owners or CI projects.</p>
             <p>Runtime uses declared framework colors, Architecture declared roles; contextual nodes keep their kind colors. Product colors come from each project's declared product: tags, painted for the products toggled ON in the legend (the first two on every load); contextual nodes inherit adjacent memberships. Unknown metadata is neutral. Missing saved metadata requires explicit architecture:generate.</p>
             <p><strong>Goal vs Current</strong> compares the saved goal (architecture/runtime-dependencies-goal.json) with the saved current graph, Current → Goal: green added, red dashed removed (still drawn), amber changed, grey unchanged. Click a box for its before/after details, or click an arrow.</p>
-            <p><kbd>/</kbd> Focus search · <kbd>1</kbd>–<kbd>5</kbd> modes · <kbd>Esc</kbd> dismiss or unlock</p>
+            <p><kbd>/</kbd> Focus search · <kbd>1</kbd>–<kbd>5</kbd> modes · <kbd>Esc</kbd> close a pulldown, else clear Focus</p>
         </div>`;
         return `<div class="wp-pop wp-help" id="wp-help" role="dialog" aria-label="How to read this graph" hidden>
             <header><span>Reading the graph</span><button type="button" class="wp-icon wp-icon-mini" id="wp-help-close" aria-label="Close help">✕</button></header>
             <p>Every row is one dependency level: the HIGHEST level is the top row and L0, the foundation libraries, is always the bottom row. Servers, clients and apps always form the top row (a bundle sits above the apps it aggregates). Transitive dependencies are allowed but not drawn.</p>
-            <p>💡 <strong>Click any box</strong> for its menu: <strong>View Design</strong> (only where the project has a generated <strong>design.html</strong>, i.e. what the AI sees inside it), <strong>Lock/Unlock</strong> (the same lock as the Focus field), <strong>Filter Unconnected</strong> (removes unrelated boxes, keeping each L-number row).</p>
+            <p>💡 <strong>Click any box</strong> for its menu: <strong>View Design</strong> (only where the project has a generated <strong>design.html</strong>, i.e. what the AI sees inside it), <strong>Add to Focus</strong> / <strong>Remove from Focus</strong> (the same picks as the Focus pulldown), <strong>Keep connected</strong> / <strong>Stop keeping connected</strong> (the same picks as Keep connected to).</p>
+            <p><strong>Keep connected to</strong> keeps only the picked boxes plus every ancestor and dependency of each (several picks are the UNION, so adding one never shrinks the graph), keeping each L-number row. <strong>Focus</strong> then pins the chains of the picked boxes in the foreground and dims the rest, without moving anything. Both pulldowns search anywhere in a name; Clear all turns each off.</p>
             <p><strong>Filter</strong> narrows the graph by what changed on this branch or in the last commit, by runtime, by role and by product; the groups combine. A product keeps its servers, clients and apps plus everything they depend on, so <strong>Product</strong> + <strong>Changed + dependents + dependencies</strong> is exactly what this branch builds that can affect that product. Every box keeps its own L-row, and a level left empty shows as a thin labeled band.</p>
             <p>🔦 <strong>Hover any box</strong> to trace its <em>entire</em> dependency chain — every ancestor above it and every dependency below it, with the lines between — while the rest of the graph dims.</p>
             <p><strong>Runtime</strong>: a box may depend on a box carrying every color it has. <strong>Architecture</strong>: what each box is in the system. <strong>Impact</strong>: what changed on this branch or in the last commit (amber), its dependents (amber outline), and what nx marked for another reason: an input glob (violet hatch) or a root file (teal). Click an affected box for why; with both available, a toggle picks which. <strong>Product</strong>: which products each box belongs to. Toggle products in the legend (the first two are ON on every load): one ON product is its color, several ON are stripes, only OFF products are light grey, neutral means every product while all are ON, and a dashed white box belongs to none.</p>
-            <p><kbd>/</kbd> focus the lock search · <kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> <kbd>4</kbd> switch mode · <kbd>Esc</kbd> unlock</p>
+            <p><kbd>/</kbd> open the Focus search · <kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> <kbd>4</kbd> switch mode · <kbd>Esc</kbd> close a pulldown, else clear Focus</p>
         </div>`;
     }
     brandIcon() {