@webpieces/nx-webpieces-rules 0.4.947 → 0.4.949

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;AA1ND,0CA0NC","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-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 { 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,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"]}

package/src/lib/graph-product-paint.client.d.ts

@@ -0,0 +1,92 @@
+/** Which of the five looks a Product-mode node gets for one ON set. */
+declare enum WpProductPaintKind {
+    /** The node belongs to no product: white, dashed border. */
+    NONE = "none",
+    /** Every product it carries is OFF: light grey, still visible. */
+    OFF = "off",
+    /** Exactly one of its products is ON: solid in that product's fixed color. */
+    SOLID = "solid",
+    /** Two or more of its products are ON: one stripe per ON product. */
+    STRIPES = "stripes",
+    /** Every product is ON and the node carries every one: the neutral shared fill. */
+    SHARED = "shared"
+}
+/** How one node is painted in Product mode. Data-only. */
+declare class WpProductPaint {
+    readonly kind: WpProductPaintKind;
+    /** SOLID: its one color; STRIPES: one per ON product, in the node's product order; else empty. */
+    readonly colors: string[];
+    /** The text color that reads on the fill. */
+    readonly fontColor: string;
+    constructor(kind: WpProductPaintKind, 
+    /** SOLID: its one color; STRIPES: one per ON product, in the node's product order; else empty. */
+    colors: string[], 
+    /** The text color that reads on the fill. */
+    fontColor: string);
+}
+/** Which products are ON when a page loads (#1319): the same answer on every load, never persisted. */
+declare class WpProductSelection {
+    /** The first two products in legend order. */
+    initialOn(order: string[]): Set<string>;
+}
+/** Decides and writes every Product-mode statement for one ON set. Immutable: a toggle builds a new one. */
+declare class WpProductPainter {
+    private readonly legend;
+    private readonly on;
+    /** graph-products.ts PRODUCT_SHARED_FILL. */
+    static readonly SHARED_FILL = "#c9ced8";
+    /** graph-products.ts PRODUCT_NONE_FILL / PRODUCT_NONE_BORDER. */
+    static readonly NONE_FILL = "#ffffff";
+    static readonly NONE_BORDER = "#8a90a0";
+    /** graph-products.ts PRODUCT_OFF_FILL / PRODUCT_OFF_BORDER. */
+    static readonly OFF_FILL = "#eef0f4";
+    static readonly OFF_BORDER = "#b4b9c4";
+    /** graph-color-modes.ts DARK_TEXT / LIGHT_TEXT / STRIPED_CLASS. */
+    static readonly DARK_TEXT = "#1a1c22";
+    static readonly LIGHT_TEXT = "#ffffff";
+    static readonly STRIPED_CLASS = "wp-striped";
+    /** graph-products.ts PRODUCTS_ON_AT_LOAD. */
+    static readonly ON_AT_LOAD = 2;
+    private readonly colors;
+    /**
+     * @param legend the products the legend lists, in its order, each with its FIXED palette color —
+     *        a color is never reassigned to the ON set, so it always means the same product
+     * @param on the products switched ON
+     */
+    constructor(legend: ProductColorJson[], on: ReadonlySet<string>);
+    /** The paint for a node carrying `products`. */
+    paint(products: string[]): WpProductPaint;
+    /**
+     * The color a cross-product dependency is dashed in (#1204): the first product it crosses into
+     * that is ON; null draws it plain.
+     */
+    edgeColor(crossesInto: string[]): string | null;
+    /** A node's Product-mode statement. */
+    nodeDot(template: ProductTemplateJson, products: string[]): string;
+    /** An edge's Product-mode statement: dashed in its ON target product's color, else plain. */
+    edgeDot(edge: RenderEdgeJson): string;
+    private isOn;
+    /** Every product is ON — of a legend listing two or more (a lone product is its own color). */
+    private allOn;
+    private attrs;
+    /** Equal vertical stripes, the last taking the remainder — the multi-runtime box's renderer. */
+    private stripes;
+    /**
+     * A queue, clock, datastore or vendor keeps its kind statement; only its fill changes. Graphviz
+     * cylinders cannot stripe, so several ON products are a gradient; no product is dashed.
+     */
+    private context;
+    private contextFill;
+}
+/** The Product legend's checkboxes (#1319): one per product, in the drawer AND the popped-out legend. */
+declare class WpProductToggles {
+    /** The products the legend lists, in its order, once each. */
+    products(): string[];
+    /** Each checkbox switches its product ON or OFF. */
+    wire(onChange: (product: string, on: boolean) => void): void;
+    /** Every copy of every checkbox shows the ON set. */
+    sync(on: ReadonlySet<string>): void;
+    /** A painter over the legend's products with their FIXED palette colors, for a snapshot of `on`. */
+    painter(palette: ProductColorJson[], on: ReadonlySet<string>): WpProductPainter;
+    private inputs;
+}

package/src/lib/graph-product-paint.client.js

@@ -0,0 +1,196 @@
+"use strict";
+/*
+ * The Product color mode's paint, decided IN THE BROWSER from the products switched ON (#1319).
+ *
+ * Each product's legend row is a toggle. Painting every declared product at once gave a workspace with
+ * eight products eight saturated colors plus stripes, which hid exactly what the mode is for: one
+ * product's footprint, or where two overlap. So the page keeps an ON set — the first two products in
+ * legend (sorted-name) order at EVERY load, never persisted — and repaints from it without
+ * regenerating anything: the page already carries each node's products and the ONE palette (#1244).
+ *
+ * Prepended to graph-visualizer.client.js like graph-mode-state.client.ts. The painter is pure (no
+ * DOM), so a spec runs it in a bare VM; WpProductToggles is the only class here that touches the page. The colors it writes are graph-products.ts's (a spec pins that they agree);
+ * they are spelled here because this script is not a module and cannot import them.
+ */
+/** Which of the five looks a Product-mode node gets for one ON set. */
+var WpProductPaintKind;
+(function (WpProductPaintKind) {
+    /** The node belongs to no product: white, dashed border. */
+    WpProductPaintKind["NONE"] = "none";
+    /** Every product it carries is OFF: light grey, still visible. */
+    WpProductPaintKind["OFF"] = "off";
+    /** Exactly one of its products is ON: solid in that product's fixed color. */
+    WpProductPaintKind["SOLID"] = "solid";
+    /** Two or more of its products are ON: one stripe per ON product. */
+    WpProductPaintKind["STRIPES"] = "stripes";
+    /** Every product is ON and the node carries every one: the neutral shared fill. */
+    WpProductPaintKind["SHARED"] = "shared";
+})(WpProductPaintKind || (WpProductPaintKind = {}));
+/** How one node is painted in Product mode. Data-only. */
+class WpProductPaint {
+    kind;
+    colors;
+    fontColor;
+    constructor(kind, 
+    /** SOLID: its one color; STRIPES: one per ON product, in the node's product order; else empty. */
+    colors, 
+    /** The text color that reads on the fill. */
+    fontColor) {
+        this.kind = kind;
+        this.colors = colors;
+        this.fontColor = fontColor;
+    }
+}
+/** Which products are ON when a page loads (#1319): the same answer on every load, never persisted. */
+class WpProductSelection {
+    /** The first two products in legend order. */
+    initialOn(order) {
+        return new Set(order.slice(0, WpProductPainter.ON_AT_LOAD));
+    }
+}
+/** Decides and writes every Product-mode statement for one ON set. Immutable: a toggle builds a new one. */
+class WpProductPainter {
+    legend;
+    on;
+    /** graph-products.ts PRODUCT_SHARED_FILL. */
+    static SHARED_FILL = '#c9ced8';
+    /** graph-products.ts PRODUCT_NONE_FILL / PRODUCT_NONE_BORDER. */
+    static NONE_FILL = '#ffffff';
+    static NONE_BORDER = '#8a90a0';
+    /** graph-products.ts PRODUCT_OFF_FILL / PRODUCT_OFF_BORDER. */
+    static OFF_FILL = '#eef0f4';
+    static OFF_BORDER = '#b4b9c4';
+    /** graph-color-modes.ts DARK_TEXT / LIGHT_TEXT / STRIPED_CLASS. */
+    static DARK_TEXT = '#1a1c22';
+    static LIGHT_TEXT = '#ffffff';
+    static STRIPED_CLASS = 'wp-striped';
+    /** graph-products.ts PRODUCTS_ON_AT_LOAD. */
+    static ON_AT_LOAD = 2;
+    colors = new Map();
+    /**
+     * @param legend the products the legend lists, in its order, each with its FIXED palette color —
+     *        a color is never reassigned to the ON set, so it always means the same product
+     * @param on the products switched ON
+     */
+    constructor(legend, on) {
+        this.legend = legend;
+        this.on = on;
+        for (const color of legend)
+            this.colors.set(color.product, color);
+    }
+    /** The paint for a node carrying `products`. */
+    paint(products) {
+        if (products.length === 0)
+            return new WpProductPaint(WpProductPaintKind.NONE, [], WpProductPainter.DARK_TEXT);
+        const on = products.filter((product) => this.isOn(product));
+        if (on.length === 0)
+            return new WpProductPaint(WpProductPaintKind.OFF, [], WpProductPainter.DARK_TEXT);
+        if (this.allOn() && this.legend.every((color) => products.includes(color.product)))
+            return new WpProductPaint(WpProductPaintKind.SHARED, [], WpProductPainter.DARK_TEXT);
+        const colors = on.map((product) => this.colors.get(product));
+        if (colors.length === 1)
+            return new WpProductPaint(WpProductPaintKind.SOLID, [colors[0].color], colors[0].fontColor);
+        return new WpProductPaint(WpProductPaintKind.STRIPES, colors.map((color) => color.color), WpProductPainter.DARK_TEXT);
+    }
+    /**
+     * The color a cross-product dependency is dashed in (#1204): the first product it crosses into
+     * that is ON; null draws it plain.
+     */
+    edgeColor(crossesInto) {
+        const into = crossesInto.find((product) => this.isOn(product));
+        return into === undefined ? null : this.colors.get(into).color;
+    }
+    /** A node's Product-mode statement. */
+    nodeDot(template, products) {
+        const paint = this.paint(products);
+        if (template.kind === 'context')
+            return this.context(template.head, paint);
+        const label = paint.fontColor === WpProductPainter.LIGHT_TEXT ? template.lightLabel : template.darkLabel;
+        return `${template.head}${this.attrs(paint)}, label=<${label}>];\n`;
+    }
+    /** An edge's Product-mode statement: dashed in its ON target product's color, else plain. */
+    edgeDot(edge) {
+        const color = this.edgeColor(edge.crossesInto);
+        if (color === null)
+            return edge.dot;
+        return `${edge.dot.slice(0, -2)} [style=dashed, color="${color}", penwidth=2];\n`;
+    }
+    isOn(product) {
+        return this.on.has(product) && this.colors.has(product);
+    }
+    /** Every product is ON — of a legend listing two or more (a lone product is its own color). */
+    allOn() {
+        return this.legend.length > 1 && this.legend.every((color) => this.on.has(color.product));
+    }
+    attrs(paint) {
+        const dark = WpProductPainter.DARK_TEXT;
+        if (paint.kind === WpProductPaintKind.NONE)
+            return `style="filled,dashed", fillcolor="${WpProductPainter.NONE_FILL}", fontcolor="${dark}", color="${WpProductPainter.NONE_BORDER}", penwidth=1.5`;
+        if (paint.kind === WpProductPaintKind.OFF)
+            return `style="filled", fillcolor="${WpProductPainter.OFF_FILL}", fontcolor="${dark}", color="${WpProductPainter.OFF_BORDER}"`;
+        if (paint.kind === WpProductPaintKind.SHARED)
+            return `style="filled", fillcolor="${WpProductPainter.SHARED_FILL}", fontcolor="${dark}"`;
+        if (paint.kind === WpProductPaintKind.SOLID)
+            return `style="filled", fillcolor="${paint.colors[0]}", fontcolor="${paint.fontColor}"`;
+        return `${this.stripes(paint.colors)}, fontcolor="${dark}"`;
+    }
+    /** Equal vertical stripes, the last taking the remainder — the multi-runtime box's renderer. */
+    stripes(colors) {
+        const share = (1 / colors.length).toFixed(3);
+        const weighted = colors.map((color, index) => index === colors.length - 1 ? color : `${color};${share}`);
+        return `style="striped", fillcolor="${weighted.join(':')}", class="${WpProductPainter.STRIPED_CLASS}"`;
+    }
+    /**
+     * A queue, clock, datastore or vendor keeps its kind statement; only its fill changes. Graphviz
+     * cylinders cannot stripe, so several ON products are a gradient; no product is dashed.
+     */
+    context(dot, paint) {
+        const recolored = dot.replace(/fillcolor="[^"]*"/, `fillcolor="${this.contextFill(paint)}"`);
+        return paint.kind === WpProductPaintKind.NONE ? recolored.replace(/style="[^"]*"/, 'style="filled,dashed"') : recolored;
+    }
+    contextFill(paint) {
+        if (paint.kind === WpProductPaintKind.NONE)
+            return WpProductPainter.NONE_FILL;
+        if (paint.kind === WpProductPaintKind.OFF)
+            return WpProductPainter.OFF_FILL;
+        if (paint.kind === WpProductPaintKind.SHARED)
+            return WpProductPainter.SHARED_FILL;
+        return paint.colors.join(':');
+    }
+}
+/** The Product legend's checkboxes (#1319): one per product, in the drawer AND the popped-out legend. */
+class WpProductToggles {
+    /** The products the legend lists, in its order, once each. */
+    products() {
+        const order = [];
+        this.inputs().forEach((input) => {
+            const product = input.dataset['wpProductToggle'] ?? '';
+            if (product !== '' && !order.includes(product))
+                order.push(product);
+        });
+        return order;
+    }
+    /** Each checkbox switches its product ON or OFF. */
+    wire(onChange) {
+        this.inputs().forEach((input) => {
+            input.addEventListener('change', () => onChange(input.dataset['wpProductToggle'] ?? '', input.checked));
+        });
+    }
+    /** Every copy of every checkbox shows the ON set. */
+    sync(on) {
+        this.inputs().forEach((input) => {
+            input.checked = on.has(input.dataset['wpProductToggle'] ?? '');
+        });
+    }
+    /** A painter over the legend's products with their FIXED palette colors, for a snapshot of `on`. */
+    painter(palette, on) {
+        const legend = this.products()
+            .map((product) => palette.find((color) => color.product === product))
+            .filter((color) => color !== undefined);
+        return new WpProductPainter(legend, new Set(on));
+    }
+    inputs() {
+        return document.querySelectorAll('[data-wp-product-toggle]');
+    }
+}
+//# sourceMappingURL=graph-product-paint.client.js.map

package/src/lib/graph-product-paint.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-product-paint.client.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-product-paint.client.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * The Product color mode's paint, decided IN THE BROWSER from the products switched ON (#1319).\n *\n * Each product's legend row is a toggle. Painting every declared product at once gave a workspace with\n * eight products eight saturated colors plus stripes, which hid exactly what the mode is for: one\n * product's footprint, or where two overlap. So the page keeps an ON set — the first two products in\n * legend (sorted-name) order at EVERY load, never persisted — and repaints from it without\n * regenerating anything: the page already carries each node's products and the ONE palette (#1244).\n *\n * Prepended to graph-visualizer.client.js like graph-mode-state.client.ts. The painter is pure (no\n * DOM), so a spec runs it in a bare VM; WpProductToggles is the only class here that touches the page. The colors it writes are graph-products.ts's (a spec pins that they agree);\n * they are spelled here because this script is not a module and cannot import them.\n */\n\n/** Which of the five looks a Product-mode node gets for one ON set. */\nenum WpProductPaintKind {\n    /** The node belongs to no product: white, dashed border. */\n    NONE = 'none',\n    /** Every product it carries is OFF: light grey, still visible. */\n    OFF = 'off',\n    /** Exactly one of its products is ON: solid in that product's fixed color. */\n    SOLID = 'solid',\n    /** Two or more of its products are ON: one stripe per ON product. */\n    STRIPES = 'stripes',\n    /** Every product is ON and the node carries every one: the neutral shared fill. */\n    SHARED = 'shared',\n}\n\n/** How one node is painted in Product mode. Data-only. */\nclass WpProductPaint {\n    constructor(\n        readonly kind: WpProductPaintKind,\n        /** SOLID: its one color; STRIPES: one per ON product, in the node's product order; else empty. */\n        readonly colors: string[],\n        /** The text color that reads on the fill. */\n        readonly fontColor: string,\n    ) {}\n}\n\n/** Which products are ON when a page loads (#1319): the same answer on every load, never persisted. */\nclass WpProductSelection {\n    /** The first two products in legend order. */\n    initialOn(order: string[]): Set<string> {\n        return new Set(order.slice(0, WpProductPainter.ON_AT_LOAD));\n    }\n}\n\n/** Decides and writes every Product-mode statement for one ON set. Immutable: a toggle builds a new one. */\nclass WpProductPainter {\n    /** graph-products.ts PRODUCT_SHARED_FILL. */\n    static readonly SHARED_FILL = '#c9ced8';\n    /** graph-products.ts PRODUCT_NONE_FILL / PRODUCT_NONE_BORDER. */\n    static readonly NONE_FILL = '#ffffff';\n    static readonly NONE_BORDER = '#8a90a0';\n    /** graph-products.ts PRODUCT_OFF_FILL / PRODUCT_OFF_BORDER. */\n    static readonly OFF_FILL = '#eef0f4';\n    static readonly OFF_BORDER = '#b4b9c4';\n    /** graph-color-modes.ts DARK_TEXT / LIGHT_TEXT / STRIPED_CLASS. */\n    static readonly DARK_TEXT = '#1a1c22';\n    static readonly LIGHT_TEXT = '#ffffff';\n    static readonly STRIPED_CLASS = 'wp-striped';\n    /** graph-products.ts PRODUCTS_ON_AT_LOAD. */\n    static readonly ON_AT_LOAD = 2;\n\n    private readonly colors = new Map<string, ProductColorJson>();\n\n    /**\n     * @param legend the products the legend lists, in its order, each with its FIXED palette color —\n     *        a color is never reassigned to the ON set, so it always means the same product\n     * @param on the products switched ON\n     */\n    constructor(\n        private readonly legend: ProductColorJson[],\n        private readonly on: ReadonlySet<string>,\n    ) {\n        for (const color of legend) this.colors.set(color.product, color);\n    }\n\n    /** The paint for a node carrying `products`. */\n    paint(products: string[]): WpProductPaint {\n        if (products.length === 0) return new WpProductPaint(WpProductPaintKind.NONE, [], WpProductPainter.DARK_TEXT);\n        const on = products.filter((product: string): boolean => this.isOn(product));\n        if (on.length === 0) return new WpProductPaint(WpProductPaintKind.OFF, [], WpProductPainter.DARK_TEXT);\n        if (this.allOn() && this.legend.every((color: ProductColorJson): boolean => products.includes(color.product)))\n            return new WpProductPaint(WpProductPaintKind.SHARED, [], WpProductPainter.DARK_TEXT);\n        const colors = on.map((product: string): ProductColorJson => this.colors.get(product) as ProductColorJson);\n        if (colors.length === 1) return new WpProductPaint(WpProductPaintKind.SOLID, [colors[0].color], colors[0].fontColor);\n        return new WpProductPaint(\n            WpProductPaintKind.STRIPES,\n            colors.map((color: ProductColorJson): string => color.color),\n            WpProductPainter.DARK_TEXT,\n        );\n    }\n\n    /**\n     * The color a cross-product dependency is dashed in (#1204): the first product it crosses into\n     * that is ON; null draws it plain.\n     */\n    edgeColor(crossesInto: string[]): string | null {\n        const into = crossesInto.find((product: string): boolean => this.isOn(product));\n        return into === undefined ? null : (this.colors.get(into) as ProductColorJson).color;\n    }\n\n    /** A node's Product-mode statement. */\n    nodeDot(template: ProductTemplateJson, products: string[]): string {\n        const paint = this.paint(products);\n        if (template.kind === 'context') return this.context(template.head, paint);\n        const label = paint.fontColor === WpProductPainter.LIGHT_TEXT ? template.lightLabel : template.darkLabel;\n        return `${template.head}${this.attrs(paint)}, label=<${label}>];\\n`;\n    }\n\n    /** An edge's Product-mode statement: dashed in its ON target product's color, else plain. */\n    edgeDot(edge: RenderEdgeJson): string {\n        const color = this.edgeColor(edge.crossesInto);\n        if (color === null) return edge.dot;\n        return `${edge.dot.slice(0, -2)} [style=dashed, color=\"${color}\", penwidth=2];\\n`;\n    }\n\n    private isOn(product: string): boolean {\n        return this.on.has(product) && this.colors.has(product);\n    }\n\n    /** Every product is ON — of a legend listing two or more (a lone product is its own color). */\n    private allOn(): boolean {\n        return this.legend.length > 1 && this.legend.every((color: ProductColorJson): boolean => this.on.has(color.product));\n    }\n\n    private attrs(paint: WpProductPaint): string {\n        const dark = WpProductPainter.DARK_TEXT;\n        if (paint.kind === WpProductPaintKind.NONE)\n            return `style=\"filled,dashed\", fillcolor=\"${WpProductPainter.NONE_FILL}\", fontcolor=\"${dark}\", color=\"${WpProductPainter.NONE_BORDER}\", penwidth=1.5`;\n        if (paint.kind === WpProductPaintKind.OFF)\n            return `style=\"filled\", fillcolor=\"${WpProductPainter.OFF_FILL}\", fontcolor=\"${dark}\", color=\"${WpProductPainter.OFF_BORDER}\"`;\n        if (paint.kind === WpProductPaintKind.SHARED) return `style=\"filled\", fillcolor=\"${WpProductPainter.SHARED_FILL}\", fontcolor=\"${dark}\"`;\n        if (paint.kind === WpProductPaintKind.SOLID)\n            return `style=\"filled\", fillcolor=\"${paint.colors[0]}\", fontcolor=\"${paint.fontColor}\"`;\n        return `${this.stripes(paint.colors)}, fontcolor=\"${dark}\"`;\n    }\n\n    /** Equal vertical stripes, the last taking the remainder — the multi-runtime box's renderer. */\n    private stripes(colors: string[]): string {\n        const share = (1 / colors.length).toFixed(3);\n        const weighted = colors.map((color: string, index: number): string =>\n            index === colors.length - 1 ? color : `${color};${share}`,\n        );\n        return `style=\"striped\", fillcolor=\"${weighted.join(':')}\", class=\"${WpProductPainter.STRIPED_CLASS}\"`;\n    }\n\n    /**\n     * A queue, clock, datastore or vendor keeps its kind statement; only its fill changes. Graphviz\n     * cylinders cannot stripe, so several ON products are a gradient; no product is dashed.\n     */\n    private context(dot: string, paint: WpProductPaint): string {\n        const recolored = dot.replace(/fillcolor=\"[^\"]*\"/, `fillcolor=\"${this.contextFill(paint)}\"`);\n        return paint.kind === WpProductPaintKind.NONE ? recolored.replace(/style=\"[^\"]*\"/, 'style=\"filled,dashed\"') : recolored;\n    }\n\n    private contextFill(paint: WpProductPaint): string {\n        if (paint.kind === WpProductPaintKind.NONE) return WpProductPainter.NONE_FILL;\n        if (paint.kind === WpProductPaintKind.OFF) return WpProductPainter.OFF_FILL;\n        if (paint.kind === WpProductPaintKind.SHARED) return WpProductPainter.SHARED_FILL;\n        return paint.colors.join(':');\n    }\n}\n\n/** The Product legend's checkboxes (#1319): one per product, in the drawer AND the popped-out legend. */\nclass WpProductToggles {\n    /** The products the legend lists, in its order, once each. */\n    products(): string[] {\n        const order: string[] = [];\n        this.inputs().forEach((input: HTMLInputElement) => {\n            const product = input.dataset['wpProductToggle'] ?? '';\n            if (product !== '' && !order.includes(product)) order.push(product);\n        });\n        return order;\n    }\n\n    /** Each checkbox switches its product ON or OFF. */\n    wire(onChange: (product: string, on: boolean) => void): void {\n        this.inputs().forEach((input: HTMLInputElement) => {\n            input.addEventListener('change', () => onChange(input.dataset['wpProductToggle'] ?? '', input.checked));\n        });\n    }\n\n    /** Every copy of every checkbox shows the ON set. */\n    sync(on: ReadonlySet<string>): void {\n        this.inputs().forEach((input: HTMLInputElement) => {\n            input.checked = on.has(input.dataset['wpProductToggle'] ?? '');\n        });\n    }\n\n    /** A painter over the legend's products with their FIXED palette colors, for a snapshot of `on`. */\n    painter(palette: ProductColorJson[], on: ReadonlySet<string>): WpProductPainter {\n        const legend = this.products()\n            .map((product: string): ProductColorJson | undefined => palette.find((color: ProductColorJson): boolean => color.product === product))\n            .filter((color: ProductColorJson | undefined): color is ProductColorJson => color !== undefined);\n        return new WpProductPainter(legend, new Set(on));\n    }\n\n    private inputs(): NodeListOf<HTMLInputElement> {\n        return document.querySelectorAll<HTMLInputElement>('[data-wp-product-toggle]');\n    }\n}\n"]}

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

@@ -17,10 +17,14 @@
  *    between them. A service whose project carries no tag is in no product.
  *  - ProductPalette — the Product color mode's colors (#1244): eight fixed saturated colors, each
  *    product hashed (SHA-256 of its name) to a preferred one, with collisions resolved in sorted-name
- *    order. Both viewers build it over the FULL declared product set, so they agree. Neutral means
- *    shared by EVERY product; a dashed white box belongs to none.
+ *    order. Both viewers build it over the FULL declared product set, so they agree, and a color is
+ *    never reassigned when a product is toggled OFF.
+ *  - ProductTemplate — what a page needs to paint one box in the Product color mode (#1319). Each
+ *    product's legend row is a toggle and the page repaints in the browser from the ON set
+ *    (WpProductPainter, graph-product-paint.client.ts), so the box's product statement is computed
+ *    there, not here.
  *  - ProductBoundary — which dependency edges cross from one product into another (#1204), drawn
- *    dashed in the target product's color in the Product color mode.
+ *    dashed in the target product's color in the Product color mode while that product is ON.
  *
  * Membership is stable per checkout (it depends on tags only, never on a diff), so it is written into
  * the committed dependencies.json / runtime-dependencies.json rather than into a sidecar.
@@ -42,11 +46,50 @@ export declare class ProductPaletteSlot {
 }
 /** The eight product colors, indexed by slot. Distinct from every runtime and role color. */
 export declare const PRODUCT_PALETTE_SLOTS: readonly ProductPaletteSlot[];
-/** A box shared by EVERY product. */
+/** A box shared by EVERY product, drawn neutral only while every product is ON (#1319). */
 export declare const PRODUCT_SHARED_FILL = "#c9ced8";
 /** A box in no product: white, with a dashed border. */
 export declare const PRODUCT_NONE_FILL = "#ffffff";
 export declare const PRODUCT_NONE_BORDER = "#8a90a0";
+/**
+ * A box carrying only products switched OFF (#1319): light grey with a grey border, so it stays
+ * visible — hiding boxes is the Filter's job — and never reads as the neutral shared fill.
+ */
+export declare const PRODUCT_OFF_FILL = "#eef0f4";
+export declare const PRODUCT_OFF_BORDER = "#b4b9c4";
+/**
+ * How many products are ON when a page loads (#1319): the first ones in legend (sorted-name) order.
+ * Always this many, on every load — the selection is never persisted.
+ */
+export declare const PRODUCTS_ON_AT_LOAD = 2;
+/** Whether a ProductTemplate paints a styled box or restyles a contextual node's kind statement. */
+export declare enum ProductTemplateKind {
+    /** A project or service box: the page writes its whole statement. */
+    BOX = "box",
+    /** A runtime queue, clock, datastore or vendor: the page recolors its kind statement's fill. */
+    CONTEXT = "context"
+}
+/**
+ * What the page needs to write one node's Product-mode statement for any ON set (#1319). Data-only.
+ * A BOX statement is `head` + the paint's attributes + the label for its text color; a CONTEXT
+ * statement is `head` (the kind statement) with its fill replaced.
+ */
+export declare class ProductTemplate {
+    readonly kind: ProductTemplateKind;
+    /** BOX: `  "id" [`. CONTEXT: the node's whole kind statement. */
+    readonly head: string;
+    /** BOX: the HTML label written in dark text; '' for CONTEXT. */
+    readonly darkLabel: string;
+    /** BOX: the HTML label written in light text; '' for CONTEXT. */
+    readonly lightLabel: string;
+    constructor(kind: ProductTemplateKind, 
+    /** BOX: `  "id" [`. CONTEXT: the node's whole kind statement. */
+    head: string, 
+    /** BOX: the HTML label written in dark text; '' for CONTEXT. */
+    darkLabel: string, 
+    /** BOX: the HTML label written in light text; '' for CONTEXT. */
+    lightLabel: string);
+}
 export declare class ProductPalette {
     /** Every declared product, sorted, each with its color. */
     readonly colors: ProductColor[];
@@ -72,13 +115,18 @@ export declare class ProductPalette {
  * Where a dependency edge crosses a product boundary (#1204), for the Product color mode: an edge
  * A -> B crosses when B does not carry every product of A, and it is drawn dashed in the color of the
  * product it crosses INTO, so the boundaries read at a glance while same-product edges stay quiet.
+ * Since #1319 that is the first of those products that is ON; with none ON the edge draws plain.
  * Whether a crossing is ALLOWED is the product dependency matrix's call (product-dependencies.ts):
  * with `product-tags` ON, generation already refused every crossing the matrix does not allow, so
  * every crossing drawn is an allowed one.
  */
 export declare class ProductBoundary {
-    /** The product the edge crosses into, or null when the target carries every product of the source. */
-    crossedInto(from: readonly string[], to: readonly string[]): string | null;
+    /**
+     * The products the edge crosses into, in the target's order: the target's products its source
+     * lacks, else (a target narrower than its source) every product of the target. Empty when the
+     * target carries every product of the source. The page draws the edge in the first one that is ON.
+     */
+    crossedInto(from: readonly string[], to: readonly string[]): string[];
 }
 /**
  * The architecture graph's product membership: exactly each project's declared `product:` tags (#1216).

package/src/lib/graph-products.js

@@ -18,16 +18,20 @@
  *    between them. A service whose project carries no tag is in no product.
  *  - ProductPalette — the Product color mode's colors (#1244): eight fixed saturated colors, each
  *    product hashed (SHA-256 of its name) to a preferred one, with collisions resolved in sorted-name
- *    order. Both viewers build it over the FULL declared product set, so they agree. Neutral means
- *    shared by EVERY product; a dashed white box belongs to none.
+ *    order. Both viewers build it over the FULL declared product set, so they agree, and a color is
+ *    never reassigned when a product is toggled OFF.
+ *  - ProductTemplate — what a page needs to paint one box in the Product color mode (#1319). Each
+ *    product's legend row is a toggle and the page repaints in the browser from the ON set
+ *    (WpProductPainter, graph-product-paint.client.ts), so the box's product statement is computed
+ *    there, not here.
  *  - ProductBoundary — which dependency edges cross from one product into another (#1204), drawn
- *    dashed in the target product's color in the Product color mode.
+ *    dashed in the target product's color in the Product color mode while that product is ON.
  *
  * Membership is stable per checkout (it depends on tags only, never on a diff), so it is written into
  * the committed dependencies.json / runtime-dependencies.json rather than into a sidecar.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RuntimeProductMembership = exports.ProductMembership = exports.ProductBoundary = exports.ProductPalette = exports.PRODUCT_NONE_BORDER = exports.PRODUCT_NONE_FILL = exports.PRODUCT_SHARED_FILL = exports.PRODUCT_PALETTE_SLOTS = exports.ProductPaletteSlot = exports.ProductColor = void 0;
+exports.RuntimeProductMembership = exports.ProductMembership = exports.ProductBoundary = exports.ProductPalette = exports.ProductTemplate = exports.ProductTemplateKind = exports.PRODUCTS_ON_AT_LOAD = exports.PRODUCT_OFF_BORDER = exports.PRODUCT_OFF_FILL = exports.PRODUCT_NONE_BORDER = exports.PRODUCT_NONE_FILL = exports.PRODUCT_SHARED_FILL = exports.PRODUCT_PALETTE_SLOTS = exports.ProductPaletteSlot = exports.ProductColor = void 0;
 const node_crypto_1 = require("node:crypto");
 // The same two text colors graph-color-modes.ts writes on every fill. Spelled here rather than
 // imported because graph-color-modes.ts imports THIS file (for the palette), and a file-import cycle
@@ -67,11 +71,54 @@ exports.PRODUCT_PALETTE_SLOTS = [
     new ProductPaletteSlot('#8e5ea2', LIGHT_TEXT),
     new ProductPaletteSlot('#ff9da7', DARK_TEXT),
 ];
-/** A box shared by EVERY product. */
+/** A box shared by EVERY product, drawn neutral only while every product is ON (#1319). */
 exports.PRODUCT_SHARED_FILL = '#c9ced8';
 /** A box in no product: white, with a dashed border. */
 exports.PRODUCT_NONE_FILL = '#ffffff';
 exports.PRODUCT_NONE_BORDER = '#8a90a0';
+/**
+ * A box carrying only products switched OFF (#1319): light grey with a grey border, so it stays
+ * visible — hiding boxes is the Filter's job — and never reads as the neutral shared fill.
+ */
+exports.PRODUCT_OFF_FILL = '#eef0f4';
+exports.PRODUCT_OFF_BORDER = '#b4b9c4';
+/**
+ * How many products are ON when a page loads (#1319): the first ones in legend (sorted-name) order.
+ * Always this many, on every load — the selection is never persisted.
+ */
+exports.PRODUCTS_ON_AT_LOAD = 2;
+/** Whether a ProductTemplate paints a styled box or restyles a contextual node's kind statement. */
+var ProductTemplateKind;
+(function (ProductTemplateKind) {
+    /** A project or service box: the page writes its whole statement. */
+    ProductTemplateKind["BOX"] = "box";
+    /** A runtime queue, clock, datastore or vendor: the page recolors its kind statement's fill. */
+    ProductTemplateKind["CONTEXT"] = "context";
+})(ProductTemplateKind || (exports.ProductTemplateKind = ProductTemplateKind = {}));
+/**
+ * What the page needs to write one node's Product-mode statement for any ON set (#1319). Data-only.
+ * A BOX statement is `head` + the paint's attributes + the label for its text color; a CONTEXT
+ * statement is `head` (the kind statement) with its fill replaced.
+ */
+class ProductTemplate {
+    kind;
+    head;
+    darkLabel;
+    lightLabel;
+    constructor(kind, 
+    /** BOX: `  "id" [`. CONTEXT: the node's whole kind statement. */
+    head, 
+    /** BOX: the HTML label written in dark text; '' for CONTEXT. */
+    darkLabel, 
+    /** BOX: the HTML label written in light text; '' for CONTEXT. */
+    lightLabel) {
+        this.kind = kind;
+        this.head = head;
+        this.darkLabel = darkLabel;
+        this.lightLabel = lightLabel;
+    }
+}
+exports.ProductTemplate = ProductTemplate;
 class ProductPalette {
     /** Every declared product, sorted, each with its color. */
     colors;
@@ -136,18 +183,24 @@ exports.ProductPalette = ProductPalette;
  * Where a dependency edge crosses a product boundary (#1204), for the Product color mode: an edge
  * A -> B crosses when B does not carry every product of A, and it is drawn dashed in the color of the
  * product it crosses INTO, so the boundaries read at a glance while same-product edges stay quiet.
+ * Since #1319 that is the first of those products that is ON; with none ON the edge draws plain.
  * Whether a crossing is ALLOWED is the product dependency matrix's call (product-dependencies.ts):
  * with `product-tags` ON, generation already refused every crossing the matrix does not allow, so
  * every crossing drawn is an allowed one.
  */
 class ProductBoundary {
-    /** The product the edge crosses into, or null when the target carries every product of the source. */
+    /**
+     * The products the edge crosses into, in the target's order: the target's products its source
+     * lacks, else (a target narrower than its source) every product of the target. Empty when the
+     * target carries every product of the source. The page draws the edge in the first one that is ON.
+     */
     crossedInto(from, to) {
         if (from.length === 0 || to.length === 0)
-            return null;
+            return [];
         if (from.every((product) => to.includes(product)))
-            return null;
-        return to.find((product) => !from.includes(product)) ?? to[0];
+            return [];
+        const added = to.filter((product) => !from.includes(product));
+        return added.length > 0 ? added : [...to];
     }
 }
 exports.ProductBoundary = ProductBoundary;