@webpieces/nx-webpieces-rules 0.4.978 → 0.4.980

package/README.md

@@ -120,8 +120,9 @@ the goal's derived levels first. Details, comparison policy and the edit workflo
 
 `architecture/dependencies.html` opens with the graph filling the viewport and every control
 in a collapsible charcoal drawer on the left (violet accent): the **Color by** pulldown, the
-**Filter** button, a type-to-search **Focus** field (`/` focuses it, `Esc` unlocks), a separate **Lock** switch, a **Hide
-unconnected** toggle, the legend (with a pop-out button) and the edge key. Help is the **?**
+**Filter** button, two multi-select pulldowns with search, **Keep connected to** and **Focus**
+(`/` opens Focus's search; `Esc` closes an open pulldown, else clears Focus), the legend (with a
+pop-out button) and the edge key. Help is the **?**
 popover, zoom floats bottom-right, and **Responsibilities** opens a right-hand panel from the
 drawer footer.
 
@@ -222,20 +223,30 @@ validator checks.
 
 ### Compact graph filtering
 
-Architecture and runtime node menus offer **Filter Unconnected** alongside
-Lock/Unlock. Filtering retains the selected node and its separate transitive
-incoming and outgoing chains, then reruns Graphviz. Architecture L-number rows keep
-their original identities; runtime chains include rendered queues, clocks, external
-APIs and systems. The anchor indicator and all surviving node menus offer **Turn off
-Filter**, restoring the full layout and independent Lock state. Responsibilities
-follow the retained set intersected with architecture Lock. Both viewers’ Lock pins
-its chain in the foreground; hover adds a temporary chain without dimming locked
-nodes or edges, and leaving restores the Lock chain. The locked anchor keeps a violet outline,
-and hover never changes responsibilities. A filtered-out Lock is suspended until
-the full graph returns. Hover and menu dismissal
-do not clear filtering, and no filter is persisted across reloads. Saved graph facts
+Both viewers' drawers hold two independent multi-select pulldowns (#1385), one shared client
+component (`graph-multi-select.client.ts`): checkbox rows in alphabetical order, a search box that
+matches anywhere in a name (case-insensitive, the match highlighted), ↑/↓ and Enter (Space while
+the query is empty) to toggle with the query kept for the next pick, the picks as removable chips
+on the closed field (`None (off)` when empty), and an `N selected` footer with **Clear all**.
+
+The page applies them in order, each working on what the previous stage left:
+
+1. **Filter** (change scope, runtime, role, product).
+2. **Keep connected to** keeps the UNION of every picked box plus its complete transitive incoming
+   and outgoing chains, then reruns Graphviz. Adding a pick only ever grows the graph. Architecture
+   L-number rows keep their original identities; runtime chains include rendered queues, clocks,
+   external APIs and systems. Node menus offer **Keep connected** / **Stop keeping connected** for
+   that one box; the top-bar indicator names the picks and clears them all.
+3. **Focus** pins the union of every picked box's chains in the foreground and dims the rest,
+   without a relayout. Every focused box keeps the violet outline, and hover adds a temporary chain.
+   Focus offers only the boxes drawn after stages 1–2; a focused box a later stage hides stays as a
+   chip marked "hidden" and relights when drawn again. Node menus offer **Add to Focus** /
+   **Remove from Focus**. Responsibilities follow the drawn set narrowed to the focused chains.
+
+Clear all in a pulldown turns that stage off; Clear all in Filter leaves both alone. Hover and
+menu dismissal change neither, and nothing is persisted across reloads. Saved graph facts
 and visibility options remain untouched. See
-[dependency graphs](../../../docs/architecture/dependency-graphs.md#filter-unconnected)
+[dependency graphs](../../../docs/architecture/dependency-graphs.md#keep-connected-to-and-focus)
 for traversal examples and browser verification.
 
 The runtime viewer uses the same drawer, staged Filter popover, legend pop-out, help,
@@ -247,7 +258,7 @@ are explicitly unknown. Missing project facts disable Impact, leaving the runtim
 
 Filters combine OR within Runtime/Role/Product groups and AND between groups and change scope.
 Draft changes apply only with **Show N services**; closing cancels them. Clear all resets facets,
-leaving Lock and Hide unconnected alone. Counts describe services, with contextual nodes reported
+leaving Keep connected to and Focus alone. Counts describe services, with contextual nodes reported
 separately. Products preserve saved runtime closure across calls and queues. Attached queues,
 clocks and external systems remain as context without resurrecting excluded services.
 
@@ -264,11 +275,11 @@ light grey for only-OFF membership, white for no product, neutral only while eve
 and the node carries them all. Runtime services use the
 established nested/striped framework palette and Architecture uses declared roles.
 
-Lock from Focus, the sidebar switch, or a box menu pins separate complete incoming/outgoing
-chains; hover temporarily adds its own chain. Lock does not change layout. Hide unconnected
-removes unrelated nodes and compacts the graph while preserving original runtime L-identities.
-Switching Lock off retains the explicit Focus selection so it can be pinned again; menu Unlock
-or clearing Focus clears that selection. A filtered-out lock is suspended and restored when visible.
+Focus (the pulldown or a box menu's **Add to Focus**) pins each picked box's complete
+incoming/outgoing chains; hover temporarily adds its own chain. Focus does not change layout.
+Keep connected to removes every node off its picks' chains and compacts the graph while preserving
+original runtime L-identities. Clear all in either pulldown turns it off. A focused box that is
+not drawn is suspended, shown as a "hidden" chip, and restored when visible.
 
 **API details are click-only.** Every service shows plain **Implements (N)** summary text.
 Click anywhere in the box for its menu, then **Implements** for full contracts/provenance and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webpieces/nx-webpieces-rules",
-  "version": "0.4.978",
+  "version": "0.4.980",
   "description": "Nx-specific webpieces validation rules, graph tooling, executors, and inference plugin.",
   "type": "commonjs",
   "main": "./src/index.js",
@@ -20,12 +20,12 @@
     "README.md"
   ],
   "dependencies": {
-    "@webpieces/api-doc-model": "0.4.978",
-    "@webpieces/core-util": "0.4.978",
-    "@webpieces/eslint-rules": "0.4.978",
-    "@webpieces/rules-config": "0.4.978",
+    "@webpieces/api-doc-model": "0.4.980",
+    "@webpieces/core-util": "0.4.980",
+    "@webpieces/eslint-rules": "0.4.980",
+    "@webpieces/rules-config": "0.4.980",
     "madge": "8.0.0",
-    "@webpieces/rules-sdk": "0.4.978"
+    "@webpieces/rules-sdk": "0.4.980"
   },
   "peerDependencies": {
     "@nx/devkit": ">=18.0.0"
@@ -41,7 +41,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@webpieces/tooling-testkit": "0.4.978"
+    "@webpieces/tooling-testkit": "0.4.980"
   },
   "types": "./src/index.d.ts",
   "bin": {

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

@@ -26,20 +26,26 @@ declare class WpFilteredDot {
     render(retained: Set<string>, nodeDot?: (node: RenderNodeJson) => string, keepEmptyLevels?: boolean, edgeDot?: (edge: RenderEdgeJson) => string): string;
     private bandDot;
 }
-/** Page-owned state survives replacements; rendering failures leave the usable SVG intact. */
+/**
+ * Page-owned state survives replacements; rendering failures leave the usable SVG intact.
+ *
+ * Two independent multi-selects (#1385): `keep` ("Keep connected to") decides which boxes are DRAWN —
+ * the union of each pick's complete incoming and outgoing chains, so adding a pick never shrinks the
+ * graph — and `focused` ("Focus") decides which drawn boxes are LIT, without a relayout.
+ */
 declare abstract class WpFilterPage {
     protected model: RenderModelJson;
     protected chain: WpGraphChain;
-    protected locked: string | null;
-    protected anchor: string | null;
+    protected readonly focused: Set<string>;
+    protected keep: ReadonlySet<string>;
     protected retained: Set<string>;
     private viz;
     constructor(model: RenderModelJson);
     /**
      * Swap the drawn topology — the runtime page's Goal vs Current overlay and its own graph (#1239) —
      * so a mode switch genuinely changes which boxes and arrows exist, and switching back leaves none of
-     * the overlay's removed-only boxes behind. A Hide-unconnected anchor the new topology lacks is
-     * dropped rather than filtering everything away; a Lock survives and relights when its box exists.
+     * the overlay's removed-only boxes behind. A Keep-connected pick the new topology lacks is dropped
+     * rather than filtering everything away; a Focus pick survives and relights when its box exists.
      */
     protected useModel(model: RenderModelJson): void;
     render(): void;
@@ -54,19 +60,27 @@ declare abstract class WpFilterPage {
     /** Whether an unfiltered draw may use the model's precomputed `fullDot` verbatim. */
     protected usesFullDot(): boolean;
     /**
-     * The page's own filter on top of "Hide unconnected": the architecture page intersects the set
+     * The page's own filter on top of "Keep connected to": the architecture page intersects the set
      * with its Filter popover (changes, runtime, role). Everything, by default.
      */
     protected narrow(retained: Set<string>): Set<string>;
     /** Whether a level emptied by filtering stays as a thin labeled band (see WpFilteredDot.render). */
     protected keepsEmptyLevels(): boolean;
+    /** What "Keep connected to" keeps: the UNION of every pick's complete chains; everything when empty. */
+    protected kept(keep: ReadonlySet<string>): Set<string>;
+    /** Draw again with the current picks — after a color-mode or filter change. */
+    redraw(): void;
     /**
-     * Draw again with the current filter — after a color-mode switch. A control outside the graph
-     * (a drawer button) keeps keyboard focus; the redraw would otherwise move it into the graph.
+     * Draw with a "Keep connected to" set. A control outside the graph (a drawer button, a pulldown's
+     * search box) keeps keyboard focus; the redraw would otherwise move it into the graph.
      */
-    redraw(): void;
-    filterItem(name: string): WpNodeMenuItem;
-    filter(anchor: string | null): void;
+    protected drawKeeping(keep: ReadonlySet<string>): void;
+    keepSelection(): ReadonlySet<string>;
+    /** A box's menu item: "Keep connected" adds the box to Keep connected to; the other removes it. */
+    keepItem(name: string): WpNodeMenuItem;
+    toggleKeep(id: string): void;
+    clearKeep(): void;
+    draw(keep: ReadonlySet<string>): void;
     private indicator;
     private error;
 }

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

@@ -114,12 +114,18 @@ class WpFilteredDot {
         return dot;
     }
 }
-/** Page-owned state survives replacements; rendering failures leave the usable SVG intact. */
+/**
+ * Page-owned state survives replacements; rendering failures leave the usable SVG intact.
+ *
+ * Two independent multi-selects (#1385): `keep` ("Keep connected to") decides which boxes are DRAWN —
+ * the union of each pick's complete incoming and outgoing chains, so adding a pick never shrinks the
+ * graph — and `focused` ("Focus") decides which drawn boxes are LIT, without a relayout.
+ */
 class WpFilterPage {
     model;
     chain;
-    locked = null;
-    anchor = null;
+    focused = new Set();
+    keep = new Set();
     retained;
     viz = null;
     constructor(model) {
@@ -130,27 +136,27 @@ class WpFilterPage {
     /**
      * Swap the drawn topology — the runtime page's Goal vs Current overlay and its own graph (#1239) —
      * so a mode switch genuinely changes which boxes and arrows exist, and switching back leaves none of
-     * the overlay's removed-only boxes behind. A Hide-unconnected anchor the new topology lacks is
-     * dropped rather than filtering everything away; a Lock survives and relights when its box exists.
+     * the overlay's removed-only boxes behind. A Keep-connected pick the new topology lacks is dropped
+     * rather than filtering everything away; a Focus pick survives and relights when its box exists.
      */
     useModel(model) {
         if (model === this.model)
             return;
         this.model = model;
         this.chain = new WpGraphChain(model);
-        this.retained = new Set(model.nodes.map((node) => node.id));
-        if (this.anchor !== null && !model.nodes.some((node) => node.id === this.anchor))
-            this.anchor = null;
+        const ids = new Set(model.nodes.map((node) => node.id));
+        this.retained = new Set(ids);
+        this.keep = new Set([...this.keep].filter((id) => ids.has(id)));
     }
     render() {
         document
             .getElementById('wp-filter-off')
-            ?.addEventListener('click', () => this.filter(null));
+            ?.addEventListener('click', () => this.draw(new Set()));
         this.wireControls();
         Viz.instance()
             .then((viz) => {
             this.viz = viz;
-            this.filter(null);
+            this.draw(new Set());
         })
             // webpieces-disable no-any-unknown -- promise rejections may carry any JavaScript value
             .catch((err) => this.error(err instanceof Error ? err : new Error(String(err))));
@@ -173,7 +179,7 @@ class WpFilterPage {
         return true;
     }
     /**
-     * The page's own filter on top of "Hide unconnected": the architecture page intersects the set
+     * The page's own filter on top of "Keep connected to": the architecture page intersects the set
      * with its Filter popover (changes, runtime, role). Everything, by default.
      */
     narrow(retained) {
@@ -183,44 +189,74 @@ class WpFilterPage {
     keepsEmptyLevels() {
         return false;
     }
+    /** What "Keep connected to" keeps: the UNION of every pick's complete chains; everything when empty. */
+    kept(keep) {
+        if (keep.size === 0)
+            return new Set(this.model.nodes.map((node) => node.id));
+        const kept = new Set();
+        for (const id of keep) {
+            for (const node of this.chain.nodes(id))
+                kept.add(node);
+        }
+        return kept;
+    }
+    /** Draw again with the current picks — after a color-mode or filter change. */
+    redraw() {
+        this.drawKeeping(this.keep);
+    }
     /**
-     * Draw again with the current filter — after a color-mode switch. A control outside the graph
-     * (a drawer button) keeps keyboard focus; the redraw would otherwise move it into the graph.
+     * Draw with a "Keep connected to" set. A control outside the graph (a drawer button, a pulldown's
+     * search box) keeps keyboard focus; the redraw would otherwise move it into the graph.
      */
-    redraw() {
+    drawKeeping(keep) {
         const active = document.activeElement;
         const host = document.getElementById('graph');
         const outside = active instanceof HTMLElement && host !== null && !host.contains(active);
-        this.filter(this.anchor);
+        this.draw(keep);
         if (outside && active.isConnected)
             active.focus({ preventScroll: true });
     }
-    filterItem(name) {
-        return new WpNodeMenuItem(this.anchor === null ? 'Filter Unconnected' : 'Turn off Filter', () => this.filter(this.anchor === null ? name : null));
+    keepSelection() {
+        return this.keep;
+    }
+    /** A box's menu item: "Keep connected" adds the box to Keep connected to; the other removes it. */
+    keepItem(name) {
+        const kept = this.keep.has(name);
+        return new WpNodeMenuItem(kept ? 'Stop keeping connected' : 'Keep connected', () => this.toggleKeep(name));
+    }
+    toggleKeep(id) {
+        const next = new Set(this.keep);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this.drawKeeping(next);
+    }
+    clearKeep() {
+        if (this.keep.size > 0)
+            this.drawKeeping(new Set());
     }
-    filter(anchor) {
+    draw(keep) {
         if (this.viz === null)
             return;
         const host = document.getElementById('graph');
         if (host === null)
             return;
-        const retained = this.narrow(anchor === null
-            ? new Set(this.model.nodes.map((node) => node.id))
-            : this.chain.nodes(anchor));
-        const previousAnchor = this.anchor;
+        const retained = this.narrow(this.kept(keep));
+        const previousKeep = this.keep;
         const previousRetained = this.retained;
         const previousSvg = host.querySelector('svg');
         const focusName = WpNodeMenu.focusedName(previousSvg);
         const rollback = this.captureBinding(previousSvg);
         // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- browser transaction restores the previous usable graph on failure
         try {
-            const dot = anchor === null && this.usesFullDot()
+            const dot = keep.size === 0 && this.usesFullDot()
                 ? this.model.fullDot
                 : new WpFilteredDot(this.model).render(retained, (node) => this.nodeDot(node), this.keepsEmptyLevels(), (edge) => this.edgeDot(edge));
             const svg = this.viz.renderSVGElement(dot);
             this.prepareSvg(svg);
             WpNodeMenu.close();
-            this.anchor = anchor;
+            this.keep = keep;
             this.retained = retained;
             host.replaceChildren(svg);
             this.wireSvg(svg);
@@ -231,7 +267,7 @@ class WpFilterPage {
         }
         catch (err) {
             //const error = toError(err);
-            this.anchor = previousAnchor;
+            this.keep = previousKeep;
             this.retained = previousRetained;
             if (previousSvg !== null)
                 host.replaceChildren(previousSvg);
@@ -247,10 +283,10 @@ class WpFilterPage {
         const status = document.getElementById('wp-filter-status');
         const label = document.getElementById('wp-filter-anchor');
         if (status !== null)
-            status.hidden = this.anchor === null;
+            status.hidden = this.keep.size === 0;
         if (label !== null)
-            label.textContent = this.anchor;
-        if (this.anchor !== null)
+            label.textContent = [...this.keep].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).join(', ');
+        if (this.keep.size > 0)
             document.getElementById('wp-filter-off')?.focus();
         else
             document.querySelector('#graph g.wp-node-clickable')?.focus();
@@ -263,7 +299,7 @@ class WpFilterPage {
         el.textContent =
             err === null
                 ? ''
-                : `Graph rendering failed: ${err.message}. Try Turn off Filter or reload the page.`;
+                : `Graph rendering failed: ${err.message}. Try Clear all in Keep connected to, or reload the page.`;
     }
 }
 //# sourceMappingURL=graph-filter.client.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"graph-filter.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-filter.client.ts"],"names":[],"mappings":"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","sourcesContent":["/** Plain browser helpers shared by architecture and runtime; no CommonJS imports. */\nclass WpGraphChain {\n    readonly inNodes = new Map<string, Set<string>>();\n    readonly outNodes = new Map<string, Set<string>>();\n\n    constructor(private readonly model: RenderModelJson) {\n        const ids = new Set(model.nodes.map((node) => node.id));\n        for (const edge of model.edges) {\n            if (!ids.has(edge.from) || !ids.has(edge.to)) continue;\n            this.add(this.outNodes, edge.from, edge.to);\n            this.add(this.inNodes, edge.to, edge.from);\n        }\n    }\n\n    private add(map: Map<string, Set<string>>, from: string, to: string): void {\n        if (!map.has(from)) map.set(from, new Set());\n        map.get(from)?.add(to);\n    }\n\n    nodes(anchor: string): Set<string> {\n        const retained = new Set<string>();\n        if (!this.model.nodes.some((node) => node.id === anchor)) return retained;\n        for (const direction of [this.inNodes, this.outNodes]) {\n            const visited = new Set([anchor]);\n            const stack = [anchor];\n            while (stack.length > 0) {\n                const id = stack.pop() as string;\n                retained.add(id);\n                for (const next of direction.get(id) ?? []) {\n                    if (visited.has(next)) continue;\n                    visited.add(next);\n                    stack.push(next);\n                }\n            }\n        }\n        return retained;\n    }\n}\n\nclass WpRenderBand {\n    constructor(\n        readonly level: number,\n        readonly nodeNames: string[],\n        readonly selfQueueNames: string[],\n    ) {}\n}\n\n/** Original records plus fresh ranks: removed nodes cannot reappear via a rank/edge. */\nclass WpFilteredDot {\n    constructor(private readonly model: RenderModelJson) {}\n\n    /**\n     * `nodeDot` picks each box's statement — the architecture page passes its current color mode's —\n     * and `edgeDot` each edge's (the Product mode dashes a cross-product dependency).\n     * `keepEmptyLevels` keeps a level whose boxes were all filtered out as a thin labeled band, so\n     * every remaining box stays in its own L-row (the architecture page); otherwise it is dropped.\n     */\n    render(\n        retained: Set<string>,\n        nodeDot: (node: RenderNodeJson) => string = (node: RenderNodeJson): string => node.dot,\n        keepEmptyLevels = false,\n        edgeDot: (edge: RenderEdgeJson) => string = (edge: RenderEdgeJson): string => edge.dot,\n    ): string {\n        const nodes = this.model.nodes.filter((node: RenderNodeJson): boolean =>\n            retained.has(node.id),\n        );\n        const edges = this.model.edges.filter(\n            (edge: RenderEdgeJson): boolean => retained.has(edge.from) && retained.has(edge.to),\n        );\n        const bands = this.model.bands\n            .map(\n                (band: RenderBandJson): WpRenderBand =>\n                    new WpRenderBand(\n                        band.level,\n                        band.nodeNames.filter((id: string): boolean => retained.has(id)),\n                        band.selfQueueNames.filter((id: string): boolean => retained.has(id)),\n                    ),\n            )\n            .filter((band: WpRenderBand): boolean => keepEmptyLevels || band.nodeNames.length > 0);\n        return (\n            this.model.header +\n            nodes.map((node: RenderNodeJson): string => nodeDot(node)).join('') +\n            this.bandDot(bands) +\n            edges.map((edge: RenderEdgeJson): string => edgeDot(edge)).join('') +\n            this.model.footer\n        );\n    }\n\n    private bandDot(bands: WpRenderBand[]): string {\n        const nodeAttrs =\n            '[style=invis, shape=point, width=0.01, height=0.01, label=\"\", class=\"wp-layout\"]';\n        const edgeAttrs = '[style=invis, class=\"wp-layout\"]';\n        let dot = '';\n        for (const band of bands) {\n            const anchor = `__wp_layout_L${band.level}`;\n            // The same bytes as LevelBandLayout.emptyBandAttrs (graph-level-bands.ts).\n            const attrs =\n                band.nodeNames.length > 0\n                    ? nodeAttrs\n                    : '[shape=plaintext, style=\"\", width=0.01, height=0.15, margin=0, fontsize=9, fontcolor=\"#9a9eab\", ' +\n                      `label=\"L${band.level} · no matching projects\", class=\"wp-layout wp-empty-level\"]`;\n            dot += `  \"${anchor}\" ${attrs};\\n  { rank=same; \"${anchor}\"; `;\n            dot +=\n                band.nodeNames\n                    .filter((id) => !band.selfQueueNames.includes(id))\n                    .map((id) => `${JSON.stringify(id)}; `)\n                    .join('') + '}\\n';\n            if (band.selfQueueNames.length > 0) {\n                const subrow = `${anchor}_selfqueues`;\n                dot += `  \"${subrow}\" ${nodeAttrs};\\n  { rank=same; \"${subrow}\"; `;\n                dot += band.selfQueueNames.map((id) => `${JSON.stringify(id)}; `).join('') + '}\\n';\n                dot += `  \"${anchor}\" -> \"${subrow}\" ${edgeAttrs};\\n`;\n            }\n        }\n        for (let i = 0; i + 1 < bands.length; i++) {\n            const upper = bands[i];\n            const lower = bands[i + 1];\n            const from = `__wp_layout_L${upper.level}${upper.selfQueueNames.length === 0 ? '' : '_selfqueues'}`;\n            const to = `__wp_layout_L${lower.level}`;\n            if (upper.nodeNames.length <= 10 && lower.nodeNames.length <= 10) {\n                dot += `  \"${from}\" -> \"${to}\" ${edgeAttrs};\\n`;\n                continue;\n            }\n            const spacer = `__wp_layout_spacer_L${upper.level}_L${lower.level}`;\n            dot += `  \"${spacer}\" ${nodeAttrs};\\n  { rank=same; \"${spacer}\"; }\\n`;\n            dot += `  \"${from}\" -> \"${spacer}\" ${edgeAttrs};\\n  \"${spacer}\" -> \"${to}\" ${edgeAttrs};\\n`;\n        }\n        return dot;\n    }\n}\n\n/** Page-owned state survives replacements; rendering failures leave the usable SVG intact. */\nabstract class WpFilterPage {\n    protected chain: WpGraphChain;\n    protected locked: string | null = null;\n    protected anchor: string | null = null;\n    protected retained: Set<string>;\n    private viz: VizInstance | null = null;\n\n    constructor(protected model: RenderModelJson) {\n        this.chain = new WpGraphChain(model);\n        this.retained = new Set(model.nodes.map((node) => node.id));\n    }\n\n    /**\n     * Swap the drawn topology — the runtime page's Goal vs Current overlay and its own graph (#1239) —\n     * so a mode switch genuinely changes which boxes and arrows exist, and switching back leaves none of\n     * the overlay's removed-only boxes behind. A Hide-unconnected anchor the new topology lacks is\n     * dropped rather than filtering everything away; a Lock survives and relights when its box exists.\n     */\n    protected useModel(model: RenderModelJson): void {\n        if (model === this.model) return;\n        this.model = model;\n        this.chain = new WpGraphChain(model);\n        this.retained = new Set(model.nodes.map((node: RenderNodeJson): string => node.id));\n        if (this.anchor !== null && !model.nodes.some((node: RenderNodeJson): boolean => node.id === this.anchor)) this.anchor = null;\n    }\n\n    render(): void {\n        document\n            .getElementById('wp-filter-off')\n            ?.addEventListener('click', () => this.filter(null));\n        this.wireControls();\n        Viz.instance()\n            .then((viz) => {\n                this.viz = viz;\n                this.filter(null);\n            })\n            // webpieces-disable no-any-unknown -- promise rejections may carry any JavaScript value\n            .catch((err: unknown): void =>\n                this.error(err instanceof Error ? err : new Error(String(err))),\n            );\n    }\n\n    protected captureBinding(_svg: SVGSVGElement | null): () => void {\n        return (): void => {};\n    }\n    protected wireControls(): void {}\n    protected abstract wireSvg(svg: SVGSVGElement): void;\n    protected prepareSvg(_svg: SVGSVGElement): void {}\n    /** The statement drawn for one box. The architecture page answers with its color mode's. */\n    protected nodeDot(node: RenderNodeJson): string {\n        return node.dot;\n    }\n    /** The statement drawn for one edge. The architecture page answers with its color mode's. */\n    protected edgeDot(edge: RenderEdgeJson): string {\n        return edge.dot;\n    }\n    /** Whether an unfiltered draw may use the model's precomputed `fullDot` verbatim. */\n    protected usesFullDot(): boolean {\n        return true;\n    }\n    /**\n     * The page's own filter on top of \"Hide unconnected\": the architecture page intersects the set\n     * with its Filter popover (changes, runtime, role). Everything, by default.\n     */\n    protected narrow(retained: Set<string>): Set<string> {\n        return retained;\n    }\n    /** Whether a level emptied by filtering stays as a thin labeled band (see WpFilteredDot.render). */\n    protected keepsEmptyLevels(): boolean {\n        return false;\n    }\n\n    /**\n     * Draw again with the current filter — after a color-mode switch. A control outside the graph\n     * (a drawer button) keeps keyboard focus; the redraw would otherwise move it into the graph.\n     */\n    redraw(): void {\n        const active = document.activeElement;\n        const host = document.getElementById('graph');\n        const outside = active instanceof HTMLElement && host !== null && !host.contains(active);\n        this.filter(this.anchor);\n        if (outside && active.isConnected) active.focus({ preventScroll: true });\n    }\n\n    filterItem(name: string): WpNodeMenuItem {\n        return new WpNodeMenuItem(\n            this.anchor === null ? 'Filter Unconnected' : 'Turn off Filter',\n            () => this.filter(this.anchor === null ? name : null),\n        );\n    }\n\n    filter(anchor: string | null): void {\n        if (this.viz === null) return;\n        const host = document.getElementById('graph');\n        if (host === null) return;\n        const retained = this.narrow(\n            anchor === null\n                ? new Set(this.model.nodes.map((node: RenderNodeJson): string => node.id))\n                : this.chain.nodes(anchor),\n        );\n        const previousAnchor = this.anchor;\n        const previousRetained = this.retained;\n        const previousSvg = host.querySelector('svg');\n        const focusName = WpNodeMenu.focusedName(previousSvg);\n        const rollback = this.captureBinding(previousSvg);\n        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- browser transaction restores the previous usable graph on failure\n        try {\n            const dot =\n                anchor === null && this.usesFullDot()\n                    ? this.model.fullDot\n                    : new WpFilteredDot(this.model).render(\n                          retained,\n                          (node: RenderNodeJson): string => this.nodeDot(node),\n                          this.keepsEmptyLevels(),\n                          (edge: RenderEdgeJson): string => this.edgeDot(edge),\n                      );\n            const svg = this.viz.renderSVGElement(dot);\n            this.prepareSvg(svg);\n            WpNodeMenu.close();\n            this.anchor = anchor;\n            this.retained = retained;\n            host.replaceChildren(svg);\n            this.wireSvg(svg);\n            this.indicator();\n            WpNodeMenu.restoreFocus(svg, focusName);\n            this.error(null);\n            // webpieces-disable no-any-unknown -- JavaScript may throw any value at this browser boundary\n        } catch (err: unknown) {\n            //const error = toError(err);\n            this.anchor = previousAnchor;\n            this.retained = previousRetained;\n            if (previousSvg !== null) host.replaceChildren(previousSvg);\n            else host.replaceChildren();\n            rollback();\n            if (previousSvg !== null) WpNodeMenu.restoreFocus(previousSvg, focusName);\n            this.error(err instanceof Error ? err : new Error(String(err)));\n        }\n    }\n\n    private indicator(): void {\n        const status = document.getElementById('wp-filter-status');\n        const label = document.getElementById('wp-filter-anchor');\n        if (status !== null) status.hidden = this.anchor === null;\n        if (label !== null) label.textContent = this.anchor;\n        if (this.anchor !== null) document.getElementById('wp-filter-off')?.focus();\n        else document.querySelector<SVGGElement>('#graph g.wp-node-clickable')?.focus();\n    }\n\n    private error(err: Error | null): void {\n        const el = document.getElementById('wp-graph-error');\n        if (el === null) return;\n        el.hidden = err === null;\n        el.textContent =\n            err === null\n                ? ''\n                : `Graph rendering failed: ${err.message}. Try Turn off Filter or reload the page.`;\n    }\n}\n"]}
+{"version":3,"file":"graph-filter.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-filter.client.ts"],"names":[],"mappings":"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","sourcesContent":["/** Plain browser helpers shared by architecture and runtime; no CommonJS imports. */\nclass WpGraphChain {\n    readonly inNodes = new Map<string, Set<string>>();\n    readonly outNodes = new Map<string, Set<string>>();\n\n    constructor(private readonly model: RenderModelJson) {\n        const ids = new Set(model.nodes.map((node) => node.id));\n        for (const edge of model.edges) {\n            if (!ids.has(edge.from) || !ids.has(edge.to)) continue;\n            this.add(this.outNodes, edge.from, edge.to);\n            this.add(this.inNodes, edge.to, edge.from);\n        }\n    }\n\n    private add(map: Map<string, Set<string>>, from: string, to: string): void {\n        if (!map.has(from)) map.set(from, new Set());\n        map.get(from)?.add(to);\n    }\n\n    nodes(anchor: string): Set<string> {\n        const retained = new Set<string>();\n        if (!this.model.nodes.some((node) => node.id === anchor)) return retained;\n        for (const direction of [this.inNodes, this.outNodes]) {\n            const visited = new Set([anchor]);\n            const stack = [anchor];\n            while (stack.length > 0) {\n                const id = stack.pop() as string;\n                retained.add(id);\n                for (const next of direction.get(id) ?? []) {\n                    if (visited.has(next)) continue;\n                    visited.add(next);\n                    stack.push(next);\n                }\n            }\n        }\n        return retained;\n    }\n}\n\nclass WpRenderBand {\n    constructor(\n        readonly level: number,\n        readonly nodeNames: string[],\n        readonly selfQueueNames: string[],\n    ) {}\n}\n\n/** Original records plus fresh ranks: removed nodes cannot reappear via a rank/edge. */\nclass WpFilteredDot {\n    constructor(private readonly model: RenderModelJson) {}\n\n    /**\n     * `nodeDot` picks each box's statement — the architecture page passes its current color mode's —\n     * and `edgeDot` each edge's (the Product mode dashes a cross-product dependency).\n     * `keepEmptyLevels` keeps a level whose boxes were all filtered out as a thin labeled band, so\n     * every remaining box stays in its own L-row (the architecture page); otherwise it is dropped.\n     */\n    render(\n        retained: Set<string>,\n        nodeDot: (node: RenderNodeJson) => string = (node: RenderNodeJson): string => node.dot,\n        keepEmptyLevels = false,\n        edgeDot: (edge: RenderEdgeJson) => string = (edge: RenderEdgeJson): string => edge.dot,\n    ): string {\n        const nodes = this.model.nodes.filter((node: RenderNodeJson): boolean =>\n            retained.has(node.id),\n        );\n        const edges = this.model.edges.filter(\n            (edge: RenderEdgeJson): boolean => retained.has(edge.from) && retained.has(edge.to),\n        );\n        const bands = this.model.bands\n            .map(\n                (band: RenderBandJson): WpRenderBand =>\n                    new WpRenderBand(\n                        band.level,\n                        band.nodeNames.filter((id: string): boolean => retained.has(id)),\n                        band.selfQueueNames.filter((id: string): boolean => retained.has(id)),\n                    ),\n            )\n            .filter((band: WpRenderBand): boolean => keepEmptyLevels || band.nodeNames.length > 0);\n        return (\n            this.model.header +\n            nodes.map((node: RenderNodeJson): string => nodeDot(node)).join('') +\n            this.bandDot(bands) +\n            edges.map((edge: RenderEdgeJson): string => edgeDot(edge)).join('') +\n            this.model.footer\n        );\n    }\n\n    private bandDot(bands: WpRenderBand[]): string {\n        const nodeAttrs =\n            '[style=invis, shape=point, width=0.01, height=0.01, label=\"\", class=\"wp-layout\"]';\n        const edgeAttrs = '[style=invis, class=\"wp-layout\"]';\n        let dot = '';\n        for (const band of bands) {\n            const anchor = `__wp_layout_L${band.level}`;\n            // The same bytes as LevelBandLayout.emptyBandAttrs (graph-level-bands.ts).\n            const attrs =\n                band.nodeNames.length > 0\n                    ? nodeAttrs\n                    : '[shape=plaintext, style=\"\", width=0.01, height=0.15, margin=0, fontsize=9, fontcolor=\"#9a9eab\", ' +\n                      `label=\"L${band.level} · no matching projects\", class=\"wp-layout wp-empty-level\"]`;\n            dot += `  \"${anchor}\" ${attrs};\\n  { rank=same; \"${anchor}\"; `;\n            dot +=\n                band.nodeNames\n                    .filter((id) => !band.selfQueueNames.includes(id))\n                    .map((id) => `${JSON.stringify(id)}; `)\n                    .join('') + '}\\n';\n            if (band.selfQueueNames.length > 0) {\n                const subrow = `${anchor}_selfqueues`;\n                dot += `  \"${subrow}\" ${nodeAttrs};\\n  { rank=same; \"${subrow}\"; `;\n                dot += band.selfQueueNames.map((id) => `${JSON.stringify(id)}; `).join('') + '}\\n';\n                dot += `  \"${anchor}\" -> \"${subrow}\" ${edgeAttrs};\\n`;\n            }\n        }\n        for (let i = 0; i + 1 < bands.length; i++) {\n            const upper = bands[i];\n            const lower = bands[i + 1];\n            const from = `__wp_layout_L${upper.level}${upper.selfQueueNames.length === 0 ? '' : '_selfqueues'}`;\n            const to = `__wp_layout_L${lower.level}`;\n            if (upper.nodeNames.length <= 10 && lower.nodeNames.length <= 10) {\n                dot += `  \"${from}\" -> \"${to}\" ${edgeAttrs};\\n`;\n                continue;\n            }\n            const spacer = `__wp_layout_spacer_L${upper.level}_L${lower.level}`;\n            dot += `  \"${spacer}\" ${nodeAttrs};\\n  { rank=same; \"${spacer}\"; }\\n`;\n            dot += `  \"${from}\" -> \"${spacer}\" ${edgeAttrs};\\n  \"${spacer}\" -> \"${to}\" ${edgeAttrs};\\n`;\n        }\n        return dot;\n    }\n}\n\n/**\n * Page-owned state survives replacements; rendering failures leave the usable SVG intact.\n *\n * Two independent multi-selects (#1385): `keep` (\"Keep connected to\") decides which boxes are DRAWN —\n * the union of each pick's complete incoming and outgoing chains, so adding a pick never shrinks the\n * graph — and `focused` (\"Focus\") decides which drawn boxes are LIT, without a relayout.\n */\nabstract class WpFilterPage {\n    protected chain: WpGraphChain;\n    protected readonly focused = new Set<string>();\n    protected keep: ReadonlySet<string> = new Set<string>();\n    protected retained: Set<string>;\n    private viz: VizInstance | null = null;\n\n    constructor(protected model: RenderModelJson) {\n        this.chain = new WpGraphChain(model);\n        this.retained = new Set(model.nodes.map((node) => node.id));\n    }\n\n    /**\n     * Swap the drawn topology — the runtime page's Goal vs Current overlay and its own graph (#1239) —\n     * so a mode switch genuinely changes which boxes and arrows exist, and switching back leaves none of\n     * the overlay's removed-only boxes behind. A Keep-connected pick the new topology lacks is dropped\n     * rather than filtering everything away; a Focus pick survives and relights when its box exists.\n     */\n    protected useModel(model: RenderModelJson): void {\n        if (model === this.model) return;\n        this.model = model;\n        this.chain = new WpGraphChain(model);\n        const ids = new Set(model.nodes.map((node: RenderNodeJson): string => node.id));\n        this.retained = new Set(ids);\n        this.keep = new Set([...this.keep].filter((id: string): boolean => ids.has(id)));\n    }\n\n    render(): void {\n        document\n            .getElementById('wp-filter-off')\n            ?.addEventListener('click', () => this.draw(new Set<string>()));\n        this.wireControls();\n        Viz.instance()\n            .then((viz) => {\n                this.viz = viz;\n                this.draw(new Set<string>());\n            })\n            // webpieces-disable no-any-unknown -- promise rejections may carry any JavaScript value\n            .catch((err: unknown): void =>\n                this.error(err instanceof Error ? err : new Error(String(err))),\n            );\n    }\n\n    protected captureBinding(_svg: SVGSVGElement | null): () => void {\n        return (): void => {};\n    }\n    protected wireControls(): void {}\n    protected abstract wireSvg(svg: SVGSVGElement): void;\n    protected prepareSvg(_svg: SVGSVGElement): void {}\n    /** The statement drawn for one box. The architecture page answers with its color mode's. */\n    protected nodeDot(node: RenderNodeJson): string {\n        return node.dot;\n    }\n    /** The statement drawn for one edge. The architecture page answers with its color mode's. */\n    protected edgeDot(edge: RenderEdgeJson): string {\n        return edge.dot;\n    }\n    /** Whether an unfiltered draw may use the model's precomputed `fullDot` verbatim. */\n    protected usesFullDot(): boolean {\n        return true;\n    }\n    /**\n     * The page's own filter on top of \"Keep connected to\": the architecture page intersects the set\n     * with its Filter popover (changes, runtime, role). Everything, by default.\n     */\n    protected narrow(retained: Set<string>): Set<string> {\n        return retained;\n    }\n    /** Whether a level emptied by filtering stays as a thin labeled band (see WpFilteredDot.render). */\n    protected keepsEmptyLevels(): boolean {\n        return false;\n    }\n\n    /** What \"Keep connected to\" keeps: the UNION of every pick's complete chains; everything when empty. */\n    protected kept(keep: ReadonlySet<string>): Set<string> {\n        if (keep.size === 0) return new Set(this.model.nodes.map((node: RenderNodeJson): string => node.id));\n        const kept = new Set<string>();\n        for (const id of keep) {\n            for (const node of this.chain.nodes(id)) kept.add(node);\n        }\n        return kept;\n    }\n\n    /** Draw again with the current picks — after a color-mode or filter change. */\n    redraw(): void {\n        this.drawKeeping(this.keep);\n    }\n\n    /**\n     * Draw with a \"Keep connected to\" set. A control outside the graph (a drawer button, a pulldown's\n     * search box) keeps keyboard focus; the redraw would otherwise move it into the graph.\n     */\n    protected drawKeeping(keep: ReadonlySet<string>): void {\n        const active = document.activeElement;\n        const host = document.getElementById('graph');\n        const outside = active instanceof HTMLElement && host !== null && !host.contains(active);\n        this.draw(keep);\n        if (outside && active.isConnected) active.focus({ preventScroll: true });\n    }\n\n    keepSelection(): ReadonlySet<string> {\n        return this.keep;\n    }\n\n    /** A box's menu item: \"Keep connected\" adds the box to Keep connected to; the other removes it. */\n    keepItem(name: string): WpNodeMenuItem {\n        const kept = this.keep.has(name);\n        return new WpNodeMenuItem(kept ? 'Stop keeping connected' : 'Keep connected', () => this.toggleKeep(name));\n    }\n\n    toggleKeep(id: string): void {\n        const next = new Set(this.keep);\n        if (next.has(id)) next.delete(id);\n        else next.add(id);\n        this.drawKeeping(next);\n    }\n\n    clearKeep(): void {\n        if (this.keep.size > 0) this.drawKeeping(new Set<string>());\n    }\n\n    draw(keep: ReadonlySet<string>): void {\n        if (this.viz === null) return;\n        const host = document.getElementById('graph');\n        if (host === null) return;\n        const retained = this.narrow(this.kept(keep));\n        const previousKeep = this.keep;\n        const previousRetained = this.retained;\n        const previousSvg = host.querySelector('svg');\n        const focusName = WpNodeMenu.focusedName(previousSvg);\n        const rollback = this.captureBinding(previousSvg);\n        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- browser transaction restores the previous usable graph on failure\n        try {\n            const dot =\n                keep.size === 0 && this.usesFullDot()\n                    ? this.model.fullDot\n                    : new WpFilteredDot(this.model).render(\n                          retained,\n                          (node: RenderNodeJson): string => this.nodeDot(node),\n                          this.keepsEmptyLevels(),\n                          (edge: RenderEdgeJson): string => this.edgeDot(edge),\n                      );\n            const svg = this.viz.renderSVGElement(dot);\n            this.prepareSvg(svg);\n            WpNodeMenu.close();\n            this.keep = keep;\n            this.retained = retained;\n            host.replaceChildren(svg);\n            this.wireSvg(svg);\n            this.indicator();\n            WpNodeMenu.restoreFocus(svg, focusName);\n            this.error(null);\n            // webpieces-disable no-any-unknown -- JavaScript may throw any value at this browser boundary\n        } catch (err: unknown) {\n            //const error = toError(err);\n            this.keep = previousKeep;\n            this.retained = previousRetained;\n            if (previousSvg !== null) host.replaceChildren(previousSvg);\n            else host.replaceChildren();\n            rollback();\n            if (previousSvg !== null) WpNodeMenu.restoreFocus(previousSvg, focusName);\n            this.error(err instanceof Error ? err : new Error(String(err)));\n        }\n    }\n\n    private indicator(): void {\n        const status = document.getElementById('wp-filter-status');\n        const label = document.getElementById('wp-filter-anchor');\n        if (status !== null) status.hidden = this.keep.size === 0;\n        if (label !== null) label.textContent = [...this.keep].sort((a: string, b: string): number => a.toLowerCase().localeCompare(b.toLowerCase())).join(', ');\n        if (this.keep.size > 0) document.getElementById('wp-filter-off')?.focus();\n        else document.querySelector<SVGGElement>('#graph g.wp-node-clickable')?.focus();\n    }\n\n    private error(err: Error | null): void {\n        const el = document.getElementById('wp-graph-error');\n        if (el === null) return;\n        el.hidden = err === null;\n        el.textContent =\n            err === null\n                ? ''\n                : `Graph rendering failed: ${err.message}. Try Clear all in Keep connected to, or reload the page.`;\n    }\n}\n"]}

package/src/lib/graph-multi-select.client.d.ts

@@ -0,0 +1,57 @@
+/**
+ * What one multi-select pulldown reads and changes on the page: its picks, which options it may offer
+ * right now, and how a toggle or Clear all lands. Behaviour, so an interface.
+ */
+interface WpMultiSource {
+    selected(): ReadonlySet<string>;
+    /** Whether `id` is drawn right now: an unavailable option is not offered, and its chip says "hidden". */
+    available(id: string): boolean;
+    toggle(id: string): void;
+    clear(): void;
+}
+/**
+ * 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.
+ */
+declare class WpMultiSelect {
+    private readonly key;
+    private readonly source;
+    private activeId;
+    constructor(key: string, source: WpMultiSource);
+    wire(): void;
+    isOpen(): boolean;
+    /** Open with the cursor in an EMPTY search box: the query lasts while it is open, not across opens. */
+    open(): void;
+    /** Close; `returnFocus` puts the keyboard back on the pulldown's own button. */
+    close(returnFocus: boolean): void;
+    /**
+     * 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: Event): boolean;
+    /** Repaint the chips, the footer and (while open) the rows from the page's picks. */
+    sync(): void;
+    private onKey;
+    private move;
+    /** Show the rows the query and the page allow, highlight the match, and tick the picks. */
+    private paint;
+    /** The name with its matched part in a `<mark>`, built from text nodes so no name is parsed as HTML. */
+    private highlight;
+    /** One removable chip per pick, alphabetical; a pick that is not drawn right now says "hidden". */
+    private chips;
+    private chip;
+    private shownRows;
+    private rows;
+    private idOf;
+    private search;
+    private pop;
+    private byId;
+}