@webpieces/nx-webpieces-rules 0.4.978 → 0.4.980

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

@@ -1 +1 @@
-{"version":3,"file":"graph-page-shell.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-page-shell.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The architecture page's shell (#1155): a collapsible dark drawer on the left holding every control,\n * and the graph filling the rest of the viewport.\n *\n * Before this, two hint paragraphs, a ~650px three-column legend, a lock dropdown and a zoom bar all\n * sat ABOVE the graph, so a laptop's first screen showed no graph at all. Now the hints are a \"?\"\n * popover, the legend lives in the drawer (and can pop out over the graph), zoom floats bottom-right\n * (graph-navigation.ts) and the responsibilities open in a right-hand panel.\n *\n * Markup only. Behaviour is graph-visualizer.client.ts; styling is graph-page-styles.ts. No element\n * carries a `style=` attribute — every look is a class.\n */\n\nimport { FRAMEWORK_ORDER, GRAPH_MODES, GraphMode, ModeInfo, ModeUnavailable, ROLE_STYLES, RoleStyle, RUNTIME_GRAPH_MODES } from './graph-color-modes';\nimport { htmlLabelText } from './dot-syntax';\nimport { ProductColor } from './graph-products';\n\n/**\n * The Filter popover's \"Changes on this branch\" choices. The page computes each set from the Impact\n * sidecar (graph-impact.ts): CHANGED = touched; DEPENDENTS = every project nx affected, whatever its reason (their\n * tests re-run); DEPENDENCIES = touched + every transitive dependency of it; BUILD = touched +\n * every affected project + every build input — the dependencies of the DEPENDENTS too, which is why it is more than\n * the union of the two rows above it.\n *\n * \"Dependents\" are what USE a project and \"dependencies\" what it uses (#1179). \"Dependee\" would mean\n * the thing depended ON — the opposite of the dependents row — so it is never used.\n */\nexport enum ChangeScope {\n    EVERYTHING = 'everything',\n    CHANGED = 'changed',\n    DEPENDENTS = 'dependents',\n    DEPENDENCIES = 'dependencies',\n    BUILD = 'build',\n    /** #1264: the boxes at either end of an edge gained or lost since the fork point. */\n    EDGES = 'edges',\n}\n\n/**\n * One change scope: its name and the grey second line under it, like the Color-by menu. These are the\n * ONE copy of the labels — the page script reads each name back from its `data-wp-scope-label` (the\n * top-bar pill), so the two cannot drift apart.\n */\nexport class ScopeOption {\n    constructor(\n        public readonly scope: ChangeScope,\n        public readonly label: string,\n        public readonly subtitle: string,\n    ) {}\n}\n\nexport const SCOPE_OPTIONS: readonly ScopeOption[] = [\n    new ScopeOption(ChangeScope.EVERYTHING, 'All', 'every project'),\n    new ScopeOption(ChangeScope.CHANGED, 'Changed', 'owns a changed file'),\n    new ScopeOption(ChangeScope.DEPENDENTS, 'Changed + dependents', '+ everything else nx affected: dependents, implicitly and root-file touched (their tests re-run)'),\n    new ScopeOption(ChangeScope.DEPENDENCIES, 'Changed + dependencies', '+ everything they use'),\n    new ScopeOption(ChangeScope.BUILD, 'Changed + dependents + dependencies', 'everything CI builds for this branch'),\n    new ScopeOption(ChangeScope.EDGES, 'Edge changes only', 'projects that gained or lost a dependency or call since the fork point'),\n];\n\n/** Everything the shell frames, already rendered by its owner. */\nexport class ShellParts {\n    constructor(\n        public readonly title: string,\n        public readonly lockControl: string,\n        public readonly legend: string,\n        public readonly edgeKey: string,\n        public readonly filterStatus: string,\n        public readonly snapshot: string,\n        public readonly responsibilities: string,\n        /**\n         * One chip per product (#1179), sorted, each colored from the page's ONE palette (#1244);\n         * empty hides the Filter's Product group.\n         */\n        public readonly products: ProductColor[],\n        public readonly runtime: boolean = false,\n        public readonly frameworks: readonly string[] = FRAMEWORK_ORDER,\n        public readonly roles: readonly string[] = ROLE_STYLES.map((style: RoleStyle): string => style.role),\n        public readonly emptyState: string = '',\n        /** Modes rendered dimmed and unselectable from the first paint, each saying why (#1373). */\n        public readonly unavailable: readonly ModeUnavailable[] = [],\n    ) {}\n}\n\nexport class GraphPageShell {\n    body(parts: ShellParts): string {\n        return `<div class=\"wp-shell\" id=\"wp-shell\">\n    ${this.drawer(parts)}\n    <main class=\"wp-main\">\n        ${this.topbar(parts)}\n        <div id=\"graph\"></div>\n        ${this.overlays(parts)}\n    </main>\n</div>`;\n    }\n\n    private drawer(parts: ShellParts): string {\n        return `<aside class=\"wp-side\" id=\"wp-side\" aria-label=\"Graph controls\">\n        <div class=\"wp-brand\">${this.brandIcon()}<span>${parts.title}</span></div>\n        <div class=\"wp-group\" role=\"group\" aria-label=\"Color mode\">\n            <div class=\"wp-label\">Color by</div>\n            ${this.modePulldown(parts.runtime ? RUNTIME_GRAPH_MODES : GRAPH_MODES, parts.unavailable)}\n            <p class=\"wp-mode-reason\" id=\"wp-impact-reason\" hidden></p>\n            ${this.impactKinds('drawer')}\n        </div>\n        <div class=\"wp-group\">\n            <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>\n        </div>\n        <div class=\"wp-group\">\n            <label class=\"wp-label\" for=\"wp-lock\">Focus</label>\n            ${parts.lockControl}\n            <button type=\"button\" class=\"wp-toggle\" id=\"wp-lock-toggle\" aria-pressed=\"false\">Lock <span class=\"wp-sw\" aria-hidden=\"true\"></span></button>\n            <button type=\"button\" class=\"wp-toggle\" id=\"wp-filter-toggle\" aria-pressed=\"false\">Hide unconnected <span class=\"wp-sw\" aria-hidden=\"true\"></span></button>\n        </div>\n        <div class=\"wp-group\">\n            <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>\n            ${parts.legend}\n        </div>\n        <div class=\"wp-group\">\n            <div class=\"wp-label\">Edges</div>\n            ${parts.edgeKey}\n        </div>\n        <div class=\"wp-foot\">\n            <button type=\"button\" class=\"wp-link\" id=\"wp-resp-open\" aria-expanded=\"false\">Responsibilities</button>\n            <button type=\"button\" class=\"wp-link\" id=\"wp-snapshot-open\" aria-expanded=\"false\">Saved snapshot</button>\n        </div>\n    </aside>`;\n    }\n\n    /**\n     * \"Color by\": ONE pill-shaped trigger showing the current mode (name + subtitle) that opens a\n     * menu of the four. Keys 1/2/3/4 and the #runtime / #architecture / #impact / #product links still\n     * switch.\n     */\n    private modePulldown(modes: readonly ModeInfo[], unavailable: readonly ModeUnavailable[]): string {\n        const first = modes[0];\n        return `<div class=\"wp-pulldown\">\n                <button type=\"button\" class=\"wp-pill-trigger\" id=\"wp-mode-trigger\" aria-haspopup=\"menu\" aria-controls=\"wp-mode-menu\" aria-expanded=\"false\">\n                    <span class=\"wp-pill-text\"><span class=\"wp-mode-name\" id=\"wp-mode-current\">${first.name}</span><span class=\"wp-mode-sub\" id=\"wp-mode-current-sub\">${first.subtitle}</span></span><span class=\"wp-caret\" aria-hidden=\"true\">▾</span>\n                </button>\n                <div class=\"wp-menu\" id=\"wp-mode-menu\" role=\"menu\" aria-label=\"Color by\" hidden>${modes.map((info: ModeInfo, index: number): string => this.modeItem(info, index, unavailable)).join('')}</div>\n            </div>`;\n    }\n\n    /**\n     * One menu option, two lines: the mode's name, then its grey subtitle. An unavailable mode is\n     * disabled (dimmed by `.wp-mode:disabled`) and its subtitle says why instead (#1373).\n     */\n    private modeItem(info: ModeInfo, index: number, unavailable: readonly ModeUnavailable[]): string {\n        const checked = info.mode === GraphMode.RUNTIME ? 'true' : 'false';\n        const gap = unavailable.find((entry: ModeUnavailable): boolean => entry.mode === info.mode);\n        const title = gap === undefined ? `Key ${index + 1}` : htmlLabelText(gap.reason);\n        const subtitle = gap === undefined ? info.subtitle : htmlLabelText(gap.note);\n        const disabled = gap === undefined ? '' : ' disabled aria-disabled=\"true\"';\n        return (\n            `<button type=\"button\" class=\"wp-mode\" role=\"menuitemradio\" data-wp-mode=\"${info.mode}\" aria-checked=\"${checked}\" title=\"${title}\"${disabled}>` +\n            `<span class=\"wp-mode-name\">${info.name}</span><span class=\"wp-mode-sub\">${subtitle}</span></button>`\n        );\n    }\n\n    /**\n     * The Filter popover. Its four groups INTERSECT: a box is shown when it is in the chosen change\n     * scope AND carries any selected runtime chip (when any is selected) AND any selected role chip\n     * (when any is selected) AND belongs to any selected product (when any is selected). Nothing\n     * applies until \"Show N projects\".\n     */\n    private filterPopover(parts: ShellParts): string {\n        const scopes = SCOPE_OPTIONS.map(\n            (option: ScopeOption): string =>\n                `<label class=\"wp-scope\"><input type=\"radio\" name=\"wp-scope\" value=\"${option.scope}\"${option.scope === ChangeScope.EVERYTHING ? ' checked' : ''}>` +\n                `<span class=\"wp-scope-text\"><span class=\"wp-scope-name\" data-wp-scope-label=\"${option.scope}\">${option.label}</span>` +\n                `<span class=\"wp-scope-sub\">${parts.runtime && option.scope === ChangeScope.EVERYTHING ? 'every service' : option.subtitle}</span></span>` +\n                `<span class=\"wp-count\" data-wp-scope-count=\"${option.scope}\"></span></label>`,\n        ).join('');\n        const chips = (group: string, values: readonly string[]): string =>\n            values\n                .map(\n                    (value: string): string =>\n                        `<button type=\"button\" class=\"wp-chip\" data-wp-chip-group=\"${group}\" data-wp-chip=\"${value}\" aria-pressed=\"false\">${value}</button>`,\n                )\n                .join('');\n        return `<div class=\"wp-pop wp-filter-pop\" id=\"wp-filter-pop\" role=\"dialog\" aria-label=\"Filter ${parts.runtime ? 'services' : 'projects'}\" hidden>\n            <header><span>Filter</span><button type=\"button\" class=\"wp-icon wp-icon-mini\" id=\"wp-filter-close\" aria-label=\"Close the filter\">✕</button></header>\n            <fieldset class=\"wp-fgroup\" id=\"wp-scope-group\"><legend id=\"wp-scope-legend\">Changes on this branch</legend>${this.impactKinds('filter')}${scopes}<p class=\"wp-scope-reason\" id=\"wp-scope-reason\" hidden></p></fieldset>\n            <fieldset class=\"wp-fgroup\"><legend>Runtime <small>any match</small></legend><div class=\"wp-chips\">${chips('runtime', parts.frameworks)}</div>${parts.runtime && parts.frameworks.length === 0 ? '<p>No declared framework metadata in the saved project graph. Refresh explicitly with architecture:generate.</p>' : ''}</fieldset>\n            <fieldset class=\"wp-fgroup\"><legend>Role <small>any match</small></legend><div class=\"wp-chips\">${chips('role', parts.roles)}</div></fieldset>\n            ${this.productGroup(parts.products)}\n            <footer><button type=\"button\" class=\"wp-text-btn\" id=\"wp-filter-clear\">Clear all</button><button type=\"button\" class=\"wp-primary\" id=\"wp-filter-apply\">Show all ${parts.runtime ? 'services' : 'projects'}</button></footer>\n        </div>`;\n    }\n\n    /**\n     * The Product group (#1179): one chip per declared product, each with its palette swatch. Several\n     * chips select the UNION of their members; the group intersects with the others. Omitted when the\n     * workspace declares no product.\n     */\n    private productGroup(products: ProductColor[]): string {\n        if (products.length === 0) return '';\n        const chips = products\n            .map(\n                (color: ProductColor): string =>\n                    `<button type=\"button\" class=\"wp-chip\" data-wp-chip-group=\"product\" data-wp-chip=\"${color.product}\" aria-pressed=\"false\">` +\n                    `<svg class=\"wp-chip-swatch\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"${color.color}\"/></svg>` +\n                    `${color.product}</button>`,\n            )\n            .join('');\n        return `<fieldset class=\"wp-fgroup\" id=\"wp-product-group\"><legend>Product <small>any match</small></legend><div class=\"wp-chips\">${chips}</div></fieldset>`;\n    }\n\n    /**\n     * Which Impact scan the page shows (#1163): \"Changed on this branch\" (fork point → working tree)\n     * or \"Last commit\" (HEAD^ → working tree). Hidden until the page finds TWO scans in the sidecar;\n     * `where` tells the drawer's copy (shown only in Impact mode) from the Filter popover's.\n     */\n    private impactKinds(where: string): string {\n        return (\n            `<div class=\"wp-chips wp-impact-kinds\" data-wp-impact-kinds=\"${where}\" role=\"group\" aria-label=\"Compare\" hidden>` +\n            '<button type=\"button\" class=\"wp-chip\" data-wp-impact-kind=\"branch\" aria-pressed=\"false\">Changed on this branch</button>' +\n            '<button type=\"button\" class=\"wp-chip\" data-wp-impact-kind=\"commit\" aria-pressed=\"false\">Last commit</button></div>'\n        );\n    }\n\n    private topbar(parts: ShellParts): string {\n        return `<div class=\"wp-topbar\">\n            <button type=\"button\" class=\"wp-icon\" id=\"wp-collapse\" aria-label=\"Toggle the controls drawer\" aria-controls=\"wp-side\" aria-expanded=\"true\">☰</button>\n            <div class=\"wp-crumb\" id=\"wp-crumb\">Mode: <b>Runtime</b></div>\n            <div class=\"wp-pills\" id=\"wp-filter-pills\" aria-label=\"Active filters\"></div>\n            ${parts.filterStatus}\n            <button type=\"button\" class=\"wp-icon\" id=\"wp-help-btn\" aria-label=\"How to read this graph\" aria-controls=\"wp-help\" aria-expanded=\"false\">?</button>\n        </div>`;\n    }\n\n    private overlays(parts: ShellParts): string {\n        return `${parts.emptyState}<div class=\"wp-pop wp-legend-popout\" id=\"wp-legend-popout\" hidden>\n            <header><span id=\"wp-legend-pop-title\">Legend · Runtime</span><button type=\"button\" class=\"wp-icon wp-icon-mini\" id=\"wp-legend-close\" aria-label=\"Close the legend\">✕</button></header>\n            ${parts.legend}\n        </div>\n        ${this.help(parts.runtime)}\n        ${this.filterPopover(parts)}\n        <div class=\"wp-pop wp-snapshot\" id=\"wp-snapshot\" hidden>${parts.snapshot}</div>\n        <aside class=\"wp-panel\" id=\"wp-resp-panel\" aria-label=\"Responsibilities\" hidden>\n            <header><span>Responsibilities</span><button type=\"button\" class=\"wp-icon wp-icon-mini\" id=\"wp-resp-close\" aria-label=\"Close responsibilities\">✕</button></header>\n            ${parts.responsibilities}\n        </aside>`;\n    }\n\n    /** The two hint paragraphs that used to sit above the graph, plus the keyboard shortcuts. */\n    private help(runtime: boolean): string {\n        if (runtime) return `<div class=\"wp-pop wp-help\" id=\"wp-help\" role=\"dialog\" aria-label=\"How to read this graph\" hidden>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <p><kbd>/</kbd> Focus search · <kbd>1</kbd>–<kbd>5</kbd> modes · <kbd>Esc</kbd> dismiss or unlock</p>\n        </div>`;\n        return `<div class=\"wp-pop wp-help\" id=\"wp-help\" role=\"dialog\" aria-label=\"How to read this graph\" hidden>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n        </div>`;\n    }\n\n    private brandIcon(): string {\n        return (\n            '<svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\">' +\n            '<rect x=\"1\" y=\"1\" width=\"8\" height=\"6\" rx=\"1.5\" fill=\"none\" stroke=\"#a46bf7\" stroke-width=\"1.6\"/>' +\n            '<rect x=\"13\" y=\"1\" width=\"8\" height=\"6\" rx=\"1.5\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/>' +\n            '<rect x=\"7\" y=\"15\" width=\"8\" height=\"6\" rx=\"1.5\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/>' +\n            '<path d=\"M5 7v4h12V7M11 11v4\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/></svg>'\n        );\n    }\n}\n"]}
+{"version":3,"file":"graph-page-shell.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-page-shell.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The architecture page's shell (#1155): a collapsible dark drawer on the left holding every control,\n * and the graph filling the rest of the viewport.\n *\n * Before this, two hint paragraphs, a ~650px three-column legend, a lock dropdown and a zoom bar all\n * sat ABOVE the graph, so a laptop's first screen showed no graph at all. Now the hints are a \"?\"\n * popover, the legend lives in the drawer (and can pop out over the graph), zoom floats bottom-right\n * (graph-navigation.ts) and the responsibilities open in a right-hand panel.\n *\n * Markup only. Behaviour is graph-visualizer.client.ts; styling is graph-page-styles.ts. No element\n * carries a `style=` attribute — every look is a class.\n */\n\nimport { FRAMEWORK_ORDER, GRAPH_MODES, GraphMode, ModeInfo, ModeUnavailable, ROLE_STYLES, RoleStyle, RUNTIME_GRAPH_MODES } from './graph-color-modes';\nimport { htmlLabelText } from './dot-syntax';\nimport { ProductColor } from './graph-products';\n\n/**\n * The Filter popover's \"Changes on this branch\" choices. The page computes each set from the Impact\n * sidecar (graph-impact.ts): CHANGED = touched; DEPENDENTS = every project nx affected, whatever its reason (their\n * tests re-run); DEPENDENCIES = touched + every transitive dependency of it; BUILD = touched +\n * every affected project + every build input — the dependencies of the DEPENDENTS too, which is why it is more than\n * the union of the two rows above it.\n *\n * \"Dependents\" are what USE a project and \"dependencies\" what it uses (#1179). \"Dependee\" would mean\n * the thing depended ON — the opposite of the dependents row — so it is never used.\n */\nexport enum ChangeScope {\n    EVERYTHING = 'everything',\n    CHANGED = 'changed',\n    DEPENDENTS = 'dependents',\n    DEPENDENCIES = 'dependencies',\n    BUILD = 'build',\n    /** #1264: the boxes at either end of an edge gained or lost since the fork point. */\n    EDGES = 'edges',\n}\n\n/**\n * One change scope: its name and the grey second line under it, like the Color-by menu. These are the\n * ONE copy of the labels — the page script reads each name back from its `data-wp-scope-label` (the\n * top-bar pill), so the two cannot drift apart.\n */\nexport class ScopeOption {\n    constructor(\n        public readonly scope: ChangeScope,\n        public readonly label: string,\n        public readonly subtitle: string,\n    ) {}\n}\n\nexport const SCOPE_OPTIONS: readonly ScopeOption[] = [\n    new ScopeOption(ChangeScope.EVERYTHING, 'All', 'every project'),\n    new ScopeOption(ChangeScope.CHANGED, 'Changed', 'owns a changed file'),\n    new ScopeOption(ChangeScope.DEPENDENTS, 'Changed + dependents', '+ everything else nx affected: dependents, implicitly and root-file touched (their tests re-run)'),\n    new ScopeOption(ChangeScope.DEPENDENCIES, 'Changed + dependencies', '+ everything they use'),\n    new ScopeOption(ChangeScope.BUILD, 'Changed + dependents + dependencies', 'everything CI builds for this branch'),\n    new ScopeOption(ChangeScope.EDGES, 'Edge changes only', 'projects that gained or lost a dependency or call since the fork point'),\n];\n\n/**\n * One box the \"Keep connected to\" and \"Focus\" pulldowns offer (#1385): the node id the SVG is keyed on\n * (what the search matches and what a pick stores), and a short grey label beside it — the level on the\n * architecture page, the role on the runtime page.\n */\nexport class GraphPickOption {\n    constructor(\n        public readonly id: string,\n        public readonly label: string,\n    ) {}\n}\n\n/** Everything the shell frames, already rendered by its owner. */\nexport class ShellParts {\n    constructor(\n        public readonly title: string,\n        /** Every box either pulldown may offer; the shell sorts them alphabetically. */\n        public readonly pickOptions: readonly GraphPickOption[],\n        public readonly legend: string,\n        public readonly edgeKey: string,\n        public readonly filterStatus: string,\n        public readonly snapshot: string,\n        public readonly responsibilities: string,\n        /**\n         * One chip per product (#1179), sorted, each colored from the page's ONE palette (#1244);\n         * empty hides the Filter's Product group.\n         */\n        public readonly products: ProductColor[],\n        public readonly runtime: boolean = false,\n        public readonly frameworks: readonly string[] = FRAMEWORK_ORDER,\n        public readonly roles: readonly string[] = ROLE_STYLES.map((style: RoleStyle): string => style.role),\n        public readonly emptyState: string = '',\n        /** Modes rendered dimmed and unselectable from the first paint, each saying why (#1373). */\n        public readonly unavailable: readonly ModeUnavailable[] = [],\n    ) {}\n}\n\nexport class GraphPageShell {\n    body(parts: ShellParts): string {\n        return `<div class=\"wp-shell\" id=\"wp-shell\">\n    ${this.drawer(parts)}\n    <main class=\"wp-main\">\n        ${this.topbar(parts)}\n        <div id=\"graph\"></div>\n        ${this.overlays(parts)}\n    </main>\n</div>`;\n    }\n\n    private drawer(parts: ShellParts): string {\n        return `<aside class=\"wp-side\" id=\"wp-side\" aria-label=\"Graph controls\">\n        <div class=\"wp-brand\">${this.brandIcon()}<span>${parts.title}</span></div>\n        <div class=\"wp-group\" role=\"group\" aria-label=\"Color mode\">\n            <div class=\"wp-label\">Color by</div>\n            ${this.modePulldown(parts.runtime ? RUNTIME_GRAPH_MODES : GRAPH_MODES, parts.unavailable)}\n            <p class=\"wp-mode-reason\" id=\"wp-impact-reason\" hidden></p>\n            ${this.impactKinds('drawer')}\n        </div>\n        <div class=\"wp-group\">\n            <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>\n        </div>\n        <div class=\"wp-group\">\n            <div class=\"wp-label\" id=\"wp-keep-label\">Keep connected to</div>\n            ${this.multiSelect('keep', 'Keep connected to', parts.pickOptions)}\n            <div class=\"wp-label\" id=\"wp-focus-label\">Focus</div>\n            ${this.multiSelect('focus', 'Focus', parts.pickOptions)}\n        </div>\n        <div class=\"wp-group\">\n            <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>\n            ${parts.legend}\n        </div>\n        <div class=\"wp-group\">\n            <div class=\"wp-label\">Edges</div>\n            ${parts.edgeKey}\n        </div>\n        <div class=\"wp-foot\">\n            <button type=\"button\" class=\"wp-link\" id=\"wp-resp-open\" aria-expanded=\"false\">Responsibilities</button>\n            <button type=\"button\" class=\"wp-link\" id=\"wp-snapshot-open\" aria-expanded=\"false\">Saved snapshot</button>\n        </div>\n    </aside>`;\n    }\n\n    /**\n     * One multi-select pulldown (#1385), the same markup for \"Keep connected to\" and \"Focus\": a closed\n     * field showing the picks as removable chips (or \"None (off)\"), and a popover holding a search box,\n     * one checkbox row per box in ALPHABETICAL order, and a footer with \"N selected\" and Clear all.\n     * Behaviour is WpMultiSelect in graph-visualizer.client.ts; the rows here are the only copy of the\n     * options, and the page hides the ones a search or (for Focus) the current graph excludes.\n     */\n    private multiSelect(key: string, name: string, options: readonly GraphPickOption[]): string {\n        const sorted = [...options].sort((a: GraphPickOption, b: GraphPickOption): number => {\n            const folded = a.id.toLowerCase().localeCompare(b.id.toLowerCase());\n            return folded !== 0 ? folded : a.id.localeCompare(b.id);\n        });\n        const rows = sorted\n            .map((option: GraphPickOption): string => {\n                const id = htmlLabelText(option.id);\n                return (\n                    `<div class=\"wp-multi-option\" role=\"option\" aria-selected=\"false\" data-wp-option=\"${id}\">` +\n                    '<input type=\"checkbox\" tabindex=\"-1\" aria-hidden=\"true\">' +\n                    `<span class=\"wp-multi-name\">${id}</span><span class=\"wp-multi-sub\">${htmlLabelText(option.label)}</span></div>`\n                );\n            })\n            .join('');\n        return `<div class=\"wp-multi\" id=\"wp-${key}\" data-wp-multi=\"${key}\">\n                <div class=\"wp-multi-field\" id=\"wp-${key}-field\">\n                    <span class=\"wp-multi-chips\" id=\"wp-${key}-chips\"><span class=\"wp-multi-none\">None (off)</span></span>\n                    <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>\n                </div>\n                <div class=\"wp-multi-pop\" id=\"wp-${key}-pop\" hidden>\n                    <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\">\n                    <div class=\"wp-multi-list\" id=\"wp-${key}-list\" role=\"listbox\" aria-multiselectable=\"true\" aria-label=\"${name}\">${rows}</div>\n                    <p class=\"wp-multi-empty\" id=\"wp-${key}-empty\" hidden>No match</p>\n                    <footer><span id=\"wp-${key}-count\">0 selected</span><button type=\"button\" class=\"wp-text-btn\" id=\"wp-${key}-clear\">Clear all</button></footer>\n                </div>\n            </div>`;\n    }\n\n    /**\n     * \"Color by\": ONE pill-shaped trigger showing the current mode (name + subtitle) that opens a\n     * menu of the four. Keys 1/2/3/4 and the #runtime / #architecture / #impact / #product links still\n     * switch.\n     */\n    private modePulldown(modes: readonly ModeInfo[], unavailable: readonly ModeUnavailable[]): string {\n        const first = modes[0];\n        return `<div class=\"wp-pulldown\">\n                <button type=\"button\" class=\"wp-pill-trigger\" id=\"wp-mode-trigger\" aria-haspopup=\"menu\" aria-controls=\"wp-mode-menu\" aria-expanded=\"false\">\n                    <span class=\"wp-pill-text\"><span class=\"wp-mode-name\" id=\"wp-mode-current\">${first.name}</span><span class=\"wp-mode-sub\" id=\"wp-mode-current-sub\">${first.subtitle}</span></span><span class=\"wp-caret\" aria-hidden=\"true\">▾</span>\n                </button>\n                <div class=\"wp-menu\" id=\"wp-mode-menu\" role=\"menu\" aria-label=\"Color by\" hidden>${modes.map((info: ModeInfo, index: number): string => this.modeItem(info, index, unavailable)).join('')}</div>\n            </div>`;\n    }\n\n    /**\n     * One menu option, two lines: the mode's name, then its grey subtitle. An unavailable mode is\n     * disabled (dimmed by `.wp-mode:disabled`) and its subtitle says why instead (#1373).\n     */\n    private modeItem(info: ModeInfo, index: number, unavailable: readonly ModeUnavailable[]): string {\n        const checked = info.mode === GraphMode.RUNTIME ? 'true' : 'false';\n        const gap = unavailable.find((entry: ModeUnavailable): boolean => entry.mode === info.mode);\n        const title = gap === undefined ? `Key ${index + 1}` : htmlLabelText(gap.reason);\n        const subtitle = gap === undefined ? info.subtitle : htmlLabelText(gap.note);\n        const disabled = gap === undefined ? '' : ' disabled aria-disabled=\"true\"';\n        return (\n            `<button type=\"button\" class=\"wp-mode\" role=\"menuitemradio\" data-wp-mode=\"${info.mode}\" aria-checked=\"${checked}\" title=\"${title}\"${disabled}>` +\n            `<span class=\"wp-mode-name\">${info.name}</span><span class=\"wp-mode-sub\">${subtitle}</span></button>`\n        );\n    }\n\n    /**\n     * The Filter popover. Its four groups INTERSECT: a box is shown when it is in the chosen change\n     * scope AND carries any selected runtime chip (when any is selected) AND any selected role chip\n     * (when any is selected) AND belongs to any selected product (when any is selected). Nothing\n     * applies until \"Show N projects\".\n     */\n    private filterPopover(parts: ShellParts): string {\n        const scopes = SCOPE_OPTIONS.map(\n            (option: ScopeOption): string =>\n                `<label class=\"wp-scope\"><input type=\"radio\" name=\"wp-scope\" value=\"${option.scope}\"${option.scope === ChangeScope.EVERYTHING ? ' checked' : ''}>` +\n                `<span class=\"wp-scope-text\"><span class=\"wp-scope-name\" data-wp-scope-label=\"${option.scope}\">${option.label}</span>` +\n                `<span class=\"wp-scope-sub\">${parts.runtime && option.scope === ChangeScope.EVERYTHING ? 'every service' : option.subtitle}</span></span>` +\n                `<span class=\"wp-count\" data-wp-scope-count=\"${option.scope}\"></span></label>`,\n        ).join('');\n        const chips = (group: string, values: readonly string[]): string =>\n            values\n                .map(\n                    (value: string): string =>\n                        `<button type=\"button\" class=\"wp-chip\" data-wp-chip-group=\"${group}\" data-wp-chip=\"${value}\" aria-pressed=\"false\">${value}</button>`,\n                )\n                .join('');\n        return `<div class=\"wp-pop wp-filter-pop\" id=\"wp-filter-pop\" role=\"dialog\" aria-label=\"Filter ${parts.runtime ? 'services' : 'projects'}\" hidden>\n            <header><span>Filter</span><button type=\"button\" class=\"wp-icon wp-icon-mini\" id=\"wp-filter-close\" aria-label=\"Close the filter\">✕</button></header>\n            <fieldset class=\"wp-fgroup\" id=\"wp-scope-group\"><legend id=\"wp-scope-legend\">Changes on this branch</legend>${this.impactKinds('filter')}${scopes}<p class=\"wp-scope-reason\" id=\"wp-scope-reason\" hidden></p></fieldset>\n            <fieldset class=\"wp-fgroup\"><legend>Runtime <small>any match</small></legend><div class=\"wp-chips\">${chips('runtime', parts.frameworks)}</div>${parts.runtime && parts.frameworks.length === 0 ? '<p>No declared framework metadata in the saved project graph. Refresh explicitly with architecture:generate.</p>' : ''}</fieldset>\n            <fieldset class=\"wp-fgroup\"><legend>Role <small>any match</small></legend><div class=\"wp-chips\">${chips('role', parts.roles)}</div></fieldset>\n            ${this.productGroup(parts.products)}\n            <footer><button type=\"button\" class=\"wp-text-btn\" id=\"wp-filter-clear\">Clear all</button><button type=\"button\" class=\"wp-primary\" id=\"wp-filter-apply\">Show all ${parts.runtime ? 'services' : 'projects'}</button></footer>\n        </div>`;\n    }\n\n    /**\n     * The Product group (#1179): one chip per declared product, each with its palette swatch. Several\n     * chips select the UNION of their members; the group intersects with the others. Omitted when the\n     * workspace declares no product.\n     */\n    private productGroup(products: ProductColor[]): string {\n        if (products.length === 0) return '';\n        const chips = products\n            .map(\n                (color: ProductColor): string =>\n                    `<button type=\"button\" class=\"wp-chip\" data-wp-chip-group=\"product\" data-wp-chip=\"${color.product}\" aria-pressed=\"false\">` +\n                    `<svg class=\"wp-chip-swatch\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"${color.color}\"/></svg>` +\n                    `${color.product}</button>`,\n            )\n            .join('');\n        return `<fieldset class=\"wp-fgroup\" id=\"wp-product-group\"><legend>Product <small>any match</small></legend><div class=\"wp-chips\">${chips}</div></fieldset>`;\n    }\n\n    /**\n     * Which Impact scan the page shows (#1163): \"Changed on this branch\" (fork point → working tree)\n     * or \"Last commit\" (HEAD^ → working tree). Hidden until the page finds TWO scans in the sidecar;\n     * `where` tells the drawer's copy (shown only in Impact mode) from the Filter popover's.\n     */\n    private impactKinds(where: string): string {\n        return (\n            `<div class=\"wp-chips wp-impact-kinds\" data-wp-impact-kinds=\"${where}\" role=\"group\" aria-label=\"Compare\" hidden>` +\n            '<button type=\"button\" class=\"wp-chip\" data-wp-impact-kind=\"branch\" aria-pressed=\"false\">Changed on this branch</button>' +\n            '<button type=\"button\" class=\"wp-chip\" data-wp-impact-kind=\"commit\" aria-pressed=\"false\">Last commit</button></div>'\n        );\n    }\n\n    private topbar(parts: ShellParts): string {\n        return `<div class=\"wp-topbar\">\n            <button type=\"button\" class=\"wp-icon\" id=\"wp-collapse\" aria-label=\"Toggle the controls drawer\" aria-controls=\"wp-side\" aria-expanded=\"true\">☰</button>\n            <div class=\"wp-crumb\" id=\"wp-crumb\">Mode: <b>Runtime</b></div>\n            <div class=\"wp-pills\" id=\"wp-filter-pills\" aria-label=\"Active filters\"></div>\n            ${parts.filterStatus}\n            <button type=\"button\" class=\"wp-icon\" id=\"wp-help-btn\" aria-label=\"How to read this graph\" aria-controls=\"wp-help\" aria-expanded=\"false\">?</button>\n        </div>`;\n    }\n\n    private overlays(parts: ShellParts): string {\n        return `${parts.emptyState}<div class=\"wp-pop wp-legend-popout\" id=\"wp-legend-popout\" hidden>\n            <header><span id=\"wp-legend-pop-title\">Legend · Runtime</span><button type=\"button\" class=\"wp-icon wp-icon-mini\" id=\"wp-legend-close\" aria-label=\"Close the legend\">✕</button></header>\n            ${parts.legend}\n        </div>\n        ${this.help(parts.runtime)}\n        ${this.filterPopover(parts)}\n        <div class=\"wp-pop wp-snapshot\" id=\"wp-snapshot\" hidden>${parts.snapshot}</div>\n        <aside class=\"wp-panel\" id=\"wp-resp-panel\" aria-label=\"Responsibilities\" hidden>\n            <header><span>Responsibilities</span><button type=\"button\" class=\"wp-icon wp-icon-mini\" id=\"wp-resp-close\" aria-label=\"Close responsibilities\">✕</button></header>\n            ${parts.responsibilities}\n        </aside>`;\n    }\n\n    /** The two hint paragraphs that used to sit above the graph, plus the keyboard shortcuts. */\n    private help(runtime: boolean): string {\n        if (runtime) return `<div class=\"wp-pop wp-help\" id=\"wp-help\" role=\"dialog\" aria-label=\"How to read this graph\" hidden>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <p><kbd>/</kbd> Focus search · <kbd>1</kbd>–<kbd>5</kbd> modes · <kbd>Esc</kbd> close a pulldown, else clear Focus</p>\n        </div>`;\n        return `<div class=\"wp-pop wp-help\" id=\"wp-help\" role=\"dialog\" aria-label=\"How to read this graph\" hidden>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n            <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>\n        </div>`;\n    }\n\n    private brandIcon(): string {\n        return (\n            '<svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\">' +\n            '<rect x=\"1\" y=\"1\" width=\"8\" height=\"6\" rx=\"1.5\" fill=\"none\" stroke=\"#a46bf7\" stroke-width=\"1.6\"/>' +\n            '<rect x=\"13\" y=\"1\" width=\"8\" height=\"6\" rx=\"1.5\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/>' +\n            '<rect x=\"7\" y=\"15\" width=\"8\" height=\"6\" rx=\"1.5\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/>' +\n            '<path d=\"M5 7v4h12V7M11 11v4\" fill=\"none\" stroke=\"#e9eaf0\" stroke-width=\"1.6\"/></svg>'\n        );\n    }\n}\n"]}

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

@@ -8,6 +8,12 @@ export declare class GraphPageStyles {
     private base;
     private drawer;
     private controls;
+    /**
+     * The "Keep connected to" and "Focus" pulldowns (#1385): a closed field of removable chips, and a
+     * popover holding the search box, the checkbox rows (the match in a <mark>, the keyboard's row
+     * outlined) and the "N selected · Clear all" footer. A chip whose box is not drawn is dashed.
+     */
+    private multiSelect;
     private main;
     /** The Filter popover: three groups, chips, and the "Show N projects" footer. */
     private filterPopover;

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

@@ -12,6 +12,7 @@ class GraphPageStyles {
         return (this.base() +
             this.drawer() +
             this.controls() +
+            this.multiSelect() +
             this.main() +
             this.overlays() +
             this.filterPopover() +
@@ -91,15 +92,6 @@ class GraphPageStyles {
         return `
         .wp-side input[type="search"] { width: 100%; box-sizing: border-box; background: var(--wp-side-control); color: var(--wp-side-fg);
             border: 1px solid var(--wp-side-line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }
-        .wp-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between;
-            align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
-        .wp-toggle:hover { background: var(--wp-side-hover); }
-        .wp-toggle:disabled { cursor: not-allowed; opacity: 0.45; }
-        .wp-sw { width: 30px; height: 18px; border-radius: 9px; background: #3a3d4a; position: relative; transition: background 0.15s; }
-        .wp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
-            background: #fff; transition: transform 0.15s; }
-        .wp-toggle[aria-pressed="true"] .wp-sw { background: var(--wp-accent); }
-        .wp-toggle[aria-pressed="true"] .wp-sw::after { transform: translateX(12px); }
         .wp-link { all: unset; cursor: pointer; color: var(--wp-side-muted); font-size: 12px; text-decoration: underline; }
         .wp-link:hover { color: var(--wp-side-fg); }
         .wp-icon { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; flex: none;
@@ -109,9 +101,45 @@ class GraphPageStyles {
         .wp-icon-mini { width: 24px; height: 24px; font-size: 12px; }
         .wp-icon-dark { background: transparent; border-color: var(--wp-side-line); color: var(--wp-side-fg); }
         .wp-mode:focus-visible, .wp-pill-trigger:focus-visible, .wp-filter-btn:focus-visible, .wp-chip:focus-visible,
-        .wp-primary:focus-visible, .wp-pill button:focus-visible, .wp-toggle:focus-visible, .wp-side input:focus-visible, .wp-icon:focus-visible,
+        .wp-primary:focus-visible, .wp-pill button:focus-visible, .wp-multi-trigger:focus-visible, .wp-multi-chip button:focus-visible, .wp-side input:focus-visible, .wp-icon:focus-visible,
         .wp-link:focus-visible { outline: 2px solid var(--wp-accent-hover); outline-offset: 2px; }`;
     }
+    /**
+     * The "Keep connected to" and "Focus" pulldowns (#1385): a closed field of removable chips, and a
+     * popover holding the search box, the checkbox rows (the match in a <mark>, the keyboard's row
+     * outlined) and the "N selected · Clear all" footer. A chip whose box is not drawn is dashed.
+     */
+    multiSelect() {
+        return `
+        .wp-multi { position: relative; margin-bottom: 6px; }
+        .wp-multi-field { box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 34px;
+            padding: 4px 4px 4px 8px; border-radius: 8px; border: 1px solid var(--wp-side-line); background: var(--wp-side-control); }
+        .wp-multi-field:hover { border-color: var(--wp-accent-hover); }
+        .wp-multi-chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
+        .wp-multi-none { color: var(--wp-side-muted); font-size: 12.5px; padding: 2px 0; }
+        .wp-multi-chip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 1px 2px 1px 8px; border-radius: 999px;
+            background: #2a2333; border: 1px solid var(--wp-accent); font-size: 12px; overflow-wrap: anywhere; }
+        .wp-multi-chip small { color: var(--wp-side-muted); font-size: 10.5px; }
+        .wp-multi-chip-hidden { border-style: dashed; opacity: 0.7; }
+        .wp-multi-chip button { all: unset; cursor: pointer; flex: none; width: 16px; height: 16px; display: inline-grid; place-items: center;
+            border-radius: 50%; font-size: 10px; }
+        .wp-multi-chip button:hover { background: var(--wp-side-hover); }
+        .wp-multi-trigger { all: unset; cursor: pointer; flex: none; padding: 2px 6px; border-radius: 6px; }
+        .wp-multi-pop { position: absolute; z-index: 36; left: 0; right: 0; top: calc(100% + 4px); display: grid; gap: 6px; padding: 8px;
+            background: var(--wp-side-control); border: 1px solid var(--wp-side-line); border-radius: 10px; box-shadow: 0 10px 28px #0008; }
+        .wp-multi-list { max-height: 260px; overflow-y: auto; display: grid; gap: 1px; }
+        .wp-multi-option { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
+        .wp-multi-option:hover { background: var(--wp-side-hover); }
+        .wp-multi-option.wp-multi-active { background: var(--wp-side-hover); box-shadow: inset 0 0 0 1px var(--wp-accent-hover); }
+        .wp-multi-option input { flex: none; margin: 0; accent-color: var(--wp-accent); pointer-events: none; }
+        .wp-multi-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
+        .wp-multi-name mark { background: #5b3a91; color: #fff; border-radius: 2px; }
+        .wp-multi-sub { flex: none; color: var(--wp-side-muted); font-size: 11.5px; }
+        .wp-multi-empty { margin: 0; color: var(--wp-side-muted); font-size: 12px; }
+        .wp-multi-pop footer { display: flex; justify-content: space-between; align-items: center; padding-top: 6px;
+            border-top: 1px solid var(--wp-side-line); color: var(--wp-side-muted); font-size: 12px; }
+        .wp-multi-pop .wp-text-btn { color: var(--wp-side-fg); }`;
+    }
     main() {
         return `
         .wp-main { position: relative; min-width: 0; height: 100vh; display: flex; flex-direction: column; }

package/src/lib/graph-page-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-page-styles.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-page-styles.ts"],"names":[],"mappings":";;;AAAA,2DAAoD;AAEpD;;;;GAIG;AACH,MAAa,eAAe;IACxB,GAAG;QACC,OAAO,CACH,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,KAAK,EAAE;YACZ,IAAI,CAAC,KAAK,EAAE,CACf,CAAC;IACN,CAAC;IAEO,IAAI;QACR,OAAO;;;;;;;;;;;;;;;;;;;;;;;uFAuBwE,CAAC;IACpF,CAAC;IAEO,MAAM;QACV,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mJAwCoI,CAAC;IAChJ,CAAC;IAEO,QAAQ;QACZ,OAAO;;;;;;;;;;;;;;;;;;;;;;mGAsBoF,CAAC;IAChG,CAAC;IAEO,IAAI;QACR,OAAO;;;;;;;;;;;;;;uDAcwC,CAAC;IACpD,CAAC;IAED,iFAAiF;IACzE,aAAa;QACjB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA4BmD,CAAC;IAC/D,CAAC;IAEO,QAAQ;QACZ,OAAO;;;;;;;;;;;;;uFAawE,CAAC;IACpF,CAAC;IAED;;;;;;;;;;;;;OAaG;IACK,KAAK;QACT,MAAM,KAAK,GAAG,6BAA6B,CAAC;QAC5C,MAAM,KAAK,GAAG,GAAG,KAAK,MAAM,KAAK,EAAE,CAAC;QACpC,MAAM,KAAK,GAAG,GAAG,KAAK,QAAQ,KAAK,GAAG,CAAC;QACvC,MAAM,IAAI,GAAG,mGAAmG,CAAC;QACjH,OAAO;;;6CAG8B,KAAK;qCACb,iCAAa;qCACb,iCAAa,mCAAmC,IAAI;uCAClD,iCAAa,OAAO,KAAK;kCAC9B,iCAAa,wEAAwE,CAAC;IACpH,CAAC;IAEO,KAAK;QACT,OAAO;;;;;;;;;;sCAUuB,CAAC;IACnC,CAAC;CACJ;AA7ND,0CA6NC","sourcesContent":["import { STRIPED_CLASS } from './graph-color-modes';\n\n/**\n * The architecture page's stylesheet: the dark drawer, the graph filling the viewport, the floating\n * popovers and the responsibilities panel. Emitted AFTER the shared menu/filter/navigation styles so\n * its `#graph` rules (fill the viewport, no 75vh cap) win.\n */\nexport class GraphPageStyles {\n    css(): string {\n        return (\n            this.base() +\n            this.drawer() +\n            this.controls() +\n            this.main() +\n            this.overlays() +\n            this.filterPopover() +\n            this.graph() +\n            this.cards()\n        );\n    }\n\n    private base(): string {\n        return `\n        :root {\n            --wp-side-bg: #15161b; --wp-side-control: #1e1f25; --wp-side-fg: #e9eaf0; --wp-side-muted: #8b8fa0;\n            --wp-side-hover: #26272f; --wp-side-line: #3a3c46; --wp-accent: #8b3cf0; --wp-accent-hover: #a46bf7;\n            --wp-fg: #1b1e27; --wp-muted: #5d6475; --wp-line: #d9dce5; --wp-surface: #ffffff; --wp-canvas: #faf9f5;\n        }\n        html, body { height: 100%; }\n        /* A class that sets display (the legend lists are grids) must not un-hide a [hidden] element. */\n        [hidden] { display: none !important; }\n        body { margin: 0; padding: 0; overflow: hidden; background: var(--wp-canvas); color: var(--wp-fg);\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif; font-size: 14px; }\n        kbd { font-family: ui-monospace, Menlo, monospace; font-size: 12px; border: 1px solid var(--wp-line);\n            border-radius: 4px; padding: 0 5px; background: #f3f4f7; }\n        .wp-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100vh; }\n        .wp-shell.wp-collapsed { grid-template-columns: 0 minmax(0, 1fr); }\n        .wp-shell.wp-collapsed .wp-side { visibility: hidden; }\n        @media (max-width: 760px) {\n            .wp-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, auto) minmax(0, 1fr); }\n            .wp-side { max-height: 42vh; }\n            .wp-shell.wp-collapsed { grid-template-columns: minmax(0, 1fr); }\n            .wp-shell.wp-collapsed .wp-side { display: none; }\n            .wp-main { height: auto; min-height: 0; }\n        }\n        @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }`;\n    }\n\n    private drawer(): string {\n        return `\n        .wp-side { background: var(--wp-side-bg); color: var(--wp-side-fg); overflow-y: auto; overflow-x: hidden;\n            display: flex; flex-direction: column; padding: 12px 0 10px; min-width: 0; font-size: 13px; }\n        .wp-brand { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; font-weight: 600; font-size: 14px; }\n        .wp-brand svg { flex: none; }\n        .wp-group { padding: 8px 14px; border-top: 1px solid var(--wp-side-line); display: grid; gap: 6px; }\n        .wp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--wp-side-muted);\n            font-weight: 600; padding-left: 4px; }\n        .wp-label-row { display: flex; justify-content: space-between; align-items: center; }\n        .wp-pulldown { position: relative; }\n        .wp-pill-trigger { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px;\n            width: 100%; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--wp-side-line);\n            background: var(--wp-side-control); }\n        .wp-pill-trigger:hover, .wp-pill-trigger[aria-expanded=\"true\"] { border-color: var(--wp-accent-hover); }\n        .wp-pill-text { flex: 1 1 auto; min-width: 0; }\n        .wp-caret { color: var(--wp-side-muted); }\n        .wp-menu { position: absolute; z-index: 35; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 2px; padding: 6px;\n            background: var(--wp-side-control); border: 1px solid var(--wp-side-line); border-radius: 12px; box-shadow: 0 10px 28px #0008; }\n        .wp-mode { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 6px 10px; border-radius: 8px; }\n        .wp-mode:hover { background: var(--wp-side-hover); }\n        .wp-mode[aria-checked=\"true\"] { background: #2a2333; box-shadow: inset 3px 0 0 var(--wp-accent); }\n        .wp-mode:disabled { cursor: not-allowed; opacity: 0.45; }\n        .wp-mode-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }\n        .wp-mode-sub { display: block; font-size: 12px; color: var(--wp-side-muted); line-height: 1.3; }\n        .wp-filter-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between;\n            align-items: center; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--wp-side-line);\n            background: var(--wp-side-control); font-size: 13px; font-weight: 600; }\n        .wp-filter-btn:hover, .wp-filter-btn[aria-expanded=\"true\"] { border-color: var(--wp-accent-hover); }\n        .wp-badge { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--wp-accent); color: #fff;\n            font-size: 11.5px; text-align: center; box-sizing: border-box; }\n        .wp-mode-reason { margin: 2px 4px 0; font-size: 11.5px; line-height: 1.35; color: var(--wp-side-muted); }\n        .wp-legend-list { display: grid; gap: 5px; padding-left: 4px; }\n        .wp-legend-row { display: flex; align-items: center; gap: 10px; line-height: 1.25; }\n        .wp-legend-row svg { flex: none; }\n        .wp-legend-row small { display: block; color: var(--wp-side-muted); font-size: 11.5px; }\n        .wp-product-toggle { cursor: pointer; }\n        .wp-product-toggle input { flex: none; margin: 0; accent-color: var(--wp-accent); cursor: pointer; }\n        .wp-product-note { margin: 2px 0 0; font-size: 11.5px; color: var(--wp-side-muted); }\n        .wp-impact-note { margin: 2px 0 0; font-size: 11.5px; color: var(--wp-side-muted); }\n        .wp-impact-note:empty { display: none; }\n        .wp-foot { margin-top: auto; padding: 10px 18px 0; border-top: 1px solid var(--wp-side-line); display: flex; gap: 14px; flex-wrap: wrap; }`;\n    }\n\n    private controls(): string {\n        return `\n        .wp-side input[type=\"search\"] { width: 100%; box-sizing: border-box; background: var(--wp-side-control); color: var(--wp-side-fg);\n            border: 1px solid var(--wp-side-line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }\n        .wp-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between;\n            align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 13px; }\n        .wp-toggle:hover { background: var(--wp-side-hover); }\n        .wp-toggle:disabled { cursor: not-allowed; opacity: 0.45; }\n        .wp-sw { width: 30px; height: 18px; border-radius: 9px; background: #3a3d4a; position: relative; transition: background 0.15s; }\n        .wp-sw::after { content: \"\"; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;\n            background: #fff; transition: transform 0.15s; }\n        .wp-toggle[aria-pressed=\"true\"] .wp-sw { background: var(--wp-accent); }\n        .wp-toggle[aria-pressed=\"true\"] .wp-sw::after { transform: translateX(12px); }\n        .wp-link { all: unset; cursor: pointer; color: var(--wp-side-muted); font-size: 12px; text-decoration: underline; }\n        .wp-link:hover { color: var(--wp-side-fg); }\n        .wp-icon { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; flex: none;\n            width: 34px; height: 34px; border-radius: 8px; background: var(--wp-surface); border: 1px solid var(--wp-line);\n            color: var(--wp-fg); font-size: 15px; }\n        .wp-icon:hover { border-color: var(--wp-accent); }\n        .wp-icon-mini { width: 24px; height: 24px; font-size: 12px; }\n        .wp-icon-dark { background: transparent; border-color: var(--wp-side-line); color: var(--wp-side-fg); }\n        .wp-mode:focus-visible, .wp-pill-trigger:focus-visible, .wp-filter-btn:focus-visible, .wp-chip:focus-visible,\n        .wp-primary:focus-visible, .wp-pill button:focus-visible, .wp-toggle:focus-visible, .wp-side input:focus-visible, .wp-icon:focus-visible,\n        .wp-link:focus-visible { outline: 2px solid var(--wp-accent-hover); outline-offset: 2px; }`;\n    }\n\n    private main(): string {\n        return `\n        .wp-main { position: relative; min-width: 0; height: 100vh; display: flex; flex-direction: column; }\n        .wp-topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px;\n            border-bottom: 1px solid var(--wp-line); background: var(--wp-surface); }\n        .wp-crumb { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--wp-muted); overflow: hidden;\n            text-overflow: ellipsis; white-space: nowrap; }\n        .wp-crumb b { color: var(--wp-fg); }\n        .wp-topbar #wp-filter-status, .wp-topbar #wp-graph-error { margin: 0; font-size: 13px; }\n        .wp-pills { display: flex; gap: 6px; flex-wrap: wrap; }\n        .wp-pills:empty { display: none; }\n        .wp-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px;\n            background: #f1e8fe; color: #4a1d8a; border: 1px solid #d6bcfa; font-size: 12.5px; }\n        .wp-pill button { all: unset; cursor: pointer; width: 18px; height: 18px; display: inline-grid; place-items: center;\n            border-radius: 50%; color: #4a1d8a; }\n        .wp-pill button:hover { background: #e2cffc; }`;\n    }\n\n    /** The Filter popover: three groups, chips, and the \"Show N projects\" footer. */\n    private filterPopover(): string {\n        return `\n        .wp-filter-pop { left: 12px; top: 56px; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 80px); overflow: auto; }\n        .wp-fgroup { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }\n        .wp-fgroup legend { padding: 0; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;\n            color: var(--wp-muted); font-weight: 600; }\n        .wp-fgroup legend small { text-transform: none; letter-spacing: 0; font-weight: 400; }\n        .wp-fgroup:disabled .wp-scope { opacity: 0.45; cursor: not-allowed; }\n        .wp-scope { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }\n        .wp-scope:hover { background: #f4f1fb; }\n        .wp-scope input { accent-color: var(--wp-accent); margin: 0; }\n        .wp-scope-text { flex: 1 1 auto; display: grid; }\n        .wp-scope-sub { font-size: 11.5px; color: var(--wp-muted); line-height: 1.3; }\n        .wp-chip-swatch { vertical-align: -1px; margin-right: 5px; }\n        .wp-count { color: var(--wp-muted); font-size: 12px; font-variant-numeric: tabular-nums; }\n        .wp-scope-reason { margin: 2px 6px 0; font-size: 12px; color: var(--wp-muted); }\n        .wp-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n        .wp-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 3px 11px; border-radius: 999px;\n            border: 1px solid var(--wp-line); background: var(--wp-surface); font-size: 12.5px; }\n        .wp-chip:hover { border-color: var(--wp-accent-hover); }\n        .wp-chip[aria-pressed=\"true\"] { background: var(--wp-accent); border-color: var(--wp-accent); color: #fff; }\n        .wp-chip:disabled { opacity: 0.45; cursor: default; }\n        .wp-impact-kinds { margin: 6px 0 4px; }\n        .wp-side .wp-chip:not([aria-pressed=\"true\"]) { background: var(--wp-side-control); border-color: var(--wp-side-line); }\n        .wp-filter-pop footer { display: flex; justify-content: space-between; align-items: center; gap: 8px;\n            padding-top: 10px; border-top: 1px solid var(--wp-line); }\n        .wp-text-btn { all: unset; cursor: pointer; color: var(--wp-muted); font-size: 12.5px; text-decoration: underline; }\n        .wp-primary { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 14px; border-radius: 8px;\n            background: var(--wp-accent); color: #fff; font-weight: 600; font-size: 13px; }\n        .wp-primary:hover { background: var(--wp-accent-hover); }`;\n    }\n\n    private overlays(): string {\n        return `\n        .wp-pop { position: absolute; z-index: 30; background: var(--wp-surface); border: 1px solid var(--wp-line);\n            border-radius: 10px; box-shadow: 0 8px 24px #0002; padding: 12px 14px; font-size: 13px; box-sizing: border-box; }\n        .wp-pop header { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }\n        .wp-legend-popout { left: 12px; bottom: 12px; width: 270px; max-height: 60vh; overflow: auto; }\n        .wp-legend-popout .wp-legend-row small, .wp-legend-popout .wp-impact-note, .wp-legend-popout .wp-product-note { color: var(--wp-muted); }\n        .wp-help { right: 12px; top: 56px; width: min(380px, calc(100% - 24px)); line-height: 1.5; }\n        .wp-help p { margin: 0 0 8px; }\n        .wp-snapshot { left: 12px; bottom: 12px; width: min(440px, calc(100% - 24px)); }\n        .wp-snapshot .hint { margin: 0; }\n        .wp-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 40; width: min(540px, 100%); box-sizing: border-box;\n            overflow-y: auto; padding: 0 16px 16px; background: #f5f6f9; border-left: 1px solid var(--wp-line); box-shadow: -8px 0 24px #0002; }\n        .wp-panel > header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;\n            padding: 12px 0; background: #f5f6f9; font-weight: 600; font-size: 15px; }`;\n    }\n\n    /**\n     * The graph fills what the topbar leaves.\n     *\n     * The hover glow and the lock outline belong to the OUTER box only. A nested Runtime box (one\n     * runtime plus a specialization) is an HTML-like table, so after the node's own outline Graphviz\n     * emits a `<polygon>` for the base-colored cell and a `<path>` for the inner `STYLE=\"rounded\"`\n     * table — matching only `polygon` here is what let the glow stroke the inner box (#1158). So the\n     * glow is suppressed on EVERY shape after the node's first, whatever its element type.\n     *\n     * A striped (multi-runtime) box is the one exception to \"the first shape is the outline\":\n     * Graphviz draws one filled polygon per stripe first and the outline LAST, as an unfilled polygon.\n     * graph-color-modes.ts stamps those boxes `wp-striped`, and for them the outline is that last,\n     * `fill=\"none\"` polygon; the stripes keep their thin dividers.\n     */\n    private graph(): string {\n        const shape = ':is(polygon, ellipse, path)';\n        const later = `${shape} ~ ${shape}`;\n        const first = `${shape}:not(${later})`;\n        const glow = 'stroke: var(--wp-accent); stroke-width: 5; filter: drop-shadow(0 0 6px rgba(139, 60, 240, 0.85));';\n        return `\n        #graph { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; padding: 16px 16px 64px;\n            box-sizing: border-box; background: var(--wp-canvas); }\n        #graph g.wp-node-clickable:hover > ${later} { stroke: none; stroke-width: 0; filter: none; }\n        #graph g.wp-node-clickable.${STRIPED_CLASS}:hover > polygon:not([fill=\"none\"]) { stroke: #000000; stroke-width: 0.5; filter: none; }\n        #graph g.wp-node-clickable.${STRIPED_CLASS}:hover > polygon[fill=\"none\"] { ${glow} }\n        #graph g.node.wp-locked:not(.${STRIPED_CLASS}) > ${first},\n        #graph g.node.wp-locked.${STRIPED_CLASS} > polygon[fill=\"none\"] { stroke: var(--wp-accent); stroke-width: 3; }`;\n    }\n\n    private cards(): string {\n        return `\n        #wp-responsibilities { margin: 0; }\n        #wp-responsibilities > h2 { display: none; }\n        #wp-responsibilities > .hint { color: var(--wp-muted); margin: 0 0 8px; }\n        .wp-resp-card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 0; padding: 10px 15px; }\n        .wp-resp-card > summary { cursor: pointer; color: #333; }\n        .wp-resp-level { display: inline-block; min-width: 26px; padding: 1px 6px; margin-right: 6px; border-radius: 4px;\n            background: #eef; font-size: 12px; font-weight: bold; text-align: center; }\n        .wp-resp-body { margin-top: 8px; color: #444; }\n        .wp-resp-body code { background: #f2f2f2; padding: 1px 4px; border-radius: 3px; font-family: monospace; }\n        .wp-hidden { display: none; }`;\n    }\n}\n"]}
+{"version":3,"file":"graph-page-styles.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-page-styles.ts"],"names":[],"mappings":";;;AAAA,2DAAoD;AAEpD;;;;GAIG;AACH,MAAa,eAAe;IACxB,GAAG;QACC,OAAO,CACH,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,KAAK,EAAE;YACZ,IAAI,CAAC,KAAK,EAAE,CACf,CAAC;IACN,CAAC;IAEO,IAAI;QACR,OAAO;;;;;;;;;;;;;;;;;;;;;;;uFAuBwE,CAAC;IACpF,CAAC;IAEO,MAAM;QACV,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mJAwCoI,CAAC;IAChJ,CAAC;IAEO,QAAQ;QACZ,OAAO;;;;;;;;;;;;;mGAaoF,CAAC;IAChG,CAAC;IAED;;;;OAIG;IACK,WAAW;QACf,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA4BkD,CAAC;IAC9D,CAAC;IAEO,IAAI;QACR,OAAO;;;;;;;;;;;;;;uDAcwC,CAAC;IACpD,CAAC;IAED,iFAAiF;IACzE,aAAa;QACjB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA4BmD,CAAC;IAC/D,CAAC;IAEO,QAAQ;QACZ,OAAO;;;;;;;;;;;;;uFAawE,CAAC;IACpF,CAAC;IAED;;;;;;;;;;;;;OAaG;IACK,KAAK;QACT,MAAM,KAAK,GAAG,6BAA6B,CAAC;QAC5C,MAAM,KAAK,GAAG,GAAG,KAAK,MAAM,KAAK,EAAE,CAAC;QACpC,MAAM,KAAK,GAAG,GAAG,KAAK,QAAQ,KAAK,GAAG,CAAC;QACvC,MAAM,IAAI,GAAG,mGAAmG,CAAC;QACjH,OAAO;;;6CAG8B,KAAK;qCACb,iCAAa;qCACb,iCAAa,mCAAmC,IAAI;uCAClD,iCAAa,OAAO,KAAK;kCAC9B,iCAAa,wEAAwE,CAAC;IACpH,CAAC;IAEO,KAAK;QACT,OAAO;;;;;;;;;;sCAUuB,CAAC;IACnC,CAAC;CACJ;AA1PD,0CA0PC","sourcesContent":["import { STRIPED_CLASS } from './graph-color-modes';\n\n/**\n * The architecture page's stylesheet: the dark drawer, the graph filling the viewport, the floating\n * popovers and the responsibilities panel. Emitted AFTER the shared menu/filter/navigation styles so\n * its `#graph` rules (fill the viewport, no 75vh cap) win.\n */\nexport class GraphPageStyles {\n    css(): string {\n        return (\n            this.base() +\n            this.drawer() +\n            this.controls() +\n            this.multiSelect() +\n            this.main() +\n            this.overlays() +\n            this.filterPopover() +\n            this.graph() +\n            this.cards()\n        );\n    }\n\n    private base(): string {\n        return `\n        :root {\n            --wp-side-bg: #15161b; --wp-side-control: #1e1f25; --wp-side-fg: #e9eaf0; --wp-side-muted: #8b8fa0;\n            --wp-side-hover: #26272f; --wp-side-line: #3a3c46; --wp-accent: #8b3cf0; --wp-accent-hover: #a46bf7;\n            --wp-fg: #1b1e27; --wp-muted: #5d6475; --wp-line: #d9dce5; --wp-surface: #ffffff; --wp-canvas: #faf9f5;\n        }\n        html, body { height: 100%; }\n        /* A class that sets display (the legend lists are grids) must not un-hide a [hidden] element. */\n        [hidden] { display: none !important; }\n        body { margin: 0; padding: 0; overflow: hidden; background: var(--wp-canvas); color: var(--wp-fg);\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif; font-size: 14px; }\n        kbd { font-family: ui-monospace, Menlo, monospace; font-size: 12px; border: 1px solid var(--wp-line);\n            border-radius: 4px; padding: 0 5px; background: #f3f4f7; }\n        .wp-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100vh; }\n        .wp-shell.wp-collapsed { grid-template-columns: 0 minmax(0, 1fr); }\n        .wp-shell.wp-collapsed .wp-side { visibility: hidden; }\n        @media (max-width: 760px) {\n            .wp-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, auto) minmax(0, 1fr); }\n            .wp-side { max-height: 42vh; }\n            .wp-shell.wp-collapsed { grid-template-columns: minmax(0, 1fr); }\n            .wp-shell.wp-collapsed .wp-side { display: none; }\n            .wp-main { height: auto; min-height: 0; }\n        }\n        @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }`;\n    }\n\n    private drawer(): string {\n        return `\n        .wp-side { background: var(--wp-side-bg); color: var(--wp-side-fg); overflow-y: auto; overflow-x: hidden;\n            display: flex; flex-direction: column; padding: 12px 0 10px; min-width: 0; font-size: 13px; }\n        .wp-brand { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; font-weight: 600; font-size: 14px; }\n        .wp-brand svg { flex: none; }\n        .wp-group { padding: 8px 14px; border-top: 1px solid var(--wp-side-line); display: grid; gap: 6px; }\n        .wp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--wp-side-muted);\n            font-weight: 600; padding-left: 4px; }\n        .wp-label-row { display: flex; justify-content: space-between; align-items: center; }\n        .wp-pulldown { position: relative; }\n        .wp-pill-trigger { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px;\n            width: 100%; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--wp-side-line);\n            background: var(--wp-side-control); }\n        .wp-pill-trigger:hover, .wp-pill-trigger[aria-expanded=\"true\"] { border-color: var(--wp-accent-hover); }\n        .wp-pill-text { flex: 1 1 auto; min-width: 0; }\n        .wp-caret { color: var(--wp-side-muted); }\n        .wp-menu { position: absolute; z-index: 35; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 2px; padding: 6px;\n            background: var(--wp-side-control); border: 1px solid var(--wp-side-line); border-radius: 12px; box-shadow: 0 10px 28px #0008; }\n        .wp-mode { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 6px 10px; border-radius: 8px; }\n        .wp-mode:hover { background: var(--wp-side-hover); }\n        .wp-mode[aria-checked=\"true\"] { background: #2a2333; box-shadow: inset 3px 0 0 var(--wp-accent); }\n        .wp-mode:disabled { cursor: not-allowed; opacity: 0.45; }\n        .wp-mode-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }\n        .wp-mode-sub { display: block; font-size: 12px; color: var(--wp-side-muted); line-height: 1.3; }\n        .wp-filter-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between;\n            align-items: center; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--wp-side-line);\n            background: var(--wp-side-control); font-size: 13px; font-weight: 600; }\n        .wp-filter-btn:hover, .wp-filter-btn[aria-expanded=\"true\"] { border-color: var(--wp-accent-hover); }\n        .wp-badge { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--wp-accent); color: #fff;\n            font-size: 11.5px; text-align: center; box-sizing: border-box; }\n        .wp-mode-reason { margin: 2px 4px 0; font-size: 11.5px; line-height: 1.35; color: var(--wp-side-muted); }\n        .wp-legend-list { display: grid; gap: 5px; padding-left: 4px; }\n        .wp-legend-row { display: flex; align-items: center; gap: 10px; line-height: 1.25; }\n        .wp-legend-row svg { flex: none; }\n        .wp-legend-row small { display: block; color: var(--wp-side-muted); font-size: 11.5px; }\n        .wp-product-toggle { cursor: pointer; }\n        .wp-product-toggle input { flex: none; margin: 0; accent-color: var(--wp-accent); cursor: pointer; }\n        .wp-product-note { margin: 2px 0 0; font-size: 11.5px; color: var(--wp-side-muted); }\n        .wp-impact-note { margin: 2px 0 0; font-size: 11.5px; color: var(--wp-side-muted); }\n        .wp-impact-note:empty { display: none; }\n        .wp-foot { margin-top: auto; padding: 10px 18px 0; border-top: 1px solid var(--wp-side-line); display: flex; gap: 14px; flex-wrap: wrap; }`;\n    }\n\n    private controls(): string {\n        return `\n        .wp-side input[type=\"search\"] { width: 100%; box-sizing: border-box; background: var(--wp-side-control); color: var(--wp-side-fg);\n            border: 1px solid var(--wp-side-line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }\n        .wp-link { all: unset; cursor: pointer; color: var(--wp-side-muted); font-size: 12px; text-decoration: underline; }\n        .wp-link:hover { color: var(--wp-side-fg); }\n        .wp-icon { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; flex: none;\n            width: 34px; height: 34px; border-radius: 8px; background: var(--wp-surface); border: 1px solid var(--wp-line);\n            color: var(--wp-fg); font-size: 15px; }\n        .wp-icon:hover { border-color: var(--wp-accent); }\n        .wp-icon-mini { width: 24px; height: 24px; font-size: 12px; }\n        .wp-icon-dark { background: transparent; border-color: var(--wp-side-line); color: var(--wp-side-fg); }\n        .wp-mode:focus-visible, .wp-pill-trigger:focus-visible, .wp-filter-btn:focus-visible, .wp-chip:focus-visible,\n        .wp-primary:focus-visible, .wp-pill button:focus-visible, .wp-multi-trigger:focus-visible, .wp-multi-chip button:focus-visible, .wp-side input:focus-visible, .wp-icon:focus-visible,\n        .wp-link:focus-visible { outline: 2px solid var(--wp-accent-hover); outline-offset: 2px; }`;\n    }\n\n    /**\n     * The \"Keep connected to\" and \"Focus\" pulldowns (#1385): a closed field of removable chips, and a\n     * popover holding the search box, the checkbox rows (the match in a <mark>, the keyboard's row\n     * outlined) and the \"N selected · Clear all\" footer. A chip whose box is not drawn is dashed.\n     */\n    private multiSelect(): string {\n        return `\n        .wp-multi { position: relative; margin-bottom: 6px; }\n        .wp-multi-field { box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 34px;\n            padding: 4px 4px 4px 8px; border-radius: 8px; border: 1px solid var(--wp-side-line); background: var(--wp-side-control); }\n        .wp-multi-field:hover { border-color: var(--wp-accent-hover); }\n        .wp-multi-chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }\n        .wp-multi-none { color: var(--wp-side-muted); font-size: 12.5px; padding: 2px 0; }\n        .wp-multi-chip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 1px 2px 1px 8px; border-radius: 999px;\n            background: #2a2333; border: 1px solid var(--wp-accent); font-size: 12px; overflow-wrap: anywhere; }\n        .wp-multi-chip small { color: var(--wp-side-muted); font-size: 10.5px; }\n        .wp-multi-chip-hidden { border-style: dashed; opacity: 0.7; }\n        .wp-multi-chip button { all: unset; cursor: pointer; flex: none; width: 16px; height: 16px; display: inline-grid; place-items: center;\n            border-radius: 50%; font-size: 10px; }\n        .wp-multi-chip button:hover { background: var(--wp-side-hover); }\n        .wp-multi-trigger { all: unset; cursor: pointer; flex: none; padding: 2px 6px; border-radius: 6px; }\n        .wp-multi-pop { position: absolute; z-index: 36; left: 0; right: 0; top: calc(100% + 4px); display: grid; gap: 6px; padding: 8px;\n            background: var(--wp-side-control); border: 1px solid var(--wp-side-line); border-radius: 10px; box-shadow: 0 10px 28px #0008; }\n        .wp-multi-list { max-height: 260px; overflow-y: auto; display: grid; gap: 1px; }\n        .wp-multi-option { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }\n        .wp-multi-option:hover { background: var(--wp-side-hover); }\n        .wp-multi-option.wp-multi-active { background: var(--wp-side-hover); box-shadow: inset 0 0 0 1px var(--wp-accent-hover); }\n        .wp-multi-option input { flex: none; margin: 0; accent-color: var(--wp-accent); pointer-events: none; }\n        .wp-multi-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }\n        .wp-multi-name mark { background: #5b3a91; color: #fff; border-radius: 2px; }\n        .wp-multi-sub { flex: none; color: var(--wp-side-muted); font-size: 11.5px; }\n        .wp-multi-empty { margin: 0; color: var(--wp-side-muted); font-size: 12px; }\n        .wp-multi-pop footer { display: flex; justify-content: space-between; align-items: center; padding-top: 6px;\n            border-top: 1px solid var(--wp-side-line); color: var(--wp-side-muted); font-size: 12px; }\n        .wp-multi-pop .wp-text-btn { color: var(--wp-side-fg); }`;\n    }\n\n    private main(): string {\n        return `\n        .wp-main { position: relative; min-width: 0; height: 100vh; display: flex; flex-direction: column; }\n        .wp-topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px;\n            border-bottom: 1px solid var(--wp-line); background: var(--wp-surface); }\n        .wp-crumb { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--wp-muted); overflow: hidden;\n            text-overflow: ellipsis; white-space: nowrap; }\n        .wp-crumb b { color: var(--wp-fg); }\n        .wp-topbar #wp-filter-status, .wp-topbar #wp-graph-error { margin: 0; font-size: 13px; }\n        .wp-pills { display: flex; gap: 6px; flex-wrap: wrap; }\n        .wp-pills:empty { display: none; }\n        .wp-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px;\n            background: #f1e8fe; color: #4a1d8a; border: 1px solid #d6bcfa; font-size: 12.5px; }\n        .wp-pill button { all: unset; cursor: pointer; width: 18px; height: 18px; display: inline-grid; place-items: center;\n            border-radius: 50%; color: #4a1d8a; }\n        .wp-pill button:hover { background: #e2cffc; }`;\n    }\n\n    /** The Filter popover: three groups, chips, and the \"Show N projects\" footer. */\n    private filterPopover(): string {\n        return `\n        .wp-filter-pop { left: 12px; top: 56px; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 80px); overflow: auto; }\n        .wp-fgroup { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }\n        .wp-fgroup legend { padding: 0; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;\n            color: var(--wp-muted); font-weight: 600; }\n        .wp-fgroup legend small { text-transform: none; letter-spacing: 0; font-weight: 400; }\n        .wp-fgroup:disabled .wp-scope { opacity: 0.45; cursor: not-allowed; }\n        .wp-scope { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }\n        .wp-scope:hover { background: #f4f1fb; }\n        .wp-scope input { accent-color: var(--wp-accent); margin: 0; }\n        .wp-scope-text { flex: 1 1 auto; display: grid; }\n        .wp-scope-sub { font-size: 11.5px; color: var(--wp-muted); line-height: 1.3; }\n        .wp-chip-swatch { vertical-align: -1px; margin-right: 5px; }\n        .wp-count { color: var(--wp-muted); font-size: 12px; font-variant-numeric: tabular-nums; }\n        .wp-scope-reason { margin: 2px 6px 0; font-size: 12px; color: var(--wp-muted); }\n        .wp-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n        .wp-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 3px 11px; border-radius: 999px;\n            border: 1px solid var(--wp-line); background: var(--wp-surface); font-size: 12.5px; }\n        .wp-chip:hover { border-color: var(--wp-accent-hover); }\n        .wp-chip[aria-pressed=\"true\"] { background: var(--wp-accent); border-color: var(--wp-accent); color: #fff; }\n        .wp-chip:disabled { opacity: 0.45; cursor: default; }\n        .wp-impact-kinds { margin: 6px 0 4px; }\n        .wp-side .wp-chip:not([aria-pressed=\"true\"]) { background: var(--wp-side-control); border-color: var(--wp-side-line); }\n        .wp-filter-pop footer { display: flex; justify-content: space-between; align-items: center; gap: 8px;\n            padding-top: 10px; border-top: 1px solid var(--wp-line); }\n        .wp-text-btn { all: unset; cursor: pointer; color: var(--wp-muted); font-size: 12.5px; text-decoration: underline; }\n        .wp-primary { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 14px; border-radius: 8px;\n            background: var(--wp-accent); color: #fff; font-weight: 600; font-size: 13px; }\n        .wp-primary:hover { background: var(--wp-accent-hover); }`;\n    }\n\n    private overlays(): string {\n        return `\n        .wp-pop { position: absolute; z-index: 30; background: var(--wp-surface); border: 1px solid var(--wp-line);\n            border-radius: 10px; box-shadow: 0 8px 24px #0002; padding: 12px 14px; font-size: 13px; box-sizing: border-box; }\n        .wp-pop header { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }\n        .wp-legend-popout { left: 12px; bottom: 12px; width: 270px; max-height: 60vh; overflow: auto; }\n        .wp-legend-popout .wp-legend-row small, .wp-legend-popout .wp-impact-note, .wp-legend-popout .wp-product-note { color: var(--wp-muted); }\n        .wp-help { right: 12px; top: 56px; width: min(380px, calc(100% - 24px)); line-height: 1.5; }\n        .wp-help p { margin: 0 0 8px; }\n        .wp-snapshot { left: 12px; bottom: 12px; width: min(440px, calc(100% - 24px)); }\n        .wp-snapshot .hint { margin: 0; }\n        .wp-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 40; width: min(540px, 100%); box-sizing: border-box;\n            overflow-y: auto; padding: 0 16px 16px; background: #f5f6f9; border-left: 1px solid var(--wp-line); box-shadow: -8px 0 24px #0002; }\n        .wp-panel > header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;\n            padding: 12px 0; background: #f5f6f9; font-weight: 600; font-size: 15px; }`;\n    }\n\n    /**\n     * The graph fills what the topbar leaves.\n     *\n     * The hover glow and the lock outline belong to the OUTER box only. A nested Runtime box (one\n     * runtime plus a specialization) is an HTML-like table, so after the node's own outline Graphviz\n     * emits a `<polygon>` for the base-colored cell and a `<path>` for the inner `STYLE=\"rounded\"`\n     * table — matching only `polygon` here is what let the glow stroke the inner box (#1158). So the\n     * glow is suppressed on EVERY shape after the node's first, whatever its element type.\n     *\n     * A striped (multi-runtime) box is the one exception to \"the first shape is the outline\":\n     * Graphviz draws one filled polygon per stripe first and the outline LAST, as an unfilled polygon.\n     * graph-color-modes.ts stamps those boxes `wp-striped`, and for them the outline is that last,\n     * `fill=\"none\"` polygon; the stripes keep their thin dividers.\n     */\n    private graph(): string {\n        const shape = ':is(polygon, ellipse, path)';\n        const later = `${shape} ~ ${shape}`;\n        const first = `${shape}:not(${later})`;\n        const glow = 'stroke: var(--wp-accent); stroke-width: 5; filter: drop-shadow(0 0 6px rgba(139, 60, 240, 0.85));';\n        return `\n        #graph { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; padding: 16px 16px 64px;\n            box-sizing: border-box; background: var(--wp-canvas); }\n        #graph g.wp-node-clickable:hover > ${later} { stroke: none; stroke-width: 0; filter: none; }\n        #graph g.wp-node-clickable.${STRIPED_CLASS}:hover > polygon:not([fill=\"none\"]) { stroke: #000000; stroke-width: 0.5; filter: none; }\n        #graph g.wp-node-clickable.${STRIPED_CLASS}:hover > polygon[fill=\"none\"] { ${glow} }\n        #graph g.node.wp-locked:not(.${STRIPED_CLASS}) > ${first},\n        #graph g.node.wp-locked.${STRIPED_CLASS} > polygon[fill=\"none\"] { stroke: var(--wp-accent); stroke-width: 3; }`;\n    }\n\n    private cards(): string {\n        return `\n        #wp-responsibilities { margin: 0; }\n        #wp-responsibilities > h2 { display: none; }\n        #wp-responsibilities > .hint { color: var(--wp-muted); margin: 0 0 8px; }\n        .wp-resp-card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 0; padding: 10px 15px; }\n        .wp-resp-card > summary { cursor: pointer; color: #333; }\n        .wp-resp-level { display: inline-block; min-width: 26px; padding: 1px 6px; margin-right: 6px; border-radius: 4px;\n            background: #eef; font-size: 12px; font-weight: bold; text-align: center; }\n        .wp-resp-body { margin-top: 8px; color: #444; }\n        .wp-resp-body code { background: #f2f2f2; padding: 1px 4px; border-radius: 3px; font-family: monospace; }\n        .wp-hidden { display: none; }`;\n    }\n}\n"]}

package/src/lib/graph-render-model.js

@@ -191,8 +191,8 @@ class GraphFilterAssets {
         return JSON.stringify(value).replace(/</g, '\\u003c');
     }
     html() {
-        return ('<p id="wp-filter-status" hidden>Filtering: <strong id="wp-filter-anchor"></strong> ' +
-            '<button id="wp-filter-off" type="button">Turn off Filter</button></p>' +
+        return ('<p id="wp-filter-status" hidden>Keep connected to: <strong id="wp-filter-anchor"></strong> ' +
+            '<button id="wp-filter-off" type="button">Clear Keep connected</button></p>' +
             '<p id="wp-graph-error" role="alert" hidden></p>');
     }
     styles() {

package/src/lib/graph-render-model.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-render-model.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-render-model.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAExC,2DAA2E;AAE3E;;;;;;;;;GASG;AACH,MAAa,UAAU;IAEC;IACA;IACA;IACA;IACA;IACA;IANpB,YACoB,EAAU,EACV,GAAW,EACX,KAA0B,EAC1B,IAAqB,EACrB,QAAkB,EAClB,YAAsB,EAAE;QALxB,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,UAAK,GAAL,KAAK,CAAqB;QAC1B,SAAI,GAAJ,IAAI,CAAiB;QACrB,aAAQ,GAAR,QAAQ,CAAU;QAClB,cAAS,GAAT,SAAS,CAAe;IACzC,CAAC;CACP;AATD,gCASC;AAED,gGAAgG;AAChG,MAAa,QAAQ;IAEG;IACA;IACA;IAHpB,YACoB,KAAa,EACb,IAAY,EACZ,UAAoB;QAFpB,UAAK,GAAL,KAAK,CAAQ;QACb,SAAI,GAAJ,IAAI,CAAQ;QACZ,eAAU,GAAV,UAAU,CAAU;IACrC,CAAC;CACP;AAND,4BAMC;AAED,MAAa,UAAU;IAEC;IACA;IACA;IACA;IAMA;IAVpB,YACoB,IAAY,EACZ,EAAU,EACV,GAAW,EACX,EAAU;IAC1B;;;;OAIG;IACa,cAAwB,EAAE;QAT1B,SAAI,GAAJ,IAAI,CAAQ;QACZ,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,OAAE,GAAF,EAAE,CAAQ;QAMV,gBAAW,GAAX,WAAW,CAAe;IAC3C,CAAC;CACP;AAbD,gCAaC;AAED,mEAAmE;AACnE,MAAa,gBAAgB;IACzB,MAAM,GAA+B,cAAc,CAAC;IAC3C,KAAK,GAAiB,EAAE,CAAC;IACzB,KAAK,GAAiB,EAAE,CAAC;IAClC,KAAK,GAAgB,EAAE,CAAC;IACxB,OAAO,GAAG,EAAE,CAAC;IACb,MAAM,GAAG,EAAE,CAAC;IACZ,MAAM,GAAG,EAAE,CAAC;IACZ,kGAAkG;IAClG,MAAM,GAAG,IAAI,+BAAW,EAAE,CAAC;IAC3B,yFAAyF;IACzF,UAAU,GAAiC,IAAI,CAAC;IAEhD,IAAI,CAAC,EAAU,EAAE,GAAW,EAAE,WAAqB,EAAE,EAAE,YAAsB,EAAE;QAC3E,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;QAC1E,OAAO,GAAG,CAAC;IACf,CAAC;IAED;;;;;OAKG;IACH,cAAc,CAAC,SAAkC;QAC7C,MAAM,IAAI,GAAG,IAAI,GAAG,EAAsB,CAAC;QAC3C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QACvD,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;YACrD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC/B,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;gBAAE,SAAS;YACjC,MAAM,SAAS,GAAG,IAAI,GAAG,EAAU,CAAC;YACpC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC5B,MAAM,KAAK,GACP,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;gBAC7E,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;oBAAE,SAAS;gBAClD,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,QAAQ,IAAI,EAAE;oBAAE,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAClF,CAAC;YACD,IAAI,SAAS,CAAC,IAAI,KAAK,CAAC;gBAAE,SAAS;YACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,UAAU,CAC9B,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,IAAI,EACT,CAAC,GAAG,SAAS,CAAC,CAAC,IAAI,EAAE,EACrB,IAAI,CAAC,SAAS,CACjB,CAAC;QACN,CAAC;IACL,CAAC;IAED,uFAAuF;IACvF,UAAU,CAAC,KAAgB,EAAE,KAAmB;QAC5C,IAAI,CAAC,KAAK,CAAC,IAAI,CACX,IAAI,UAAU,CACV,KAAK,CAAC,MAAM,EACZ,KAAK,CAAC,OAAO,EACb,KAAK,EACL,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,EACvD,KAAK,CAAC,QAAQ,CACjB,CACJ,CAAC;QACF,OAAO,KAAK,CAAC,OAAO,CAAC;IACzB,CAAC;IAED,iBAAiB;QACb,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC5B,KAAK,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACpC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBAAE,SAAS;gBAC1B,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBACZ,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAA,qBAAQ,EAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YAC5C,CAAC;QACL,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IAAI,CAAC,IAAY,EAAE,EAAU,EAAE,GAAW,EAAE,cAAwB,EAAE;QAClE,MAAM,EAAE,GAAG,gBAAgB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/C,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC;QACxD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;QACtE,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ;AArFD,4CAqFC;AAED;;;;;;GAMG;AACH,MAAa,qBAAqB;IAEV;IAEA;IAKA;IAEA;IAEA;IAEA;IAEA;IAEA;IAEA;IApBpB,YACoB,SAAkB;IAClC,sDAAsD;IACtC,MAAc;IAC9B;;;OAGG;IACa,QAAgB;IAChC,kFAAkF;IAClE,SAAiB;IACjC,0EAA0E;IAC1D,OAAe;IAC/B,6DAA6D;IAC7C,KAA8B;IAC9C,2DAA2D;IAC3C,WAAqC;IACrD,8EAA8E;IAC9D,WAAqC;IACrD,4EAA4E;IAC5D,WAAqB;QAnBrB,cAAS,GAAT,SAAS,CAAS;QAElB,WAAM,GAAN,MAAM,CAAQ;QAKd,aAAQ,GAAR,QAAQ,CAAQ;QAEhB,cAAS,GAAT,SAAS,CAAQ;QAEjB,YAAO,GAAP,OAAO,CAAQ;QAEf,UAAK,GAAL,KAAK,CAAyB;QAE9B,gBAAW,GAAX,WAAW,CAA0B;QAErC,gBAAW,GAAX,WAAW,CAA0B;QAErC,gBAAW,GAAX,WAAW,CAAU;IACtC,CAAC;CACP;AAvBD,sDAuBC;AAED,qFAAqF;AACrF,MAAa,iBAAiB;IAC1B,IAAI,CAAI,KAAQ;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI;QACA,OAAO,CACH,qFAAqF;YACrF,uEAAuE;YACvE,iDAAiD,CACpD,CAAC;IACN,CAAC;IAED,MAAM;QACF,OAAO,CACH,8EAA8E;YAC9E,mEAAmE;YACnE,sEAAsE,CACzE,CAAC;IACN,CAAC;CACJ;AApBD,8CAoBC","sourcesContent":["import { dotValue } from './dot-syntax';\nimport { LevelBand } from './graph-level-bands';\nimport { LegendFacts, NodeFacts, NodeModeDots } from './graph-color-modes';\n\n/**\n * Renderer-owned records, captured while emitting DOT, never recovered by parsing labels.\n *\n * `dot` is the statement `fullDot` carries. `modes` carries per-mode statements in both viewers; `tags` carries declared service/project\n * metadata. Runtime auxiliary entities leave tags null so facets count services and retain context\n * separately.\n *\n * `products` is set on BOTH graphs (#1179): the products a box belongs to, which each page's product\n * filter matches on. Empty for a box in no product.\n */\nexport class RenderNode {\n    constructor(\n        public readonly id: string,\n        public readonly dot: string,\n        public readonly modes: NodeModeDots | null,\n        public readonly tags: NodeTags | null,\n        public readonly products: string[],\n        public readonly queueKeys: string[] = [],\n    ) {}\n}\n\n/** What the architecture page's Filter matches a box on: its level, role and framework tags. */\nexport class NodeTags {\n    constructor(\n        public readonly level: number,\n        public readonly role: string,\n        public readonly frameworks: string[],\n    ) {}\n}\n\nexport class RenderEdge {\n    constructor(\n        public readonly from: string,\n        public readonly to: string,\n        public readonly dot: string,\n        public readonly id: string,\n        /**\n         * The products a dependency crosses into (#1204, ProductBoundary), in the target's order. The\n         * page's Product color mode draws the edge dashed in the first one that is ON (#1319); empty\n         * for every other edge, which draws `dot` in every mode.\n         */\n        public readonly crossesInto: string[] = [],\n    ) {}\n}\n\n/** The immutable drawable snapshot carried by a generated page. */\nexport class GraphRenderModel {\n    viewer: 'architecture' | 'runtime' = 'architecture';\n    readonly nodes: RenderNode[] = [];\n    readonly edges: RenderEdge[] = [];\n    bands: LevelBand[] = [];\n    fullDot = '';\n    header = '';\n    footer = '';\n    /** The colors and roles in use, so the page's legend lists exactly those (architecture graph). */\n    legend = new LegendFacts();\n    /** Runtime pages only (#1239): the Goal vs Current overlay, or why it is unavailable. */\n    comparison: RuntimeComparisonView | null = null;\n\n    node(id: string, dot: string, products: string[] = [], queueKeys: string[] = []): string {\n        this.nodes.push(new RenderNode(id, dot, null, null, products, queueKeys));\n        return dot;\n    }\n\n    /**\n     * Every product a declared box (a queue, a cron trigger, an external system) inherits from the\n     * services its edges touch (#1179): it belongs to whichever product's services it is attached to.\n     * Called by the runtime graph once every edge is emitted; RenderNode is immutable, so a node gains\n     * its products by being replaced.\n     */\n    attachProducts(isService: (id: string) => boolean): void {\n        const byId = new Map<string, RenderNode>();\n        for (const node of this.nodes) byId.set(node.id, node);\n        for (let index = 0; index < this.nodes.length; index++) {\n            const node = this.nodes[index];\n            if (isService(node.id)) continue;\n            const inherited = new Set<string>();\n            for (const edge of this.edges) {\n                const other =\n                    edge.from === node.id ? edge.to : edge.to === node.id ? edge.from : null;\n                if (other === null || !isService(other)) continue;\n                for (const product of byId.get(other)?.products ?? []) inherited.add(product);\n            }\n            if (inherited.size === 0) continue;\n            this.nodes[index] = new RenderNode(\n                node.id,\n                node.dot,\n                node.modes,\n                node.tags,\n                [...inherited].sort(),\n                node.queueKeys,\n            );\n        }\n    }\n\n    /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */\n    styledNode(facts: NodeFacts, modes: NodeModeDots): string {\n        this.nodes.push(\n            new RenderNode(\n                facts.nodeId,\n                modes.runtime,\n                modes,\n                new NodeTags(facts.level, facts.role, facts.frameworks),\n                facts.products,\n            ),\n        );\n        return modes.runtime;\n    }\n\n    completeEndpoints(): void {\n        const ids = new Set(this.nodes.map((node) => node.id));\n        for (const edge of this.edges) {\n            for (const id of [edge.from, edge.to]) {\n                if (ids.has(id)) continue;\n                ids.add(id);\n                this.node(id, `  \"${dotValue(id)}\";\\n`);\n            }\n        }\n    }\n\n    /**\n     * One edge. `crossesInto`, when not empty, names the products a cross-product dependency crosses\n     * into: the page's Product color mode dashes it in the first ON one; `fullDot` always carries the\n     * plain statement.\n     */\n    edge(from: string, to: string, dot: string, crossesInto: string[] = []): string {\n        const id = `wp-real-edge-${this.edges.length}`;\n        const statement = `${dot.slice(0, -2)} [id=\"${id}\"];\\n`;\n        this.edges.push(new RenderEdge(from, to, statement, id, crossesInto));\n        return statement;\n    }\n}\n\n/**\n * What a runtime page carries for its Goal vs Current color mode (#1239), serialized into the page\n * with the render model so it works opened straight from disk (`file://`, no fetch).\n *\n * Never a silent \"no differences\": an unavailable comparison says why (a missing or unusable input,\n * naming its path and repair), and identical inputs say so explicitly with the normal graph context.\n */\nexport class RuntimeComparisonView {\n    constructor(\n        public readonly available: boolean,\n        /** Why the mode is unavailable; '' when available. */\n        public readonly reason: string,\n        /**\n         * The short line the Color-by menu shows under the DIMMED Goal vs Current item (#1373) — e.g.\n         * \"runtime-dependencies-goal.json does not exist\"; '' when available.\n         */\n        public readonly menuNote: string,\n        /** Always \"Current → Goal\": the direction every added/removed word is read in. */\n        public readonly direction: string,\n        /** One line: counts per status, or the explicit no-differences result. */\n        public readonly summary: string,\n        /** The overlay drawn in this mode; null when unavailable. */\n        public readonly model: GraphRenderModel | null,\n        /** Overlay render-node id -> before/after detail lines. */\n        public readonly nodeDetails: Record<string, string[]>,\n        /** Overlay render-edge id (`wp-real-edge-N`) -> before/after detail lines. */\n        public readonly edgeDetails: Record<string, string[]>,\n        /** Every added, removed and changed fact, one line each, for the legend. */\n        public readonly differences: string[],\n    ) {}\n}\n\n/** Shared filter chrome and script-safe JSON for pages opened directly from disk. */\nexport class GraphFilterAssets {\n    json<T>(value: T): string {\n        return JSON.stringify(value).replace(/</g, '\\\\u003c');\n    }\n\n    html(): string {\n        return (\n            '<p id=\"wp-filter-status\" hidden>Filtering: <strong id=\"wp-filter-anchor\"></strong> ' +\n            '<button id=\"wp-filter-off\" type=\"button\">Turn off Filter</button></p>' +\n            '<p id=\"wp-graph-error\" role=\"alert\" hidden></p>'\n        );\n    }\n\n    styles(): string {\n        return (\n            '#wp-filter-status { text-align:center; } #wp-graph-error { color:#b71c1c; } ' +\n            '#graph .wp-filter-anchor polygon, #graph .wp-filter-anchor path, ' +\n            '#graph .wp-filter-anchor ellipse { stroke:#8b3cf0; stroke-width:3; }'\n        );\n    }\n}\n"]}
+{"version":3,"file":"graph-render-model.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-render-model.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAExC,2DAA2E;AAE3E;;;;;;;;;GASG;AACH,MAAa,UAAU;IAEC;IACA;IACA;IACA;IACA;IACA;IANpB,YACoB,EAAU,EACV,GAAW,EACX,KAA0B,EAC1B,IAAqB,EACrB,QAAkB,EAClB,YAAsB,EAAE;QALxB,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,UAAK,GAAL,KAAK,CAAqB;QAC1B,SAAI,GAAJ,IAAI,CAAiB;QACrB,aAAQ,GAAR,QAAQ,CAAU;QAClB,cAAS,GAAT,SAAS,CAAe;IACzC,CAAC;CACP;AATD,gCASC;AAED,gGAAgG;AAChG,MAAa,QAAQ;IAEG;IACA;IACA;IAHpB,YACoB,KAAa,EACb,IAAY,EACZ,UAAoB;QAFpB,UAAK,GAAL,KAAK,CAAQ;QACb,SAAI,GAAJ,IAAI,CAAQ;QACZ,eAAU,GAAV,UAAU,CAAU;IACrC,CAAC;CACP;AAND,4BAMC;AAED,MAAa,UAAU;IAEC;IACA;IACA;IACA;IAMA;IAVpB,YACoB,IAAY,EACZ,EAAU,EACV,GAAW,EACX,EAAU;IAC1B;;;;OAIG;IACa,cAAwB,EAAE;QAT1B,SAAI,GAAJ,IAAI,CAAQ;QACZ,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,OAAE,GAAF,EAAE,CAAQ;QAMV,gBAAW,GAAX,WAAW,CAAe;IAC3C,CAAC;CACP;AAbD,gCAaC;AAED,mEAAmE;AACnE,MAAa,gBAAgB;IACzB,MAAM,GAA+B,cAAc,CAAC;IAC3C,KAAK,GAAiB,EAAE,CAAC;IACzB,KAAK,GAAiB,EAAE,CAAC;IAClC,KAAK,GAAgB,EAAE,CAAC;IACxB,OAAO,GAAG,EAAE,CAAC;IACb,MAAM,GAAG,EAAE,CAAC;IACZ,MAAM,GAAG,EAAE,CAAC;IACZ,kGAAkG;IAClG,MAAM,GAAG,IAAI,+BAAW,EAAE,CAAC;IAC3B,yFAAyF;IACzF,UAAU,GAAiC,IAAI,CAAC;IAEhD,IAAI,CAAC,EAAU,EAAE,GAAW,EAAE,WAAqB,EAAE,EAAE,YAAsB,EAAE;QAC3E,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;QAC1E,OAAO,GAAG,CAAC;IACf,CAAC;IAED;;;;;OAKG;IACH,cAAc,CAAC,SAAkC;QAC7C,MAAM,IAAI,GAAG,IAAI,GAAG,EAAsB,CAAC;QAC3C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QACvD,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;YACrD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC/B,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;gBAAE,SAAS;YACjC,MAAM,SAAS,GAAG,IAAI,GAAG,EAAU,CAAC;YACpC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC5B,MAAM,KAAK,GACP,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;gBAC7E,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;oBAAE,SAAS;gBAClD,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,QAAQ,IAAI,EAAE;oBAAE,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAClF,CAAC;YACD,IAAI,SAAS,CAAC,IAAI,KAAK,CAAC;gBAAE,SAAS;YACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,UAAU,CAC9B,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,IAAI,EACT,CAAC,GAAG,SAAS,CAAC,CAAC,IAAI,EAAE,EACrB,IAAI,CAAC,SAAS,CACjB,CAAC;QACN,CAAC;IACL,CAAC;IAED,uFAAuF;IACvF,UAAU,CAAC,KAAgB,EAAE,KAAmB;QAC5C,IAAI,CAAC,KAAK,CAAC,IAAI,CACX,IAAI,UAAU,CACV,KAAK,CAAC,MAAM,EACZ,KAAK,CAAC,OAAO,EACb,KAAK,EACL,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,EACvD,KAAK,CAAC,QAAQ,CACjB,CACJ,CAAC;QACF,OAAO,KAAK,CAAC,OAAO,CAAC;IACzB,CAAC;IAED,iBAAiB;QACb,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC5B,KAAK,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACpC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBAAE,SAAS;gBAC1B,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBACZ,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAA,qBAAQ,EAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YAC5C,CAAC;QACL,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IAAI,CAAC,IAAY,EAAE,EAAU,EAAE,GAAW,EAAE,cAAwB,EAAE;QAClE,MAAM,EAAE,GAAG,gBAAgB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/C,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC;QACxD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;QACtE,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ;AArFD,4CAqFC;AAED;;;;;;GAMG;AACH,MAAa,qBAAqB;IAEV;IAEA;IAKA;IAEA;IAEA;IAEA;IAEA;IAEA;IAEA;IApBpB,YACoB,SAAkB;IAClC,sDAAsD;IACtC,MAAc;IAC9B;;;OAGG;IACa,QAAgB;IAChC,kFAAkF;IAClE,SAAiB;IACjC,0EAA0E;IAC1D,OAAe;IAC/B,6DAA6D;IAC7C,KAA8B;IAC9C,2DAA2D;IAC3C,WAAqC;IACrD,8EAA8E;IAC9D,WAAqC;IACrD,4EAA4E;IAC5D,WAAqB;QAnBrB,cAAS,GAAT,SAAS,CAAS;QAElB,WAAM,GAAN,MAAM,CAAQ;QAKd,aAAQ,GAAR,QAAQ,CAAQ;QAEhB,cAAS,GAAT,SAAS,CAAQ;QAEjB,YAAO,GAAP,OAAO,CAAQ;QAEf,UAAK,GAAL,KAAK,CAAyB;QAE9B,gBAAW,GAAX,WAAW,CAA0B;QAErC,gBAAW,GAAX,WAAW,CAA0B;QAErC,gBAAW,GAAX,WAAW,CAAU;IACtC,CAAC;CACP;AAvBD,sDAuBC;AAED,qFAAqF;AACrF,MAAa,iBAAiB;IAC1B,IAAI,CAAI,KAAQ;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI;QACA,OAAO,CACH,6FAA6F;YAC7F,4EAA4E;YAC5E,iDAAiD,CACpD,CAAC;IACN,CAAC;IAED,MAAM;QACF,OAAO,CACH,8EAA8E;YAC9E,mEAAmE;YACnE,sEAAsE,CACzE,CAAC;IACN,CAAC;CACJ;AApBD,8CAoBC","sourcesContent":["import { dotValue } from './dot-syntax';\nimport { LevelBand } from './graph-level-bands';\nimport { LegendFacts, NodeFacts, NodeModeDots } from './graph-color-modes';\n\n/**\n * Renderer-owned records, captured while emitting DOT, never recovered by parsing labels.\n *\n * `dot` is the statement `fullDot` carries. `modes` carries per-mode statements in both viewers; `tags` carries declared service/project\n * metadata. Runtime auxiliary entities leave tags null so facets count services and retain context\n * separately.\n *\n * `products` is set on BOTH graphs (#1179): the products a box belongs to, which each page's product\n * filter matches on. Empty for a box in no product.\n */\nexport class RenderNode {\n    constructor(\n        public readonly id: string,\n        public readonly dot: string,\n        public readonly modes: NodeModeDots | null,\n        public readonly tags: NodeTags | null,\n        public readonly products: string[],\n        public readonly queueKeys: string[] = [],\n    ) {}\n}\n\n/** What the architecture page's Filter matches a box on: its level, role and framework tags. */\nexport class NodeTags {\n    constructor(\n        public readonly level: number,\n        public readonly role: string,\n        public readonly frameworks: string[],\n    ) {}\n}\n\nexport class RenderEdge {\n    constructor(\n        public readonly from: string,\n        public readonly to: string,\n        public readonly dot: string,\n        public readonly id: string,\n        /**\n         * The products a dependency crosses into (#1204, ProductBoundary), in the target's order. The\n         * page's Product color mode draws the edge dashed in the first one that is ON (#1319); empty\n         * for every other edge, which draws `dot` in every mode.\n         */\n        public readonly crossesInto: string[] = [],\n    ) {}\n}\n\n/** The immutable drawable snapshot carried by a generated page. */\nexport class GraphRenderModel {\n    viewer: 'architecture' | 'runtime' = 'architecture';\n    readonly nodes: RenderNode[] = [];\n    readonly edges: RenderEdge[] = [];\n    bands: LevelBand[] = [];\n    fullDot = '';\n    header = '';\n    footer = '';\n    /** The colors and roles in use, so the page's legend lists exactly those (architecture graph). */\n    legend = new LegendFacts();\n    /** Runtime pages only (#1239): the Goal vs Current overlay, or why it is unavailable. */\n    comparison: RuntimeComparisonView | null = null;\n\n    node(id: string, dot: string, products: string[] = [], queueKeys: string[] = []): string {\n        this.nodes.push(new RenderNode(id, dot, null, null, products, queueKeys));\n        return dot;\n    }\n\n    /**\n     * Every product a declared box (a queue, a cron trigger, an external system) inherits from the\n     * services its edges touch (#1179): it belongs to whichever product's services it is attached to.\n     * Called by the runtime graph once every edge is emitted; RenderNode is immutable, so a node gains\n     * its products by being replaced.\n     */\n    attachProducts(isService: (id: string) => boolean): void {\n        const byId = new Map<string, RenderNode>();\n        for (const node of this.nodes) byId.set(node.id, node);\n        for (let index = 0; index < this.nodes.length; index++) {\n            const node = this.nodes[index];\n            if (isService(node.id)) continue;\n            const inherited = new Set<string>();\n            for (const edge of this.edges) {\n                const other =\n                    edge.from === node.id ? edge.to : edge.to === node.id ? edge.from : null;\n                if (other === null || !isService(other)) continue;\n                for (const product of byId.get(other)?.products ?? []) inherited.add(product);\n            }\n            if (inherited.size === 0) continue;\n            this.nodes[index] = new RenderNode(\n                node.id,\n                node.dot,\n                node.modes,\n                node.tags,\n                [...inherited].sort(),\n                node.queueKeys,\n            );\n        }\n    }\n\n    /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */\n    styledNode(facts: NodeFacts, modes: NodeModeDots): string {\n        this.nodes.push(\n            new RenderNode(\n                facts.nodeId,\n                modes.runtime,\n                modes,\n                new NodeTags(facts.level, facts.role, facts.frameworks),\n                facts.products,\n            ),\n        );\n        return modes.runtime;\n    }\n\n    completeEndpoints(): void {\n        const ids = new Set(this.nodes.map((node) => node.id));\n        for (const edge of this.edges) {\n            for (const id of [edge.from, edge.to]) {\n                if (ids.has(id)) continue;\n                ids.add(id);\n                this.node(id, `  \"${dotValue(id)}\";\\n`);\n            }\n        }\n    }\n\n    /**\n     * One edge. `crossesInto`, when not empty, names the products a cross-product dependency crosses\n     * into: the page's Product color mode dashes it in the first ON one; `fullDot` always carries the\n     * plain statement.\n     */\n    edge(from: string, to: string, dot: string, crossesInto: string[] = []): string {\n        const id = `wp-real-edge-${this.edges.length}`;\n        const statement = `${dot.slice(0, -2)} [id=\"${id}\"];\\n`;\n        this.edges.push(new RenderEdge(from, to, statement, id, crossesInto));\n        return statement;\n    }\n}\n\n/**\n * What a runtime page carries for its Goal vs Current color mode (#1239), serialized into the page\n * with the render model so it works opened straight from disk (`file://`, no fetch).\n *\n * Never a silent \"no differences\": an unavailable comparison says why (a missing or unusable input,\n * naming its path and repair), and identical inputs say so explicitly with the normal graph context.\n */\nexport class RuntimeComparisonView {\n    constructor(\n        public readonly available: boolean,\n        /** Why the mode is unavailable; '' when available. */\n        public readonly reason: string,\n        /**\n         * The short line the Color-by menu shows under the DIMMED Goal vs Current item (#1373) — e.g.\n         * \"runtime-dependencies-goal.json does not exist\"; '' when available.\n         */\n        public readonly menuNote: string,\n        /** Always \"Current → Goal\": the direction every added/removed word is read in. */\n        public readonly direction: string,\n        /** One line: counts per status, or the explicit no-differences result. */\n        public readonly summary: string,\n        /** The overlay drawn in this mode; null when unavailable. */\n        public readonly model: GraphRenderModel | null,\n        /** Overlay render-node id -> before/after detail lines. */\n        public readonly nodeDetails: Record<string, string[]>,\n        /** Overlay render-edge id (`wp-real-edge-N`) -> before/after detail lines. */\n        public readonly edgeDetails: Record<string, string[]>,\n        /** Every added, removed and changed fact, one line each, for the legend. */\n        public readonly differences: string[],\n    ) {}\n}\n\n/** Shared filter chrome and script-safe JSON for pages opened directly from disk. */\nexport class GraphFilterAssets {\n    json<T>(value: T): string {\n        return JSON.stringify(value).replace(/</g, '\\\\u003c');\n    }\n\n    html(): string {\n        return (\n            '<p id=\"wp-filter-status\" hidden>Keep connected to: <strong id=\"wp-filter-anchor\"></strong> ' +\n            '<button id=\"wp-filter-off\" type=\"button\">Clear Keep connected</button></p>' +\n            '<p id=\"wp-graph-error\" role=\"alert\" hidden></p>'\n        );\n    }\n\n    styles(): string {\n        return (\n            '#wp-filter-status { text-align:center; } #wp-graph-error { color:#b71c1c; } ' +\n            '#graph .wp-filter-anchor polygon, #graph .wp-filter-anchor path, ' +\n            '#graph .wp-filter-anchor ellipse { stroke:#8b3cf0; stroke-width:3; }'\n        );\n    }\n}\n"]}

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

@@ -32,7 +32,7 @@ declare class WpProjectFilter {
     /** An empty chip group matches every box; otherwise the box must carry one of the chips. */
     private anyOf;
 }
-/** Architecture interactions bind to each new SVG; logical Lock/Filter state belongs to the page. */
+/** Architecture interactions bind to each new SVG; logical Focus/Keep state belongs to the page. */
 declare class GraphHighlighter {
     private readonly svg;
     private readonly chain;
@@ -43,6 +43,10 @@ declare class GraphHighlighter {
     constructor(svg: SVGSVGElement, chain: WpGraphChain, model: RenderModelJson, page: GraphPage);
     wire(): void;
     private clear;
+    /**
+     * Light the UNION of every focused box's chains, plus the hovered box's. A focused box that is not
+     * drawn right now is suspended, its otherwise visible relatives included, until it is drawn again.
+     */
     relight(): void;
     private wireHover;
     private wireMenu;
@@ -73,6 +77,9 @@ declare class GraphDrawer {
     private readonly page;
     readonly popover: GraphFilterPopover;
     private readonly openers;
+    /** The two multi-selects (#1385): one implementation, two instances. */
+    private readonly keep;
+    private readonly focus;
     constructor(page: GraphPage);
     wire(): void;
     /** "Color by": the pill trigger opens the menu of four; picking one switches and closes it. */
@@ -82,12 +89,11 @@ declare class GraphDrawer {
     /** Shown only when two scans exist; the drawer's copy only while Impact colors the graph. */
     private syncImpactKinds;
     private closeModeMenu;
-    /** Type-to-search lock: an exact project id (or a unique short name) locks, empty or Esc unlocks. */
-    private wireLock;
     /**
      * Page keys, in the CAPTURE phase so the open/closed state of the node menu is read before the
      * menu's own Escape handler closes it: Esc with a menu open only closes the menu. Esc closes an
-     * open Color-by menu or Filter popover first, too.
+     * open Color-by menu, Filter popover or Keep/Focus pulldown first, too; with nothing open it clears
+     * Focus. `/` opens Focus with the cursor in its search.
      */
     private onKey;
     /** `button` shows/hides `target`; for the drawer itself it toggles the collapsed class instead. */
@@ -95,8 +101,7 @@ declare class GraphDrawer {
     private dismissOverlay;
     private dismissOutside;
     /** Repaint every control from the page's state. */
-    sync(modes: WpModeState, locked: string | null, filtering: boolean, filter: WpFilterChoice): void;
-    private syncFilterToggle;
+    sync(modes: WpModeState, filter: WpFilterChoice): void;
     /** The drawer button's count badge, and one removable pill per active filter in the top bar. */
     private syncFilter;
     /** A change scope's name, read from the Filter popover's markup: the shell owns the ONE copy. */
@@ -110,15 +115,31 @@ declare class GraphDrawer {
      * baffling on a graph, so the note names the cause.
      */
     private globalCause;
-    /** "Mode: <b>Runtime</b> · Locked: <b>x</b>", built with text nodes so no name is parsed as HTML. */
+    /** "Mode: <b>Runtime</b> · Focus: <b>a</b>, <b>b</b> +N", built with text nodes so no name is parsed as HTML. */
     private crumb;
     private text;
-    private lockInput;
     private byId;
 }
+/** "Focus": lights the picks' chains; offers only the boxes drawn after Filter and Keep connected to. */
+declare class WpFocusSource implements WpMultiSource {
+    private readonly page;
+    constructor(page: GraphPage);
+    selected(): ReadonlySet<string>;
+    available(id: string): boolean;
+    toggle(id: string): void;
+    clear(): void;
+}
+/** "Keep connected to": redraws with the union of the picks' chains; offers every box of the graph. */
+declare class WpKeepSource implements WpMultiSource {
+    private readonly page;
+    constructor(page: GraphPage);
+    selected(): ReadonlySet<string>;
+    available(id: string): boolean;
+    toggle(id: string): void;
+    clear(): void;
+}
 declare class GraphPage extends WpFilterPage {
     private highlighter;
-    private selected;
     /** The page's own graph; Goal vs Current swaps in its overlay and back (#1239). */
     private readonly base;
     private readonly modes;
@@ -154,33 +175,32 @@ declare class GraphPage extends WpFilterPage {
     protected keepsEmptyLevels(): boolean;
     protected prepareSvg(svg: SVGSVGElement): void;
     protected wireSvg(svg: SVGSVGElement): void;
-    lockSelection(): string | null;
+    focusSelection(): ReadonlySet<string>;
+    /** Whether `id` is drawn right now: what Focus may offer, and a focused box's chip is not "hidden". */
+    isDrawn(id: string): boolean;
+    toggleFocus(id: string): void;
+    clearFocus(): void;
     hasNode(id: string): boolean;
     noun(): string;
     projectCount(): number;
-    focusSelection(): string | null;
-    toggleLock(): void;
-    /** An exact id, else the one id whose short name (after any scope) is `text`; null if none or several. */
-    resolveName(text: string): string | null;
-    setLock(name: string | null): void;
-    clearSelection(): void;
+    /** Focus changed: relight, refilter the cards, and repaint the drawer — no relayout. */
+    private refocus;
     setMode(mode: string): void;
     /** A product legend toggle (#1319): repaint at once from the new ON set. */
     setProductOn(product: string, on: boolean): void;
     /** Switch the active Impact scan: Impact recolours and an active change-scope filter re-applies. */
     setImpactKind(kind: string): void;
-    /** The drawer's "Hide unconnected": filter to the locked box's chain, or turn the filter off. */
-    toggleFilter(): void;
     appliedFilter(): WpFilterChoice;
     /** '' when the change-scope group can be used, else Impact's reason (the group is disabled). */
     scopeReason(): string;
     scopeCount(scope: string): number;
-    /** How many boxes `choice` would show, with the current Hide-unconnected chain. */
+    /** How many boxes `choice` would show, with the current "Keep connected to" picks. */
     preview(choice: WpFilterChoice): number;
     applyFilter(choice: WpFilterChoice): void;
     /** A top-bar pill's ✕. */
     removeFilter(group: string, value: string): void;
     private syncControls;
     private syncLegend;
+    /** The cards of the drawn boxes, narrowed by Focus to the union of the focused boxes' chains. */
     private filterCards;
 }