@webpieces/nx-webpieces-rules 0.4.870 → 0.4.872

package/src/lib/graph-color-modes.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Graph color modes (#1155)
+ *
+ * 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:
+ *
+ *  - 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.
+ *  - 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
+ *                 re-runs); every transitive dependency of the affected set that is not itself
+ *                 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).
+ */
+import { KnownFramework } from '@webpieces/rules-sdk';
+export declare enum GraphMode {
+    RUNTIME = "runtime",
+    ARCHITECTURE = "architecture",
+    IMPACT = "impact"
+}
+/** One selectable mode as the drawer and the node menu show it. */
+export declare class ModeInfo {
+    readonly mode: GraphMode;
+    readonly name: string;
+    readonly subtitle: string;
+    constructor(mode: GraphMode, name: string, subtitle: string);
+}
+/** In key order: `1` selects the first, `2` the second, `3` the third. */
+export declare const GRAPH_MODES: readonly ModeInfo[];
+/** A framework value's color and the BASE runtime it is drawn inside (itself, for a base). */
+export declare class FrameworkStyle {
+    readonly framework: KnownFramework;
+    readonly base: KnownFramework;
+    readonly color: string;
+    readonly description: string;
+    constructor(framework: KnownFramework, base: KnownFramework, color: string, description: string);
+    isBase(): boolean;
+}
+/**
+ * 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).
+ */
+export declare const FRAMEWORK_STYLES: Record<KnownFramework, FrameworkStyle>;
+/** Stripe order, left to right. Fixed, so the same set always reads the same way. */
+export declare const BASE_ORDER: readonly KnownFramework[];
+/** A box with no known framework tag. */
+export declare const NO_RUNTIME_COLOR = "#e4e6ec";
+/** A role's solid fill and the text color that stays readable on it. */
+export declare class RoleStyle {
+    readonly role: string;
+    readonly fill: string;
+    readonly fontColor: string;
+    readonly description: string;
+    constructor(role: string, fill: string, fontColor: string, description: string);
+}
+/** Every role role-resolver knows, in legend order (runnable things first). */
+export declare const ROLE_STYLES: readonly RoleStyle[];
+/** The four impact shades (graph-impact.ts decides which box gets which). */
+export declare const IMPACT_TOUCHED = "#f5a524";
+export declare const IMPACT_AFFECTED = "#fde3b0";
+export declare const IMPACT_BUILD_INPUT = "#e3e9f2";
+export declare const IMPACT_BUILD_INPUT_BORDER = "#7c8aa3";
+export declare const IMPACT_UNTOUCHED = "#eef0f4";
+/** The light plate the name and meta sit on, across every stripe of a multi-color box. */
+export declare const LABEL_PLATE = "#fbfbfd";
+/** What a box's per-mode rendering is computed from. */
+export declare class NodeFacts {
+    readonly nodeId: string;
+    readonly shortName: string;
+    readonly level: number;
+    readonly role: string;
+    readonly frameworks: string[];
+    constructor(nodeId: string, shortName: string, level: number, role: string, frameworks: string[]);
+}
+/** One box's DOT statement for every mode (and for each impact state). */
+export declare class NodeModeDots {
+    readonly runtime: string;
+    readonly architecture: string;
+    readonly touched: string;
+    readonly affected: string;
+    readonly buildInput: string;
+    readonly untouched: string;
+    constructor(runtime: string, architecture: string, touched: string, affected: string, buildInput: string, untouched: string);
+}
+/** Which colors and roles the drawn projects actually use, so the legend lists exactly those. */
+export declare class LegendFacts {
+    frameworks: string[];
+    roles: string[];
+    multiRuntime: boolean;
+    noRuntime: boolean;
+}
+export declare class NodeModeStyler {
+    styleOf(framework: string): FrameworkStyle | undefined;
+    roleStyle(role: string): RoleStyle;
+    /** Every role the renderer styles; a spec asserts this covers role-resolver's KNOWN_ROLES. */
+    styledRoles(): string[];
+    /** The base runtimes of a framework set, in stripe order (a specialization implies its base). */
+    bases(frameworks: string[]): KnownFramework[];
+    /** The specialization drawn inside `base`, if the set carries one. */
+    specialization(base: KnownFramework, frameworks: string[]): FrameworkStyle | undefined;
+    dots(facts: NodeFacts): NodeModeDots;
+    /** Fold one drawn box into the legend facts. */
+    record(legend: LegendFacts, facts: NodeFacts): void;
+    private statement;
+    private plainLabel;
+    private runtimeMeta;
+    private envMeta;
+    private architectureAttrs;
+    /**
+     * 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.
+     */
+    private runtime;
+    /** `filled` for one runtime; equal `striped` weights for several (the last takes the remainder). */
+    stripeAttrs(bases: KnownFramework[]): string;
+    /**
+     * 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.
+     */
+    private plateTable;
+    /** One stripe of a band: the base color, with its specialization inset inside a margin of it. */
+    private stripeCell;
+}

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

@@ -0,0 +1,299 @@
+"use strict";
+/**
+ * Graph color modes (#1155)
+ *
+ * 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:
+ *
+ *  - 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.
+ *  - 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
+ *                 re-runs); every transitive dependency of the affected set that is not itself
+ *                 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).
+ */
+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;
+const rules_sdk_1 = require("@webpieces/rules-sdk");
+const dot_syntax_1 = require("./dot-syntax");
+var GraphMode;
+(function (GraphMode) {
+    GraphMode["RUNTIME"] = "runtime";
+    GraphMode["ARCHITECTURE"] = "architecture";
+    GraphMode["IMPACT"] = "impact";
+})(GraphMode || (exports.GraphMode = GraphMode = {}));
+/** One selectable mode as the drawer and the node menu show it. */
+class ModeInfo {
+    mode;
+    name;
+    subtitle;
+    constructor(mode, name, subtitle) {
+        this.mode = mode;
+        this.name = name;
+        this.subtitle = subtitle;
+    }
+}
+exports.ModeInfo = ModeInfo;
+/** In key order: `1` selects the first, `2` the second, `3` the third. */
+exports.GRAPH_MODES = [
+    new ModeInfo(GraphMode.RUNTIME, 'Runtime', 'where the code can run'),
+    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). */
+class FrameworkStyle {
+    framework;
+    base;
+    color;
+    description;
+    constructor(framework, base, color, description) {
+        this.framework = framework;
+        this.base = base;
+        this.color = color;
+        this.description = description;
+    }
+    isBase() {
+        return this.framework === this.base;
+    }
+}
+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).
+ */
+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'),
+};
+/** Stripe order, left to right. Fixed, so the same set always reads the same way. */
+exports.BASE_ORDER = ['browser', 'node', 'react-native'];
+/** A box with no known framework tag. */
+exports.NO_RUNTIME_COLOR = '#e4e6ec';
+/** A role's solid fill and the text color that stays readable on it. */
+class RoleStyle {
+    role;
+    fill;
+    fontColor;
+    description;
+    constructor(role, fill, fontColor, description) {
+        this.role = role;
+        this.fill = fill;
+        this.fontColor = fontColor;
+        this.description = description;
+    }
+}
+exports.RoleStyle = RoleStyle;
+/** Every role role-resolver knows, in legend order (runnable things first). */
+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'),
+];
+/** The four impact shades (graph-impact.ts decides which box gets which). */
+exports.IMPACT_TOUCHED = '#f5a524';
+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. */
+class NodeFacts {
+    nodeId;
+    shortName;
+    level;
+    role;
+    frameworks;
+    constructor(nodeId, shortName, level, role, frameworks) {
+        this.nodeId = nodeId;
+        this.shortName = shortName;
+        this.level = level;
+        this.role = role;
+        this.frameworks = frameworks;
+    }
+}
+exports.NodeFacts = NodeFacts;
+/** One box's DOT statement for every mode (and for each impact state). */
+class NodeModeDots {
+    runtime;
+    architecture;
+    touched;
+    affected;
+    buildInput;
+    untouched;
+    constructor(runtime, architecture, touched, affected, buildInput, untouched) {
+        this.runtime = runtime;
+        this.architecture = architecture;
+        this.touched = touched;
+        this.affected = affected;
+        this.buildInput = buildInput;
+        this.untouched = untouched;
+    }
+}
+exports.NodeModeDots = NodeModeDots;
+/** Which colors and roles the drawn projects actually use, so the legend lists exactly those. */
+class LegendFacts {
+    frameworks = [];
+    roles = [];
+    multiRuntime = false;
+    noRuntime = false;
+}
+exports.LegendFacts = LegendFacts;
+class NodeModeStyler {
+    styleOf(framework) {
+        if (!rules_sdk_1.KNOWN_FRAMEWORKS.includes(framework))
+            return undefined;
+        return exports.FRAMEWORK_STYLES[framework];
+    }
+    roleStyle(role) {
+        const style = exports.ROLE_STYLES.find((candidate) => candidate.role === role);
+        return style ?? exports.ROLE_STYLES.find((s) => s.role === 'lib');
+    }
+    /** Every role the renderer styles; a spec asserts this covers role-resolver's KNOWN_ROLES. */
+    styledRoles() {
+        return exports.ROLE_STYLES.map((style) => style.role);
+    }
+    /** The base runtimes of a framework set, in stripe order (a specialization implies its base). */
+    bases(frameworks) {
+        const present = new Set();
+        for (const framework of frameworks) {
+            const style = this.styleOf(framework);
+            if (style !== undefined)
+                present.add(style.base);
+        }
+        return exports.BASE_ORDER.filter((base) => present.has(base));
+    }
+    /** The specialization drawn inside `base`, if the set carries one. */
+    specialization(base, frameworks) {
+        for (const framework of rules_sdk_1.KNOWN_FRAMEWORKS) {
+            const style = exports.FRAMEWORK_STYLES[framework];
+            if (style.isBase() || style.base !== base)
+                continue;
+            if (frameworks.includes(framework))
+                return style;
+        }
+        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}`)));
+    }
+    /** Fold one drawn box into the legend facts. */
+    record(legend, facts) {
+        for (const framework of facts.frameworks) {
+            if (this.styleOf(framework) !== undefined && !legend.frameworks.includes(framework))
+                legend.frameworks.push(framework);
+        }
+        const role = this.roleStyle(facts.role).role;
+        if (!legend.roles.includes(role))
+            legend.roles.push(role);
+        const bases = this.bases(facts.frameworks);
+        if (bases.length > 1)
+            legend.multiRuntime = true;
+        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}"`;
+    }
+    /**
+     * 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.
+     */
+    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)}>`);
+    }
+    /** `filled` for one runtime; equal `striped` weights for several (the last takes the remainder). */
+    stripeAttrs(bases) {
+        const colors = bases.map((base) => exports.FRAMEWORK_STYLES[base].color);
+        if (colors.length === 1)
+            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(':')}"`;
+    }
+    /**
+     * 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.
+     */
+    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>');
+    }
+    /** 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>`);
+    }
+}
+exports.NodeModeStyler = NodeModeStyler;
+//# sourceMappingURL=graph-color-modes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"graph-color-modes.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-color-modes.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;AAEH,oDAAwE;AACxE,6CAAuD;AAEvD,IAAY,SAIX;AAJD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,0CAA6B,CAAA;IAC7B,8BAAiB,CAAA;AACrB,CAAC,EAJW,SAAS,yBAAT,SAAS,QAIpB;AAED,mEAAmE;AACnE,MAAa,QAAQ;IAEG;IACA;IACA;IAHpB,YACoB,IAAe,EACf,IAAY,EACZ,QAAgB;QAFhB,SAAI,GAAJ,IAAI,CAAW;QACf,SAAI,GAAJ,IAAI,CAAQ;QACZ,aAAQ,GAAR,QAAQ,CAAQ;IACjC,CAAC;CACP;AAND,4BAMC;AAED,0EAA0E;AAC7D,QAAA,WAAW,GAAwB;IAC5C,IAAI,QAAQ,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,wBAAwB,CAAC;IACpE,IAAI,QAAQ,CAAC,SAAS,CAAC,YAAY,EAAE,cAAc,EAAE,0BAA0B,CAAC;IAChF,IAAI,QAAQ,CAAC,SAAS,CAAC,MAAM,EAAE,QAAQ,EAAE,0BAA0B,CAAC;CACvE,CAAC;AAEF,8FAA8F;AAC9F,MAAa,cAAc;IAEH;IACA;IACA;IACA;IAJpB,YACoB,SAAyB,EACzB,IAAoB,EACpB,KAAa,EACb,WAAmB;QAHnB,cAAS,GAAT,SAAS,CAAgB;QACzB,SAAI,GAAJ,IAAI,CAAgB;QACpB,UAAK,GAAL,KAAK,CAAQ;QACb,gBAAW,GAAX,WAAW,CAAQ;IACpC,CAAC;IAEJ,MAAM;QACF,OAAO,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,IAAI,CAAC;IACxC,CAAC;CACJ;AAXD,wCAWC;AAED;;;;GAIG;AACU,QAAA,gBAAgB,GAA2C;IACpE,OAAO,EAAE,IAAI,cAAc,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,sBAAsB,CAAC;IACpF,IAAI,EAAE,IAAI,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,CAAC;IACxE,cAAc,EAAE,IAAI,cAAc,CAC9B,cAAc,EACd,cAAc,EACd,SAAS,EACT,gCAAgC,CACnC;IACD,OAAO,EAAE,IAAI,cAAc,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,CAAC;IAC9E,KAAK,EAAE,IAAI,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,CAAC;IAC1E,OAAO,EAAE,IAAI,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,CAAC;CAC3E,CAAC;AAEF,qFAAqF;AACxE,QAAA,UAAU,GAA8B,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC;AAEzF,yCAAyC;AAC5B,QAAA,gBAAgB,GAAG,SAAS,CAAC;AAE1C,wEAAwE;AACxE,MAAa,SAAS;IAEE;IACA;IACA;IACA;IAJpB,YACoB,IAAY,EACZ,IAAY,EACZ,SAAiB,EACjB,WAAmB;QAHnB,SAAI,GAAJ,IAAI,CAAQ;QACZ,SAAI,GAAJ,IAAI,CAAQ;QACZ,cAAS,GAAT,SAAS,CAAQ;QACjB,gBAAW,GAAX,WAAW,CAAQ;IACpC,CAAC;CACP;AAPD,8BAOC;AAED,+EAA+E;AAClE,QAAA,WAAW,GAAyB;IAC7C,IAAI,SAAS,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,CAAC;IAChE,IAAI,SAAS,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,8BAA8B,CAAC;IAC7E,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,uBAAuB,CAAC;IACnE,IAAI,SAAS,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,sBAAsB,CAAC;IACrE,IAAI,SAAS,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,CAAC;IACjE,IAAI,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,+BAA+B,CAAC;IAClF,IAAI,SAAS,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,iCAAiC,CAAC;IACtF,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,CAAC;CAC9D,CAAC;AAEF,6EAA6E;AAChE,QAAA,cAAc,GAAG,SAAS,CAAC;AAC3B,QAAA,eAAe,GAAG,SAAS,CAAC;AAC5B,QAAA,kBAAkB,GAAG,SAAS,CAAC;AAC/B,QAAA,yBAAyB,GAAG,SAAS,CAAC;AACtC,QAAA,gBAAgB,GAAG,SAAS,CAAC;AAE1C,0FAA0F;AAC7E,QAAA,WAAW,GAAG,SAAS,CAAC;AACrC,4DAA4D;AAC5D,MAAM,aAAa,GAAG,EAAE,CAAC;AACzB,qFAAqF;AACrF,MAAM,SAAS,GAAG,CAAC,CAAC;AACpB,4CAA4C;AAC5C,MAAM,SAAS,GAAG,CAAC,CAAC;AACpB,4DAA4D;AAC5D,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAC5B,0FAA0F;AAC1F,MAAM,UAAU,GAAG,GAAG,CAAC;AAEvB,wDAAwD;AACxD,MAAa,SAAS;IAEE;IACA;IACA;IACA;IACA;IALpB,YACoB,MAAc,EACd,SAAiB,EACjB,KAAa,EACb,IAAY,EACZ,UAAoB;QAJpB,WAAM,GAAN,MAAM,CAAQ;QACd,cAAS,GAAT,SAAS,CAAQ;QACjB,UAAK,GAAL,KAAK,CAAQ;QACb,SAAI,GAAJ,IAAI,CAAQ;QACZ,eAAU,GAAV,UAAU,CAAU;IACrC,CAAC;CACP;AARD,8BAQC;AAED,0EAA0E;AAC1E,MAAa,YAAY;IAED;IACA;IACA;IACA;IACA;IACA;IANpB,YACoB,OAAe,EACf,YAAoB,EACpB,OAAe,EACf,QAAgB,EAChB,UAAkB,EAClB,SAAiB;QALjB,YAAO,GAAP,OAAO,CAAQ;QACf,iBAAY,GAAZ,YAAY,CAAQ;QACpB,YAAO,GAAP,OAAO,CAAQ;QACf,aAAQ,GAAR,QAAQ,CAAQ;QAChB,eAAU,GAAV,UAAU,CAAQ;QAClB,cAAS,GAAT,SAAS,CAAQ;IAClC,CAAC;CACP;AATD,oCASC;AAED,iGAAiG;AACjG,MAAa,WAAW;IACpB,UAAU,GAAa,EAAE,CAAC;IAC1B,KAAK,GAAa,EAAE,CAAC;IACrB,YAAY,GAAG,KAAK,CAAC;IACrB,SAAS,GAAG,KAAK,CAAC;CACrB;AALD,kCAKC;AAED,MAAa,cAAc;IACvB,OAAO,CAAC,SAAiB;QACrB,IAAI,CAAE,4BAAsC,CAAC,QAAQ,CAAC,SAAS,CAAC;YAAE,OAAO,SAAS,CAAC;QACnF,OAAO,wBAAgB,CAAC,SAA2B,CAAC,CAAC;IACzD,CAAC;IAED,SAAS,CAAC,IAAY;QAClB,MAAM,KAAK,GAAG,mBAAW,CAAC,IAAI,CAAC,CAAC,SAAoB,EAAW,EAAE,CAAC,SAAS,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;QAC3F,OAAO,KAAK,IAAK,mBAAW,CAAC,IAAI,CAAC,CAAC,CAAY,EAAW,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,CAAe,CAAC;IACjG,CAAC;IAED,8FAA8F;IAC9F,WAAW;QACP,OAAO,mBAAW,CAAC,GAAG,CAAC,CAAC,KAAgB,EAAU,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACrE,CAAC;IAED,iGAAiG;IACjG,KAAK,CAAC,UAAoB;QACtB,MAAM,OAAO,GAAG,IAAI,GAAG,EAAkB,CAAC;QAC1C,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;YACjC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACtC,IAAI,KAAK,KAAK,SAAS;gBAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACrD,CAAC;QACD,OAAO,kBAAU,CAAC,MAAM,CAAC,CAAC,IAAoB,EAAW,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACnF,CAAC;IAED,sEAAsE;IACtE,cAAc,CAAC,IAAoB,EAAE,UAAoB;QACrD,KAAK,MAAM,SAAS,IAAI,4BAAgB,EAAE,CAAC;YACvC,MAAM,KAAK,GAAG,wBAAgB,CAAC,SAAS,CAAC,CAAC;YAC1C,IAAI,KAAK,CAAC,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI;gBAAE,SAAS;YACpD,IAAI,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC;gBAAE,OAAO,KAAK,CAAC;QACrD,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,IAAI,CAAC,KAAgB;QACjB,OAAO,IAAI,YAAY,CACnB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACnB,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EACjG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,8BAA8B,sBAAc,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,EACzG,IAAI,CAAC,SAAS,CACV,KAAK,EACL,8BAA8B,uBAAe,aAAa,sBAAc,eAAe,EACvF,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,CACrC,EACD,IAAI,CAAC,SAAS,CACV,KAAK,EACL,qCAAqC,0BAAkB,aAAa,iCAAyB,iBAAiB,EAC9G,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa,CAAC,CACxC,EACD,IAAI,CAAC,SAAS,CACV,KAAK,EACL,8BAA8B,wBAAgB,yCAAyC,EACvF,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC,CAC5C,CACJ,CAAC;IACN,CAAC;IAED,gDAAgD;IAChD,MAAM,CAAC,MAAmB,EAAE,KAAgB;QACxC,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACvC,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC;gBAC/E,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC1C,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QAC7C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC;QACjD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC;IACpD,CAAC;IAEO,SAAS,CAAC,KAAgB,EAAE,KAAa,EAAE,KAAa;QAC5D,OAAO,MAAM,IAAA,qBAAQ,EAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,CAAC;IACnE,CAAC;IAEO,UAAU,CAAC,KAAgB,EAAE,IAAY;QAC7C,OAAO,UAAU,IAAA,qBAAQ,EAAC,KAAK,CAAC,SAAS,CAAC,MAAM,IAAA,qBAAQ,EAAC,IAAI,CAAC,GAAG,CAAC;IACtE,CAAC;IAEO,WAAW,CAAC,KAAgB;QAChC,OAAO,IAAI,KAAK,CAAC,KAAK,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAEO,OAAO,CAAC,KAAgB;QAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC7F,OAAO,IAAI,KAAK,CAAC,KAAK,MAAM,IAAI,EAAE,CAAC;IACvC,CAAC;IAEO,iBAAiB,CAAC,KAAgB;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACzC,OAAO,8BAA8B,KAAK,CAAC,IAAI,iBAAiB,KAAK,CAAC,SAAS,GAAG,CAAC;IACvF,CAAC;IAED;;;;;;OAMG;IACK,OAAO,CAAC,KAAgB;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAClB,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,8BAA8B,wBAAgB,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;QAClH,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;QAChG,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAiC,EAAW,EAAE,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;QAChG,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK;YAC3B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;QACxF,OAAO,IAAI,CAAC,SAAS,CACjB,KAAK,EACL,8BAA8B,mBAAW,aAAa,EACtD,UAAU,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAC3D,CAAC;IACN,CAAC;IAED,oGAAoG;IACpG,WAAW,CAAC,KAAuB;QAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAoB,EAAU,EAAE,CAAC,wBAAgB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;QACzF,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,8BAA8B,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;QAC3E,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,KAAa,EAAU,EAAE,CACjE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,CAC5D,CAAC;QACF,OAAO,+BAA+B,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;IAChE,CAAC;IAED;;;;OAIG;IACK,UAAU,CACd,KAAgB,EAChB,KAAuB,EACvB,MAAsC,EACtC,IAAY;QAEZ,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;QAChE,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QACpF,MAAM,IAAI,GAAG,KAAK;aACb,GAAG,CAAC,CAAC,IAAoB,EAAE,KAAa,EAAU,EAAE,CACjD,IAAI,CAAC,UAAU,CAAC,wBAAgB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAC5E;aACA,IAAI,CAAC,EAAE,CAAC,CAAC;QACd,MAAM,IAAI,GAAG,GAAG,IAAA,0BAAa,EAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,IAAA,0BAAa,EAAC,IAAI,CAAC,EAAE,CAAC;QAC5E,OAAO,CACH,mEAAmE;YACnE,OAAO,IAAI,OAAO;YAClB,oBAAoB,KAAK,CAAC,MAAM,cAAc,mBAAW,kBAAkB,SAAS,KAAK,IAAI,YAAY;YACzG,OAAO,IAAI,OAAO;YAClB,UAAU,CACb,CAAC;IACN,CAAC;IAED,iGAAiG;IACzF,UAAU,CAAC,IAAY,EAAE,KAAiC,EAAE,KAAa;QAC7E,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO,gBAAgB,IAAI,YAAY,KAAK,aAAa,aAAa,SAAS,CAAC;QACzG,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,GAAG,SAAS,CAAC;QACzC,MAAM,WAAW,GAAG,aAAa,GAAG,CAAC,GAAG,SAAS,CAAC;QAClD,OAAO,CACH,gBAAgB,IAAI,kBAAkB,SAAS,IAAI;YACnD,8DAA8D,KAAK,CAAC,KAAK,oBAAoB;YAC7F,kBAAkB,UAAU,aAAa,WAAW,2BAA2B,CAClF,CAAC;IACN,CAAC;CACJ;AAxKD,wCAwKC","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"]}

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

@@ -16,7 +16,8 @@ declare class WpRenderBand {
 declare class WpFilteredDot {
     private readonly model;
     constructor(model: RenderModelJson);
-    render(retained: Set<string>): string;
+    /** `nodeDot` picks each box's statement — the architecture page passes its current color mode's. */
+    render(retained: Set<string>, nodeDot?: (node: RenderNodeJson) => string): string;
     private bandDot;
 }
 /** Page-owned state survives replacements; rendering failures leave the usable SVG intact. */
@@ -33,6 +34,15 @@ declare abstract class WpFilterPage {
     protected wireControls(): void;
     protected abstract wireSvg(svg: SVGSVGElement): void;
     protected prepareSvg(_svg: SVGSVGElement): void;
+    /** The statement drawn for one box. The architecture page answers with its color mode's. */
+    protected nodeDot(node: RenderNodeJson): string;
+    /** Whether an unfiltered draw may use the model's precomputed `fullDot` verbatim. */
+    protected usesFullDot(): 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.
+     */
+    redraw(): void;
     filterItem(name: string): WpNodeMenuItem;
     filter(anchor: string | null): void;
     private indicator;

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

@@ -54,14 +54,15 @@ class WpFilteredDot {
     constructor(model) {
         this.model = model;
     }
-    render(retained) {
+    /** `nodeDot` picks each box's statement — the architecture page passes its current color mode's. */
+    render(retained, nodeDot = (node) => node.dot) {
         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);
         return (this.model.header +
-            nodes.map((node) => node.dot).join('') +
+            nodes.map((node) => nodeDot(node)).join('') +
             this.bandDot(bands) +
             edges.map((edge) => edge.dot).join('') +
             this.model.footer);
@@ -122,6 +123,26 @@ class WpFilterPage {
     }
     wireControls() { }
     prepareSvg(_svg) { }
+    /** The statement drawn for one box. The architecture page answers with its color mode's. */
+    nodeDot(node) {
+        return node.dot;
+    }
+    /** Whether an unfiltered draw may use the model's precomputed `fullDot` verbatim. */
+    usesFullDot() {
+        return true;
+    }
+    /**
+     * 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.
+     */
+    redraw() {
+        const active = document.activeElement;
+        const host = document.getElementById('graph');
+        const outside = active instanceof HTMLElement && host !== null && !host.contains(active);
+        this.filter(this.anchor);
+        if (outside && active.isConnected)
+            active.focus({ preventScroll: true });
+    }
     filterItem(name) {
         return new WpNodeMenuItem(this.anchor === null ? 'Filter Unconnected' : 'Turn off Filter', () => this.filter(this.anchor === null ? name : null));
     }
@@ -141,9 +162,9 @@ class WpFilterPage {
         const rollback = this.captureBinding(previousSvg);
         // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- browser transaction restores the previous usable graph on failure
         try {
-            const dot = anchor === null
+            const dot = anchor === null && this.usesFullDot()
                 ? this.model.fullDot
-                : new WpFilteredDot(this.model).render(retained);
+                : new WpFilteredDot(this.model).render(retained, (node) => this.nodeDot(node));
             const svg = this.viz.renderSVGElement(dot);
             this.prepareSvg(svg);
             WpNodeMenu.close();