@grafloria/element 0.3.20 → 0.3.22

package/src/libs/renderer/src/themes/high-contrast-theme.js

@@ -1,170 +0,0 @@
-"use strict";
-// High-contrast themes — the a11y ceiling, and the answer to `prefers-contrast: more`.
-//
-// Styling & theming, Card "design-token bridge + accessibility-aware theming".
-//
-// These are hand-authored rather than derived, for one reason: a *derived* theme
-// is repaired until it PASSES, which produces a legal palette but not always a
-// good-looking one. High contrast is the mode users actually depend on, so the
-// colours are chosen, not computed.
-//
-// They are then CHECKED with exactly the machinery a caller would use —
-// `assertThemeContrast(theme, WCAG.AAA_TEXT)` in high-contrast-theme.spec — so
-// "validated high-contrast theme" is a fact the test suite enforces, not a claim
-// in a comment. Text clears AAA (7:1); every stroke clears 4.5:1, well past
-// WCAG 1.4.11's 3:1 floor for non-text UI.
-//
-// Weight matters as much as colour: strokes are 2-3x the default. A hairline
-// border is not accessible however dark it is, which is why `numbers` is raised
-// here too (so `themeRef('numbers.emphasis')` thickens automatically).
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HIGH_CONTRAST_DARK_THEME = exports.HIGH_CONTRAST_LIGHT_THEME = void 0;
-const default_light_theme_1 = require("./default-light-theme");
-/** Pure black on pure white: the maximum-contrast light scheme (21:1 text). */
-exports.HIGH_CONTRAST_LIGHT_THEME = {
-    name: 'High Contrast Light',
-    version: '1.0.0',
-    colors: {
-        background: {
-            default: '#ffffff',
-            surface: '#ffffff',
-            elevated: '#ffffff',
-        },
-        text: {
-            primary: '#000000',
-            secondary: '#1a1a1a',
-            disabled: '#595959', // 7:1 on white — legible even though WCAG exempts it
-            inverse: '#ffffff',
-        },
-        node: {
-            default: { fill: '#ffffff', stroke: '#000000' },
-            // Selection is our focus indicator: a saturated blue that still clears
-            // 7.5:1 on its own (very pale) fill and on the canvas.
-            selected: { fill: '#ffffff', stroke: '#0000cc' },
-            highlighted: { fill: '#ffffff', stroke: '#8b4000' },
-            hovered: { fill: '#f0f0f0', stroke: '#000000' },
-            disabled: { fill: '#ffffff', stroke: '#767676' },
-            error: { fill: '#ffffff', stroke: '#b30000' },
-        },
-        link: {
-            default: '#000000',
-            selected: '#0000cc',
-            highlighted: '#8b4000',
-            hovered: '#333333',
-            disabled: '#767676',
-        },
-        port: {
-            input: '#006600',
-            output: '#8b4000',
-            bi: '#5b21b6',
-        },
-        primary: '#0000cc',
-        secondary: '#333333',
-        success: '#006600',
-        warning: '#8b4000',
-        error: '#b30000',
-        info: '#00538a',
-    },
-    typography: default_light_theme_1.LIGHT_THEME.typography,
-    spacing: default_light_theme_1.LIGHT_THEME.spacing,
-    effects: {
-        // No soft shadows: a blur is a contrast reducer.
-        shadow: { none: 'none', sm: 'none', md: 'none', lg: 'none' },
-        borderRadius: default_light_theme_1.LIGHT_THEME.effects.borderRadius,
-        // A "disabled" element at 0.5 opacity halves its contrast. 0.85 keeps it
-        // recessive without making it unreadable.
-        opacity: { disabled: 0.85, ghost: 0.6, translucent: 0.9 },
-    },
-    nodes: {
-        default: { fill: '#ffffff', stroke: '#000000', strokeWidth: 2, borderRadius: 4, shadow: false, opacity: 1 },
-    },
-    links: {
-        default: { stroke: '#000000', strokeWidth: 3, opacity: 1 },
-    },
-    ports: {
-        size: 10,
-        strokeWidth: 3,
-        colors: { input: '#006600', output: '#8b4000', bi: '#5b21b6' },
-    },
-    categories: {
-        critical: '#b30000',
-        warning: '#8b4000',
-        success: '#006600',
-        info: '#00538a',
-        neutral: '#333333',
-        accent: '#5b21b6',
-    },
-    numbers: { hairline: 2, regular: 3, emphasis: 4, heavy: 5 },
-};
-/** Pure white on pure black: the maximum-contrast dark scheme. */
-exports.HIGH_CONTRAST_DARK_THEME = {
-    name: 'High Contrast Dark',
-    version: '1.0.0',
-    colors: {
-        background: {
-            default: '#000000',
-            surface: '#000000',
-            elevated: '#000000',
-        },
-        text: {
-            primary: '#ffffff',
-            secondary: '#e6e6e6',
-            disabled: '#a6a6a6',
-            inverse: '#000000',
-        },
-        node: {
-            default: { fill: '#000000', stroke: '#ffffff' },
-            selected: { fill: '#000000', stroke: '#4cc2ff' },
-            highlighted: { fill: '#000000', stroke: '#ffd700' },
-            hovered: { fill: '#1a1a1a', stroke: '#ffffff' },
-            disabled: { fill: '#000000', stroke: '#8c8c8c' },
-            error: { fill: '#000000', stroke: '#ff6b6b' },
-        },
-        link: {
-            default: '#ffffff',
-            selected: '#4cc2ff',
-            highlighted: '#ffd700',
-            hovered: '#cccccc',
-            disabled: '#8c8c8c',
-        },
-        port: {
-            input: '#3ff23f',
-            output: '#ffd700',
-            bi: '#c9a3ff',
-        },
-        primary: '#4cc2ff',
-        secondary: '#cccccc',
-        success: '#3ff23f',
-        warning: '#ffd700',
-        error: '#ff6b6b',
-        info: '#4cc2ff',
-    },
-    typography: default_light_theme_1.LIGHT_THEME.typography,
-    spacing: default_light_theme_1.LIGHT_THEME.spacing,
-    effects: {
-        shadow: { none: 'none', sm: 'none', md: 'none', lg: 'none' },
-        borderRadius: default_light_theme_1.LIGHT_THEME.effects.borderRadius,
-        opacity: { disabled: 0.85, ghost: 0.6, translucent: 0.9 },
-    },
-    nodes: {
-        default: { fill: '#000000', stroke: '#ffffff', strokeWidth: 2, borderRadius: 4, shadow: false, opacity: 1 },
-    },
-    links: {
-        default: { stroke: '#ffffff', strokeWidth: 3, opacity: 1 },
-    },
-    ports: {
-        size: 10,
-        strokeWidth: 3,
-        colors: { input: '#3ff23f', output: '#ffd700', bi: '#c9a3ff' },
-    },
-    categories: {
-        critical: '#ff6b6b',
-        warning: '#ffd700',
-        success: '#3ff23f',
-        info: '#4cc2ff',
-        neutral: '#cccccc',
-        accent: '#c9a3ff',
-    },
-    numbers: { hairline: 2, regular: 3, emphasis: 4, heavy: 5 },
-};
-//# sourceMappingURL=high-contrast-theme.js.map

package/src/libs/renderer/src/themes/index.d.ts

@@ -1,22 +0,0 @@
-export { LIGHT_THEME } from './default-light-theme';
-export { DARK_THEME } from './default-dark-theme';
-export { HIGH_CONTRAST_LIGHT_THEME, HIGH_CONTRAST_DARK_THEME } from './high-contrast-theme';
-export { DEFAULT_THEME_SET } from './default-theme-set';
-export { ColorModeController, MEDIA_FORCED_COLORS, MEDIA_PREFERS_CONTRAST, MEDIA_PREFERS_DARK, readColorPreferences, resolveThemeFromPrefs, } from './color-mode';
-export type { ColorMode, ColorPreferences, ThemeSet } from './color-mode';
-export { isThemeRef, resolveBindableVars, resolveThemeRef, themeRef, themeRefCssValue, themeRefToken, themeRefVar, } from './theme-ref';
-export type { ThemeRef } from './theme-ref';
-export { BRIDGEABLE_TOKENS, generateContrastPreferenceBlock, generateForcedColorsBlock, generateInstanceOverrideCSS, generateTokenBridgeBlock, muiBridge, shadcnBridge, tailwindBridge, } from './token-bridge';
-export type { TokenBridge } from './token-bridge';
-export { WCAG, contrastRatio, ensureContrast, hslToRgb, lightnessOf, meetsContrast, parseColor, relativeLuminance, rgbToHsl, toHex, withLightness, } from './contrast';
-export type { Hsl, Rgb } from './contrast';
-export { assertThemeContrast, auditThemeContrast, deriveTheme } from './theme-a11y';
-export type { ContrastCheck, ContrastReport, DeriveThemeOptions } from './theme-a11y';
-export { GRAFLORIA_INSTANCE_ATTR, GRAFLORIA_VAR_PREFIX, THEME_VARS, THEME_TOKENS, cssVarName, themeVar, themeVarValue, resolveThemeVars, } from './theme-vars';
-export type { ThemeToken, ThemeVarBinding } from './theme-vars';
-export { BASE_STYLE_RULES, instanceScopeSelector, generateBaseStyleSheet, generateInstanceVarBlock, } from './theme-css';
-export type { StyleRule } from './theme-css';
-export { defineStyle, defineStyles, getStyle, hasStyle, removeStyle, clearStyles, listStyles, getStyleRegistryVersion, onStyleRegistryChange, resolveStyleClasses, } from './style-registry';
-export type { NamedStyle } from './style-registry';
-export { CASCADE_ORDER, resolveNodeStyle, resolveLinkStyle, linkTypeKey } from './style-cascade';
-export type { CascadeLayer, CascadeOptions } from './style-cascade';

package/src/libs/renderer/src/themes/index.js

@@ -1,93 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.instanceScopeSelector = exports.BASE_STYLE_RULES = exports.resolveThemeVars = exports.themeVarValue = exports.themeVar = exports.cssVarName = exports.THEME_TOKENS = exports.THEME_VARS = exports.GRAFLORIA_VAR_PREFIX = exports.GRAFLORIA_INSTANCE_ATTR = exports.deriveTheme = exports.auditThemeContrast = exports.assertThemeContrast = exports.withLightness = exports.toHex = exports.rgbToHsl = exports.relativeLuminance = exports.parseColor = exports.meetsContrast = exports.lightnessOf = exports.hslToRgb = exports.ensureContrast = exports.contrastRatio = exports.WCAG = exports.tailwindBridge = exports.shadcnBridge = exports.muiBridge = exports.generateTokenBridgeBlock = exports.generateInstanceOverrideCSS = exports.generateForcedColorsBlock = exports.generateContrastPreferenceBlock = exports.BRIDGEABLE_TOKENS = exports.themeRefVar = exports.themeRefToken = exports.themeRefCssValue = exports.themeRef = exports.resolveThemeRef = exports.resolveBindableVars = exports.isThemeRef = exports.resolveThemeFromPrefs = exports.readColorPreferences = exports.MEDIA_PREFERS_DARK = exports.MEDIA_PREFERS_CONTRAST = exports.MEDIA_FORCED_COLORS = exports.ColorModeController = exports.DEFAULT_THEME_SET = exports.HIGH_CONTRAST_DARK_THEME = exports.HIGH_CONTRAST_LIGHT_THEME = exports.DARK_THEME = exports.LIGHT_THEME = void 0;
-exports.linkTypeKey = exports.resolveLinkStyle = exports.resolveNodeStyle = exports.CASCADE_ORDER = exports.resolveStyleClasses = exports.onStyleRegistryChange = exports.getStyleRegistryVersion = exports.listStyles = exports.clearStyles = exports.removeStyle = exports.hasStyle = exports.getStyle = exports.defineStyles = exports.defineStyle = exports.generateInstanceVarBlock = exports.generateBaseStyleSheet = void 0;
-// Export default themes
-var default_light_theme_1 = require("./default-light-theme");
-Object.defineProperty(exports, "LIGHT_THEME", { enumerable: true, get: function () { return default_light_theme_1.LIGHT_THEME; } });
-var default_dark_theme_1 = require("./default-dark-theme");
-Object.defineProperty(exports, "DARK_THEME", { enumerable: true, get: function () { return default_dark_theme_1.DARK_THEME; } });
-var high_contrast_theme_1 = require("./high-contrast-theme");
-Object.defineProperty(exports, "HIGH_CONTRAST_LIGHT_THEME", { enumerable: true, get: function () { return high_contrast_theme_1.HIGH_CONTRAST_LIGHT_THEME; } });
-Object.defineProperty(exports, "HIGH_CONTRAST_DARK_THEME", { enumerable: true, get: function () { return high_contrast_theme_1.HIGH_CONTRAST_DARK_THEME; } });
-var default_theme_set_1 = require("./default-theme-set");
-Object.defineProperty(exports, "DEFAULT_THEME_SET", { enumerable: true, get: function () { return default_theme_set_1.DEFAULT_THEME_SET; } });
-// Card "colorMode": light | dark | system, with OS auto-detection.
-var color_mode_1 = require("./color-mode");
-Object.defineProperty(exports, "ColorModeController", { enumerable: true, get: function () { return color_mode_1.ColorModeController; } });
-Object.defineProperty(exports, "MEDIA_FORCED_COLORS", { enumerable: true, get: function () { return color_mode_1.MEDIA_FORCED_COLORS; } });
-Object.defineProperty(exports, "MEDIA_PREFERS_CONTRAST", { enumerable: true, get: function () { return color_mode_1.MEDIA_PREFERS_CONTRAST; } });
-Object.defineProperty(exports, "MEDIA_PREFERS_DARK", { enumerable: true, get: function () { return color_mode_1.MEDIA_PREFERS_DARK; } });
-Object.defineProperty(exports, "readColorPreferences", { enumerable: true, get: function () { return color_mode_1.readColorPreferences; } });
-Object.defineProperty(exports, "resolveThemeFromPrefs", { enumerable: true, get: function () { return color_mode_1.resolveThemeFromPrefs; } });
-// Card "Theme-bound properties": `fill: themeRef('category.critical')`.
-var theme_ref_1 = require("./theme-ref");
-Object.defineProperty(exports, "isThemeRef", { enumerable: true, get: function () { return theme_ref_1.isThemeRef; } });
-Object.defineProperty(exports, "resolveBindableVars", { enumerable: true, get: function () { return theme_ref_1.resolveBindableVars; } });
-Object.defineProperty(exports, "resolveThemeRef", { enumerable: true, get: function () { return theme_ref_1.resolveThemeRef; } });
-Object.defineProperty(exports, "themeRef", { enumerable: true, get: function () { return theme_ref_1.themeRef; } });
-Object.defineProperty(exports, "themeRefCssValue", { enumerable: true, get: function () { return theme_ref_1.themeRefCssValue; } });
-Object.defineProperty(exports, "themeRefToken", { enumerable: true, get: function () { return theme_ref_1.themeRefToken; } });
-Object.defineProperty(exports, "themeRefVar", { enumerable: true, get: function () { return theme_ref_1.themeRefVar; } });
-// Card "design-token bridge + a11y theming": host tokens → --grafloria-*, and the
-// WCAG machinery the high-contrast themes are validated with.
-var token_bridge_1 = require("./token-bridge");
-Object.defineProperty(exports, "BRIDGEABLE_TOKENS", { enumerable: true, get: function () { return token_bridge_1.BRIDGEABLE_TOKENS; } });
-Object.defineProperty(exports, "generateContrastPreferenceBlock", { enumerable: true, get: function () { return token_bridge_1.generateContrastPreferenceBlock; } });
-Object.defineProperty(exports, "generateForcedColorsBlock", { enumerable: true, get: function () { return token_bridge_1.generateForcedColorsBlock; } });
-Object.defineProperty(exports, "generateInstanceOverrideCSS", { enumerable: true, get: function () { return token_bridge_1.generateInstanceOverrideCSS; } });
-Object.defineProperty(exports, "generateTokenBridgeBlock", { enumerable: true, get: function () { return token_bridge_1.generateTokenBridgeBlock; } });
-Object.defineProperty(exports, "muiBridge", { enumerable: true, get: function () { return token_bridge_1.muiBridge; } });
-Object.defineProperty(exports, "shadcnBridge", { enumerable: true, get: function () { return token_bridge_1.shadcnBridge; } });
-Object.defineProperty(exports, "tailwindBridge", { enumerable: true, get: function () { return token_bridge_1.tailwindBridge; } });
-var contrast_1 = require("./contrast");
-Object.defineProperty(exports, "WCAG", { enumerable: true, get: function () { return contrast_1.WCAG; } });
-Object.defineProperty(exports, "contrastRatio", { enumerable: true, get: function () { return contrast_1.contrastRatio; } });
-Object.defineProperty(exports, "ensureContrast", { enumerable: true, get: function () { return contrast_1.ensureContrast; } });
-Object.defineProperty(exports, "hslToRgb", { enumerable: true, get: function () { return contrast_1.hslToRgb; } });
-Object.defineProperty(exports, "lightnessOf", { enumerable: true, get: function () { return contrast_1.lightnessOf; } });
-Object.defineProperty(exports, "meetsContrast", { enumerable: true, get: function () { return contrast_1.meetsContrast; } });
-Object.defineProperty(exports, "parseColor", { enumerable: true, get: function () { return contrast_1.parseColor; } });
-Object.defineProperty(exports, "relativeLuminance", { enumerable: true, get: function () { return contrast_1.relativeLuminance; } });
-Object.defineProperty(exports, "rgbToHsl", { enumerable: true, get: function () { return contrast_1.rgbToHsl; } });
-Object.defineProperty(exports, "toHex", { enumerable: true, get: function () { return contrast_1.toHex; } });
-Object.defineProperty(exports, "withLightness", { enumerable: true, get: function () { return contrast_1.withLightness; } });
-var theme_a11y_1 = require("./theme-a11y");
-Object.defineProperty(exports, "assertThemeContrast", { enumerable: true, get: function () { return theme_a11y_1.assertThemeContrast; } });
-Object.defineProperty(exports, "auditThemeContrast", { enumerable: true, get: function () { return theme_a11y_1.auditThemeContrast; } });
-Object.defineProperty(exports, "deriveTheme", { enumerable: true, get: function () { return theme_a11y_1.deriveTheme; } });
-// Theme token → CSS custom property mapping (THE table every styling card reuses)
-var theme_vars_1 = require("./theme-vars");
-Object.defineProperty(exports, "GRAFLORIA_INSTANCE_ATTR", { enumerable: true, get: function () { return theme_vars_1.GRAFLORIA_INSTANCE_ATTR; } });
-Object.defineProperty(exports, "GRAFLORIA_VAR_PREFIX", { enumerable: true, get: function () { return theme_vars_1.GRAFLORIA_VAR_PREFIX; } });
-Object.defineProperty(exports, "THEME_VARS", { enumerable: true, get: function () { return theme_vars_1.THEME_VARS; } });
-Object.defineProperty(exports, "THEME_TOKENS", { enumerable: true, get: function () { return theme_vars_1.THEME_TOKENS; } });
-Object.defineProperty(exports, "cssVarName", { enumerable: true, get: function () { return theme_vars_1.cssVarName; } });
-Object.defineProperty(exports, "themeVar", { enumerable: true, get: function () { return theme_vars_1.themeVar; } });
-Object.defineProperty(exports, "themeVarValue", { enumerable: true, get: function () { return theme_vars_1.themeVarValue; } });
-Object.defineProperty(exports, "resolveThemeVars", { enumerable: true, get: function () { return theme_vars_1.resolveThemeVars; } });
-// Stylesheet generation: shared var-based rules + per-instance variable block
-var theme_css_1 = require("./theme-css");
-Object.defineProperty(exports, "BASE_STYLE_RULES", { enumerable: true, get: function () { return theme_css_1.BASE_STYLE_RULES; } });
-Object.defineProperty(exports, "instanceScopeSelector", { enumerable: true, get: function () { return theme_css_1.instanceScopeSelector; } });
-Object.defineProperty(exports, "generateBaseStyleSheet", { enumerable: true, get: function () { return theme_css_1.generateBaseStyleSheet; } });
-Object.defineProperty(exports, "generateInstanceVarBlock", { enumerable: true, get: function () { return theme_css_1.generateInstanceVarBlock; } });
-// Named style classes (classDef / linkStyle equivalent)
-var style_registry_1 = require("./style-registry");
-Object.defineProperty(exports, "defineStyle", { enumerable: true, get: function () { return style_registry_1.defineStyle; } });
-Object.defineProperty(exports, "defineStyles", { enumerable: true, get: function () { return style_registry_1.defineStyles; } });
-Object.defineProperty(exports, "getStyle", { enumerable: true, get: function () { return style_registry_1.getStyle; } });
-Object.defineProperty(exports, "hasStyle", { enumerable: true, get: function () { return style_registry_1.hasStyle; } });
-Object.defineProperty(exports, "removeStyle", { enumerable: true, get: function () { return style_registry_1.removeStyle; } });
-Object.defineProperty(exports, "clearStyles", { enumerable: true, get: function () { return style_registry_1.clearStyles; } });
-Object.defineProperty(exports, "listStyles", { enumerable: true, get: function () { return style_registry_1.listStyles; } });
-Object.defineProperty(exports, "getStyleRegistryVersion", { enumerable: true, get: function () { return style_registry_1.getStyleRegistryVersion; } });
-Object.defineProperty(exports, "onStyleRegistryChange", { enumerable: true, get: function () { return style_registry_1.onStyleRegistryChange; } });
-Object.defineProperty(exports, "resolveStyleClasses", { enumerable: true, get: function () { return style_registry_1.resolveStyleClasses; } });
-// The style cascade: theme < type-default < named-class < element-inline < state
-var style_cascade_1 = require("./style-cascade");
-Object.defineProperty(exports, "CASCADE_ORDER", { enumerable: true, get: function () { return style_cascade_1.CASCADE_ORDER; } });
-Object.defineProperty(exports, "resolveNodeStyle", { enumerable: true, get: function () { return style_cascade_1.resolveNodeStyle; } });
-Object.defineProperty(exports, "resolveLinkStyle", { enumerable: true, get: function () { return style_cascade_1.resolveLinkStyle; } });
-Object.defineProperty(exports, "linkTypeKey", { enumerable: true, get: function () { return style_cascade_1.linkTypeKey; } });
-//# sourceMappingURL=index.js.map

package/src/libs/renderer/src/themes/style-cascade.d.ts

@@ -1,23 +0,0 @@
-import type { LinkModel, LinkStyle, NodeModel, NodeStyle } from '@grafloria/engine';
-import type { Theme } from '../types/theme.types';
-/** The documented cascade, lowest → highest. Exported for docs/tests. */
-export declare const CASCADE_ORDER: readonly ["theme", "type-default", "named-class", "element-inline", "state"];
-export type CascadeLayer = (typeof CASCADE_ORDER)[number];
-export interface CascadeOptions {
-    /**
-     * Include the theme base as layer 1. Programmatic/Canvas mode must (there is
-     * no stylesheet); CSS mode must NOT (the stylesheet paints it, and inlining
-     * it would defeat the theme fallback and the CSS-variable scoping).
-     */
-    includeThemeBase?: boolean;
-}
-/** Resolve a node's effective style. ONE ordered spread — see the header. */
-export declare function resolveNodeStyle(node: NodeModel, theme: Theme, options?: CascadeOptions): Partial<NodeStyle>;
-/**
- * A link's "type" for `theme.links[type]`: an explicit `type` metadata key when
- * the host sets one, else the path type (`smooth` / `orthogonal` / …), which is
- * the structural analogue of React Flow's `edge.type`.
- */
-export declare function linkTypeKey(link: LinkModel): string;
-/** Resolve a link's effective style. ONE ordered spread — see the header. */
-export declare function resolveLinkStyle(link: LinkModel, theme: Theme, options?: CascadeOptions): Partial<LinkStyle>;

package/src/libs/renderer/src/themes/style-cascade.js

@@ -1,194 +0,0 @@
-"use strict";
-// THE style cascade — one ordered spread, one application model.
-//
-// Styling & theming — Card "Named style classes (classDef / linkStyle equivalent)".
-//
-// ┌─ CASCADE (lowest → highest) ────────────────────────────────────────────┐
-// │  1. theme          theme.colors.node.default / theme.nodes.default      │
-// │  2. type-default   theme.nodes[node.type] / theme.links[link type]      │
-// │  3. named-class    style.styleClass → style-registry (classDef)         │
-// │  4. element-inline node.style / link.style (the entity's own props)     │
-// │  5. state          selected > highlighted > hovered > disabled > error   │
-// └─────────────────────────────────────────────────────────────────────────┘
-// It is a literal ordered spread below — precedence is the reading order, and
-// every layer is a plain object, so the whole thing is unit-testable.
-//
-// APPLICATION MODEL — **inline-resolved** (decided; the alternative is noted):
-//
-//   Layer 1 (theme) is left to the STYLESHEET in CSS mode: the shared rules
-//   (`[data-grafloria-instance] .diagram-node { fill: var(--grafloria-node-fill) }`)
-//   paint it. So a property that NO layer above the theme sets emits nothing,
-//   and still falls back to the theme — which is what lets a theme swap repaint
-//   untouched elements without re-resolving them.
-//
-//   Layers 2–5 are resolved HERE and emitted on the element (inline style /
-//   presentation attributes). Inline beats any stylesheet rule, so the winner of
-//   the spread is the winner on screen — including `state`, which therefore
-//   beats element-inline, exactly as documented. (The `.diagram-node.selected`
-//   rules stay in the stylesheet as the fallback for elements the renderer does
-//   not resolve, e.g. HTML-layer nodes styled by the host.)
-//
-//   THE ALTERNATIVE we did not take: emit each named class as a real CSS class
-//   (`.grafloria-style-critical`) at lower specificity than the state rules. That
-//   gets `state > named-class` for free from CSS, but it cannot express
-//   `state > element-inline` (an inline style always beats a stylesheet rule,
-//   and the previous card deliberately made element-inline overrides INLINE so
-//   they'd beat the theme). It also means every runtime `defineStyle()` has to
-//   patch a live stylesheet. One ordered spread expresses the whole cascade in
-//   one place instead of splitting it across CSS specificity and source order.
-//
-// In programmatic (Canvas) mode there is no stylesheet at all, so layer 1 joins
-// the same spread (`includeThemeBase`), and the SAME precedence applies.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CASCADE_ORDER = void 0;
-exports.resolveNodeStyle = resolveNodeStyle;
-exports.linkTypeKey = linkTypeKey;
-exports.resolveLinkStyle = resolveLinkStyle;
-const style_registry_1 = require("./style-registry");
-/** The documented cascade, lowest → highest. Exported for docs/tests. */
-exports.CASCADE_ORDER = [
-    'theme',
-    'type-default',
-    'named-class',
-    'element-inline',
-    'state',
-];
-/** Style keys that address the registry/DOM rather than a paint value. */
-const META_KEYS = new Set(['className', 'styleClass']);
-/** Drop `undefined` values (they must not clobber a lower layer) and meta keys. */
-function declared(style) {
-    if (!style)
-        return {};
-    const out = {};
-    for (const [key, value] of Object.entries(style)) {
-        if (value === undefined || META_KEYS.has(key))
-            continue;
-        out[key] = value;
-    }
-    return out;
-}
-// ---------------------------------------------------------------------------
-// Nodes
-// ---------------------------------------------------------------------------
-function nodeThemeBase(theme) {
-    return {
-        fill: theme.colors.node.default.fill,
-        stroke: theme.colors.node.default.stroke,
-        strokeWidth: theme.nodes.default.strokeWidth,
-        borderRadius: theme.nodes.default.borderRadius,
-        opacity: theme.nodes.default.opacity,
-    };
-}
-/**
- * `theme.nodes[type]` — the per-type defaults the Theme type has always allowed
- * (and nothing ever read). `default` is the base layer, not a type override.
- */
-function nodeTypeDefaults(theme, type) {
-    if (!type || type === 'default')
-        return {};
-    return declared(theme.nodes[type]);
-}
-/** State layer: exclusive, highest precedence first. Mirrors the stylesheet's state rules. */
-function nodeStateStyle(node, theme) {
-    const c = theme.colors.node;
-    const state = node.state;
-    if (state.selected) {
-        return { fill: c.selected.fill, stroke: c.selected.stroke, strokeWidth: 2 };
-    }
-    if (state.highlighted) {
-        return { fill: c.highlighted.fill, stroke: c.highlighted.stroke, strokeWidth: 2 };
-    }
-    if (state.hovered) {
-        return { fill: c.hovered.fill, stroke: c.hovered.stroke };
-    }
-    if (!state.enabled) {
-        return {
-            fill: c.disabled.fill,
-            stroke: c.disabled.stroke,
-            opacity: theme.effects.opacity.disabled,
-        };
-    }
-    if (state.error) {
-        return { fill: c.error.fill, stroke: c.error.stroke };
-    }
-    return {};
-}
-/**
- * LEGACY `metadata.shape` PAINTS — part of the element-inline layer.
- *
- * `node.setMetadata('shape', { type: 'ellipse', fill, stroke, strokeWidth, opacity })`
- * predates `NodeStyle` and is still how the shape TYPE and corner radius are
- * configured, so its paint fields are widely used.
- *
- * THE BUG THIS FIXES: the renderer used to apply these paints in
- * `renderNodeShape()` — i.e. AFTER the cascade had already resolved, spread on
- * top of the finished object. That put them above EVERY layer, `state` included.
- * A selected node whose shape config carried a fill therefore never showed its
- * selection colour, and neither did a hovered, disabled or errored one: the shape
- * config silently outranked the entire documented cascade.
- *
- * They belong HERE, inside element-inline, where `state` still beats them — and
- * where an explicit `node.setStyle({ fill })` (the typed, documented API) beats
- * an untyped legacy metadata bag, which is the other way round from how it used
- * to be, and the way round a caller would expect.
- */
-function shapeMetadataStyle(node) {
-    var _a;
-    const shape = (_a = node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, 'shape');
-    if (!shape)
-        return {};
-    return declared({
-        fill: shape['fill'],
-        stroke: shape['stroke'],
-        strokeWidth: shape['strokeWidth'],
-        opacity: shape['opacity'],
-    });
-}
-/** Resolve a node's effective style. ONE ordered spread — see the header. */
-function resolveNodeStyle(node, theme, options = {}) {
-    var _a;
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (options.includeThemeBase ? nodeThemeBase(theme) : undefined)), nodeTypeDefaults(theme, node.type)), (0, style_registry_1.resolveStyleClasses)((_a = node.style) === null || _a === void 0 ? void 0 : _a.styleClass)), shapeMetadataStyle(node)), declared(node.style)), nodeStateStyle(node, theme));
-}
-// ---------------------------------------------------------------------------
-// Links
-// ---------------------------------------------------------------------------
-function linkThemeBase(theme) {
-    return declared({
-        stroke: theme.links.default.stroke,
-        strokeWidth: theme.links.default.strokeWidth,
-        strokeDasharray: theme.links.default.strokeDasharray,
-        opacity: theme.links.default.opacity,
-    });
-}
-/**
- * A link's "type" for `theme.links[type]`: an explicit `type` metadata key when
- * the host sets one, else the path type (`smooth` / `orthogonal` / …), which is
- * the structural analogue of React Flow's `edge.type`.
- */
-function linkTypeKey(link) {
-    var _a, _b;
-    return (_b = (_a = link.getMetadata) === null || _a === void 0 ? void 0 : _a.call(link, 'type')) !== null && _b !== void 0 ? _b : link.pathType;
-}
-function linkTypeDefaults(theme, link) {
-    const type = linkTypeKey(link);
-    if (!type || type === 'default')
-        return {};
-    return declared(theme.links[type]);
-}
-/** State layer. LinkModel.state is exclusive, so order here just mirrors the stylesheet. */
-function linkStateStyle(link, theme) {
-    const c = theme.colors.link;
-    if (link.state === 'selected')
-        return { stroke: c.selected, strokeWidth: 3 };
-    if (link.state === 'highlighted')
-        return { stroke: c.highlighted, strokeWidth: 3 };
-    if (link.state === 'hovered')
-        return { stroke: c.hovered };
-    return {};
-}
-/** Resolve a link's effective style. ONE ordered spread — see the header. */
-function resolveLinkStyle(link, theme, options = {}) {
-    var _a;
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (options.includeThemeBase ? linkThemeBase(theme) : undefined)), linkTypeDefaults(theme, link)), (0, style_registry_1.resolveStyleClasses)((_a = link.style) === null || _a === void 0 ? void 0 : _a.styleClass)), declared(link.style)), linkStateStyle(link, theme));
-}
-//# sourceMappingURL=style-cascade.js.map

package/src/libs/renderer/src/themes/style-registry.d.ts

@@ -1,40 +0,0 @@
-import type { NodeStyle, LinkStyle } from '@grafloria/engine';
-/** A named style may carry node properties, link properties, or the ones they share. */
-export type NamedStyle = Partial<NodeStyle> | Partial<LinkStyle>;
-/**
- * Define (or redefine) a named style. Definitions are copied, so later mutation
- * of the caller's object has no effect.
- */
-export declare function defineStyle(name: string, style: NamedStyle): void;
-/** Define several named styles at once. */
-export declare function defineStyles(styles: Record<string, NamedStyle>): void;
-/**
- * The raw definition, or undefined when the name was never defined.
- *
- * DIAGRAM-FIRST, then process-global — see `ext/registry-scope.ts`. A diagram
- * that defined its own `critical` sees its own; one that did not still sees the
- * app-wide definition.
- */
-export declare function getStyle(name: string): NamedStyle | undefined;
-export declare function hasStyle(name: string): boolean;
-export declare function removeStyle(name: string): boolean;
-/** Drop every named style (tests, and hosts tearing a document down). */
-export declare function clearStyles(): void;
-export declare function listStyles(): string[];
-/**
- * Internal: let a PER-DIAGRAM registry participate in the version/notify
- * protocol. A scoped registration must invalidate cached VNodes for exactly the
- * reason a global one must — the definition is baked into the cache. Notifying
- * every renderer (not just the contributing one) is deliberate: over-invalidation
- * costs a repaint, under-invalidation shows a stale picture.
- */
-export declare function notifyStyleRegistryChanged(): void;
-/** Bumped on every mutation — renderers key cache invalidation off this. */
-export declare function getStyleRegistryVersion(): number;
-/** Subscribe to registry mutations. Returns the unsubscribe function. */
-export declare function onStyleRegistryChange(listener: () => void): () => void;
-/**
- * Merge a `styleClass` list into ONE partial style. Names are applied
- * left-to-right (later names win); unknown names are ignored.
- */
-export declare function resolveStyleClasses<T extends NamedStyle>(styleClass: string | undefined): Partial<T>;