@webpieces/nx-webpieces-rules 0.4.873 → 0.4.874

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GraphPageStyles = void 0;
+const graph_color_modes_1 = require("./graph-color-modes");
 /**
  * The architecture page's stylesheet: the dark drawer, the graph filling the viewport, the floating
  * popovers and the responsibilities panel. Emitted AFTER the shared menu/filter/navigation styles so
@@ -8,14 +9,21 @@ exports.GraphPageStyles = void 0;
  */
 class GraphPageStyles {
     css() {
-        return this.base() + this.drawer() + this.controls() + this.main() + this.overlays() + this.graph() + this.cards();
+        return (this.base() +
+            this.drawer() +
+            this.controls() +
+            this.main() +
+            this.overlays() +
+            this.filterPopover() +
+            this.graph() +
+            this.cards());
     }
     base() {
         return `
         :root {
-            --wp-side-bg: #0c0d12; --wp-side-fg: #e9eaf0; --wp-side-muted: #8b8fa0;
-            --wp-side-hover: #1f2129; --wp-side-line: #2a2c36; --wp-accent: #3559d6; --wp-accent-dark: #8aa4ff;
-            --wp-fg: #1b1e27; --wp-muted: #5d6475; --wp-line: #d9dce5; --wp-surface: #ffffff; --wp-canvas: #fbfbfd;
+            --wp-side-bg: #15161b; --wp-side-control: #1e1f25; --wp-side-fg: #e9eaf0; --wp-side-muted: #8b8fa0;
+            --wp-side-hover: #26272f; --wp-side-line: #3a3c46; --wp-accent: #8b3cf0; --wp-accent-hover: #a46bf7;
+            --wp-fg: #1b1e27; --wp-muted: #5d6475; --wp-line: #d9dce5; --wp-surface: #ffffff; --wp-canvas: #faf9f5;
         }
         html, body { height: 100%; }
         /* A class that sets display (the legend lists are grids) must not un-hide a [hidden] element. */
@@ -46,13 +54,27 @@ class GraphPageStyles {
         .wp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--wp-side-muted);
             font-weight: 600; padding-left: 4px; }
         .wp-label-row { display: flex; justify-content: space-between; align-items: center; }
-        .wp-modes { display: grid; gap: 1px; }
-        .wp-mode { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 5px 10px; border-radius: 8px; }
+        .wp-pulldown { position: relative; }
+        .wp-pill-trigger { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px;
+            width: 100%; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--wp-side-line);
+            background: var(--wp-side-control); }
+        .wp-pill-trigger:hover, .wp-pill-trigger[aria-expanded="true"] { border-color: var(--wp-accent-hover); }
+        .wp-pill-text { flex: 1 1 auto; min-width: 0; }
+        .wp-caret { color: var(--wp-side-muted); }
+        .wp-menu { position: absolute; z-index: 35; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 2px; padding: 6px;
+            background: var(--wp-side-control); border: 1px solid var(--wp-side-line); border-radius: 12px; box-shadow: 0 10px 28px #0008; }
+        .wp-mode { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 6px 10px; border-radius: 8px; }
         .wp-mode:hover { background: var(--wp-side-hover); }
-        .wp-mode[aria-pressed="true"] { background: #262833; box-shadow: inset 3px 0 0 var(--wp-accent-dark); }
+        .wp-mode[aria-checked="true"] { background: #2a2333; box-shadow: inset 3px 0 0 var(--wp-accent); }
         .wp-mode:disabled { cursor: not-allowed; opacity: 0.45; }
         .wp-mode-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
         .wp-mode-sub { display: block; font-size: 12px; color: var(--wp-side-muted); line-height: 1.3; }
+        .wp-filter-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between;
+            align-items: center; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--wp-side-line);
+            background: var(--wp-side-control); font-size: 13px; font-weight: 600; }
+        .wp-filter-btn:hover, .wp-filter-btn[aria-expanded="true"] { border-color: var(--wp-accent-hover); }
+        .wp-badge { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--wp-accent); color: #fff;
+            font-size: 11.5px; text-align: center; box-sizing: border-box; }
         .wp-mode-reason { margin: 2px 4px 0; font-size: 11.5px; line-height: 1.35; color: var(--wp-side-muted); }
         .wp-legend-list { display: grid; gap: 5px; padding-left: 4px; }
         .wp-legend-row { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
@@ -64,7 +86,7 @@ class GraphPageStyles {
     }
     controls() {
         return `
-        .wp-side input[type="search"] { width: 100%; box-sizing: border-box; background: #17181f; color: var(--wp-side-fg);
+        .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; }
@@ -83,8 +105,9 @@ class GraphPageStyles {
         .wp-icon:hover { border-color: var(--wp-accent); }
         .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-toggle:focus-visible, .wp-side input:focus-visible, .wp-icon:focus-visible,
-        .wp-link:focus-visible { outline: 2px solid var(--wp-accent-dark); outline-offset: 2px; }`;
+        .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-link:focus-visible { outline: 2px solid var(--wp-accent-hover); outline-offset: 2px; }`;
     }
     main() {
         return `
@@ -94,7 +117,41 @@ class GraphPageStyles {
         .wp-crumb { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--wp-muted); overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
         .wp-crumb b { color: var(--wp-fg); }
-        .wp-topbar #wp-filter-status, .wp-topbar #wp-graph-error { margin: 0; font-size: 13px; }`;
+        .wp-topbar #wp-filter-status, .wp-topbar #wp-graph-error { margin: 0; font-size: 13px; }
+        .wp-pills { display: flex; gap: 6px; flex-wrap: wrap; }
+        .wp-pills:empty { display: none; }
+        .wp-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px;
+            background: #f1e8fe; color: #4a1d8a; border: 1px solid #d6bcfa; font-size: 12.5px; }
+        .wp-pill button { all: unset; cursor: pointer; width: 18px; height: 18px; display: inline-grid; place-items: center;
+            border-radius: 50%; color: #4a1d8a; }
+        .wp-pill button:hover { background: #e2cffc; }`;
+    }
+    /** The Filter popover: three groups, chips, and the "Show N projects" footer. */
+    filterPopover() {
+        return `
+        .wp-filter-pop { left: 12px; top: 56px; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 80px); overflow: auto; }
+        .wp-fgroup { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
+        .wp-fgroup legend { padding: 0; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
+            color: var(--wp-muted); font-weight: 600; }
+        .wp-fgroup legend small { text-transform: none; letter-spacing: 0; font-weight: 400; }
+        .wp-fgroup:disabled .wp-scope { opacity: 0.45; cursor: not-allowed; }
+        .wp-scope { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
+        .wp-scope:hover { background: #f4f1fb; }
+        .wp-scope input { accent-color: var(--wp-accent); margin: 0; }
+        .wp-scope-name { flex: 1 1 auto; }
+        .wp-count { color: var(--wp-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+        .wp-scope-reason { margin: 2px 6px 0; font-size: 12px; color: var(--wp-muted); }
+        .wp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+        .wp-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 3px 11px; border-radius: 999px;
+            border: 1px solid var(--wp-line); background: var(--wp-surface); font-size: 12.5px; }
+        .wp-chip:hover { border-color: var(--wp-accent-hover); }
+        .wp-chip[aria-pressed="true"] { background: var(--wp-accent); border-color: var(--wp-accent); color: #fff; }
+        .wp-filter-pop footer { display: flex; justify-content: space-between; align-items: center; gap: 8px;
+            padding-top: 10px; border-top: 1px solid var(--wp-line); }
+        .wp-text-btn { all: unset; cursor: pointer; color: var(--wp-muted); font-size: 12.5px; text-decoration: underline; }
+        .wp-primary { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 14px; border-radius: 8px;
+            background: var(--wp-accent); color: #fff; font-weight: 600; font-size: 13px; }
+        .wp-primary:hover { background: var(--wp-accent-hover); }`;
     }
     overlays() {
         return `
@@ -113,18 +170,32 @@ class GraphPageStyles {
             padding: 12px 0; background: #f5f6f9; font-weight: 600; font-size: 15px; }`;
     }
     /**
-     * The graph fills what the topbar leaves. A Runtime box with a specialization is an HTML-like
-     * table, so its cells are extra polygons inside the node: the hover glow and the lock outline are
-     * kept on the box's own outline (the FIRST polygon) instead of stroking every cell.
+     * The graph fills what the topbar leaves.
+     *
+     * The hover glow and the lock outline belong to the OUTER box only. A nested Runtime box (one
+     * runtime plus a specialization) is an HTML-like table, so after the node's own outline Graphviz
+     * emits a `<polygon>` for the base-colored cell and a `<path>` for the inner `STYLE="rounded"`
+     * table — matching only `polygon` here is what let the glow stroke the inner box (#1158). So the
+     * glow is suppressed on EVERY shape after the node's first, whatever its element type.
+     *
+     * A striped (multi-runtime) box is the one exception to "the first shape is the outline":
+     * Graphviz draws one filled polygon per stripe first and the outline LAST, as an unfilled polygon.
+     * graph-color-modes.ts stamps those boxes `wp-striped`, and for them the outline is that last,
+     * `fill="none"` polygon; the stripes keep their thin dividers.
      */
     graph() {
+        const shape = ':is(polygon, ellipse, path)';
+        const later = `${shape} ~ ${shape}`;
+        const first = `${shape}:not(${later})`;
+        const glow = 'stroke: var(--wp-accent); stroke-width: 5; filter: drop-shadow(0 0 6px rgba(139, 60, 240, 0.85));';
         return `
         #graph { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; padding: 16px 16px 64px;
             box-sizing: border-box; background: var(--wp-canvas); }
-        #graph g.wp-node-clickable:hover polygon:not(:first-of-type) { stroke: transparent; stroke-width: 0; filter: none; }
-        #graph g.node.wp-locked > polygon:first-of-type,
-        #graph g.node.wp-locked > ellipse,
-        #graph g.node.wp-locked > path { stroke: #b26a00; stroke-width: 3; }`;
+        #graph g.wp-node-clickable:hover > ${later} { stroke: none; stroke-width: 0; filter: none; }
+        #graph g.wp-node-clickable.${graph_color_modes_1.STRIPED_CLASS}:hover > polygon:not([fill="none"]) { stroke: #000000; stroke-width: 0.5; filter: none; }
+        #graph g.wp-node-clickable.${graph_color_modes_1.STRIPED_CLASS}:hover > polygon[fill="none"] { ${glow} }
+        #graph g.node.wp-locked:not(.${graph_color_modes_1.STRIPED_CLASS}) > ${first},
+        #graph g.node.wp-locked.${graph_color_modes_1.STRIPED_CLASS} > polygon[fill="none"] { stroke: var(--wp-accent); stroke-width: 3; }`;
     }
     cards() {
         return `

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;;;;GAIG;AACH,MAAa,eAAe;IACxB,GAAG;QACC,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IACvH,CAAC;IAEO,IAAI;QACR,OAAO;;;;;;;;;;;;;;;;;;;;;;;uFAuBwE,CAAC;IACpF,CAAC;IAEO,MAAM;QACV,OAAO;;;;;;;;;;;;;;;;;;;;;;;mJAuBoI,CAAC;IAChJ,CAAC;IAEO,QAAQ;QACZ,OAAO;;;;;;;;;;;;;;;;;;;;;kGAqBmF,CAAC;IAC/F,CAAC;IAEO,IAAI;QACR,OAAO;;;;;;;iGAOkF,CAAC;IAC9F,CAAC;IAEO,QAAQ;QACZ,OAAO;;;;;;;;;;;;;uFAawE,CAAC;IACpF,CAAC;IAED;;;;OAIG;IACK,KAAK;QACT,OAAO;;;;;;6EAM8D,CAAC;IAC1E,CAAC;IAEO,KAAK;QACT,OAAO;;;;;;;;;;sCAUuB,CAAC;IACnC,CAAC;CACJ;AA5ID,0CA4IC","sourcesContent":["/**\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 this.base() + this.drawer() + this.controls() + this.main() + this.overlays() + this.graph() + this.cards();\n    }\n\n    private base(): string {\n        return `\n        :root {\n            --wp-side-bg: #0c0d12; --wp-side-fg: #e9eaf0; --wp-side-muted: #8b8fa0;\n            --wp-side-hover: #1f2129; --wp-side-line: #2a2c36; --wp-accent: #3559d6; --wp-accent-dark: #8aa4ff;\n            --wp-fg: #1b1e27; --wp-muted: #5d6475; --wp-line: #d9dce5; --wp-surface: #ffffff; --wp-canvas: #fbfbfd;\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-modes { display: grid; gap: 1px; }\n        .wp-mode { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 5px 10px; border-radius: 8px; }\n        .wp-mode:hover { background: var(--wp-side-hover); }\n        .wp-mode[aria-pressed=\"true\"] { background: #262833; box-shadow: inset 3px 0 0 var(--wp-accent-dark); }\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-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-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: #17181f; 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-toggle:focus-visible, .wp-side input:focus-visible, .wp-icon:focus-visible,\n        .wp-link:focus-visible { outline: 2px solid var(--wp-accent-dark); 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    }\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 { 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. A Runtime box with a specialization is an HTML-like\n     * table, so its cells are extra polygons inside the node: the hover glow and the lock outline are\n     * kept on the box's own outline (the FIRST polygon) instead of stroking every cell.\n     */\n    private graph(): string {\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 polygon:not(:first-of-type) { stroke: transparent; stroke-width: 0; filter: none; }\n        #graph g.node.wp-locked > polygon:first-of-type,\n        #graph g.node.wp-locked > ellipse,\n        #graph g.node.wp-locked > path { stroke: #b26a00; 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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mJAqCoI,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;;;;;;;;;;;;;;;;;;;;;;;kEAuBmD,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;AArND,0CAqNC","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-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-name { flex: 1 1 auto; }\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-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 { 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.d.ts

@@ -1,17 +1,25 @@
 import { LevelBand } from './graph-level-bands';
-import { LegendFacts, NodeModeDots } from './graph-color-modes';
+import { LegendFacts, NodeFacts, NodeModeDots } from './graph-color-modes';
 /**
  * Renderer-owned records, captured while emitting DOT, never recovered by parsing labels.
  *
- * `dot` is the statement `fullDot` carries. `modes` is set only by the architecture graph, whose page
- * switches color modes by re-rendering each box from its per-mode statement; the runtime graph has
- * one look and leaves it null.
+ * `dot` is the statement `fullDot` carries. `modes` and `tags` are set only by the architecture
+ * graph, whose page switches color modes by re-rendering each box from its per-mode statement and
+ * filters boxes by their role and framework tags; the runtime graph has one look and leaves both null.
  */
 export declare class RenderNode {
     readonly id: string;
     readonly dot: string;
     readonly modes: NodeModeDots | null;
-    constructor(id: string, dot: string, modes: NodeModeDots | null);
+    readonly tags: NodeTags | null;
+    constructor(id: string, dot: string, modes: NodeModeDots | null, tags: NodeTags | null);
+}
+/** What the architecture page's Filter matches a box on: its level, role and framework tags. */
+export declare class NodeTags {
+    readonly level: number;
+    readonly role: string;
+    readonly frameworks: string[];
+    constructor(level: number, role: string, frameworks: string[]);
 }
 export declare class RenderEdge {
     readonly from: string;
@@ -32,7 +40,7 @@ export declare class GraphRenderModel {
     legend: LegendFacts;
     node(id: string, dot: string): string;
     /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */
-    styledNode(id: string, modes: NodeModeDots): string;
+    styledNode(facts: NodeFacts, modes: NodeModeDots): string;
     completeEndpoints(): void;
     edge(from: string, to: string, dot: string): string;
 }

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

@@ -1,26 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphFilterAssets = exports.GraphRenderModel = exports.RenderEdge = exports.RenderNode = void 0;
+exports.GraphFilterAssets = exports.GraphRenderModel = exports.RenderEdge = exports.NodeTags = exports.RenderNode = void 0;
 const dot_syntax_1 = require("./dot-syntax");
 const graph_color_modes_1 = require("./graph-color-modes");
 /**
  * Renderer-owned records, captured while emitting DOT, never recovered by parsing labels.
  *
- * `dot` is the statement `fullDot` carries. `modes` is set only by the architecture graph, whose page
- * switches color modes by re-rendering each box from its per-mode statement; the runtime graph has
- * one look and leaves it null.
+ * `dot` is the statement `fullDot` carries. `modes` and `tags` are set only by the architecture
+ * graph, whose page switches color modes by re-rendering each box from its per-mode statement and
+ * filters boxes by their role and framework tags; the runtime graph has one look and leaves both null.
  */
 class RenderNode {
     id;
     dot;
     modes;
-    constructor(id, dot, modes) {
+    tags;
+    constructor(id, dot, modes, tags) {
         this.id = id;
         this.dot = dot;
         this.modes = modes;
+        this.tags = tags;
     }
 }
 exports.RenderNode = RenderNode;
+/** What the architecture page's Filter matches a box on: its level, role and framework tags. */
+class NodeTags {
+    level;
+    role;
+    frameworks;
+    constructor(level, role, frameworks) {
+        this.level = level;
+        this.role = role;
+        this.frameworks = frameworks;
+    }
+}
+exports.NodeTags = NodeTags;
 class RenderEdge {
     from;
     to;
@@ -45,12 +59,12 @@ class GraphRenderModel {
     /** The colors and roles in use, so the page's legend lists exactly those (architecture graph). */
     legend = new graph_color_modes_1.LegendFacts();
     node(id, dot) {
-        this.nodes.push(new RenderNode(id, dot, null));
+        this.nodes.push(new RenderNode(id, dot, null, null));
         return dot;
     }
     /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */
-    styledNode(id, modes) {
-        this.nodes.push(new RenderNode(id, modes.runtime, modes));
+    styledNode(facts, modes) {
+        this.nodes.push(new RenderNode(facts.nodeId, modes.runtime, modes, new NodeTags(facts.level, facts.role, facts.frameworks)));
         return modes.runtime;
     }
     completeEndpoints() {

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,2DAAgE;AAEhE;;;;;;GAMG;AACH,MAAa,UAAU;IAEC;IACA;IACA;IAHpB,YACoB,EAAU,EACV,GAAW,EACX,KAA0B;QAF1B,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,UAAK,GAAL,KAAK,CAAqB;IAC3C,CAAC;CACP;AAND,gCAMC;AAED,MAAa,UAAU;IAEC;IACA;IACA;IACA;IAJpB,YACoB,IAAY,EACZ,EAAU,EACV,GAAW,EACX,EAAU;QAHV,SAAI,GAAJ,IAAI,CAAQ;QACZ,OAAE,GAAF,EAAE,CAAQ;QACV,QAAG,GAAH,GAAG,CAAQ;QACX,OAAE,GAAF,EAAE,CAAQ;IAC3B,CAAC;CACP;AAPD,gCAOC;AAED,mEAAmE;AACnE,MAAa,gBAAgB;IAChB,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;IAE3B,IAAI,CAAC,EAAU,EAAE,GAAW;QACxB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;QAC/C,OAAO,GAAG,CAAC;IACf,CAAC;IAED,uFAAuF;IACvF,UAAU,CAAC,EAAU,EAAE,KAAmB;QACtC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;QAC1D,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,IAAI,CAAC,IAAY,EAAE,EAAU,EAAE,GAAW;QACtC,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,CAAC,CAAC,CAAC;QACzD,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ;AAtCD,4CAsCC;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, 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` is set only by the architecture graph, whose page\n * switches color modes by re-rendering each box from its per-mode statement; the runtime graph has\n * one look and leaves it null.\n */\nexport class RenderNode {\n    constructor(\n        public readonly id: string,\n        public readonly dot: string,\n        public readonly modes: NodeModeDots | null,\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}\n\n/** The immutable drawable snapshot carried by a generated page. */\nexport class GraphRenderModel {\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\n    node(id: string, dot: string): string {\n        this.nodes.push(new RenderNode(id, dot, null));\n        return dot;\n    }\n\n    /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */\n    styledNode(id: string, modes: NodeModeDots): string {\n        this.nodes.push(new RenderNode(id, modes.runtime, modes));\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    edge(from: string, to: string, dot: 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));\n        return statement;\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:#1565c0; 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":"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","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` and `tags` are set only by the architecture\n * graph, whose page switches color modes by re-rendering each box from its per-mode statement and\n * filters boxes by their role and framework tags; the runtime graph has one look and leaves both null.\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    ) {}\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}\n\n/** The immutable drawable snapshot carried by a generated page. */\nexport class GraphRenderModel {\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\n    node(id: string, dot: string): string {\n        this.nodes.push(new RenderNode(id, dot, null, null));\n        return dot;\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(facts.nodeId, modes.runtime, modes, new NodeTags(facts.level, facts.role, facts.frameworks)),\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    edge(from: string, to: string, dot: 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));\n        return statement;\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:#1565c0; stroke-width:3; }'\n        );\n    }\n}\n"]}

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

@@ -9,14 +9,16 @@
 declare class WpModeState {
     static readonly MODES: string[];
     static readonly NAMES: string[];
+    static readonly SUBTITLES: string[];
     static readonly STORAGE_KEY = "wp-architecture-graph-mode";
     readonly impact: ImpactJson | null;
     mode: string;
     constructor();
-    /** '' when Impact can be shown, else the one line the drawer and the menu say instead. */
+    /** '' when Impact can be shown, else the one line the drawer and the Filter popover say instead. */
     impactReason(): string;
     available(mode: string): boolean;
     name(mode: string): string;
+    subtitle(mode: string): string;
     /** False (and nothing changes) for an unknown or unavailable mode. */
     set(mode: string): boolean;
     /** Which impact shade a box gets. */
@@ -24,6 +26,36 @@ declare class WpModeState {
     private initial;
     private stored;
 }
+/**
+ * One state of the Filter popover: a change scope plus the selected Runtime and Role chips. The page
+ * holds the APPLIED one; the popover edits a copy until "Show N projects".
+ */
+declare class WpFilterChoice {
+    scope: string;
+    readonly runtimes: Set<string>;
+    readonly roles: Set<string>;
+    copy(): WpFilterChoice;
+    /** How many filters are active: the drawer button's badge. */
+    count(): number;
+}
+/**
+ * The Filter popover's three groups, INTERSECTED: a box stays when it is in the change scope, AND has
+ * any selected runtime chip (when one is selected), AND has any selected role chip (likewise).
+ */
+declare class WpProjectFilter {
+    private readonly model;
+    private readonly modes;
+    static readonly SCOPE_NAMES: Map<string, string>;
+    constructor(model: RenderModelJson, modes: WpModeState);
+    /** The node ids a change scope keeps; null for "everything" (and whenever Impact is unavailable). */
+    scopeSet(scope: string): Set<string> | null;
+    /** How many drawn projects a scope keeps on its own: the count beside each option. */
+    scopeCount(scope: string): number;
+    /** `base` (everything, or the Hide-unconnected chain) narrowed by `choice`. */
+    apply(base: Set<string>, choice: WpFilterChoice): Set<string>;
+    /** 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. */
 declare class GraphHighlighter {
     private readonly svg;
@@ -39,51 +71,96 @@ declare class GraphHighlighter {
     private wireHover;
     private wireMenu;
 }
+/**
+ * The Filter popover: edits a COPY of the page's applied filter, shows what each choice would keep,
+ * and hands the copy to the page on "Show N projects". Closing it any other way discards the edit.
+ */
+declare class GraphFilterPopover {
+    private readonly page;
+    private draft;
+    constructor(page: GraphPage);
+    wire(): void;
+    isOpen(): boolean;
+    open(): void;
+    close(): void;
+    /** Repaint the controls from the draft: checked scope, pressed chips, counts and the footer. */
+    private paint;
+    private byId;
+}
 /**
  * The drawer and its floating panels: every control outside the graph itself. Holds no graph state —
  * each control calls back into the page, and `sync()` repaints the controls from the page's state.
  */
 declare class GraphDrawer {
     private readonly page;
+    readonly popover: GraphFilterPopover;
     constructor(page: GraphPage);
     wire(): void;
+    /** "Color by": the pill trigger opens the menu of three; picking one switches and closes it. */
+    private wireModeMenu;
+    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.
+     * 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.
      */
     private onKey;
     /** `button` shows/hides `target`; for the drawer itself it toggles the collapsed class instead. */
     private toggles;
     /** Repaint every control from the page's state. */
-    sync(modes: WpModeState, locked: string | null, filtering: boolean): void;
+    sync(modes: WpModeState, locked: string | null, filtering: boolean, filter: WpFilterChoice): void;
     private syncFilterToggle;
+    /** The drawer button's count badge, and one removable pill per active filter in the top bar. */
+    private syncFilter;
+    /** A pill, built with text nodes so no value is parsed as HTML. */
+    private pill;
     private impactNote;
+    /**
+     * When files changed but no project owns one, everything nx affected is affected by a
+     * workspace-global input (a lockfile, the workspace manifest). That is correct for CI, and
+     * 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. */
     private crumb;
+    private text;
     private lockInput;
     private byId;
 }
 declare class GraphPage extends WpFilterPage {
     private highlighter;
     private readonly modes;
+    private readonly projects;
+    private applied;
     private readonly drawer;
     protected captureBinding(_svg: SVGSVGElement | null): () => void;
     protected wireControls(): void;
     protected nodeDot(node: RenderNodeJson): string;
     protected usesFullDot(): boolean;
+    protected narrow(retained: Set<string>): Set<string>;
+    /** Filtering keeps every box in its own L-row: an emptied level stays as a thin labeled band. */
+    protected keepsEmptyLevels(): boolean;
     protected wireSvg(svg: SVGSVGElement): void;
     lockSelection(): string | null;
     hasNode(id: string): boolean;
+    projectCount(): number;
     /** An exact id, else the one id whose short name (after any scope) is `text`; null if none or several. */
     resolveName(text: string): string | null;
     setLock(name: string | null): void;
     setMode(mode: string): void;
     /** The drawer's "Hide unconnected": filter to the locked box's chain, or turn the filter off. */
     toggleFilter(): void;
-    /** The node menu's "Mode ▸" submenu: one radio item per mode, Impact disabled with its reason. */
-    modeItem(): WpNodeMenuItem;
+    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. */
+    preview(choice: WpFilterChoice): number;
+    applyFilter(choice: WpFilterChoice): void;
+    /** A top-bar pill's ✕. */
+    removeFilter(group: string, value: string): void;
     private syncControls;
     private filterCards;
 }