@webpieces/nx-webpieces-rules 0.4.872 → 0.4.874

package/src/lib/graph-color-modes.js

@@ -1,17 +1,18 @@
 "use strict";
 /**
- * Graph color modes (#1155)
+ * Graph color modes (#1155, restyled by #1158)
  *
  * The architecture graph answers ONE question at a time instead of asking every box to encode two
  * (fill = framework AND border = role). Each box is emitted once per mode, so the page can switch
- * modes and re-render without regenerating anything:
+ * modes and re-render without regenerating anything. Every mode writes the SAME three lines on a box
+ * (level + name, role, every framework tag); only the color changes:
  *
- *  - RUNTIME      "where the code can run". Base runtimes are equal vertical stripes in the fixed
- *                 order browser | node | react-native; a specialization (angular/react inside
- *                 browser, express inside node) is an inset inside its base stripe. The dependency
- *                 rule becomes visual: a box may depend on a box carrying every color it has. The
- *                 name and meta sit on a light label PLATE across the middle, so they read on every
- *                 stripe combination while the stripes and insets stay visible above and below it.
+ *  - RUNTIME      "where the code can run". One runtime is a solid fill. One runtime plus a
+ *                 specialization (angular/react inside browser, express inside node) is NESTED: an
+ *                 outer frame in the base color around an inner rounded box in the specialization's
+ *                 color, carrying the text. Several runtimes are full-height vertical stripes in the
+ *                 fixed order browser | node | react-native, with the text written across them. The
+ *                 dependency rule becomes visual: a box may depend on a box carrying every color it has.
  *  - ARCHITECTURE "servers · clients · APIs". A solid fill by ROLE; framework color is not shown.
  *  - IMPACT       "what this branch touches". Projects owning a changed file are solid amber
  *                 ("touched"); the rest of nx's affected set is light amber ("affected": their ci
@@ -19,10 +20,10 @@
  *                 affected is light slate with a dashed border ("build input": compiled or restored
  *                 from cache, unchanged); everything else is grey. Which box is which is only known
  *                 per branch, so every box carries all four variants and the page picks one from the
- *                 sidecar (graph-impact.ts).
+ *                 sidecar (graph-impact.ts). The state is never written on the box: color + legend.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NodeModeStyler = exports.LegendFacts = exports.NodeModeDots = exports.NodeFacts = exports.LABEL_PLATE = exports.IMPACT_UNTOUCHED = exports.IMPACT_BUILD_INPUT_BORDER = exports.IMPACT_BUILD_INPUT = exports.IMPACT_AFFECTED = exports.IMPACT_TOUCHED = exports.ROLE_STYLES = exports.RoleStyle = exports.NO_RUNTIME_COLOR = exports.BASE_ORDER = exports.FRAMEWORK_STYLES = exports.FrameworkStyle = exports.GRAPH_MODES = exports.ModeInfo = exports.GraphMode = void 0;
+exports.NodeModeStyler = exports.LegendFacts = exports.NodeModeDots = exports.NodeFacts = exports.IMPACT_UNTOUCHED = exports.IMPACT_BUILD_INPUT_BORDER = exports.IMPACT_BUILD_INPUT = exports.IMPACT_AFFECTED = exports.IMPACT_TOUCHED = exports.ROLE_STYLES = exports.RoleStyle = exports.STRIPED_CLASS = exports.NO_RUNTIME_COLOR = exports.FRAMEWORK_ORDER = exports.BASE_ORDER = exports.FRAMEWORK_STYLES = exports.FrameworkStyle = exports.LIGHT_TEXT = exports.DARK_TEXT = exports.GRAPH_MODES = exports.ModeInfo = exports.GraphMode = void 0;
 const rules_sdk_1 = require("@webpieces/rules-sdk");
 const dot_syntax_1 = require("./dot-syntax");
 var GraphMode;
@@ -31,7 +32,7 @@ var GraphMode;
     GraphMode["ARCHITECTURE"] = "architecture";
     GraphMode["IMPACT"] = "impact";
 })(GraphMode || (exports.GraphMode = GraphMode = {}));
-/** One selectable mode as the drawer and the node menu show it. */
+/** One selectable mode as the drawer's Color-by pulldown shows it. */
 class ModeInfo {
     mode;
     name;
@@ -49,16 +50,25 @@ exports.GRAPH_MODES = [
     new ModeInfo(GraphMode.ARCHITECTURE, 'Architecture', 'servers · clients · APIs'),
     new ModeInfo(GraphMode.IMPACT, 'Impact', 'what this branch touches'),
 ];
-/** A framework value's color and the BASE runtime it is drawn inside (itself, for a base). */
+/** Text on a light fill. */
+exports.DARK_TEXT = '#1a1c22';
+/** Text on a dark fill. */
+exports.LIGHT_TEXT = '#ffffff';
+/**
+ * A framework value's color, the text color that reads on it, and the BASE runtime it is drawn
+ * inside (itself, for a base).
+ */
 class FrameworkStyle {
     framework;
     base;
     color;
+    fontColor;
     description;
-    constructor(framework, base, color, description) {
+    constructor(framework, base, color, fontColor, description) {
         this.framework = framework;
         this.base = base;
         this.color = color;
+        this.fontColor = fontColor;
         this.description = description;
     }
     isBase() {
@@ -69,20 +79,38 @@ exports.FrameworkStyle = FrameworkStyle;
 /**
  * Keyed by the shared vocabulary, so a framework added to KNOWN_FRAMEWORKS without a color here is a
  * COMPILE error — not a box silently painted grey and missing from the legend, which is exactly how
- * react-native shipped (#1155).
+ * react-native shipped (#1155). Every base is mid-light, so dark text reads on every stripe.
  */
 exports.FRAMEWORK_STYLES = {
-    browser: new FrameworkStyle('browser', 'browser', '#b9a7e6', 'browser base runtime'),
-    node: new FrameworkStyle('node', 'node', '#ffe07a', 'node base runtime'),
-    'react-native': new FrameworkStyle('react-native', 'react-native', '#7fd1c4', 'its own runtime, not a browser'),
-    angular: new FrameworkStyle('angular', 'browser', '#f59ab9', 'inside browser'),
-    react: new FrameworkStyle('react', 'browser', '#8fd3f7', 'inside browser'),
-    express: new FrameworkStyle('express', 'node', '#9fd8a3', 'inside node'),
+    browser: new FrameworkStyle('browser', 'browser', '#7d8cf2', exports.DARK_TEXT, 'browser base runtime'),
+    node: new FrameworkStyle('node', 'node', '#6fcf8a', exports.DARK_TEXT, 'node base runtime'),
+    'react-native': new FrameworkStyle('react-native', 'react-native', '#34b8a6', exports.DARK_TEXT, 'its own runtime, not a browser'),
+    angular: new FrameworkStyle('angular', 'browser', '#c8243f', exports.LIGHT_TEXT, 'inside browser'),
+    react: new FrameworkStyle('react', 'browser', '#7fd8ff', exports.DARK_TEXT, 'inside browser'),
+    express: new FrameworkStyle('express', 'node', '#2e7d4f', exports.LIGHT_TEXT, 'inside node'),
 };
 /** Stripe order, left to right. Fixed, so the same set always reads the same way. */
 exports.BASE_ORDER = ['browser', 'node', 'react-native'];
+/**
+ * The Filter popover's Runtime chips, and the order line 3 of a box lists framework tags in: the
+ * bases first, then the specializations.
+ */
+exports.FRAMEWORK_ORDER = [
+    'browser',
+    'node',
+    'react-native',
+    'angular',
+    'react',
+    'express',
+];
 /** A box with no known framework tag. */
 exports.NO_RUNTIME_COLOR = '#e4e6ec';
+/** The class Graphviz stamps on a multi-runtime box's `<g>`: its outline is its LAST shape. */
+exports.STRIPED_CLASS = 'wp-striped';
+/** Margin of base color around a specialization's inner box. */
+const NEST_PAD = 5;
+/** Padding between the inner box's edge and its text. */
+const INNER_PAD = 6;
 /** A role's solid fill and the text color that stays readable on it. */
 class RoleStyle {
     role;
@@ -97,16 +125,19 @@ class RoleStyle {
     }
 }
 exports.RoleStyle = RoleStyle;
-/** Every role role-resolver knows, in legend order (runnable things first). */
+/**
+ * Every role role-resolver knows, in legend order (runnable things first) — also the Filter popover's
+ * Role chips. `bundle` is indigo so no box color equals the page's violet accent.
+ */
 exports.ROLE_STYLES = [
-    new RoleStyle('server', '#4caf50', '#ffffff', 'runnable server'),
-    new RoleStyle('client', '#e5533d', '#ffffff', 'browser or mobile client app'),
-    new RoleStyle('app', '#1e88e5', '#ffffff', 'runnable non-HTTP app'),
-    new RoleStyle('bundle', '#7b3fa6', '#ffffff', 'bundles several apps'),
-    new RoleStyle('api-lib', '#f08a24', '#1a1c22', 'contract + DTOs'),
-    new RoleStyle('api-client', '#1a9aa6', '#ffffff', 'contract + SDK implementation'),
-    new RoleStyle('designed-lib', '#7d8597', '#ffffff', 'library with a generated design'),
-    new RoleStyle('lib', '#d7dae2', '#1a1c22', 'plain library'),
+    new RoleStyle('server', '#4caf50', exports.LIGHT_TEXT, 'runnable server'),
+    new RoleStyle('client', '#e5533d', exports.LIGHT_TEXT, 'browser or mobile client app'),
+    new RoleStyle('app', '#1e88e5', exports.LIGHT_TEXT, 'runnable non-HTTP app'),
+    new RoleStyle('bundle', '#4b44c8', exports.LIGHT_TEXT, 'bundles several apps'),
+    new RoleStyle('api-lib', '#f08a24', exports.DARK_TEXT, 'contract + DTOs'),
+    new RoleStyle('api-client', '#1a9aa6', exports.LIGHT_TEXT, 'contract + SDK implementation'),
+    new RoleStyle('designed-lib', '#7d8597', exports.LIGHT_TEXT, 'library with a generated design'),
+    new RoleStyle('lib', '#d7dae2', exports.DARK_TEXT, 'plain library'),
 ];
 /** The four impact shades (graph-impact.ts decides which box gets which). */
 exports.IMPACT_TOUCHED = '#f5a524';
@@ -114,19 +145,8 @@ exports.IMPACT_AFFECTED = '#fde3b0';
 exports.IMPACT_BUILD_INPUT = '#e3e9f2';
 exports.IMPACT_BUILD_INPUT_BORDER = '#7c8aa3';
 exports.IMPACT_UNTOUCHED = '#eef0f4';
-/** The light plate the name and meta sit on, across every stripe of a multi-color box. */
-exports.LABEL_PLATE = '#fbfbfd';
-/** Height of each stripe band above and below the plate. */
-const STRIPE_HEIGHT = 16;
-/** Margin of base color around a specialization's inset (inside one stripe band). */
-const INSET_PAD = 4;
-/** Padding around the text on the plate. */
-const PLATE_PAD = 4;
-/** No stripe narrower than this, however short the name. */
-const MIN_STRIPE_WIDTH = 28;
-/** Rough Arial 14 advance, used only to size the stripes so they span the text evenly. */
-const CHAR_WIDTH = 7.5;
-/** What a box's per-mode rendering is computed from. */
+const IMPACT_UNTOUCHED_TEXT = '#6b7180';
+/** What a box's per-mode rendering — and the page's Filter — is computed from. */
 class NodeFacts {
     nodeId;
     shortName;
@@ -204,7 +224,7 @@ class NodeModeStyler {
         return undefined;
     }
     dots(facts) {
-        return new NodeModeDots(this.runtime(facts), this.statement(facts, this.architectureAttrs(facts), this.plainLabel(facts, this.envMeta(facts))), this.statement(facts, `style="filled", fillcolor="${exports.IMPACT_TOUCHED}"`, this.plainLabel(facts, 'touched')), this.statement(facts, `style="filled", fillcolor="${exports.IMPACT_AFFECTED}", color="${exports.IMPACT_TOUCHED}", penwidth=2`, this.plainLabel(facts, 'affected')), this.statement(facts, `style="filled,dashed", fillcolor="${exports.IMPACT_BUILD_INPUT}", color="${exports.IMPACT_BUILD_INPUT_BORDER}", penwidth=1.5`, this.plainLabel(facts, 'build input')), this.statement(facts, `style="filled", fillcolor="${exports.IMPACT_UNTOUCHED}", color="#b4b9c4", fontcolor="#6b7180"`, this.plainLabel(facts, `L${facts.level}`)));
+        return new NodeModeDots(this.runtime(facts), this.plain(facts, this.roleStyle(facts.role).fill, this.roleStyle(facts.role).fontColor, ''), this.plain(facts, exports.IMPACT_TOUCHED, exports.DARK_TEXT, ''), this.plain(facts, exports.IMPACT_AFFECTED, exports.DARK_TEXT, `, color="${exports.IMPACT_TOUCHED}", penwidth=2`), this.plain(facts, exports.IMPACT_BUILD_INPUT, exports.DARK_TEXT, `, color="${exports.IMPACT_BUILD_INPUT_BORDER}", penwidth=1.5`, 'filled,dashed'), this.plain(facts, exports.IMPACT_UNTOUCHED, IMPACT_UNTOUCHED_TEXT, ', color="#b4b9c4"'));
     }
     /** Fold one drawn box into the legend facts. */
     record(legend, facts) {
@@ -221,40 +241,25 @@ class NodeModeStyler {
         if (bases.length === 0)
             legend.noRuntime = true;
     }
-    statement(facts, attrs, label) {
-        return `  "${(0, dot_syntax_1.dotValue)(facts.nodeId)}" [${attrs}, ${label}];\n`;
-    }
-    plainLabel(facts, meta) {
-        return `label="${(0, dot_syntax_1.dotValue)(facts.shortName)}\\n${(0, dot_syntax_1.dotValue)(meta)}"`;
-    }
-    runtimeMeta(facts) {
-        return `L${facts.level} · ${facts.role}`;
-    }
-    envMeta(facts) {
-        const envs = facts.frameworks.length === 0 ? 'no framework tag' : facts.frameworks.join('+');
-        return `L${facts.level} · ${envs}`;
-    }
-    architectureAttrs(facts) {
-        const style = this.roleStyle(facts.role);
-        return `style="filled", fillcolor="${style.fill}", fontcolor="${style.fontColor}"`;
+    /**
+     * Line 3 of every box: every framework tag, bases before specializations, any tag outside the
+     * shared vocabulary last (it still runs somewhere somebody declared).
+     */
+    frameworkLine(frameworks) {
+        if (frameworks.length === 0)
+            return 'no framework tag';
+        const known = exports.FRAMEWORK_ORDER.filter((framework) => frameworks.includes(framework));
+        const unknown = frameworks.filter((framework) => this.styleOf(framework) === undefined);
+        return [...known, ...unknown].join(' · ');
     }
     /**
-     * Runtime mode. A box in ONE base runtime with no specialization is a plain fill — its dark text
-     * reads on any of the pastel base colors. Every other box (several runtimes, or a specialization)
-     * is an HTML-like table of three rows: a band of equal stripes, a light PLATE carrying the name and
-     * meta across all of them, and the same stripes again. The stripes and insets stay visible above
-     * and below the text, and the text never straddles two colors.
+     * The three lines, identical in every mode: `L3  name` (level dimmed, name bold), the role, and
+     * the framework tags. The level is dimmed by giving its text color an alpha channel, which
+     * Graphviz writes as `fill-opacity`, so it dims on any fill.
      */
-    runtime(facts) {
-        const bases = this.bases(facts.frameworks);
-        const meta = this.runtimeMeta(facts);
-        if (bases.length === 0)
-            return this.statement(facts, `style="filled", fillcolor="${exports.NO_RUNTIME_COLOR}"`, this.plainLabel(facts, meta));
-        const insets = bases.map((base) => this.specialization(base, facts.frameworks));
-        const plain = insets.every((inset) => inset === undefined);
-        if (bases.length === 1 && plain)
-            return this.statement(facts, this.stripeAttrs(bases), this.plainLabel(facts, meta));
-        return this.statement(facts, `style="filled", fillcolor="${exports.LABEL_PLATE}", margin=0`, `label=<${this.plateTable(facts, bases, insets, meta)}>`);
+    labelText(facts, fontColor) {
+        return (`<FONT COLOR="${fontColor}99">L${facts.level}</FONT>&#160;&#160;<B>${(0, dot_syntax_1.htmlLabelText)(facts.shortName)}</B>` +
+            `<BR/>${(0, dot_syntax_1.htmlLabelText)(facts.role)}<BR/>${(0, dot_syntax_1.htmlLabelText)(this.frameworkLine(facts.frameworks))}`);
     }
     /** `filled` for one runtime; equal `striped` weights for several (the last takes the remainder). */
     stripeAttrs(bases) {
@@ -263,36 +268,42 @@ class NodeModeStyler {
             return `style="filled", fillcolor="${colors[0]}"`;
         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(':')}"`;
+        return `style="striped", fillcolor="${weighted.join(':')}", class="${exports.STRIPED_CLASS}"`;
+    }
+    statement(facts, attrs, label) {
+        return `  "${(0, dot_syntax_1.dotValue)(facts.nodeId)}" [${attrs}, label=<${label}>];\n`;
+    }
+    /** A solid fill, the three lines on it. `extra` carries border attributes. */
+    plain(facts, fill, fontColor, extra, style = 'filled') {
+        return this.statement(facts, `style="${style}", fillcolor="${fill}", fontcolor="${fontColor}"${extra}`, this.labelText(facts, fontColor));
     }
     /**
-     * Stripe band / plate / stripe band. Every stripe cell asks for the same minimum width (an
-     * estimate of the text's width split evenly), so the stripes come out equal and the plate spans
-     * exactly their total.
+     * Runtime mode. No runtime, or one runtime with no specialization: a solid fill. One runtime with a
+     * specialization: NESTED. Several runtimes: full-height stripes with the text across them (a
+     * specialization on such a box shows in line 3 only).
      */
-    plateTable(facts, bases, insets, meta) {
-        const chars = Math.max(facts.shortName.length, meta.length);
-        const textWidth = Math.ceil(chars * CHAR_WIDTH) + 2 * PLATE_PAD;
-        const stripeWidth = Math.max(MIN_STRIPE_WIDTH, Math.ceil(textWidth / bases.length));
-        const band = bases
-            .map((base, index) => this.stripeCell(exports.FRAMEWORK_STYLES[base].color, insets[index], stripeWidth))
-            .join('');
-        const text = `${(0, dot_syntax_1.htmlLabelText)(facts.shortName)}<BR/>${(0, dot_syntax_1.htmlLabelText)(meta)}`;
-        return ('<TABLE BORDER="0" CELLBORDER="0" CELLSPACING="0" CELLPADDING="0">' +
-            `<TR>${band}</TR>` +
-            `<TR><TD COLSPAN="${bases.length}" BGCOLOR="${exports.LABEL_PLATE}" CELLPADDING="${PLATE_PAD}">${text}</TD></TR>` +
-            `<TR>${band}</TR>` +
-            '</TABLE>');
+    runtime(facts) {
+        const bases = this.bases(facts.frameworks);
+        if (bases.length === 0)
+            return this.plain(facts, exports.NO_RUNTIME_COLOR, exports.DARK_TEXT, '');
+        if (bases.length > 1)
+            return this.statement(facts, `${this.stripeAttrs(bases)}, fontcolor="${exports.DARK_TEXT}"`, this.labelText(facts, exports.DARK_TEXT));
+        const base = exports.FRAMEWORK_STYLES[bases[0]];
+        const inner = this.specialization(bases[0], facts.frameworks);
+        if (inner === undefined)
+            return this.plain(facts, base.color, base.fontColor, '');
+        return this.statement(facts, `style="filled", fillcolor="${base.color}", fontcolor="${inner.fontColor}", margin=0`, this.nestedTable(base.color, inner, this.labelText(facts, inner.fontColor)));
     }
-    /** One stripe of a band: the base color, with its specialization inset inside a margin of it. */
-    stripeCell(base, inset, width) {
-        if (inset === undefined)
-            return `<TD BGCOLOR="${base}" WIDTH="${width}" HEIGHT="${STRIPE_HEIGHT}"></TD>`;
-        const innerWidth = width - 2 * INSET_PAD;
-        const innerHeight = STRIPE_HEIGHT - 2 * INSET_PAD;
-        return (`<TD BGCOLOR="${base}" CELLPADDING="${INSET_PAD}">` +
-            `<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="${inset.color}" STYLE="rounded">` +
-            `<TR><TD WIDTH="${innerWidth}" HEIGHT="${innerHeight}"></TD></TR></TABLE></TD>`);
+    /**
+     * An outer cell in the base color whose padding is the visible frame, holding an inner ROUNDED
+     * table in the specialization's color that carries the text. The node's own polygon stays its
+     * FIRST shape, so the hover glow and the lock outline land on the outer box only.
+     */
+    nestedTable(base, inner, text) {
+        return ('<TABLE BORDER="0" CELLBORDER="0" CELLSPACING="0" CELLPADDING="0">' +
+            `<TR><TD BGCOLOR="${base}" CELLPADDING="${NEST_PAD}">` +
+            `<TABLE BORDER="0" CELLBORDER="0" CELLSPACING="0" CELLPADDING="${INNER_PAD}" BGCOLOR="${inner.color}" STYLE="rounded">` +
+            `<TR><TD>${text}</TD></TR></TABLE></TD></TR></TABLE>`);
     }
 }
 exports.NodeModeStyler = NodeModeStyler;

package/src/lib/graph-color-modes.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-color-modes.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-color-modes.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Graph color modes (#1155)\n *\n * The architecture graph answers ONE question at a time instead of asking every box to encode two\n * (fill = framework AND border = role). Each box is emitted once per mode, so the page can switch\n * modes and re-render without regenerating anything:\n *\n *  - RUNTIME      \"where the code can run\". Base runtimes are equal vertical stripes in the fixed\n *                 order browser | node | react-native; a specialization (angular/react inside\n *                 browser, express inside node) is an inset inside its base stripe. The dependency\n *                 rule becomes visual: a box may depend on a box carrying every color it has. The\n *                 name and meta sit on a light label PLATE across the middle, so they read on every\n *                 stripe combination while the stripes and insets stay visible above and below it.\n *  - ARCHITECTURE \"servers · clients · APIs\". A solid fill by ROLE; framework color is not shown.\n *  - IMPACT       \"what this branch touches\". Projects owning a changed file are solid amber\n *                 (\"touched\"); the rest of nx's affected set is light amber (\"affected\": their ci\n *                 re-runs); every transitive dependency of the affected set that is not itself\n *                 affected is light slate with a dashed border (\"build input\": compiled or restored\n *                 from cache, unchanged); everything else is grey. Which box is which is only known\n *                 per branch, so every box carries all four variants and the page picks one from the\n *                 sidecar (graph-impact.ts).\n */\n\nimport { KNOWN_FRAMEWORKS, KnownFramework } from '@webpieces/rules-sdk';\nimport { dotValue, htmlLabelText } from './dot-syntax';\n\nexport enum GraphMode {\n    RUNTIME = 'runtime',\n    ARCHITECTURE = 'architecture',\n    IMPACT = 'impact',\n}\n\n/** One selectable mode as the drawer and the node menu show it. */\nexport class ModeInfo {\n    constructor(\n        public readonly mode: GraphMode,\n        public readonly name: string,\n        public readonly subtitle: string,\n    ) {}\n}\n\n/** In key order: `1` selects the first, `2` the second, `3` the third. */\nexport const GRAPH_MODES: readonly ModeInfo[] = [\n    new ModeInfo(GraphMode.RUNTIME, 'Runtime', 'where the code can run'),\n    new ModeInfo(GraphMode.ARCHITECTURE, 'Architecture', 'servers · clients · APIs'),\n    new ModeInfo(GraphMode.IMPACT, 'Impact', 'what this branch touches'),\n];\n\n/** A framework value's color and the BASE runtime it is drawn inside (itself, for a base). */\nexport class FrameworkStyle {\n    constructor(\n        public readonly framework: KnownFramework,\n        public readonly base: KnownFramework,\n        public readonly color: string,\n        public readonly description: string,\n    ) {}\n\n    isBase(): boolean {\n        return this.framework === this.base;\n    }\n}\n\n/**\n * Keyed by the shared vocabulary, so a framework added to KNOWN_FRAMEWORKS without a color here is a\n * COMPILE error — not a box silently painted grey and missing from the legend, which is exactly how\n * react-native shipped (#1155).\n */\nexport const FRAMEWORK_STYLES: Record<KnownFramework, FrameworkStyle> = {\n    browser: new FrameworkStyle('browser', 'browser', '#b9a7e6', 'browser base runtime'),\n    node: new FrameworkStyle('node', 'node', '#ffe07a', 'node base runtime'),\n    'react-native': new FrameworkStyle(\n        'react-native',\n        'react-native',\n        '#7fd1c4',\n        'its own runtime, not a browser',\n    ),\n    angular: new FrameworkStyle('angular', 'browser', '#f59ab9', 'inside browser'),\n    react: new FrameworkStyle('react', 'browser', '#8fd3f7', 'inside browser'),\n    express: new FrameworkStyle('express', 'node', '#9fd8a3', 'inside node'),\n};\n\n/** Stripe order, left to right. Fixed, so the same set always reads the same way. */\nexport const BASE_ORDER: readonly KnownFramework[] = ['browser', 'node', 'react-native'];\n\n/** A box with no known framework tag. */\nexport const NO_RUNTIME_COLOR = '#e4e6ec';\n\n/** A role's solid fill and the text color that stays readable on it. */\nexport class RoleStyle {\n    constructor(\n        public readonly role: string,\n        public readonly fill: string,\n        public readonly fontColor: string,\n        public readonly description: string,\n    ) {}\n}\n\n/** Every role role-resolver knows, in legend order (runnable things first). */\nexport const ROLE_STYLES: readonly RoleStyle[] = [\n    new RoleStyle('server', '#4caf50', '#ffffff', 'runnable server'),\n    new RoleStyle('client', '#e5533d', '#ffffff', 'browser or mobile client app'),\n    new RoleStyle('app', '#1e88e5', '#ffffff', 'runnable non-HTTP app'),\n    new RoleStyle('bundle', '#7b3fa6', '#ffffff', 'bundles several apps'),\n    new RoleStyle('api-lib', '#f08a24', '#1a1c22', 'contract + DTOs'),\n    new RoleStyle('api-client', '#1a9aa6', '#ffffff', 'contract + SDK implementation'),\n    new RoleStyle('designed-lib', '#7d8597', '#ffffff', 'library with a generated design'),\n    new RoleStyle('lib', '#d7dae2', '#1a1c22', 'plain library'),\n];\n\n/** The four impact shades (graph-impact.ts decides which box gets which). */\nexport const IMPACT_TOUCHED = '#f5a524';\nexport const IMPACT_AFFECTED = '#fde3b0';\nexport const IMPACT_BUILD_INPUT = '#e3e9f2';\nexport const IMPACT_BUILD_INPUT_BORDER = '#7c8aa3';\nexport const IMPACT_UNTOUCHED = '#eef0f4';\n\n/** The light plate the name and meta sit on, across every stripe of a multi-color box. */\nexport const LABEL_PLATE = '#fbfbfd';\n/** Height of each stripe band above and below the plate. */\nconst STRIPE_HEIGHT = 16;\n/** Margin of base color around a specialization's inset (inside one stripe band). */\nconst INSET_PAD = 4;\n/** Padding around the text on the plate. */\nconst PLATE_PAD = 4;\n/** No stripe narrower than this, however short the name. */\nconst MIN_STRIPE_WIDTH = 28;\n/** Rough Arial 14 advance, used only to size the stripes so they span the text evenly. */\nconst CHAR_WIDTH = 7.5;\n\n/** What a box's per-mode rendering is computed from. */\nexport class NodeFacts {\n    constructor(\n        public readonly nodeId: string,\n        public readonly shortName: string,\n        public readonly level: number,\n        public readonly role: string,\n        public readonly frameworks: string[],\n    ) {}\n}\n\n/** One box's DOT statement for every mode (and for each impact state). */\nexport class NodeModeDots {\n    constructor(\n        public readonly runtime: string,\n        public readonly architecture: string,\n        public readonly touched: string,\n        public readonly affected: string,\n        public readonly buildInput: string,\n        public readonly untouched: string,\n    ) {}\n}\n\n/** Which colors and roles the drawn projects actually use, so the legend lists exactly those. */\nexport class LegendFacts {\n    frameworks: string[] = [];\n    roles: string[] = [];\n    multiRuntime = false;\n    noRuntime = false;\n}\n\nexport class NodeModeStyler {\n    styleOf(framework: string): FrameworkStyle | undefined {\n        if (!(KNOWN_FRAMEWORKS as readonly string[]).includes(framework)) return undefined;\n        return FRAMEWORK_STYLES[framework as KnownFramework];\n    }\n\n    roleStyle(role: string): RoleStyle {\n        const style = ROLE_STYLES.find((candidate: RoleStyle): boolean => candidate.role === role);\n        return style ?? (ROLE_STYLES.find((s: RoleStyle): boolean => s.role === 'lib') as RoleStyle);\n    }\n\n    /** Every role the renderer styles; a spec asserts this covers role-resolver's KNOWN_ROLES. */\n    styledRoles(): string[] {\n        return ROLE_STYLES.map((style: RoleStyle): string => style.role);\n    }\n\n    /** The base runtimes of a framework set, in stripe order (a specialization implies its base). */\n    bases(frameworks: string[]): KnownFramework[] {\n        const present = new Set<KnownFramework>();\n        for (const framework of frameworks) {\n            const style = this.styleOf(framework);\n            if (style !== undefined) present.add(style.base);\n        }\n        return BASE_ORDER.filter((base: KnownFramework): boolean => present.has(base));\n    }\n\n    /** The specialization drawn inside `base`, if the set carries one. */\n    specialization(base: KnownFramework, frameworks: string[]): FrameworkStyle | undefined {\n        for (const framework of KNOWN_FRAMEWORKS) {\n            const style = FRAMEWORK_STYLES[framework];\n            if (style.isBase() || style.base !== base) continue;\n            if (frameworks.includes(framework)) return style;\n        }\n        return undefined;\n    }\n\n    dots(facts: NodeFacts): NodeModeDots {\n        return new NodeModeDots(\n            this.runtime(facts),\n            this.statement(facts, this.architectureAttrs(facts), this.plainLabel(facts, this.envMeta(facts))),\n            this.statement(facts, `style=\"filled\", fillcolor=\"${IMPACT_TOUCHED}\"`, this.plainLabel(facts, 'touched')),\n            this.statement(\n                facts,\n                `style=\"filled\", fillcolor=\"${IMPACT_AFFECTED}\", color=\"${IMPACT_TOUCHED}\", penwidth=2`,\n                this.plainLabel(facts, 'affected'),\n            ),\n            this.statement(\n                facts,\n                `style=\"filled,dashed\", fillcolor=\"${IMPACT_BUILD_INPUT}\", color=\"${IMPACT_BUILD_INPUT_BORDER}\", penwidth=1.5`,\n                this.plainLabel(facts, 'build input'),\n            ),\n            this.statement(\n                facts,\n                `style=\"filled\", fillcolor=\"${IMPACT_UNTOUCHED}\", color=\"#b4b9c4\", fontcolor=\"#6b7180\"`,\n                this.plainLabel(facts, `L${facts.level}`),\n            ),\n        );\n    }\n\n    /** Fold one drawn box into the legend facts. */\n    record(legend: LegendFacts, facts: NodeFacts): void {\n        for (const framework of facts.frameworks) {\n            if (this.styleOf(framework) !== undefined && !legend.frameworks.includes(framework))\n                legend.frameworks.push(framework);\n        }\n        const role = this.roleStyle(facts.role).role;\n        if (!legend.roles.includes(role)) legend.roles.push(role);\n        const bases = this.bases(facts.frameworks);\n        if (bases.length > 1) legend.multiRuntime = true;\n        if (bases.length === 0) legend.noRuntime = true;\n    }\n\n    private statement(facts: NodeFacts, attrs: string, label: string): string {\n        return `  \"${dotValue(facts.nodeId)}\" [${attrs}, ${label}];\\n`;\n    }\n\n    private plainLabel(facts: NodeFacts, meta: string): string {\n        return `label=\"${dotValue(facts.shortName)}\\\\n${dotValue(meta)}\"`;\n    }\n\n    private runtimeMeta(facts: NodeFacts): string {\n        return `L${facts.level} · ${facts.role}`;\n    }\n\n    private envMeta(facts: NodeFacts): string {\n        const envs = facts.frameworks.length === 0 ? 'no framework tag' : facts.frameworks.join('+');\n        return `L${facts.level} · ${envs}`;\n    }\n\n    private architectureAttrs(facts: NodeFacts): string {\n        const style = this.roleStyle(facts.role);\n        return `style=\"filled\", fillcolor=\"${style.fill}\", fontcolor=\"${style.fontColor}\"`;\n    }\n\n    /**\n     * Runtime mode. A box in ONE base runtime with no specialization is a plain fill — its dark text\n     * reads on any of the pastel base colors. Every other box (several runtimes, or a specialization)\n     * is an HTML-like table of three rows: a band of equal stripes, a light PLATE carrying the name and\n     * meta across all of them, and the same stripes again. The stripes and insets stay visible above\n     * and below the text, and the text never straddles two colors.\n     */\n    private runtime(facts: NodeFacts): string {\n        const bases = this.bases(facts.frameworks);\n        const meta = this.runtimeMeta(facts);\n        if (bases.length === 0)\n            return this.statement(facts, `style=\"filled\", fillcolor=\"${NO_RUNTIME_COLOR}\"`, this.plainLabel(facts, meta));\n        const insets = bases.map((base: KnownFramework) => this.specialization(base, facts.frameworks));\n        const plain = insets.every((inset: FrameworkStyle | undefined): boolean => inset === undefined);\n        if (bases.length === 1 && plain)\n            return this.statement(facts, this.stripeAttrs(bases), this.plainLabel(facts, meta));\n        return this.statement(\n            facts,\n            `style=\"filled\", fillcolor=\"${LABEL_PLATE}\", margin=0`,\n            `label=<${this.plateTable(facts, bases, insets, meta)}>`,\n        );\n    }\n\n    /** `filled` for one runtime; equal `striped` weights for several (the last takes the remainder). */\n    stripeAttrs(bases: KnownFramework[]): string {\n        const colors = bases.map((base: KnownFramework): string => FRAMEWORK_STYLES[base].color);\n        if (colors.length === 1) return `style=\"filled\", fillcolor=\"${colors[0]}\"`;\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(':')}\"`;\n    }\n\n    /**\n     * Stripe band / plate / stripe band. Every stripe cell asks for the same minimum width (an\n     * estimate of the text's width split evenly), so the stripes come out equal and the plate spans\n     * exactly their total.\n     */\n    private plateTable(\n        facts: NodeFacts,\n        bases: KnownFramework[],\n        insets: (FrameworkStyle | undefined)[],\n        meta: string,\n    ): string {\n        const chars = Math.max(facts.shortName.length, meta.length);\n        const textWidth = Math.ceil(chars * CHAR_WIDTH) + 2 * PLATE_PAD;\n        const stripeWidth = Math.max(MIN_STRIPE_WIDTH, Math.ceil(textWidth / bases.length));\n        const band = bases\n            .map((base: KnownFramework, index: number): string =>\n                this.stripeCell(FRAMEWORK_STYLES[base].color, insets[index], stripeWidth),\n            )\n            .join('');\n        const text = `${htmlLabelText(facts.shortName)}<BR/>${htmlLabelText(meta)}`;\n        return (\n            '<TABLE BORDER=\"0\" CELLBORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"0\">' +\n            `<TR>${band}</TR>` +\n            `<TR><TD COLSPAN=\"${bases.length}\" BGCOLOR=\"${LABEL_PLATE}\" CELLPADDING=\"${PLATE_PAD}\">${text}</TD></TR>` +\n            `<TR>${band}</TR>` +\n            '</TABLE>'\n        );\n    }\n\n    /** One stripe of a band: the base color, with its specialization inset inside a margin of it. */\n    private stripeCell(base: string, inset: FrameworkStyle | undefined, width: number): string {\n        if (inset === undefined) return `<TD BGCOLOR=\"${base}\" WIDTH=\"${width}\" HEIGHT=\"${STRIPE_HEIGHT}\"></TD>`;\n        const innerWidth = width - 2 * INSET_PAD;\n        const innerHeight = STRIPE_HEIGHT - 2 * INSET_PAD;\n        return (\n            `<TD BGCOLOR=\"${base}\" CELLPADDING=\"${INSET_PAD}\">` +\n            `<TABLE BORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"0\" BGCOLOR=\"${inset.color}\" STYLE=\"rounded\">` +\n            `<TR><TD WIDTH=\"${innerWidth}\" HEIGHT=\"${innerHeight}\"></TD></TR></TABLE></TD>`\n        );\n    }\n}\n"]}
+{"version":3,"file":"graph-color-modes.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-color-modes.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Graph color modes (#1155, restyled by #1158)\n *\n * The architecture graph answers ONE question at a time instead of asking every box to encode two\n * (fill = framework AND border = role). Each box is emitted once per mode, so the page can switch\n * modes and re-render without regenerating anything. Every mode writes the SAME three lines on a box\n * (level + name, role, every framework tag); only the color changes:\n *\n *  - RUNTIME      \"where the code can run\". One runtime is a solid fill. One runtime plus a\n *                 specialization (angular/react inside browser, express inside node) is NESTED: an\n *                 outer frame in the base color around an inner rounded box in the specialization's\n *                 color, carrying the text. Several runtimes are full-height vertical stripes in the\n *                 fixed order browser | node | react-native, with the text written across them. The\n *                 dependency rule becomes visual: a box may depend on a box carrying every color it has.\n *  - ARCHITECTURE \"servers · clients · APIs\". A solid fill by ROLE; framework color is not shown.\n *  - IMPACT       \"what this branch touches\". Projects owning a changed file are solid amber\n *                 (\"touched\"); the rest of nx's affected set is light amber (\"affected\": their ci\n *                 re-runs); every transitive dependency of the affected set that is not itself\n *                 affected is light slate with a dashed border (\"build input\": compiled or restored\n *                 from cache, unchanged); everything else is grey. Which box is which is only known\n *                 per branch, so every box carries all four variants and the page picks one from the\n *                 sidecar (graph-impact.ts). The state is never written on the box: color + legend.\n */\n\nimport { KNOWN_FRAMEWORKS, KnownFramework } from '@webpieces/rules-sdk';\nimport { dotValue, htmlLabelText } from './dot-syntax';\n\nexport enum GraphMode {\n    RUNTIME = 'runtime',\n    ARCHITECTURE = 'architecture',\n    IMPACT = 'impact',\n}\n\n/** One selectable mode as the drawer's Color-by pulldown shows it. */\nexport class ModeInfo {\n    constructor(\n        public readonly mode: GraphMode,\n        public readonly name: string,\n        public readonly subtitle: string,\n    ) {}\n}\n\n/** In key order: `1` selects the first, `2` the second, `3` the third. */\nexport const GRAPH_MODES: readonly ModeInfo[] = [\n    new ModeInfo(GraphMode.RUNTIME, 'Runtime', 'where the code can run'),\n    new ModeInfo(GraphMode.ARCHITECTURE, 'Architecture', 'servers · clients · APIs'),\n    new ModeInfo(GraphMode.IMPACT, 'Impact', 'what this branch touches'),\n];\n\n/** Text on a light fill. */\nexport const DARK_TEXT = '#1a1c22';\n/** Text on a dark fill. */\nexport const LIGHT_TEXT = '#ffffff';\n\n/**\n * A framework value's color, the text color that reads on it, and the BASE runtime it is drawn\n * inside (itself, for a base).\n */\nexport class FrameworkStyle {\n    constructor(\n        public readonly framework: KnownFramework,\n        public readonly base: KnownFramework,\n        public readonly color: string,\n        public readonly fontColor: string,\n        public readonly description: string,\n    ) {}\n\n    isBase(): boolean {\n        return this.framework === this.base;\n    }\n}\n\n/**\n * Keyed by the shared vocabulary, so a framework added to KNOWN_FRAMEWORKS without a color here is a\n * COMPILE error — not a box silently painted grey and missing from the legend, which is exactly how\n * react-native shipped (#1155). Every base is mid-light, so dark text reads on every stripe.\n */\nexport const FRAMEWORK_STYLES: Record<KnownFramework, FrameworkStyle> = {\n    browser: new FrameworkStyle('browser', 'browser', '#7d8cf2', DARK_TEXT, 'browser base runtime'),\n    node: new FrameworkStyle('node', 'node', '#6fcf8a', DARK_TEXT, 'node base runtime'),\n    'react-native': new FrameworkStyle(\n        'react-native',\n        'react-native',\n        '#34b8a6',\n        DARK_TEXT,\n        'its own runtime, not a browser',\n    ),\n    angular: new FrameworkStyle('angular', 'browser', '#c8243f', LIGHT_TEXT, 'inside browser'),\n    react: new FrameworkStyle('react', 'browser', '#7fd8ff', DARK_TEXT, 'inside browser'),\n    express: new FrameworkStyle('express', 'node', '#2e7d4f', LIGHT_TEXT, 'inside node'),\n};\n\n/** Stripe order, left to right. Fixed, so the same set always reads the same way. */\nexport const BASE_ORDER: readonly KnownFramework[] = ['browser', 'node', 'react-native'];\n\n/**\n * The Filter popover's Runtime chips, and the order line 3 of a box lists framework tags in: the\n * bases first, then the specializations.\n */\nexport const FRAMEWORK_ORDER: readonly KnownFramework[] = [\n    'browser',\n    'node',\n    'react-native',\n    'angular',\n    'react',\n    'express',\n];\n\n/** A box with no known framework tag. */\nexport const NO_RUNTIME_COLOR = '#e4e6ec';\n\n/** The class Graphviz stamps on a multi-runtime box's `<g>`: its outline is its LAST shape. */\nexport const STRIPED_CLASS = 'wp-striped';\n\n/** Margin of base color around a specialization's inner box. */\nconst NEST_PAD = 5;\n/** Padding between the inner box's edge and its text. */\nconst INNER_PAD = 6;\n\n/** A role's solid fill and the text color that stays readable on it. */\nexport class RoleStyle {\n    constructor(\n        public readonly role: string,\n        public readonly fill: string,\n        public readonly fontColor: string,\n        public readonly description: string,\n    ) {}\n}\n\n/**\n * Every role role-resolver knows, in legend order (runnable things first) — also the Filter popover's\n * Role chips. `bundle` is indigo so no box color equals the page's violet accent.\n */\nexport const ROLE_STYLES: readonly RoleStyle[] = [\n    new RoleStyle('server', '#4caf50', LIGHT_TEXT, 'runnable server'),\n    new RoleStyle('client', '#e5533d', LIGHT_TEXT, 'browser or mobile client app'),\n    new RoleStyle('app', '#1e88e5', LIGHT_TEXT, 'runnable non-HTTP app'),\n    new RoleStyle('bundle', '#4b44c8', LIGHT_TEXT, 'bundles several apps'),\n    new RoleStyle('api-lib', '#f08a24', DARK_TEXT, 'contract + DTOs'),\n    new RoleStyle('api-client', '#1a9aa6', LIGHT_TEXT, 'contract + SDK implementation'),\n    new RoleStyle('designed-lib', '#7d8597', LIGHT_TEXT, 'library with a generated design'),\n    new RoleStyle('lib', '#d7dae2', DARK_TEXT, 'plain library'),\n];\n\n/** The four impact shades (graph-impact.ts decides which box gets which). */\nexport const IMPACT_TOUCHED = '#f5a524';\nexport const IMPACT_AFFECTED = '#fde3b0';\nexport const IMPACT_BUILD_INPUT = '#e3e9f2';\nexport const IMPACT_BUILD_INPUT_BORDER = '#7c8aa3';\nexport const IMPACT_UNTOUCHED = '#eef0f4';\nconst IMPACT_UNTOUCHED_TEXT = '#6b7180';\n\n/** What a box's per-mode rendering — and the page's Filter — is computed from. */\nexport class NodeFacts {\n    constructor(\n        public readonly nodeId: string,\n        public readonly shortName: string,\n        public readonly level: number,\n        public readonly role: string,\n        public readonly frameworks: string[],\n    ) {}\n}\n\n/** One box's DOT statement for every mode (and for each impact state). */\nexport class NodeModeDots {\n    constructor(\n        public readonly runtime: string,\n        public readonly architecture: string,\n        public readonly touched: string,\n        public readonly affected: string,\n        public readonly buildInput: string,\n        public readonly untouched: string,\n    ) {}\n}\n\n/** Which colors and roles the drawn projects actually use, so the legend lists exactly those. */\nexport class LegendFacts {\n    frameworks: string[] = [];\n    roles: string[] = [];\n    multiRuntime = false;\n    noRuntime = false;\n}\n\nexport class NodeModeStyler {\n    styleOf(framework: string): FrameworkStyle | undefined {\n        if (!(KNOWN_FRAMEWORKS as readonly string[]).includes(framework)) return undefined;\n        return FRAMEWORK_STYLES[framework as KnownFramework];\n    }\n\n    roleStyle(role: string): RoleStyle {\n        const style = ROLE_STYLES.find((candidate: RoleStyle): boolean => candidate.role === role);\n        return style ?? (ROLE_STYLES.find((s: RoleStyle): boolean => s.role === 'lib') as RoleStyle);\n    }\n\n    /** Every role the renderer styles; a spec asserts this covers role-resolver's KNOWN_ROLES. */\n    styledRoles(): string[] {\n        return ROLE_STYLES.map((style: RoleStyle): string => style.role);\n    }\n\n    /** The base runtimes of a framework set, in stripe order (a specialization implies its base). */\n    bases(frameworks: string[]): KnownFramework[] {\n        const present = new Set<KnownFramework>();\n        for (const framework of frameworks) {\n            const style = this.styleOf(framework);\n            if (style !== undefined) present.add(style.base);\n        }\n        return BASE_ORDER.filter((base: KnownFramework): boolean => present.has(base));\n    }\n\n    /** The specialization drawn inside `base`, if the set carries one. */\n    specialization(base: KnownFramework, frameworks: string[]): FrameworkStyle | undefined {\n        for (const framework of KNOWN_FRAMEWORKS) {\n            const style = FRAMEWORK_STYLES[framework];\n            if (style.isBase() || style.base !== base) continue;\n            if (frameworks.includes(framework)) return style;\n        }\n        return undefined;\n    }\n\n    dots(facts: NodeFacts): NodeModeDots {\n        return new NodeModeDots(\n            this.runtime(facts),\n            this.plain(facts, this.roleStyle(facts.role).fill, this.roleStyle(facts.role).fontColor, ''),\n            this.plain(facts, IMPACT_TOUCHED, DARK_TEXT, ''),\n            this.plain(facts, IMPACT_AFFECTED, DARK_TEXT, `, color=\"${IMPACT_TOUCHED}\", penwidth=2`),\n            this.plain(\n                facts,\n                IMPACT_BUILD_INPUT,\n                DARK_TEXT,\n                `, color=\"${IMPACT_BUILD_INPUT_BORDER}\", penwidth=1.5`,\n                'filled,dashed',\n            ),\n            this.plain(facts, IMPACT_UNTOUCHED, IMPACT_UNTOUCHED_TEXT, ', color=\"#b4b9c4\"'),\n        );\n    }\n\n    /** Fold one drawn box into the legend facts. */\n    record(legend: LegendFacts, facts: NodeFacts): void {\n        for (const framework of facts.frameworks) {\n            if (this.styleOf(framework) !== undefined && !legend.frameworks.includes(framework))\n                legend.frameworks.push(framework);\n        }\n        const role = this.roleStyle(facts.role).role;\n        if (!legend.roles.includes(role)) legend.roles.push(role);\n        const bases = this.bases(facts.frameworks);\n        if (bases.length > 1) legend.multiRuntime = true;\n        if (bases.length === 0) legend.noRuntime = true;\n    }\n\n    /**\n     * Line 3 of every box: every framework tag, bases before specializations, any tag outside the\n     * shared vocabulary last (it still runs somewhere somebody declared).\n     */\n    frameworkLine(frameworks: string[]): string {\n        if (frameworks.length === 0) return 'no framework tag';\n        const known = FRAMEWORK_ORDER.filter((framework: KnownFramework): boolean =>\n            frameworks.includes(framework),\n        );\n        const unknown = frameworks.filter((framework: string): boolean => this.styleOf(framework) === undefined);\n        return [...known, ...unknown].join(' · ');\n    }\n\n    /**\n     * The three lines, identical in every mode: `L3  name` (level dimmed, name bold), the role, and\n     * the framework tags. The level is dimmed by giving its text color an alpha channel, which\n     * Graphviz writes as `fill-opacity`, so it dims on any fill.\n     */\n    labelText(facts: NodeFacts, fontColor: string): string {\n        return (\n            `<FONT COLOR=\"${fontColor}99\">L${facts.level}</FONT>&#160;&#160;<B>${htmlLabelText(facts.shortName)}</B>` +\n            `<BR/>${htmlLabelText(facts.role)}<BR/>${htmlLabelText(this.frameworkLine(facts.frameworks))}`\n        );\n    }\n\n    /** `filled` for one runtime; equal `striped` weights for several (the last takes the remainder). */\n    stripeAttrs(bases: KnownFramework[]): string {\n        const colors = bases.map((base: KnownFramework): string => FRAMEWORK_STYLES[base].color);\n        if (colors.length === 1) return `style=\"filled\", fillcolor=\"${colors[0]}\"`;\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=\"${STRIPED_CLASS}\"`;\n    }\n\n    private statement(facts: NodeFacts, attrs: string, label: string): string {\n        return `  \"${dotValue(facts.nodeId)}\" [${attrs}, label=<${label}>];\\n`;\n    }\n\n    /** A solid fill, the three lines on it. `extra` carries border attributes. */\n    private plain(facts: NodeFacts, fill: string, fontColor: string, extra: string, style = 'filled'): string {\n        return this.statement(\n            facts,\n            `style=\"${style}\", fillcolor=\"${fill}\", fontcolor=\"${fontColor}\"${extra}`,\n            this.labelText(facts, fontColor),\n        );\n    }\n\n    /**\n     * Runtime mode. No runtime, or one runtime with no specialization: a solid fill. One runtime with a\n     * specialization: NESTED. Several runtimes: full-height stripes with the text across them (a\n     * specialization on such a box shows in line 3 only).\n     */\n    private runtime(facts: NodeFacts): string {\n        const bases = this.bases(facts.frameworks);\n        if (bases.length === 0) return this.plain(facts, NO_RUNTIME_COLOR, DARK_TEXT, '');\n        if (bases.length > 1)\n            return this.statement(\n                facts,\n                `${this.stripeAttrs(bases)}, fontcolor=\"${DARK_TEXT}\"`,\n                this.labelText(facts, DARK_TEXT),\n            );\n        const base = FRAMEWORK_STYLES[bases[0]];\n        const inner = this.specialization(bases[0], facts.frameworks);\n        if (inner === undefined) return this.plain(facts, base.color, base.fontColor, '');\n        return this.statement(\n            facts,\n            `style=\"filled\", fillcolor=\"${base.color}\", fontcolor=\"${inner.fontColor}\", margin=0`,\n            this.nestedTable(base.color, inner, this.labelText(facts, inner.fontColor)),\n        );\n    }\n\n    /**\n     * An outer cell in the base color whose padding is the visible frame, holding an inner ROUNDED\n     * table in the specialization's color that carries the text. The node's own polygon stays its\n     * FIRST shape, so the hover glow and the lock outline land on the outer box only.\n     */\n    private nestedTable(base: string, inner: FrameworkStyle, text: string): string {\n        return (\n            '<TABLE BORDER=\"0\" CELLBORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"0\">' +\n            `<TR><TD BGCOLOR=\"${base}\" CELLPADDING=\"${NEST_PAD}\">` +\n            `<TABLE BORDER=\"0\" CELLBORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"${INNER_PAD}\" BGCOLOR=\"${inner.color}\" STYLE=\"rounded\">` +\n            `<TR><TD>${text}</TD></TR></TABLE></TD></TR></TABLE>`\n        );\n    }\n}\n"]}

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

@@ -16,8 +16,12 @@ declare class WpRenderBand {
 declare class WpFilteredDot {
     private readonly model;
     constructor(model: RenderModelJson);
-    /** `nodeDot` picks each box's statement — the architecture page passes its current color mode's. */
-    render(retained: Set<string>, nodeDot?: (node: RenderNodeJson) => string): string;
+    /**
+     * `nodeDot` picks each box's statement — the architecture page passes its current color mode's.
+     * `keepEmptyLevels` keeps a level whose boxes were all filtered out as a thin labeled band, so
+     * every remaining box stays in its own L-row (the architecture page); otherwise it is dropped.
+     */
+    render(retained: Set<string>, nodeDot?: (node: RenderNodeJson) => string, keepEmptyLevels?: boolean): string;
     private bandDot;
 }
 /** Page-owned state survives replacements; rendering failures leave the usable SVG intact. */
@@ -38,6 +42,13 @@ declare abstract class WpFilterPage {
     protected nodeDot(node: RenderNodeJson): string;
     /** Whether an unfiltered draw may use the model's precomputed `fullDot` verbatim. */
     protected usesFullDot(): boolean;
+    /**
+     * The page's own filter on top of "Hide unconnected": the architecture page intersects the set
+     * with its Filter popover (changes, runtime, role). Everything, by default.
+     */
+    protected narrow(retained: Set<string>): Set<string>;
+    /** Whether a level emptied by filtering stays as a thin labeled band (see WpFilteredDot.render). */
+    protected keepsEmptyLevels(): boolean;
     /**
      * Draw again with the current filter — after a color-mode switch. A control outside the graph
      * (a drawer button) keeps keyboard focus; the redraw would otherwise move it into the graph.

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

@@ -54,13 +54,17 @@ class WpFilteredDot {
     constructor(model) {
         this.model = model;
     }
-    /** `nodeDot` picks each box's statement — the architecture page passes its current color mode's. */
-    render(retained, nodeDot = (node) => node.dot) {
+    /**
+     * `nodeDot` picks each box's statement — the architecture page passes its current color mode's.
+     * `keepEmptyLevels` keeps a level whose boxes were all filtered out as a thin labeled band, so
+     * every remaining box stays in its own L-row (the architecture page); otherwise it is dropped.
+     */
+    render(retained, nodeDot = (node) => node.dot, keepEmptyLevels = false) {
         const nodes = this.model.nodes.filter((node) => retained.has(node.id));
         const edges = this.model.edges.filter((edge) => retained.has(edge.from) && retained.has(edge.to));
         const bands = this.model.bands
             .map((band) => new WpRenderBand(band.level, band.nodeNames.filter((id) => retained.has(id))))
-            .filter((band) => band.nodeNames.length > 0);
+            .filter((band) => keepEmptyLevels || band.nodeNames.length > 0);
         return (this.model.header +
             nodes.map((node) => nodeDot(node)).join('') +
             this.bandDot(bands) +
@@ -73,7 +77,12 @@ class WpFilteredDot {
         let dot = '';
         for (const band of bands) {
             const anchor = `__wp_layout_L${band.level}`;
-            dot += `  "${anchor}" ${nodeAttrs};\n  { rank=same; "${anchor}"; `;
+            // The same bytes as LevelBandLayout.emptyBandAttrs (graph-level-bands.ts).
+            const attrs = band.nodeNames.length > 0
+                ? nodeAttrs
+                : '[shape=plaintext, style="", width=0.01, height=0.15, margin=0, fontsize=9, fontcolor="#9a9eab", ' +
+                    `label="L${band.level} · no matching projects", class="wp-layout wp-empty-level"]`;
+            dot += `  "${anchor}" ${attrs};\n  { rank=same; "${anchor}"; `;
             dot += band.nodeNames.map((id) => `${JSON.stringify(id)}; `).join('') + '}\n';
         }
         for (let i = 0; i + 1 < bands.length; i++) {
@@ -131,6 +140,17 @@ class WpFilterPage {
     usesFullDot() {
         return true;
     }
+    /**
+     * The page's own filter on top of "Hide unconnected": the architecture page intersects the set
+     * with its Filter popover (changes, runtime, role). Everything, by default.
+     */
+    narrow(retained) {
+        return retained;
+    }
+    /** Whether a level emptied by filtering stays as a thin labeled band (see WpFilteredDot.render). */
+    keepsEmptyLevels() {
+        return false;
+    }
     /**
      * Draw again with the current filter — after a color-mode switch. A control outside the graph
      * (a drawer button) keeps keyboard focus; the redraw would otherwise move it into the graph.
@@ -152,9 +172,9 @@ class WpFilterPage {
         const host = document.getElementById('graph');
         if (host === null)
             return;
-        const retained = anchor === null
+        const retained = this.narrow(anchor === null
             ? new Set(this.model.nodes.map((node) => node.id))
-            : this.chain.nodes(anchor);
+            : this.chain.nodes(anchor));
         const previousAnchor = this.anchor;
         const previousRetained = this.retained;
         const previousSvg = host.querySelector('svg');
@@ -164,7 +184,7 @@ class WpFilterPage {
         try {
             const dot = anchor === null && this.usesFullDot()
                 ? this.model.fullDot
-                : new WpFilteredDot(this.model).render(retained, (node) => this.nodeDot(node));
+                : new WpFilteredDot(this.model).render(retained, (node) => this.nodeDot(node), this.keepsEmptyLevels());
             const svg = this.viz.renderSVGElement(dot);
             this.prepareSvg(svg);
             WpNodeMenu.close();